@saptanshuwanjari/react-component-library 0.1.0 → 0.1.6

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Saptanshu Wanjari 
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Saptanshu Wanjari 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,56 +1,56 @@
-# React Component Library
-
-A modern, lightweight React component library featuring robust DataTable and Form components built with the Compound Component pattern.
-
-## Features
-
-- 🎯 **DataTable**: Powerful data table with sorting, filtering, and pagination
-- 📝 **Form**: Flexible form system with validation using react-hook-form and Zod
-- 🎨 **Styled with Tailwind CSS**: Fully customizable with Tailwind
-- 📦 **Tree-shakeable**: Only import what you need
-- 🔷 **TypeScript**: Full type safety
-
-## Installation
-
-```bash
-npm install @your-org/react-component-library
-```
-
-## Usage
-
-```tsx
-import { Form, DataTable } from '@your-org/react-component-library';
-
-// Form example
-<Form.Root schema={mySchema} onSubmit={handleSubmit}>
-  <Form.InputField name="email" label="Email" />
-  <Form.Submit>Submit</Form.Submit>
-</Form.Root>
-
-// DataTable example
-<DataTable.Root data={data}>
-  <DataTable.Header>
-    <DataTable.Column>Name</DataTable.Column>
-  </DataTable.Header>
-  <DataTable.Body />
-</DataTable.Root>
-```
-
-## Development
-
-This library is built with `tsup` for fast bundling. The `example/` folder contains a Next.js app for testing components locally.
-
-```bash
-# Install dependencies
-npm install
-
-# Start development mode
-npm run dev
-
-# Build for production
-npm run build
-```
-
-## License
-
-MIT
+# React Component Library
+
+A modern, lightweight React component library featuring robust DataTable and Form components built with the Compound Component pattern.
+
+## Features
+
+- 🎯 **DataTable**: Powerful data table with sorting, filtering, and pagination
+- 📝 **Form**: Flexible form system with validation using react-hook-form and Zod
+- 🎨 **Styled with Tailwind CSS**: Fully customizable with Tailwind
+- 📦 **Tree-shakeable**: Only import what you need
+- 🔷 **TypeScript**: Full type safety
+
+## Installation
+
+```bash
+npm install @your-org/react-component-library
+```
+
+## Usage
+
+```tsx
+import { Form, DataTable } from '@your-org/react-component-library';
+
+// Form example
+<Form.Root schema={mySchema} onSubmit={handleSubmit}>
+  <Form.InputField name="email" label="Email" />
+  <Form.Submit>Submit</Form.Submit>
+</Form.Root>
+
+// DataTable example
+<DataTable.Root data={data}>
+  <DataTable.Header>
+    <DataTable.Column>Name</DataTable.Column>
+  </DataTable.Header>
+  <DataTable.Body />
+</DataTable.Root>
+```
+
+## Development
+
+This library is built with `tsup` for fast bundling. The `example/` folder contains a Next.js app for testing components locally.
+
+```bash
+# Install dependencies
+npm install
+
+# Start development mode
+npm run dev
+
+# Build for production
+npm run build
+```
+
+## License
+
+MIT

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");
   }
@@ -601,14 +601,14 @@ function Root2({
   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 [viewMode, setViewMode] = 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 filteredData = React2.useMemo(() => {
     if (Object.keys(activeFilters).length === 0) return data;
     return data.filter((row) => {
       return Object.entries(activeFilters).every(([filterId, filterValue]) => {
@@ -675,6 +675,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 +823,7 @@ function Button6({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? reactSlot.Slot : "button";
+  const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
     {