@saptanshuwanjari/react-component-library 0.1.0 → 0.1.8

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React2 = require('react');
 var zod = require('@hookform/resolvers/zod');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
@@ -8,7 +8,6 @@ var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactTable = require('@tanstack/react-table');
-var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var SelectPrimitive = require('@radix-ui/react-select');
 var PopoverPrimitive = require('@radix-ui/react-popover');
@@ -32,12 +31,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 
 // src/components/form/root.tsx
-var FormContext = react.createContext(null);
+var FormContext = React2.createContext(null);
 var DEFAULT_FORM_KEY = "__default_form__";
 var formRegistry = /* @__PURE__ */ new Map();
 function Root({
@@ -52,8 +52,8 @@ function Root({
   formId
 }) {
   const resolver = schema ? zod.zodResolver(schema) : void 0;
-  const [isPending, startTransition] = react.useTransition();
-  const [isEditing, setIsEditing] = react.useState(!enableEditMode);
+  const [isPending, startTransition] = React2.useTransition();
+  const [isEditing, setIsEditing] = React2.useState(!enableEditMode);
   const methods = reactHookForm.useForm({
     resolver,
     defaultValues
@@ -67,7 +67,7 @@ function Root({
     }
     return onSubmit(data);
   });
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const key = formId ?? DEFAULT_FORM_KEY;
     formRegistry.set(key, setIsEditing);
     return () => {
@@ -91,7 +91,7 @@ function Root({
 }
 var root_default = Root;
 function useFormCtx() {
-  const ctx = react.useContext(FormContext);
+  const ctx = React2.useContext(FormContext);
   if (!ctx) throw new Error("Form components must be used inside Form.Root");
   return ctx;
 }
@@ -125,7 +125,7 @@ var Input = ({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     ...props
   }
 );
-var InputField = react.memo(function InputField2({
+var InputField = React2.memo(function InputField2({
   name,
   label,
   placeholder,
@@ -150,12 +150,12 @@ var InputField = react.memo(function InputField2({
   ) });
 });
 var input_field_default = InputField;
-var PasswordField = react.memo(function PasswordField2({
+var PasswordField = React2.memo(function PasswordField2({
   name,
   label,
   placeholder
 }) {
-  const [show, setShow] = react.useState(false);
+  const [show, setShow] = React2.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "h-4 w-4 text-muted-foreground" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -188,7 +188,7 @@ var Textarea = ({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     ...props
   }
 );
-var TextareaField = react.memo(function TextareaField2({
+var TextareaField = React2.memo(function TextareaField2({
   name,
   label,
   placeholder,
@@ -227,7 +227,7 @@ var Input2 = ({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     ...props
   }
 );
-var SelectField = react.memo(function SelectField2({
+var SelectField = React2.memo(function SelectField2({
   name,
   label,
   placeholder = "Select an option",
@@ -262,7 +262,7 @@ var Checkbox = ({ checked, onCheckedChange, disabled, id }) => /* @__PURE__ */ j
     className: "h-4 w-4 rounded border-gray-300"
   }
 );
-var CheckboxField = react.memo(function CheckboxField2({
+var CheckboxField = React2.memo(function CheckboxField2({
   name,
   label,
   description
@@ -310,12 +310,12 @@ var Button = ({ children, className = "", ...props }) => /* @__PURE__ */ jsxRunt
     children
   }
 );
-var DateField = react.memo(function DateField2({
+var DateField = React2.memo(function DateField2({
   name,
   label,
   placeholder = "Select date"
 }) {
-  const [open, setOpen] = react.useState(false);
+  const [open, setOpen] = React2.useState(false);
   const { isEditing } = useFormCtx();
   return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(
     Button,
@@ -351,7 +351,7 @@ var Input3 = ({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
 var InputGroup = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center", children });
 var InputGroupAddon = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 flex items-center", children });
 var InputGroupInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(Input3, { className: "pl-10", ...props });
-var FileField = react.memo(function FileField2({
+var FileField = React2.memo(function FileField2({
   name,
   label,
   accept,
@@ -405,7 +405,7 @@ var AvatarFallback = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { c
 var Label = ({ htmlFor, children, className }) => /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, className, children });
 var Input4 = (props) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props });
 var Button2 = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("button", { className: "px-3 py-1 text-sm rounded hover:bg-accent", ...props, children });
-var ProfilePictureField = react.memo(function ProfilePictureField2({
+var ProfilePictureField = React2.memo(function ProfilePictureField2({
   name,
   label,
   className,
@@ -413,7 +413,7 @@ var ProfilePictureField = react.memo(function ProfilePictureField2({
   fallback = "User"
 }) {
   const { isEditing } = useFormCtx();
-  const [preview, setPreview] = react.useState(null);
+  const [preview, setPreview] = React2.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => {
     const currentValue = field.value;
     const displayUrl = preview || (typeof currentValue === "string" ? currentValue : null);
@@ -498,7 +498,7 @@ var Button4 = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 function EditButton({ children, formId, ...props }) {
-  const ctx = react.useContext(FormContext);
+  const ctx = React2.useContext(FormContext);
   if (ctx) {
     const { isEditing, setIsEditing } = ctx;
     if (isEditing) return null;
@@ -585,9 +585,9 @@ var Form = Object.assign(root_default, {
   LinkField: link_field_default
 });
 var form_default = Form;
-var DataTableContext = react.createContext(null);
+var DataTableContext = React2.createContext(null);
 function useDataTable() {
-  const context = react.useContext(DataTableContext);
+  const context = React2.useContext(DataTableContext);
   if (!context) {
     throw new Error("DataTable components must be used within DataTable.Root");
   }
@@ -598,17 +598,22 @@ function Root2({
   data,
   filters = [],
   defaultViewMode = "table",
+  viewMode: controlledViewMode,
+  onViewModeChange: controlledOnViewModeChange,
   defaultPageSize = 10,
   children
 }) {
-  const [viewMode, setViewMode] = react.useState(defaultViewMode);
-  const [sorting, setSorting] = react.useState([]);
-  const [columnFilters, setColumnFilters] = react.useState([]);
-  const [columnVisibility, setColumnVisibility] = react.useState({});
-  const [globalFilter, setGlobalFilter] = react.useState("");
-  const [pagination, setPagination] = react.useState({ pageIndex: 0, pageSize: defaultPageSize });
-  const [activeFilters, setActiveFilters] = react.useState({});
-  const filteredData = react.useMemo(() => {
+  const [internalViewMode, setInternalViewMode] = React2.useState(defaultViewMode);
+  const [sorting, setSorting] = React2.useState([]);
+  const [columnFilters, setColumnFilters] = React2.useState([]);
+  const [columnVisibility, setColumnVisibility] = React2.useState({});
+  const [globalFilter, setGlobalFilter] = React2.useState("");
+  const [pagination, setPagination] = React2.useState({ pageIndex: 0, pageSize: defaultPageSize });
+  const [activeFilters, setActiveFilters] = React2.useState({});
+  const isControlled = controlledViewMode !== void 0 && controlledOnViewModeChange !== void 0;
+  const viewMode = isControlled ? controlledViewMode : internalViewMode;
+  const setViewMode = isControlled ? controlledOnViewModeChange : setInternalViewMode;
+  const filteredData = React2.useMemo(() => {
     if (Object.keys(activeFilters).length === 0) return data;
     return data.filter((row) => {
       return Object.entries(activeFilters).every(([filterId, filterValue]) => {
@@ -675,6 +680,120 @@ function Input5({ className, type, ...props }) {
     }
   );
 }
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React2__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React2__namespace.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React2__namespace.Children.count(newElement) > 1) return React2__namespace.Children.only(null);
+          return React2__namespace.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React2__namespace.isValidElement(newElement) ? React2__namespace.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React2__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React2__namespace.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React2__namespace.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React2__namespace.cloneElement(children, props2);
+    }
+    return React2__namespace.Children.count(children) > 1 ? React2__namespace.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
+function isSlottable(child) {
+  return React2__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 var buttonVariants = classVarianceAuthority.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",
   {
@@ -709,7 +828,7 @@ function Button6({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? reactSlot.Slot : "button";
+  const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
     {
@@ -906,8 +1025,41 @@ function Checkbox2({
     }
   );
 }
-function Toolbar() {
-  const { table, viewMode, setViewMode, filters, activeFilters, setActiveFilters } = useDataTable();
+function ViewOptions({ viewMode: propViewMode, onViewModeChange: propOnViewModeChange }) {
+  let contextStr;
+  try {
+    contextStr = useDataTable();
+  } catch (e) {
+  }
+  const mode = propViewMode ?? contextStr?.viewMode ?? "table";
+  const setMode = propOnViewModeChange ?? contextStr?.setViewMode ?? (() => {
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded-md bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button6,
+      {
+        variant: mode === "table" ? "secondary" : "ghost",
+        size: "sm",
+        onClick: () => setMode("table"),
+        className: "rounded-r-none h-8 px-2 lg:px-3",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button6,
+      {
+        variant: mode === "grid" ? "secondary" : "ghost",
+        size: "sm",
+        onClick: () => setMode("grid"),
+        className: "rounded-l-none h-8 px-2 lg:px-3",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+var view_options_default = ViewOptions;
+function Toolbar({ viewOptions } = {}) {
+  const { table, filters, activeFilters, setActiveFilters } = useDataTable();
   const handleFilterChange = (filterId, value) => {
     setActiveFilters((prev) => ({
       ...prev,
@@ -924,115 +1076,116 @@ function Toolbar() {
       return { ...prev, [filterId]: newValues };
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 py-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input5,
       {
         placeholder: "Search...",
         value: table.getState().globalFilter ?? "",
         onChange: (e) => table.setGlobalFilter(e.target.value),
-        className: "w-full"
+        className: "w-full max-w-sm"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-      filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "h-4 w-4 mr-2" }),
-          "Filters"
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Filters" }),
-          filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: filter.label }),
-            filter.multiSelect ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1", children: [
+        filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: filter.multiSelect ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", className: "h-8 border-dashed", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "h-4 w-4 mr-2" }),
+            filter.label,
+            activeFilters[filter.id] && (Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length > 0 : true) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 rounded-sm bg-primary px-1 text-xs text-primary-foreground", children: Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length : 1 })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-1", children: [
+            filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-2 rounded-sm px-2 py-1.5 hover:bg-accent cursor-pointer",
+                onClick: () => handleMultiFilterToggle(filter.id, option.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "label",
+                    {
+                      className: "text-sm cursor-pointer flex-1",
+                      children: option.label
+                    }
+                  )
+                ]
+              },
+              option.value
+            )),
+            activeFilters[filter.id] && (Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length > 0 : false) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border my-1" }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "label",
+                "div",
                 {
-                  htmlFor: `${filter.id}-${option.value}`,
-                  className: "text-sm cursor-pointer",
-                  children: option.label
+                  className: "px-2 py-1.5 text-center text-sm cursor-pointer hover:bg-accent rounded-sm",
+                  onClick: () => setActiveFilters((prev) => ({ ...prev, [filter.id]: [] })),
+                  children: "Clear filters"
                 }
               )
-            ] }, option.value)) }) : /* @__PURE__ */ jsxRuntime.jsxs(
-              Select2,
-              {
-                value: activeFilters[filter.id] || "all",
-                onValueChange: (value) => handleFilterChange(filter.id, value),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: filter.placeholder || "Select..." }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: "all", children: "All" }),
-                    filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: option.value, children: option.label }, option.value))
-                  ] })
-                ]
-              }
-            )
-          ] }, filter.id))
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-2" }),
-          "Columns"
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-56", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Toggle Columns" }),
-          table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Checkbox2,
-              {
-                id: column.id,
-                checked: column.getIsVisible(),
-                onCheckedChange: (value) => column.toggleVisibility(!!value)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: column.id, className: "text-sm cursor-pointer", children: column.id })
-          ] }, column.id))
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded-md", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button6,
-          {
-            variant: viewMode === "table" ? "default" : "ghost",
-            size: "sm",
-            onClick: () => setViewMode("table"),
-            className: "rounded-r-none",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button6,
-          {
-            variant: viewMode === "grid" ? "default" : "ghost",
-            size: "sm",
-            onClick: () => setViewMode("grid"),
-            className: "rounded-l-none",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground", children: "Rows" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+            ] })
+          ] }) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
           Select2,
           {
-            value: String(table.getState().pagination.pageSize),
-            onValueChange: (value) => table.setPageSize(Number(value)),
+            value: activeFilters[filter.id] || "all",
+            onValueChange: (value) => handleFilterChange(filter.id, value),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-20", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: String(size), children: size }, size)) })
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-[150px] border-dashed", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: filter.placeholder || filter.label }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(SelectItem2, { value: "all", children: [
+                  "All ",
+                  filter.label
+                ] }),
+                filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: option.value, children: option.label }, option.value))
+              ] })
             ]
           }
-        )
+        ) }, filter.id)),
+        /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", className: "h-8 ml-auto sm:ml-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-2" }),
+            "Columns"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-56", align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Toggle Columns" }),
+            table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox2,
+                {
+                  id: column.id,
+                  checked: column.getIsVisible(),
+                  onCheckedChange: (value) => column.toggleVisibility(!!value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: column.id, className: "text-sm cursor-pointer", children: column.id })
+            ] }, column.id))
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        viewOptions ? viewOptions : /* @__PURE__ */ jsxRuntime.jsx(ViewOptions, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap hidden sm:inline-block", children: "Rows" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Select2,
+            {
+              value: String(table.getState().pagination.pageSize),
+              onValueChange: (value) => table.setPageSize(Number(value)),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-16 h-8", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: String(size), children: size }, size)) })
+              ]
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -1230,7 +1383,8 @@ var DataTable = Object.assign(root_default2, {
   Content: content_default,
   TableView: table_view_default,
   GridView: grid_view_default,
-  Pagination: pagination_default
+  Pagination: pagination_default,
+  ViewOptions: view_options_default
 });
 var data_table_default = DataTable;