componentables 0.1.0

package/README.md

@@ -0,0 +1,272 @@
+# Componentables
+
+A beautiful React component library with Tailwind CSS and theming support.
+
+## Installation
+
+```bash
+npm install componentables
+# or
+yarn add componentables
+# or
+pnpm add componentables
+```
+
+## Setup
+
+### 1. Import styles
+
+Import the component styles in your main entry file:
+
+```tsx
+import "componentables/styles.css";
+```
+
+### 2. Configure Tailwind (Optional)
+
+If you want to use the same color scheme in your own components, extend your Tailwind config:
+
+```js
+// tailwind.config.js
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/componentables/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  // ... rest of your config
+};
+```
+
+### 3. Wrap your app with ThemeProvider
+
+```tsx
+import { ThemeProvider } from "componentables";
+
+function App() {
+  return (
+    <ThemeProvider
+      theme={{
+        colors: {
+          primary: "#6366f1",
+          secondary: "#8b5cf6",
+          danger: "#ef4444",
+        },
+      }}
+    >
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Theming
+
+The `ThemeProvider` accepts a theme configuration object that allows you to customize all colors:
+
+```tsx
+interface ThemeConfig {
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    danger?: string;
+    text?: string;
+    textMuted?: string;
+    textLight?: string;
+    border?: string;
+    borderDark?: string;
+    background?: string;
+    backgroundDark?: string;
+    backgroundLight?: string;
+    disabled?: string;
+    light?: string;
+    active?: string;
+  };
+}
+```
+
+Light and dark variants are automatically generated for primary, secondary, and danger colors.
+
+### Using the theme hook
+
+```tsx
+import { useTheme } from "componentables";
+
+function MyComponent() {
+  const theme = useTheme();
+
+  return <div style={{ color: theme.colors.primary }}>Themed content</div>;
+}
+```
+
+## Components
+
+### Button
+
+```tsx
+import { Button } from "componentables";
+
+<Button variant="primary" size="md" onClick={() => console.log("clicked")}>
+  Click me
+</Button>;
+```
+
+**Props:**
+
+- `variant`: `"primary" | "secondary" | "outline" | "ghost" | "light" | "danger"`
+- `size`: `"sm" | "md" | "lg" | "xl"`
+- `fullWidth`: `boolean`
+- `loading`: `boolean`
+- `disabled`: `boolean`
+
+### Input
+
+```tsx
+import { Input, InputArea } from "componentables";
+
+<Input
+  name="email"
+  type="email"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+  label="Email"
+  placeholder="Enter your email"
+  colorScheme="primary"
+/>
+
+<InputArea
+  name="description"
+  value={description}
+  onChange={(e) => setDescription(e.target.value)}
+  label="Description"
+  rows={4}
+/>
+```
+
+### Toggle
+
+```tsx
+import { Toggle } from "componentables";
+
+<Toggle checked={enabled} onChange={setEnabled} label="Enable notifications" />;
+```
+
+### SearchInput
+
+```tsx
+import { SearchInput } from "componentables";
+
+<SearchInput
+  value={search}
+  onChange={setSearch}
+  placeholder="Search..."
+  debounceDelay={300}
+/>;
+```
+
+### Dropdown
+
+```tsx
+import { Dropdown } from "componentables";
+
+<Dropdown
+  label="Country"
+  options={[
+    { value: "us", label: "United States" },
+    { value: "uk", label: "United Kingdom" },
+  ]}
+  value={country}
+  onChange={(option) => setCountry(option.value)}
+  searchable
+  multiple
+/>;
+```
+
+### Tabs
+
+```tsx
+import { Tabs, TabPanel } from "componentables";
+
+<Tabs
+  options={[
+    { value: "tab1", label: "Tab 1" },
+    { value: "tab2", label: "Tab 2" },
+  ]}
+  value={activeTab}
+  onChange={setActiveTab}
+  variant="underline"
+>
+  <TabPanel value="tab1">Content 1</TabPanel>
+  <TabPanel value="tab2">Content 2</TabPanel>
+</Tabs>;
+```
+
+### ExpandableCard
+
+```tsx
+import { ExpandableCard } from "componentables";
+
+<ExpandableCard title="Settings" subtitle="Configure your preferences">
+  <p>Card content goes here</p>
+</ExpandableCard>;
+```
+
+### Calendar
+
+```tsx
+import { Calendar } from "componentables";
+
+<Calendar
+  value={selectedDate}
+  onChange={setSelectedDate}
+  colorScheme="primary"
+  locale="en-US"
+/>;
+```
+
+### Table
+
+```tsx
+import { Table } from "componentables";
+
+<Table
+  headers={["Name", "Email", "Status"]}
+  data={users}
+  actions={[{ icon: FaEdit, onClick: (row) => editUser(row), label: "Edit" }]}
+  onRowClick={(row) => viewUser(row)}
+/>;
+```
+
+### Pagination
+
+```tsx
+import { Pagination } from "componentables";
+
+<Pagination
+  currentPage={1}
+  totalPages={10}
+  fetchPage={(page) => loadPage(page)}
+/>;
+```
+
+## Utilities
+
+### cn (class name merger)
+
+```tsx
+import { cn } from "componentables";
+
+const className = cn("base-class", isActive && "active", "another-class");
+```
+
+### Color utilities
+
+```tsx
+import { hexToHsl, hslToHex, generateColorVariants } from "componentables";
+
+const variants = generateColorVariants("#6366f1");
+// { base: '#6366f1', light: '...', dark: '...' }
+```
+
+## License
+
+MIT

package/dist/componentables.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-0\.5{left:.125rem}.left-3{left:.75rem}.right-3{right:.75rem}.top-0\.5{top:.125rem}.top-1\/2{top:50%}.z-\[9999\]{z-index:9999}.mx-2\.5{margin-left:.625rem;margin-right:.625rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-auto{height:auto}.max-h-0{max-height:0px}.max-h-60{max-height:15rem}.max-h-\[2000px\]{max-height:2000px}.min-h-14{min-height:3.5rem}.min-h-\[200px\]{min-height:200px}.min-h-\[400px\]{min-height:400px}.w-10{width:2.5rem}.w-16{width:4rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-6{--tw-translate-x: 1.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-8{--tw-translate-x: 2rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-t-0{border-top-width:0px}.border-border{border-color:var(--componentables-border, #e5e7eb)}.border-border-dark{border-color:var(--componentables-border-dark, #d1d5db)}.border-danger{border-color:var(--componentables-danger, #ef4444)}.border-disabled{border-color:var(--componentables-disabled, #e5e7eb)}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-primary{border-color:var(--componentables-primary, #6366f1)}.border-secondary{border-color:var(--componentables-secondary, #8b5cf6)}.border-transparent{border-color:transparent}.bg-background{background-color:var(--componentables-background, #ffffff)}.bg-background-dark{background-color:var(--componentables-background-dark, #f9fafb)}.bg-background-light{background-color:var(--componentables-background-light, #f3f4f6)}.bg-disabled{background-color:var(--componentables-disabled, #e5e7eb)}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-light{background-color:var(--componentables-light, #f9fafb)}.bg-primary{background-color:var(--componentables-primary, #6366f1)}.bg-secondary{background-color:var(--componentables-secondary, #8b5cf6)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pr-10{padding-right:2.5rem}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-danger{color:var(--componentables-danger, #ef4444)}.text-primary{color:var(--componentables-primary, #6366f1)}.text-secondary{color:var(--componentables-secondary, #8b5cf6)}.text-text{color:var(--componentables-text, #1f2937)}.text-text-light{color:var(--componentables-text-light, #9ca3af)}.text-text-muted{color:var(--componentables-text-muted, #6b7280)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}:root{--componentables-primary: #6366f1;--componentables-primary-light: #818cf8;--componentables-primary-dark: #4f46e5;--componentables-secondary: #8b5cf6;--componentables-secondary-light: #a78bfa;--componentables-secondary-dark: #7c3aed;--componentables-danger: #ef4444;--componentables-danger-light: #f87171;--componentables-danger-dark: #dc2626;--componentables-text: #1f2937;--componentables-text-muted: #6b7280;--componentables-text-light: #9ca3af;--componentables-border: #e5e7eb;--componentables-border-dark: #d1d5db;--componentables-background: #ffffff;--componentables-background-dark: #f9fafb;--componentables-background-light: #f3f4f6;--componentables-disabled: #e5e7eb;--componentables-light: #f9fafb;--componentables-active: #4338ca}.placeholder\:text-text-muted::-moz-placeholder{color:var(--componentables-text-muted, #6b7280)}.placeholder\:text-text-muted::placeholder{color:var(--componentables-text-muted, #6b7280)}.hover\:border-border:hover{border-color:var(--componentables-border, #e5e7eb)}.hover\:border-danger:hover{border-color:var(--componentables-danger, #ef4444)}.hover\:border-disabled:hover{border-color:var(--componentables-disabled, #e5e7eb)}.hover\:border-primary:hover{border-color:var(--componentables-primary, #6366f1)}.hover\:border-primary-dark:hover{border-color:var(--componentables-primary-dark, #4f46e5)}.hover\:border-secondary-dark:hover{border-color:var(--componentables-secondary-dark, #7c3aed)}.hover\:bg-background-light:hover{background-color:var(--componentables-background-light, #f3f4f6)}.hover\:bg-danger:hover{background-color:var(--componentables-danger, #ef4444)}.hover\:bg-disabled:hover{background-color:var(--componentables-disabled, #e5e7eb)}.hover\:bg-primary:hover{background-color:var(--componentables-primary, #6366f1)}.hover\:bg-primary-dark:hover{background-color:var(--componentables-primary-dark, #4f46e5)}.hover\:bg-secondary-dark:hover{background-color:var(--componentables-secondary-dark, #7c3aed)}.hover\:text-text:hover{color:var(--componentables-text, #1f2937)}.hover\:text-text-muted:hover{color:var(--componentables-text-muted, #6b7280)}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:border-danger:focus{border-color:var(--componentables-danger, #ef4444)}.focus\:border-primary:focus{border-color:var(--componentables-primary, #6366f1)}.focus\:border-secondary:focus{border-color:var(--componentables-secondary, #8b5cf6)}.focus\:shadow-danger-light:focus{--tw-shadow-color: var(--componentables-danger-light, #f87171);--tw-shadow: var(--tw-shadow-colored)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-color: var(--componentables-primary, #6366f1)}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.active\:bg-active:active{background-color:var(--componentables-active, #4338ca)}.active\:bg-danger-dark:active{background-color:var(--componentables-danger-dark, #dc2626)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-light:disabled{background-color:var(--componentables-light, #f9fafb)}.disabled\:text-text-muted:disabled{color:var(--componentables-text-muted, #6b7280)}.disabled\:opacity-50:disabled{opacity:.5}

package/dist/components/Button.d.ts

@@ -0,0 +1,27 @@
+import { default as React, ButtonHTMLAttributes } from 'react';
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "light" | "danger";
+export type ButtonSize = "sm" | "md" | "lg" | "xl";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * Button component with multiple variants and sizes
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md" onClick={() => console.log('clicked')}>
+ *   Click me
+ * </Button>
+ * ```
+ */
+export declare function Button({ children, onClick, disabled, type, variant, size, fullWidth, loading, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,SAAS,GACT,OAAO,GACP,OAAO,GACP,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,IAAe,EACf,OAAmB,EACnB,IAAW,EACX,SAAiB,EACjB,OAAe,EACf,SAAc,EACd,GAAG,KAAK,EACT,EAAE,WAAW,2CAgDb;AAED,eAAe,MAAM,CAAC"}

package/dist/components/Calendar.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes } from 'react';
+export type ColorScheme = "primary" | "secondary";
+export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    disabled?: boolean;
+    className?: string;
+    colorScheme?: ColorScheme;
+    locale?: string;
+    dayNames?: string[];
+    monthNames?: string[];
+}
+/**
+ * Calendar component for date selection
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   colorScheme="primary"
+ * />
+ * ```
+ */
+export declare function Calendar({ value, onChange, disabled, className, colorScheme, locale, dayNames, monthNames, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export default Calendar;
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/components/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/components/Calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAqCD;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAc,EACd,WAAyB,EACzB,MAAgB,EAChB,QAA4B,EAC5B,UAAgC,EAChC,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Pf;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,44 @@
+import { ButtonHTMLAttributes } from 'react';
+export type ColorScheme = "primary" | "secondary";
+export interface DropdownOption {
+    value: string | number;
+    label: string;
+    hex?: string;
+}
+export interface DropdownProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
+    label?: string;
+    options: DropdownOption[];
+    value?: string | number | (string | number)[];
+    onChange: (value: DropdownOption | DropdownOption[]) => void;
+    multiple?: boolean;
+    className?: string;
+    searchable?: boolean;
+    onSearchInputCustom?: (searchTerm: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    required?: boolean;
+    colorScheme?: ColorScheme;
+    noResultsText?: string;
+    searchPlaceholder?: string;
+}
+/**
+ * Dropdown select component with search and multiple selection support
+ *
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ *   value={country}
+ *   onChange={(option) => setCountry(option.value)}
+ *   searchable
+ * />
+ * ```
+ */
+export declare function Dropdown({ label, options, value, onChange, multiple, className, searchable, onSearchInputCustom, placeholder, disabled, error, required, colorScheme, noResultsText, searchPlaceholder, ...props }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AASD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,KAAU,EACV,QAAQ,EACR,QAAgB,EAChB,SAAc,EACd,UAAkB,EAClB,mBAAmB,EACnB,WAAyB,EACzB,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,WAAuB,EACvB,aAAkC,EAClC,iBAA+B,EAC/B,GAAG,KAAK,EACT,EAAE,aAAa,2CAmVf;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/ExpandableCard.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export type ColorScheme = "primary" | "secondary";
+export interface ExpandableCardProps {
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
+    className?: string;
+    colorScheme?: ColorScheme;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    headerExtra?: React.ReactNode;
+}
+/**
+ * Expandable card component with collapsible content
+ *
+ * @example
+ * ```tsx
+ * <ExpandableCard title="Settings" subtitle="Configure your preferences">
+ *   <p>Card content goes here</p>
+ * </ExpandableCard>
+ * ```
+ */
+export declare function ExpandableCard({ title, subtitle, children, defaultExpanded, expanded, onToggle, className, colorScheme, icon, disabled, headerExtra, }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
+export default ExpandableCard;
+//# sourceMappingURL=ExpandableCard.d.ts.map

package/dist/components/ExpandableCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableCard.d.ts","sourceRoot":"","sources":["../../src/components/ExpandableCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,eAAuB,EACvB,QAAQ,EACR,QAAQ,EACR,SAAc,EACd,WAAuB,EACvB,IAAI,EACJ,QAAgB,EAChB,WAAW,GACZ,EAAE,mBAAmB,2CA+FrB;AAED,eAAe,cAAc,CAAC"}

package/dist/components/Input.d.ts

@@ -0,0 +1,63 @@
+import { default as React, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+export type ColorScheme = "primary" | "secondary";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    id?: string;
+    name: string;
+    type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    colorScheme?: ColorScheme;
+    className?: string;
+}
+export interface InputAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    id?: string;
+    name: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    colorScheme?: ColorScheme;
+    className?: string;
+    rows?: number;
+}
+/**
+ * Input component with label and error support
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   name="email"
+ *   type="email"
+ *   value={email}
+ *   onChange={(e) => setEmail(e.target.value)}
+ *   label="Email"
+ *   placeholder="Enter your email"
+ * />
+ * ```
+ */
+export declare function Input({ id, name, type, value, onChange, placeholder, label, error, disabled, required, colorScheme, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TextArea component with label and error support
+ *
+ * @example
+ * ```tsx
+ * <InputArea
+ *   name="description"
+ *   value={description}
+ *   onChange={(e) => setDescription(e.target.value)}
+ *   label="Description"
+ *   rows={4}
+ * />
+ * ```
+ */
+export declare function InputArea({ id, name, value, onChange, placeholder, label, error, disabled, required, colorScheme, className, rows, ...props }: InputAreaProps): import("react/jsx-runtime").JSX.Element;
+export default Input;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAGzE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC/D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,IAAI,EACJ,IAAa,EACb,KAAK,EACL,QAAQ,EACR,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,WAAyB,EACzB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,UAAU,2CA+DZ;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,WAAyB,EACzB,SAAc,EACd,IAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA+DhB;AAED,eAAe,KAAK,CAAC"}

package/dist/components/Pagination.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface PaginationState {
+    page: number;
+    [key: string]: unknown;
+}
+export interface PaginationProps {
+    labelPage?: string;
+    labelOf?: string;
+    setPagination?: React.Dispatch<React.SetStateAction<PaginationState>>;
+    totalPages: number;
+    currentPage: number;
+    showLabel?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    fetchPage?: (page: number) => void;
+}
+/**
+ * Pagination component for navigating through pages
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   currentPage={1}
+ *   totalPages={10}
+ *   fetchPage={(page) => loadPage(page)}
+ * />
+ * ```
+ */
+export declare function Pagination({ labelPage, labelOf, setPagination, totalPages, currentPage, showLabel, className, isLoading, fetchPage, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default Pagination;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IACtE,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAkB,EAClB,OAAc,EACd,aAAa,EACb,UAAU,EACV,WAAW,EACX,SAAgB,EAChB,SAAc,EACd,SAAiB,EACjB,SAAS,GACV,EAAE,eAAe,2CA8DjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,28 @@
+import { InputHTMLAttributes } from 'react';
+export type ColorScheme = "primary" | "secondary";
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    colorScheme?: ColorScheme;
+    label?: string;
+    className?: string;
+    debounceDelay?: number;
+}
+/**
+ * Search input component with debounce support
+ *
+ * @example
+ * ```tsx
+ * <SearchInput
+ *   value={search}
+ *   onChange={setSearch}
+ *   placeholder="Search..."
+ *   debounceDelay={300}
+ * />
+ * ```
+ */
+export declare function SearchInput({ value, onChange, placeholder, disabled, colorScheme, label, className, debounceDelay, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export default SearchInput;
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/components/SearchInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAyB,EACzB,QAAgB,EAChB,WAAyB,EACzB,KAAK,EACL,SAAc,EACd,aAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAmElB;AAED,eAAe,WAAW,CAAC"}

package/dist/components/Table.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { IconType } from 'react-icons';
+export interface TableAction<T = Record<string, unknown>> {
+    component?: string | React.ComponentType<{
+        onClick?: (e: React.MouseEvent) => void;
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+    onClick?: (row: T) => void;
+    className?: string;
+    props?: Record<string, unknown>;
+    icon?: IconType;
+    label?: string;
+}
+export interface TableProps<T = Record<string, unknown>> {
+    headers: string[];
+    data: T[];
+    loading?: boolean;
+    loadingText?: string;
+    actions?: TableAction<T>[];
+    actionsHeader?: string;
+    onRowClick?: (row: T) => void;
+    className?: string;
+    rowClassName?: string;
+    cellClassName?: string;
+    headerClassName?: string;
+    emptyText?: string;
+    showCount?: boolean;
+    countText?: (count: number) => string;
+    keyExtractor?: (row: T, index: number) => string | number;
+}
+/**
+ * Table component with flexible data display and actions
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   headers={['Name', 'Email', 'Status']}
+ *   data={users}
+ *   actions={[
+ *     { icon: FaEdit, onClick: (row) => editUser(row), label: 'Edit' }
+ *   ]}
+ *   onRowClick={(row) => viewUser(row)}
+ * />
+ * ```
+ */
+export declare function Table<T extends Record<string, unknown>>({ headers, data, loading, loadingText, actions, actionsHeader, onRowClick, className, rowClassName, cellClassName, headerClassName, emptyText, showCount, countText, keyExtractor, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/dist/components/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACtD,SAAS,CAAC,EACN,MAAM,GACN,KAAK,CAAC,aAAa,CAAC;QAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;QACxC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC5B,CAAC,CAAC;IACP,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACrD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;CAC3D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACvD,OAAO,EACP,IAAI,EACJ,OAAO,EACP,WAA0B,EAC1B,OAAO,EACP,aAAyB,EACzB,UAAU,EACV,SAAc,EACd,YAAiB,EACjB,aAAkB,EAClB,eAAoB,EACpB,SAA+B,EAC/B,SAAgB,EAChB,SAAyE,EACzE,YACoD,GACrD,EAAE,UAAU,CAAC,CAAC,CAAC,2CA6If;AAED,eAAe,KAAK,CAAC"}