@admin-layout/tailwind-ui 10.1.1-alpha.8 → 11.2.1-alpha.1

package/lib/components/ReactTable/Table.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import React__default,{useEffect}from'react';import {useReactTable,getPaginationRowModel,getFilteredRowModel,getSortedRowModel,getCoreRowModel,flexRender}from'@tanstack/react-table';import useWindowDimensions from'../../utils/hooks/useWindowDimensions/index.js';import {DefaultColumnFilter}from'./TableFilters.js';import {useLayoutSettings}from'@admin-layout/client';import {icons}from'../../icons/index.js';const ReactTable = props => {
+import React__default,{useEffect}from'react';import {useReactTable,getPaginationRowModel,getFilteredRowModel,getSortedRowModel,getCoreRowModel,flexRender}from'@tanstack/react-table';import useWindowDimensions from'../../utils/hooks/useWindowDimensions/index.js';import {DefaultColumnFilter}from'./TableFilters.js';import {useLayoutSettings}from'@admin-layout/client';import {icons}from'../../icons/index.js';const ReactTable = props => {
   const {
     columns,
     data,
@@ -57,95 +57,74 @@ import {jsxs,jsx}from'react/jsx-runtime';import React__default,{useEffect}from'r
       setPageSizeCount(table.getState().pagination.pageSize);
     }
   }, [table.getState().pagination.pageSize]);
-  return jsxs("div", {
-    className: "overflow-auto",
-    children: [jsxs("table", {
-      className: `w-full border border-opacity-10 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`,
-      children: [jsx("thead", {
-        className: isDarkMode ? 'bg-gray-800 shadow-md' : 'bg-gray-50 shadow',
-        children: table.getHeaderGroups().map(headerGroup => jsx("tr", {
-          children: headerGroup.headers.map(header => jsx("th", {
-            className: `border-r border-opacity-5 p-2 text-left ${isDarkMode ? 'border-gray-600 text-gray-200' : 'border-gray-200 text-gray-700'}`,
-            children: flexRender(header.column.columnDef.header, header.getContext())
-          }, header.id))
-        }, headerGroup.id))
-      }), jsx("tbody", {
-        children: table.getRowModel().rows.length ? table.getRowModel().rows.slice(currentListStartingIndex, currentListStartingIndex + table.getState().pagination.pageSize).map(row => {
-          return jsx("tr", {
-            className: `border-b border-opacity-5 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`,
-            children: row.getVisibleCells().map(cell => {
-              return jsx("td", {
-                className: `overflow-hidden border-r border-opacity-2 whitespace-nowrap p-2 text-ellipsis ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`,
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id);
-            })
-          }, row.id);
-        }) : jsx("tr", {
-          className: "h-24",
-          children: jsx("td", {
-            colSpan: columns.length,
-            className: "relative",
-            children: jsx("div", {
-              className: "absolute left-0 right-0 mt-10 w-full text-center text-gray-500",
-              children: noDataText || 'No Data'
-            })
-          })
-        })
-      })]
-    }), showPagination && jsxs("div", {
-      className: `flex border border-opacity-10 p-2 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`,
-      children: [jsx("div", {
-        children: jsx("button", {
-          onClick: () => table.previousPage(),
-          disabled: !table.getCanPreviousPage(),
-          className: `${width < 768 ? 'h-8 w-8' : 'h-10 px-4'} ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-gray-100 text-gray-700 border-transparent'} rounded border ${!table.getCanPreviousPage() ? 'opacity-50' : 'hover:bg-gray-700 hover:text-white'}`,
-          children: width < 768 ? jsx(OutlineLeftIcon, {
-            className: "mx-auto text-lg"
-          }) : 'Previous'
-        })
-      }), jsxs("div", {
-        className: `mx-auto flex gap-${width < 768 ? '5' : '24'}`,
-        children: [jsxs("div", {
-          className: "flex items-center",
-          children: [jsx("span", {
-            className: `${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`,
-            children: "Page"
-          }), jsx("input", {
-            type: "number",
-            value: table.getState().pagination.pageIndex + 1,
-            onChange: e => {
-              const page = e.target.value ? Number(e.target.value) - 1 : 0;
-              table.setPageIndex(page);
-            },
-            min: 1,
-            max: table.getPageCount(),
-            className: `mx-2 ${width < 768 ? 'h-8 w-8' : 'h-10 w-16'} rounded border px-2 ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-white text-gray-700 border-gray-300'}`
-          }), jsxs("span", {
-            className: `${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`,
-            children: ["of ", data.length === 0 ? 1 : table.getPageCount()]
-          })]
-        }), jsx("div", {
-          children: jsx("select", {
-            value: table.getState().pagination.pageSize,
-            onChange: e => table.setPageSize(Number(e.target.value)),
-            className: `${width < 768 ? 'h-8' : 'h-10'} rounded border px-2 ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-white text-gray-700 border-gray-300'}`,
-            children: (pageOptions || [10, 15, 20, 25]).map(value => jsx("option", {
-              value: value,
-              children: `${value} rows`
-            }, value))
-          })
-        })]
-      }), jsx("div", {
-        className: "ml-auto",
-        children: jsx("button", {
-          onClick: () => table.nextPage(),
-          disabled: !table.getCanNextPage(),
-          className: `${width < 768 ? 'h-8 w-8' : 'h-10 px-4'} ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-gray-100 text-gray-700 border-transparent'} rounded border ${!table.getCanNextPage() ? 'opacity-50' : 'hover:bg-gray-700 hover:text-white'}`,
-          children: width < 768 ? jsx(OutlineRightIcon, {
-            className: "mx-auto text-lg"
-          }) : 'Next'
-        })
-      })]
-    })]
-  });
+  return React__default.createElement("div", {
+    className: "overflow-auto"
+  }, React__default.createElement("table", {
+    className: `w-full border border-opacity-10 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`
+  }, React__default.createElement("thead", {
+    className: isDarkMode ? 'bg-gray-800 shadow-md' : 'bg-gray-50 shadow'
+  }, table.getHeaderGroups().map(headerGroup => React__default.createElement("tr", {
+    key: headerGroup.id
+  }, headerGroup.headers.map(header => React__default.createElement("th", {
+    key: header.id,
+    className: `border-r border-opacity-5 p-2 text-left ${isDarkMode ? 'border-gray-600 text-gray-200' : 'border-gray-200 text-gray-700'}`
+  }, flexRender(header.column.columnDef.header, header.getContext())))))), React__default.createElement("tbody", null, table.getRowModel().rows.length ? table.getRowModel().rows.slice(currentListStartingIndex, currentListStartingIndex + table.getState().pagination.pageSize).map(row => {
+    return React__default.createElement("tr", {
+      key: row.id,
+      className: `border-b border-opacity-5 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`
+    }, row.getVisibleCells().map(cell => {
+      return React__default.createElement("td", {
+        key: cell.id,
+        className: `overflow-hidden border-r border-opacity-2 whitespace-nowrap p-2 text-ellipsis ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`
+      }, flexRender(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  }) : React__default.createElement("tr", {
+    className: "h-24"
+  }, React__default.createElement("td", {
+    colSpan: columns.length,
+    className: "relative"
+  }, React__default.createElement("div", {
+    className: "absolute left-0 right-0 mt-10 w-full text-center text-gray-500"
+  }, noDataText || 'No Data'))))), showPagination && React__default.createElement("div", {
+    className: `flex border border-opacity-10 p-2 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`
+  }, React__default.createElement("div", null, React__default.createElement("button", {
+    onClick: () => table.previousPage(),
+    disabled: !table.getCanPreviousPage(),
+    className: `${width < 768 ? 'h-8 w-8' : 'h-10 px-4'} ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-gray-100 text-gray-700 border-transparent'} rounded border ${!table.getCanPreviousPage() ? 'opacity-50' : 'hover:bg-gray-700 hover:text-white'}`
+  }, width < 768 ? React__default.createElement(OutlineLeftIcon, {
+    className: "mx-auto text-lg"
+  }) : 'Previous')), React__default.createElement("div", {
+    className: `mx-auto flex gap-${width < 768 ? '5' : '24'}`
+  }, React__default.createElement("div", {
+    className: "flex items-center"
+  }, React__default.createElement("span", {
+    className: `${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`
+  }, "Page"), React__default.createElement("input", {
+    type: "number",
+    value: table.getState().pagination.pageIndex + 1,
+    onChange: e => {
+      const page = e.target.value ? Number(e.target.value) - 1 : 0;
+      table.setPageIndex(page);
+    },
+    min: 1,
+    max: table.getPageCount(),
+    className: `mx-2 ${width < 768 ? 'h-8 w-8' : 'h-10 w-16'} rounded border px-2 ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-white text-gray-700 border-gray-300'}`
+  }), React__default.createElement("span", {
+    className: `${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`
+  }, "of ", data.length === 0 ? 1 : table.getPageCount())), React__default.createElement("div", null, React__default.createElement("select", {
+    value: table.getState().pagination.pageSize,
+    onChange: e => table.setPageSize(Number(e.target.value)),
+    className: `${width < 768 ? 'h-8' : 'h-10'} rounded border px-2 ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-white text-gray-700 border-gray-300'}`
+  }, (pageOptions || [10, 15, 20, 25]).map(value => React__default.createElement("option", {
+    key: value,
+    value: value
+  }, `${value} rows`))))), React__default.createElement("div", {
+    className: "ml-auto"
+  }, React__default.createElement("button", {
+    onClick: () => table.nextPage(),
+    disabled: !table.getCanNextPage(),
+    className: `${width < 768 ? 'h-8 w-8' : 'h-10 px-4'} ${isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-gray-100 text-gray-700 border-transparent'} rounded border ${!table.getCanNextPage() ? 'opacity-50' : 'hover:bg-gray-700 hover:text-white'}`
+  }, width < 768 ? React__default.createElement(OutlineRightIcon, {
+    className: "mx-auto text-lg"
+  }) : 'Next'))));
 };export{ReactTable};//# sourceMappingURL=Table.js.map

package/lib/components/ReactTable/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ReactTable/TableFilters.d.ts

@@ -1,8 +1,9 @@
-export declare function SelectColumnFilter(filter: any): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare function SelectColumnFilter(filter: any): React.JSX.Element;
 export declare function DefaultColumnFilter({ column: { filterValue, setFilter } }: {
     column: {
         filterValue: any;
         setFilter: any;
     };
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 //# sourceMappingURL=TableFilters.d.ts.map

package/lib/components/ReactTable/TableFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilters.d.ts","sourceRoot":"","sources":["../../../src/components/ReactTable/TableFilters.tsx"],"names":[],"mappings":"AAOA,wBAAgB,kBAAkB,CAAC,MAAM,KAAA,2CA2BxC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;;;;;CAAA,2CA4BzE"}
+{"version":3,"file":"TableFilters.d.ts","sourceRoot":"","sources":["../../../src/components/ReactTable/TableFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,wBAAgB,kBAAkB,CAAC,MAAM,KAAA,qBA2BxC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;;;;;CAAA,qBA4BzE"}

package/lib/components/ReactTable/TableFilters.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';function SelectColumnFilter(filter) {
+import React__default from'react';function SelectColumnFilter(filter) {
   const options = React__default.useMemo(() => {
     const options = new Set();
     filter.column.preFilteredRows.forEach(row => {
@@ -9,20 +9,17 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';funct
     });
     return [...options];
   }, [filter.column.id, filter.column.preFilteredRows]);
-  return jsx("div", {
-    className: "relative",
-    children: jsxs("select", {
-      className: "w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
-      onChange: e => filter.column.setFilter(e.target.value || undefined),
-      children: [jsx("option", {
-        value: "",
-        children: "All"
-      }), options.map((option, i) => jsx("option", {
-        value: option?.value,
-        children: option?.label
-      }, i))]
-    })
-  });
+  return React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("select", {
+    className: "w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
+    onChange: e => filter.column.setFilter(e.target.value || undefined)
+  }, React__default.createElement("option", {
+    value: ""
+  }, "All"), options.map((option, i) => React__default.createElement("option", {
+    key: i,
+    value: option?.value
+  }, option?.label))));
 }
 function DefaultColumnFilter({
   column: {
@@ -30,29 +27,26 @@ function DefaultColumnFilter({
     setFilter
   }
 }) {
-  return jsxs("div", {
-    className: "relative",
-    children: [jsx("input", {
-      type: "text",
-      value: filterValue || '',
-      onChange: e => {
-        setFilter(e.target.value || undefined);
-      },
-      className: "w-full rounded-md border border-gray-300 px-3 py-2 text-gray-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
-      placeholder: "Type to search..."
-    }), filterValue && jsx("button", {
-      className: "absolute right-2 top-2 text-gray-400 hover:text-gray-600",
-      onClick: () => setFilter(undefined),
-      children: jsx("svg", {
-        className: "h-4 w-4",
-        fill: "currentColor",
-        viewBox: "0 0 20 20",
-        children: jsx("path", {
-          fillRule: "evenodd",
-          d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
-          clipRule: "evenodd"
-        })
-      })
-    })]
-  });
+  return React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("input", {
+    type: "text",
+    value: filterValue || '',
+    onChange: e => {
+      setFilter(e.target.value || undefined);
+    },
+    className: "w-full rounded-md border border-gray-300 px-3 py-2 text-gray-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
+    placeholder: "Type to search..."
+  }), filterValue && React__default.createElement("button", {
+    className: "absolute right-2 top-2 text-gray-400 hover:text-gray-600",
+    onClick: () => setFilter(undefined)
+  }, React__default.createElement("svg", {
+    className: "h-4 w-4",
+    fill: "currentColor",
+    viewBox: "0 0 20 20"
+  }, React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+    clipRule: "evenodd"
+  }))));
 }export{DefaultColumnFilter,SelectColumnFilter};//# sourceMappingURL=TableFilters.js.map

package/lib/components/ReactTable/TableFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilters.js","sources":["../../../src/components/ReactTable/TableFilters.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;MAgEC,OAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableFilters.js","sources":["../../../src/components/ReactTable/TableFilters.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"kCAOA,SAAA,kBAAgB,CAAA,MAAA,EAAmB;AA6BnC,EAAA,MAAA,OAAA,GAAAA,cAAA,CAAgB,OAAA,CAAA,MAAA;;;;;QAA0D,KAAA,EAAA,GAAA,CAAA,MA4BzE,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Search/SearchInput.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface SearchInputProps {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    iconSize?: number;
+}
+export declare const SearchInput: ({ placeholder, value, onChange, disabled, className, iconSize, }: SearchInputProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

package/lib/components/Search/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/Search/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,gBAAgB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,kEAOzB,gBAAgB,sBA4BlB,CAAC"}

package/lib/components/Search/SearchInput.js

@@ -0,0 +1,32 @@
+import React__default from'react';import {Search}from'lucide-react';import {cn}from'../../utils/util.js';const SearchInput = ({
+  placeholder = 'Search',
+  value,
+  onChange,
+  disabled,
+  className,
+  iconSize = 16
+}) => {
+  const isControlled = value !== undefined;
+  const [localValue, setLocalValue] = React__default.useState(isControlled ? value : '');
+  const handleOnChange = event => {
+    if (!isControlled) {
+      setLocalValue(event.target.value);
+    }
+    onChange?.(event.target.value);
+  };
+  React__default.useEffect(() => {
+    setLocalValue(value || '');
+  }, [value]);
+  return React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement(Search, {
+    size: iconSize,
+    className: "absolute top-1/2 left-3 -translate-y-1/2 text-gray-400"
+  }), React__default.createElement("input", {
+    placeholder: placeholder,
+    value: localValue,
+    onChange: handleOnChange,
+    disabled: disabled,
+    className: cn('pl-8 rounded-lg border-gray-300 bg-gray-100', className)
+  }));
+};export{SearchInput};//# sourceMappingURL=SearchInput.js.map

package/lib/components/Search/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/Search/SearchInput.tsx"],"sourcesContent":[null],"names":[],"mappings":"yGAMY,MAAA,WAAO,GAAA,CAAA;aACN,GAAG,QAAO;OACnB;UACA;UACA;AACH,EAAA,SAAA;AAED,EAAA,QAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Search/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SearchInput';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Search/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export declare const SelectContent: ({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+type SelectItemProps<T extends keyof JSX.IntrinsicElements = 'button'> = Omit<React.ComponentPropsWithoutRef<T>, 'value'> & {
+    value?: any;
+    closeOnClick?: boolean;
+    tag?: T;
+    onClick?: () => void;
+};
+export declare const SelectItem: <T extends keyof JSX.IntrinsicElements = "button">({ children, className, value, onClick, closeOnClick, tag, ...rest }: SelectItemProps<T>) => React.JSX.Element;
+export declare const SelectValue: ({ placeholder, icon: _icon, label, }: {
+    placeholder: string;
+    icon?: React.ReactNode;
+    label?: (selectedValue: any) => string;
+}) => React.JSX.Element;
+export declare const SelectTrigger: ({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+export declare const SelectSearch: ({ placeholder, onChange, }: {
+    placeholder: string;
+    onChange?: (value: string) => void;
+}) => React.JSX.Element;
+interface SelectProps {
+    children: React.ReactNode;
+    onChange?: (selectedValue: any) => void;
+    disabled?: boolean;
+    value?: any;
+    loading?: boolean;
+}
+export declare const Select: ({ children, ...props }: SelectProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/lib/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4E/B,eAAO,MAAM,aAAa,GAAI,yBAAyB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,sBA2EvG,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,QAAQ,IAAI,IAAI,CACzE,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EACjC,OAAO,CACV,GAAG;IACA,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,QAAQ,EAAE,qEAQ1E,eAAe,CAAC,CAAC,CAAC,sBAqBpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,sCAIzB;IACC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,CAAC,aAAa,EAAE,GAAG,KAAK,MAAM,CAAC;CAC1C,sBAsCA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yBAAyB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,sBAkBvG,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,4BAG1B;IACC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,sBAoBA,CAAC;AAEF,UAAU,WAAW;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAkBD,eAAO,MAAM,MAAM,GAAI,wBAAwB,WAAW,sBAMzD,CAAC"}

package/lib/components/Select/Select.js

@@ -0,0 +1,242 @@
+import*as React from'react';import {ChevronDown,Search}from'lucide-react';import {cn}from'../../utils/util.js';const SelectContext = React.createContext(undefined);
+const SelectProvider = ({
+  children,
+  value,
+  onChange,
+  loading = false
+}) => {
+  const [open, setOpen] = React.useState(false);
+  // Controlled vs uncontrolled state
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = React.useState(value ?? null);
+  const selectedValue = isControlled ? value : internalValue;
+  const setSelectedValue = val => {
+    if (!isControlled) {
+      setInternalValue(val);
+    }
+    onChange?.(val);
+  };
+  const [disabled, setDisabled] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState('');
+  const triggerRef = React.useRef(null);
+  return React.createElement(SelectContext.Provider, {
+    value: {
+      open,
+      setOpen,
+      selectedValue,
+      setSelectedValue,
+      disabled,
+      setDisabled,
+      searchValue,
+      setSearchValue,
+      triggerRef,
+      loading
+    }
+  }, children);
+};
+const useSelectContext = () => {
+  const ctx = React.useContext(SelectContext);
+  if (!ctx) throw new Error('useSelectContext must be used within SelectProvider');
+  return ctx;
+};
+const SelectContent = ({
+  children,
+  className
+}) => {
+  const {
+    open,
+    setOpen,
+    triggerRef
+  } = useSelectContext();
+  const contentRef = React.useRef(null);
+  const [styles, setStyles] = React.useState({});
+  const handleOverflow = () => {
+    if (!open) return;
+    const triggerEl = triggerRef.current;
+    const contentEl = contentRef.current;
+    if (triggerEl && contentEl) {
+      const triggerRect = triggerEl.getBoundingClientRect();
+      const contentRect = contentEl.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      // Default position
+      let top = triggerRect.height;
+      let left = 0;
+      const isOverflowingRight = triggerRect.right + contentRect.width > viewportWidth;
+      const isOverflowingBottom = triggerRect.bottom + contentRect.height > viewportHeight;
+      if (isOverflowingRight) {
+        left = -(contentRect.width - triggerRect.width);
+      }
+      if (isOverflowingBottom) {
+        top = -(contentRect.height + 8);
+      }
+      setStyles({
+        top,
+        left
+      });
+    }
+  };
+  React.useEffect(() => {
+    handleOverflow();
+  }, [open]);
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      if (contentRef.current && !contentRef.current.contains(event.target) && !triggerRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [contentRef, triggerRef, setOpen]);
+  return React.createElement("div", {
+    ref: contentRef,
+    role: "listbox",
+    style: {
+      ...styles,
+      display: open ? 'block' : 'none'
+    },
+    className: cn('absolute z-50 mt-2 min-w-full max-w-max max-h-96 overflow-y-auto overflow-x-hidden rounded-md border border-gray-300 bg-white shadow-lg focus:outline-none', className)
+  }, children);
+};
+const SelectItem = ({
+  children,
+  className,
+  value,
+  onClick,
+  closeOnClick = true,
+  tag,
+  ...rest
+}) => {
+  const {
+    setOpen,
+    setSelectedValue
+  } = useSelectContext();
+  const Tag = tag || 'button';
+  const handleClick = e => {
+    setSelectedValue(value ?? null);
+    if (onClick) onClick(value ?? null);
+    if (closeOnClick) setOpen(false);
+  };
+  return React.createElement(Tag, {
+    role: "option",
+    onClick: handleClick,
+    className: cn('flex min-w-full w-max items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100', className),
+    ...rest
+  }, children);
+};
+const SelectValue = ({
+  placeholder,
+  icon: _icon,
+  label
+}) => {
+  const {
+    selectedValue,
+    loading
+  } = useSelectContext();
+  const icon = _icon || '';
+  if (loading) {
+    return React.createElement("span", {
+      className: "block text-muted-foreground flex items-center gap-2"
+    }, icon, "Loading...");
+  }
+  const isStrOrInt = typeof selectedValue === 'string' || typeof selectedValue === 'number';
+  if (selectedValue && !isStrOrInt && !label) {
+    throw new Error('SelectValue must have a label prop if selectedValue is not a string or number');
+  }
+  if (label && selectedValue !== null && selectedValue !== undefined) {
+    return React.createElement(React.Fragment, null, icon, label(selectedValue));
+  }
+  if (selectedValue === null || selectedValue === undefined) {
+    return React.createElement("span", {
+      className: "block text-muted-foreground flex items-center gap-2"
+    }, icon, placeholder);
+  }
+  const stringifiedValue = String(selectedValue);
+  return React.createElement(React.Fragment, null, icon, " ", stringifiedValue[0].toUpperCase() + stringifiedValue.slice(1));
+};
+const SelectTrigger = ({
+  children,
+  className
+}) => {
+  const {
+    setOpen,
+    open,
+    triggerRef,
+    disabled,
+    loading
+  } = useSelectContext();
+  const handleClick = () => setOpen(!open);
+  return React.createElement("button", {
+    type: "button",
+    ref: triggerRef,
+    disabled: disabled || loading,
+    "aria-haspopup": "listbox",
+    "aria-expanded": open,
+    onClick: handleClick,
+    className: cn('flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2', className)
+  }, children, React.createElement(ChevronDown, {
+    size: 16,
+    className: `transition-transform ${open ? 'rotate-180' : ''}`
+  }));
+};
+const SelectSearch = ({
+  placeholder,
+  // placeholder for the search input
+  onChange
+}) => {
+  const {
+    setSearchValue,
+    searchValue
+  } = useSelectContext();
+  React.useEffect(() => {
+    onChange?.(searchValue);
+  }, [searchValue, onChange]);
+  return React.createElement("div", {
+    className: "p-2"
+  }, React.createElement("div", {
+    className: "relative"
+  }, React.createElement(Search, {
+    size: 14,
+    className: "absolute top-1/2 left-3 -translate-y-1/2"
+  }), React.createElement("input", {
+    placeholder: placeholder,
+    value: searchValue,
+    onChange: e => setSearchValue(e.target.value),
+    className: "pl-8 min-w-full rounded-lg border-gray-300 bg-gray-100"
+  })));
+};
+const SelectRoot = ({
+  children,
+  disabled
+}) => {
+  const {
+    setDisabled,
+    open,
+    setSearchValue
+  } = useSelectContext();
+  React.useEffect(() => {
+    setDisabled(!!disabled);
+  }, [disabled, setDisabled]);
+  React.useEffect(() => {
+    if (open) {
+      setSearchValue('');
+    }
+  }, [open, setSearchValue]);
+  return React.createElement("div", {
+    className: "relative"
+  }, children);
+};
+const Select = ({
+  children,
+  ...props
+}) => {
+  return React.createElement(SelectProvider, {
+    value: props.value,
+    onChange: props.onChange,
+    loading: props.loading
+  }, React.createElement(SelectRoot, {
+    ...props
+  }, children));
+};export{Select,SelectContent,SelectItem,SelectSearch,SelectTrigger,SelectValue};//# sourceMappingURL=Select.js.map

package/lib/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":[],"mappings":"qHA4EoF,aAAY,GAAM,KAAA,CAAA,aAAA,CAAA,SAAA,CAAA;AAAE,MAAA,cAAA,GA2EvG,CAAC;AAEF,EAAA,QAAK;OAID;UACA;SACI,GAAI;AACR,CAAA,KAAA;EACF,MAAA,CAAA,IAAA,EAAA,OAAA,CAAA,GAAA,KAAA,CAAA,QAAA,CAAA,KAAA,CAAA;AAEF;AA+BA,EAAA,MAAA,YAAO,GAAM,KAAA,KAAW,SAAI;QAKxB,CAAA,eAAoB,gBAAA,CAAA,GAAA,KAAA,CAAA,QAAA,CAAA,KAAA,IAAA,IAAA,CAAA;AACpB,EAAA,MAAI,4BAAmB,GAAA,KAAA,GAAA,aAAA;QACvB,gBAAS,MAAe,IAAG;AAC9B,IAAA,IAAA,CAAA,YAAA,EAsCA;AAED,MAAA,gBAAa,CAAA,GAAA,CAAA;AAA4C,IAAA;IAA2B,QAAA,GAAU,GAAE,CAAA;AAAQ,EAAA,CAAA;AAoBxG,EAAA,MAAA,CAAA,QAAO,EAAA,WAAM,CAAA,GAAY,KAAI,CAAA,QAAA,CAAA,KAAA,CAAA;QAIzB,CAAA,2BAAoB,CAAA,GAAA,KAAA,CAAA,QAAA,CAAA,EAAA,CAAA;QACpB,UAAY,GAAK,KAAE,CAAA,MAAM,CAAK,IAAI,CAAC;AACtC,EAAA,OAAA,KAAA,CAAA,aAoBC,CAAA,aAAA,CAAA,QAAA,EAAA;AAEF,IAAA,KAAA,EAAU;AACN,MAAA,IAAA;MACA,OAAS;MACT,aAAW;MACX,gBAAY;MACZ,QAAU;AACb,MAAA,WAAA;AAkBD,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}