npm - @saptanshuwanjari/react-component-library - Versions diffs - 0.1.9 → 0.1.11 - Mend

@saptanshuwanjari/react-component-library 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js CHANGED Viewed

@@ -1,21 +1,13 @@
 'use strict';
-var React2 = require('react');
-var zod = require('@hookform/resolvers/zod');
-var reactHookForm = require('react-hook-form');
-var jsxRuntime = require('react/jsx-runtime');
-var LabelPrimitive = require('@radix-ui/react-label');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var reactTable = require('@tanstack/react-table');
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var SelectPrimitive = require('@radix-ui/react-select');
 var lucideReact = require('lucide-react');
 var classVarianceAuthority = require('class-variance-authority');
-var SelectPrimitive = require('@radix-ui/react-select');
-var CheckboxPrimitive = require('@radix-ui/react-checkbox');
-var PopoverPrimitive = require('@radix-ui/react-popover');
-var reactDayPicker = require('react-day-picker');
-var dateFns = require('date-fns');
-var AvatarPrimitive = require('@radix-ui/react-avatar');
-var reactTable = require('@tanstack/react-table');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -36,111 +28,71 @@ function _interopNamespace(e) {
 }
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
-var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
-var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
-// src/components/form/root.tsx
-var FormContext = React2.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 ? zod.zodResolver(schema) : void 0;
-  const [isPending, startTransition] = React2.useTransition();
-  const [isEditing, setIsEditing] = React2.useState(!enableEditMode);
-  const methods = reactHookForm.useForm({
-    resolver,
-    defaultValues
-  });
-  const handleFormSubmit = methods.handleSubmit((data) => {
-    if (enableOptimistic) {
-      startTransition(() => {
-        void onSubmit(data);
-      });
-      return;
-    }
-    return onSubmit(data);
-  });
-  React2.useEffect(() => {
-    const key = formId ?? DEFAULT_FORM_KEY;
-    formRegistry.set(key, setIsEditing);
-    return () => {
-      formRegistry.delete(key);
-    };
-  }, [formId, setIsEditing]);
-  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: { ...methods, schema, isPending, isEditing, setIsEditing }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "form",
-    {
-      onSubmit: handleFormSubmit,
-      className: "bg-card text-card-foreground rounded-xl border shadow-sm p-6 space-y-6",
-      children: [
-        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description })
-        ] }),
-        children
-      ]
-    }
-  ) });
-}
-var root_default = Root;
-function useFormCtx() {
-  const ctx = React2.useContext(FormContext);
-  if (!ctx) throw new Error("Form components must be used inside Form.Root");
-  return ctx;
-}
+// src/lib/utils.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function Label({
-  className,
-  ...props
+var DataTableContext = React2.createContext(null);
+function useDataTableContext() {
+  const context = React2.useContext(DataTableContext);
+  if (!context) {
+    throw new Error("useDataTableContext must be used within a DataTableRoot");
+  }
+  return context;
+}
+function useViewMode(defaultMode = "table") {
+  const [viewMode, setViewMode] = React2.useState(defaultMode);
+  return { viewMode, setViewMode };
+}
+function Root({
+  columns,
+  data,
+  filters = [],
+  defaultViewMode = "table",
+  showFilters = true,
+  children
 }) {
+  const [globalFilter, setGlobalFilter] = React2.useState("");
+  const [pagination, setPagination] = React2.useState({ pageIndex: 0, pageSize: 10 });
+  const [sorting, setSorting] = React2.useState([]);
+  const [columnFilters, setColumnFilters] = React2.useState([]);
+  const [viewMode, setViewMode] = React2.useState(defaultViewMode);
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    state: {
+      globalFilter,
+      pagination,
+      sorting,
+      columnFilters
+    },
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel()
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
+    DataTableContext.Provider,
     {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
+      value: {
+        table,
+        viewMode,
+        setViewMode,
+        filters,
+        showFilters,
+        globalFilter,
+        setGlobalFilter
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children })
     }
   );
 }
-function Field({
-  name,
-  label,
-  children
-}) {
-  const form = useFormCtx();
-  const error = form.formState.errors[name];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: String(name), children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactHookForm.Controller,
-      {
-        control: form.control,
-        name,
-        render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(field) })
-      }
-    ),
-    error?.message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-destructive", children: error.message })
-  ] });
-}
-var field_default = Field;
 function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
@@ -157,258 +109,6 @@ function Input({ className, type, ...props }) {
     }
   );
 }
-var InputField = React2.memo(function InputField2({
-  name,
-  label,
-  placeholder,
-  type = "text",
-  icon,
-  iconAlign = "inline-start",
-  startAddon,
-  endAddon,
-  useGroup
-}) {
-  const { isEditing } = useFormCtx();
-  return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
-    Input,
-    {
-      id: String(name),
-      type,
-      ...field,
-      value: field.value ?? "",
-      placeholder,
-      disabled: !isEditing
-    }
-  ) });
-});
-var input_field_default = InputField;
-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",
-  {
-    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 Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var PasswordField = React2.memo(function PasswordField2({
-  name,
-  label,
-  placeholder
-}) {
-  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 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "h-4 w-4 text-muted-foreground" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
-      {
-        id: String(name),
-        type: show ? "text" : "password",
-        ...field,
-        value: field.value ?? "",
-        placeholder,
-        className: "pl-10 pr-10"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "sm",
-        type: "button",
-        onClick: () => setShow(!show),
-        className: "absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-muted-foreground hover:text-foreground",
-        children: show ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" })
-      }
-    )
-  ] }) });
-});
-var password_field_default = PasswordField;
-function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      "data-slot": "textarea",
-      className: cn(
-        "border-input placeholder: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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var TextareaField = React2.memo(function TextareaField2({
-  name,
-  label,
-  placeholder,
-  rows = 4
-}) {
-  const { isEditing } = useFormCtx();
-  return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => /* @__PURE__ */ jsxRuntime.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;
 function Select({
   ...props
 }) {
@@ -519,888 +219,89 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "size-4" })
-    }
-  );
-}
-function SelectScrollDownButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SelectPrimitive__namespace.ScrollDownButton,
-    {
-      "data-slot": "select-scroll-down-button",
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4" })
-    }
-  );
-}
-var SelectField = React2.memo(function SelectField2({
-  name,
-  label,
-  placeholder = "Select an option",
-  options
-}) {
-  const { isEditing } = useFormCtx();
-  return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => !isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
-    Input,
-    {
-      id: String(name),
-      value: options.find((opt) => opt.value === field.value)?.label ?? "",
-      placeholder,
-      readOnly: true,
-      disabled: true,
-      className: "bg-background/50 opacity-80"
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: field.onChange, value: field.value ?? "", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
-  ] }) });
-});
-var select_field_default = SelectField;
-function Checkbox({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CheckboxPrimitive__namespace.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__ */ jsxRuntime.jsx(
-        CheckboxPrimitive__namespace.Indicator,
-        {
-          "data-slot": "checkbox-indicator",
-          className: "grid place-content-center text-current transition-none",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" })
-        }
-      )
-    }
-  );
-}
-var CheckboxField = React2.memo(function CheckboxField2({
-  name,
-  label,
-  description
-}) {
-  const form = useFormCtx();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactHookForm.Controller,
-      {
-        control: form.control,
-        name,
-        render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox,
-            {
-              id: String(name),
-              checked: !!field.value,
-              onCheckedChange: form.isEditing ? field.onChange : void 0,
-              disabled: !form.isEditing
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1.5 leading-none", children: [
-            label && /* @__PURE__ */ jsxRuntime.jsx(
-              Label,
-              {
-                htmlFor: String(name),
-                className: "cursor-pointer",
-                children: label
-              }
-            ),
-            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description })
-          ] })
-        ] })
-      }
-    ),
-    form.formState.errors[name]?.message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-destructive", children: form.formState.errors[name]?.message })
-  ] });
-});
-var checkbox_field_default = CheckboxField;
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    PopoverPrimitive__namespace.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 Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}) {
-  const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactDayPicker.DayPicker,
-    {
-      showOutsideDays,
-      className: cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      ),
-      captionLayout,
-      formatters: {
-        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
-        ...formatters
-      },
-      classNames: {
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames
-      },
-      components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
-          if (orientation === "left") {
-            return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          if (orientation === "right") {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronRightIcon,
-              {
-                className: cn("size-4", className2),
-                ...props2
-              }
-            );
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
-        },
-        ...components
-      },
-      ...props
-    }
-  );
-}
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}) {
-  const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React2__namespace.useRef(null);
-  React2__namespace.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
-    {
-      ref,
-      variant: "ghost",
-      size: "icon",
-      "data-day": day.date.toLocaleDateString(),
-      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-      "data-range-start": modifiers.range_start,
-      "data-range-end": modifiers.range_end,
-      "data-range-middle": modifiers.range_middle,
-      className: cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      ),
-      ...props
-    }
-  );
-}
-var DateField = React2.memo(function DateField2({
-  name,
-  label,
-  placeholder = "Pick a date"
-}) {
-  const { isEditing } = useFormCtx();
-  return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(
-    Button,
-    {
-      type: "button",
-      variant: "outline",
-      className: cn(
-        "w-full justify-start text-left font-normal bg-background/50",
-        !field.value && "text-muted-foreground"
-      ),
-      disabled: true,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
-        field.value ? dateFns.format(new Date(field.value), "PPP") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: placeholder })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        variant: "outline",
-        className: cn(
-          "w-full justify-start text-left font-normal",
-          !field.value && "text-muted-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
-          field.value ? dateFns.format(new Date(field.value), "PPP") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: placeholder })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Calendar,
-      {
-        mode: "single",
-        selected: field.value ? new Date(field.value) : void 0,
-        onSelect: field.onChange,
-        initialFocus: true
-      }
-    ) })
-  ] }) });
-});
-var date_field_default = DateField;
-var FileField = React2.memo(function FileField2({
-  name,
-  label,
-  accept,
-  multiple
-}) {
-  const { isEditing } = useFormCtx();
-  return /* @__PURE__ */ jsxRuntime.jsx(field_default, { name, label, children: (field) => {
-    const files = field.value;
-    const filename = files && files.length ? multiple ? `${files.length} files` : files[0].name : "";
-    if (!isEditing) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "absolute left-3 text-muted-foreground h-4 w-4 z-10" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: `${String(name)}_display`,
-            type: "text",
-            value: filename,
-            placeholder: accept ? `Accepts ${accept}` : "No file selected",
-            readOnly: true,
-            disabled: true,
-            className: "bg-background/50 opacity-80 pl-10"
-          }
-        )
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "absolute left-3 text-muted-foreground h-4 w-4 z-10 pointer-events-none" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          id: String(name),
-          type: "file",
-          accept,
-          multiple,
-          onChange: (e) => field.onChange(e.target.files),
-          onBlur: field.onBlur,
-          name: field.name,
-          ref: field.ref,
-          className: "pl-10"
-        }
-      )
-    ] });
-  } });
-});
-var file_field_default = FileField;
-function Avatar({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Root,
-    {
-      "data-slot": "avatar",
-      className: cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AvatarImage({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
-      ...props
-    }
-  );
-}
-function AvatarFallback({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Fallback,
-    {
-      "data-slot": "avatar-fallback",
-      className: cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var ProfilePictureField = React2.memo(function ProfilePictureField2({
-  name,
-  label,
-  className,
-  avatarClassName,
-  fallback = "User"
-}) {
-  const { isEditing } = useFormCtx();
-  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);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-4", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn("h-24 w-24", avatarClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: displayUrl || "", alt: "Profile picture" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: fallback })
-      ] }),
-      isEditing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-4 w-4" }),
-              "Upload Picture"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            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__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            type: "button",
-            onClick: () => {
-              field.onChange(null);
-              setPreview(null);
-            },
-            children: "Remove"
-          }
-        )
-      ] })
-    ] });
-  } });
-});
-var profile_picture_field_default = ProfilePictureField;
-var Button2 = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button2, { type: "submit", disabled: isPending || props.disabled, ...props, children: isPending ? "Submitting..." : children });
-}
-var submit_default = Submit;
-function EditButton({ children, formId, ...props }) {
-  const ctx = React2.useContext(FormContext);
-  if (ctx) {
-    const { isEditing, setIsEditing } = ctx;
-    if (isEditing) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: () => setIsEditing?.(true), ...props, children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(Button, { type: "button", onClick: handleClick, ...props, children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4 mr-2" }),
-    "Edit Profile"
-  ] }) });
-}
-var edit_button_default = EditButton;
-function CancelButton({ children, ...props }) {
-  const { isEditing, setIsEditing, reset } = useFormCtx();
-  if (!isEditing) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
-    {
-      type: "button",
-      variant: "outline",
-      onClick: () => {
-        reset();
-        setIsEditing?.(false);
-      },
-      ...props,
-      children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 mr-2" }),
-        "Cancel"
-      ] })
-    }
-  );
-}
-var cancel_button_default = CancelButton;
-function LinkField({ label, link, LinkComponent, className }) {
-  const LinkTag = LinkComponent || "a";
-  const linkProps = { href: link };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    LinkTag,
-    {
-      ...linkProps,
-      className: cn("text-sm text-primary hover:underline", className),
-      children: label
-    }
-  );
-}
-var link_field_default = LinkField;
-function FieldGroup({ children, className, title }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", className), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium", children: title }),
-    children
-  ] });
-}
-var field_group_default = FieldGroup;
-// src/components/form/index.ts
-var Form = Object.assign(root_default, {
-  Root: 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 = React2.createContext(null);
-function useDataTable() {
-  const context = React2.useContext(DataTableContext);
-  if (!context) {
-    throw new Error("DataTable components must be used within DataTable.Root");
-  }
-  return context;
-}
-function Root7({
-  columns,
-  data,
-  filters = [],
-  defaultViewMode = "table",
-  viewMode: controlledViewMode,
-  onViewModeChange: controlledOnViewModeChange,
-  defaultPageSize = 10,
-  children
-}) {
-  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]) => {
-        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 = reactTable.useReactTable({
-    data: filteredData,
-    columns,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      globalFilter,
-      pagination
-    },
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onGlobalFilterChange: setGlobalFilter,
-    onPaginationChange: setPagination,
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getFilteredRowModel: reactTable.getFilteredRowModel(),
-    getSortedRowModel: reactTable.getSortedRowModel(),
-    getPaginationRowModel: reactTable.getPaginationRowModel()
-  });
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DataTableContext.Provider,
+    SelectPrimitive__namespace.ScrollDownButton,
     {
-      value: {
-        table,
-        viewMode,
-        setViewMode,
-        filters,
-        activeFilters,
-        setActiveFilters
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children })
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4" })
     }
   );
 }
-var root_default2 = Root7;
-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(
-      Button,
-      {
-        variant: mode === "table" ? "secondary" : "ghost",
-        size: "sm",
-        onClick: () => setMode("table"),
-        className: "rounded-r-none h-8 px-2 lg:px-3",
-        "aria-label": "Switch to table view",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: mode === "grid" ? "secondary" : "ghost",
-        size: "sm",
-        onClick: () => setMode("grid"),
-        className: "rounded-l-none h-8 px-2 lg:px-3",
-        "aria-label": "Switch to grid view",
-        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();
+function Toolbar() {
+  const { filters, showFilters, globalFilter, setGlobalFilter, table } = useDataTableContext();
+  const [activeFilters, setActiveFilters] = React2.useState({});
   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 };
-    });
+    setActiveFilters((prev) => ({ ...prev, [filterId]: value }));
+    if (value === "all" || value === "") {
+      table.getColumn(filterId)?.setFilterValue(void 0);
+    } else {
+      table.getColumn(filterId)?.setFilterValue(value);
+    }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 py-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
-      {
-        placeholder: "Search...",
-        value: table.getState().globalFilter ?? "",
-        onChange: (e) => table.setGlobalFilter(e.target.value),
-        className: "w-full max-w-sm"
-      }
-    ) }),
-    /* @__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(Button, { 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(
-                    Checkbox,
-                    {
-                      id: `${filter.id}-${option.value}`,
-                      checked: Array.isArray(activeFilters[filter.id]) && activeFilters[filter.id].includes(option.value)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "label",
-                    {
-                      htmlFor: `${filter.id}-${option.value}`,
-                      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(
-                "div",
-                {
-                  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"
-                }
-              )
+  const hasFilters = filters && filters.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-1 flex-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-sm w-full sm:w-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          placeholder: "Search...",
+          value: globalFilter ?? "",
+          onChange: (e) => setGlobalFilter(e.target.value),
+          className: "w-full"
+        }
+      ) }),
+      hasFilters && showFilters && filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          onValueChange: (val) => handleFilterChange(filter.id, val),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SelectTrigger, { className: "h-9 cursor-pointer w-[140px] rounded-md border border-input bg-background px-2 text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4 mr-2 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: filter.label })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: "all", children: [
+                "All ",
+                filter.label
+              ] }),
+              filter.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))
             ] })
-          ] }) })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-          Select,
-          {
-            value: activeFilters[filter.id] || "all",
-            onValueChange: (value) => handleFilterChange(filter.id, value),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-[150px] border-dashed", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: filter.placeholder || filter.label }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: "all", children: [
-                  "All ",
-                  filter.label
-                ] }),
-                filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { 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(Button, { 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(
-                Checkbox,
-                {
-                  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(
-            Select,
-            {
-              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(SelectValue, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: String(size), children: size }, size)) })
-              ]
-            }
-          )
-        ] })
-      ] })
+          ]
+        },
+        filter.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground hidden sm:block", children: "Rows" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          value: String(table.getState().pagination.pageSize),
+          onValueChange: (val) => {
+            table.setPageSize(Number(val));
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 cursor-pointer rounded-md border border-input bg-background px-2 text-sm w-[70px]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((s) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: String(s), children: s }, s)) })
+          ]
+        }
+      )
     ] })
   ] });
 }
-var toolbar_default = Toolbar;
 function Table({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1477,8 +378,15 @@ function TableCell({ className, ...props }) {
     }
   );
 }
-function TableView() {
-  const { table } = useDataTable();
+function Content2({ renderCard }) {
+  const { table, viewMode } = useDataTableContext();
+  const columns = table.getAllColumns();
+  if (viewMode === "grid") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: [
+      table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderCard ? renderCard(row.original, index) : JSON.stringify(row.original) }, row.id)),
+      table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full text-center py-8 text-muted-foreground", children: "No results." })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
       const canSort = header.column.getCanSort();
@@ -1487,66 +395,207 @@ function TableView() {
         "button",
         {
           className: "flex items-center gap-2",
-          onClick: () => canSort && header.column.toggleSorting(),
+          onClick: header.column.getToggleSortingHandler(),
+          disabled: !canSort,
           children: [
-            reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+            reactTable.flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            ),
             canSort && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: sortState === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3 w-3" }) : sortState === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3 w-3 opacity-50" }) })
           ]
         }
       ) }, header.id);
     }) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: table.getAllColumns().length, className: "h-24 text-center", children: "No results." }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+      TableRow,
+      {
+        "data-state": row.getIsSelected() && "selected",
+        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: reactTable.flexRender(
+          cell.column.columnDef.cell,
+          cell.getContext()
+        ) }, cell.id))
+      },
+      row.id
+    )) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      TableCell,
+      {
+        colSpan: columns.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-64 text-muted-foreground", children: "No results." });
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "grid",
-      style: {
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: `${gap}px`
-      },
-      children: rows.map((row, index) => {
-        const item = row.original;
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-card p-4 shadow-sm", children: renderCard ? renderCard(item, index) : /* @__PURE__ */ jsxRuntime.jsx(DefaultCard, { item }) }, row.id);
-      })
+}
+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);
+          }
+        }
+      };
     }
-  );
+  };
 }
-function DefaultCard({ item }) {
-  if (typeof item !== "object" || item === null) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: Object.entries(item).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
-      key,
-      ": "
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: String(value) })
-  ] }, key)) });
+// @__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 grid_view_default = GridView;
-function Content3({ renderCard, gridColumns, gridGap }) {
-  const { viewMode } = useDataTable();
-  if (viewMode === "grid") {
-    return /* @__PURE__ */ jsxRuntime.jsx(grid_view_default, { renderCard, columns: gridColumns, gap: gridGap });
+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",
+  {
+    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"
+    }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(table_view_default, {});
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
 }
-var content_default = Content3;
 function Pagination() {
-  const { table } = useDataTable();
+  const { table } = useDataTableContext();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-4", children: [
     /* @__PURE__ */ jsxRuntime.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,
@@ -1570,7 +619,8 @@ function Pagination() {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 text-sm", children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
-        " of ",
+        " of",
+        " ",
         table.getPageCount()
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1586,22 +636,46 @@ function Pagination() {
     ] })
   ] });
 }
-var pagination_default = Pagination;
-// src/components/data-table/index.tsx
-var DataTable = Object.assign(root_default2, {
-  Root: root_default2,
-  Toolbar: toolbar_default,
-  Content: content_default,
-  TableView: table_view_default,
-  GridView: grid_view_default,
-  Pagination: pagination_default,
-  ViewOptions: view_options_default
-});
-var data_table_default = DataTable;
+function ViewOptions({
+  viewMode: propViewMode,
+  onViewModeChange: propOnViewModeChange
+}) {
+  const context = useDataTableContext();
+  const mode = propViewMode ?? context?.viewMode ?? "table";
+  const onChange = propOnViewModeChange ?? context?.setViewMode;
+  if (!onChange) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: mode === "table" ? "secondary" : "ghost",
+        size: "sm",
+        className: "rounded-r-none px-3",
+        onClick: () => onChange("table"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TableIcon, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: mode === "grid" ? "secondary" : "ghost",
+        size: "sm",
+        className: "rounded-l-none px-3",
+        onClick: () => onChange("grid"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
-exports.DataTable = data_table_default;
-exports.Form = form_default;
+exports.Content = Content2;
+exports.DataTableContext = DataTableContext;
+exports.Pagination = Pagination;
+exports.Root = Root;
+exports.Toolbar = Toolbar;
+exports.ViewOptions = ViewOptions;
 exports.cn = cn;
+exports.useDataTableContext = useDataTableContext;
+exports.useViewMode = useViewMode;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map