react-bootstrap-plugins 1.0.3 → 2.0.0

package/README.md

@@ -6,6 +6,19 @@
 
 ---
 
+## Components
+
+| Component | Guide | Description |
+|---|---|---|
+| **DatePicker** | [DATEPICKER.md](./docs/DATEPICKER.md) | Date, time, and datetime picker with popover calendar |
+| **SearchSelect** | [SEARCHSELECT.md](./docs/SEARCHSELECT.md) | Filterable, searchable select dropdown |
+| **Label** | [LABEL.md](./docs/LABEL.md) | Bootstrap-styled form label with required indicator |
+| **TableLoading** | [TABLELOADING.md](./docs/TABLELOADING.md) | Bootstrap 5 placeholder loading skeleton for table `<tbody>` |
+
+Each component guide includes full prop tables, usage examples, import patterns, and dark mode behavior.
+
+---
+
 ## Features
 
 - 🎯 **Zero runtime dependencies** — only React and React DOM as peer dependencies
@@ -16,6 +29,8 @@
 - ♿ **Accessible** — ARIA attributes, keyboard navigation, screen-reader friendly
 - 📱 **Responsive** — mobile-optimized layouts for all components
 
+---
+
 ## Installation
 
 ```bash
@@ -45,10 +60,12 @@ DatePicker requires a small CSS file for its popover calendar layout. Import it
 
 ```js
 // Recommended — uses the package exports map (works with Vite, webpack 5+, Turbopack, Rollup)
-import 'react-bootstrap-plugins/css/datepicker.css'
+import 'react-bootstrap-plugins/css/plugins.css'
 ```
 
-This resolves to `dist/css/datepicker.css` via the package's `exports` map. No additional configuration is needed for modern bundlers.
+This resolves to `dist/css/plugins.css` via the package's `exports` map. No additional configuration is needed for modern bundlers.
+
+> **Backward compatibility:** The old path `react-bootstrap-plugins/css/datepicker.css` still works — it points to the same file. Prefer the new `plugins.css` path for new code.
 
 #### Troubleshooting CSS import issues
 
@@ -63,7 +80,7 @@ If your bundler reports **"Cannot find module"** or fails to resolve the CSS imp
 - **For older webpack (v4)** — you may need to use the full path if your version doesn't support the `exports` field.
 
   ```js
-  import 'react-bootstrap-plugins/dist/css/datepicker.css'
+  import 'react-bootstrap-plugins/dist/css/plugins.css'
   ```
 
 - **For Next.js** — add the package to `transpilePackages` in `next.config.mjs` if not already present.
@@ -81,282 +98,32 @@ If your bundler reports **"Cannot find module"** or fails to resolve the CSS imp
 
 ---
 
-## Components
-
-### DatePicker
-
-A fully-featured date, time, and datetime picker with Bootstrap styling. Popover is rendered via React Portal — no z-index stacking issues with modals or sidebars.
-
-#### Import
-
-```js
-// Tree-shakeable single import (recommended)
-import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
-
-// Or barrel import
-import { DatePicker } from 'react-bootstrap-plugins'
-
-// Required CSS (import once, anywhere in your app)
-import 'react-bootstrap-plugins/css/datepicker.css'
-```
-
-#### Basic Usage
-
-```jsx
-import { useState } from 'react'
-import { DatePicker } from 'react-bootstrap-plugins'
-import 'react-bootstrap-plugins/css/datepicker.css'
-
-function MyForm() {
-  const [date, setDate] = useState(null)
-
-  return (
-    <DatePicker
-      value={date}
-      onChange={(e) => setDate(e.target.value)}
-      placeholderText="Pick a date"
-    />
-  )
-}
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `mode` | `'date'` \| `'time'` \| `'datetime'` | `'date'` | Picker mode |
-| `value` | `Date` \| `string` \| `null` | — | Currently selected value |
-| `selected` | `Date` \| `null` | — | Alias for `value` |
-| `onChange` | `(e) => void` | — | Synthetic event; `e.target.value` is formatted string |
-| `dateFormat` | `string` | — | Custom format. Tokens: `yyyy`, `MM`, `dd`, `hh`, `mm`, `aa` |
-| `placeholderText` | `string` | Auto | Placeholder when empty |
-| `size` | `'sm'` \| `'lg'` | — | Bootstrap input size variant |
-| `isClearable` | `boolean` | `false` | Show clear button |
-| `disabled` | `boolean` | `false` | Disable the input |
-| `minDate` | `Date` | — | Earliest selectable date |
-| `maxDate` | `Date` | — | Latest selectable date |
-| `timeIntervals` | `number` | `5` | Minute step in time picker |
-| `timezone` | `string` | `'Kampala'` | Timezone label |
-| `className` | `string` | — | Additional CSS classes on the input |
-| `id` | `string` | — | Input element ID |
-| `name` | `string` | — | Input name attribute |
-
-#### Examples
-
-**Date mode (default):**
-```jsx
-<DatePicker
-  name="dob"
-  value={birthDate}
-  onChange={(e) => setBirthDate(e.target.value)}
-  maxDate={new Date()}
-  isClearable
-/>
-// e.target.value → "2026-06-29"
-```
-
-**Time mode:**
-```jsx
-<DatePicker
-  mode="time"
-  value={startTime}
-  onChange={(e) => setStartTime(e.target.value)}
-  timeIntervals={15}
-/>
-// e.target.value → "02:30 PM"
-```
-
-**Datetime mode:**
-```jsx
-<DatePicker
-  mode="datetime"
-  value={appointmentDateTime}
-  onChange={(e) => setAppointmentDateTime(e.target.value)}
-  dateFormat="dd/MM/yyyy hh:mm aa"
-/>
-// e.target.value → "29/06/2026 02:30 PM"
-```
-
-**With Bootstrap form layout:**
-```jsx
-<div className="mb-3">
-  <label htmlFor="eventDate" className="form-label">Event Date</label>
-  <DatePicker
-    id="eventDate"
-    name="eventDate"
-    value={eventDate}
-    onChange={(e) => setEventDate(e.target.value)}
-    minDate={new Date()}
-    className="form-control-lg"
-  />
-</div>
-```
-
----
-
-### SearchSelect
-
-A filterable, searchable select dropdown. Supports both primitive arrays and object arrays with configurable label/value keys.
-
-#### Import
-
-```js
-import SearchSelect from 'react-bootstrap-plugins/SearchSelect'
-// or
-import { SearchSelect } from 'react-bootstrap-plugins'
-```
-
-#### Basic Usage
-
-**Primitive array (strings/numbers):**
-```jsx
-import { useState } from 'react'
-import { SearchSelect } from 'react-bootstrap-plugins'
-
-function FruitPicker() {
-  const [fruit, setFruit] = useState('')
-
-  return (
-    <SearchSelect
-      options={['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']}
-      placeholder="Choose a fruit..."
-      value={fruit}
-      onChange={(val) => setFruit(val)}
-    />
-  )
-}
-```
-
-**Object array with label/value mapping:**
-```jsx
-function UserPicker() {
-  const [userId, setUserId] = useState(null)
-
-  const users = [
-    { id: 101, fullName: 'Alice Johnson', email: 'alice@example.com' },
-    { id: 102, fullName: 'Bob Smith', email: 'bob@example.com' },
-    { id: 103, fullName: 'Charlie Brown', email: 'charlie@example.com' },
-  ]
-
-  return (
-    <SearchSelect
-      options={users}
-      labelKey="fullName"
-      valueKey="id"
-      placeholder="Select a user..."
-      value={userId}
-      onChange={(id) => setUserId(id)}
-    />
-  )
-}
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `options` | `Array<string\|number\|boolean\|object>` | `[]` | Selectable options |
-| `labelKey` | `string` | `'label'` | Key for display text (object options only) |
-| `valueKey` | `string` | `'value'` | Key for the value (object options only) |
-| `placeholder` | `string` | `'Select...'` | Placeholder text |
-| `value` | `any` | `null` | Currently selected value |
-| `onChange` | `(value: any) => void` | — | Called with selected value |
-| `id` | `string` | `'filterable-select'` | Input element ID |
-| `disabled` | `boolean` | `false` | Disable the input |
-| `className` | `string` | — | Additional CSS classes on wrapper |
-
-#### Inside Bootstrap Input Groups
-
-```jsx
-<div className="input-group mb-3">
-  <span className="input-group-text">Subject</span>
-  <SearchSelect
-    options={subjects}
-    labelKey="name"
-    valueKey="id"
-    placeholder="Search subject..."
-    value={subjectId}
-    onChange={setSubjectId}
-  />
-</div>
-```
-
----
-
-### Label
-
-A simple form label with a Bootstrap-styled required field indicator.
-
-#### Import
-
-```js
-import { Label } from 'react-bootstrap-plugins/Label'
-// or
-import { Label } from 'react-bootstrap-plugins'
-```
-
-#### Basic Usage
-
-```jsx
-import { Label } from 'react-bootstrap-plugins'
-
-<Label hf="studentName" label="Student Name" />
-// Renders: <label for="studentName">Student Name <b class="text-danger">*</b></label>
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `hf` | `string` | `'default'` | `htmlFor` attribute — matches input `id` |
-| `label` | `string` | `'Title'` | Label text |
-| `required` | `boolean` | `true` | Show red asterisk |
-| `className` | `string` | — | Additional CSS classes |
-
-#### Examples
-
-**With required indicator:**
-```jsx
-<Label hf="email" label="Email Address" required />
-```
-
-**Optional field (no asterisk):**
-```jsx
-<Label hf="middleName" label="Middle Name" required={false} />
-```
-
-**With Bootstrap grid:**
-```jsx
-<div className="mb-3 row">
-  <div className="col-sm-3">
-    <Label hf="phone" label="Phone Number" className="col-form-label" />
-  </div>
-  <div className="col-sm-9">
-    <input id="phone" type="tel" className="form-control" />
-  </div>
-</div>
-```
-
----
-
 ## Import Patterns
 
 All patterns are tree-shakeable. Your bundler will only include the code you actually import.
 
 ```js
-// Single component — smallest bundle
-import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
+// Single component — smallest bundle (default import)
+import DatePicker from 'react-bootstrap-plugins/DatePicker'
+import SearchSelect from 'react-bootstrap-plugins/SearchSelect'
+import Label from 'react-bootstrap-plugins/Label'
+import TableLoading from 'react-bootstrap-plugins/TableLoading'
 
-// Multiple named — tree-shaken
-import { DatePicker, Label } from 'react-bootstrap-plugins'
+// Single component — named import
+import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
+import { SearchSelect } from 'react-bootstrap-plugins/SearchSelect'
+import { Label } from 'react-bootstrap-plugins/Label'
+import { TableLoading } from 'react-bootstrap-plugins/TableLoading'
 
-// All components
-import { DatePicker, SearchSelect, Label } from 'react-bootstrap-plugins'
+// Multiple named — barrel, tree-shaken
+import { DatePicker, SearchSelect, Label, TableLoading } from 'react-bootstrap-plugins'
 
 // CSS (required for DatePicker)
-import 'react-bootstrap-plugins/css/datepicker.css'
+import 'react-bootstrap-plugins/css/plugins.css'
 ```
 
+Every component supports **both** default and named imports — use whichever fits your codebase conventions.
+
 ---
 
 ## Dark Mode
@@ -392,7 +159,8 @@ function App() {
 | `DatePicker` (with CSS) | ~5.5 KB |
 | `SearchSelect` | ~1.2 KB |
 | `Label` | ~0.3 KB |
-| All three (barrel) | ~6.5 KB |
+| `TableLoading` | ~0.2 KB |
+| All four (barrel) | ~6.7 KB |
 
 Measured with ESM, tree-shaken, minified, gzipped. Your actual size depends on your bundler configuration.
 
@@ -446,9 +214,10 @@ src/
 │   ├── DatePicker.jsx    Date/time/datetime picker
 │   ├── SearchSelect.jsx  Searchable select dropdown
 │   ├── Label.jsx         Form label
+│   ├── TableLoading.jsx  Table placeholder skeleton
 │   └── *.d.ts            TypeScript declarations
 └── css/
-    └── datepicker.css
+    └── plugins.css
 ```
 
 ---

package/dist/DatePicker.cjs

@@ -1,2 +1,2 @@
-'use strict';var chunk4ISYCPRB_cjs=require('./chunk-4ISYCPRB.cjs');require('./chunk-QQNPKA7A.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunk4ISYCPRB_cjs.a}});//# sourceMappingURL=DatePicker.cjs.map
-//# sourceMappingURL=DatePicker.cjs.map
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var chunkGZ2D7HTS_cjs=require('./chunk-GZ2D7HTS.cjs');require('./chunk-NPQQDBFB.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunkGZ2D7HTS_cjs.a}});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return chunkGZ2D7HTS_cjs.b}});//# sourceMappingURL=DatePicker.cjs.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJEYXRlUGlja2VyLmNqcyJ9

package/dist/DatePicker.d.cts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+interface DatePickerChangeEvent {
+    target: {
+        value: string | null;
+        name: string;
+        type: string;
+    };
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    nativeEvent: null;
+}
+interface DatePickerProps {
+    /** Picker mode (default 'date') */
+    mode?: 'date' | 'time' | 'datetime';
+    /** Currently selected Date (alias for value) */
+    selected?: Date | null;
+    /** Currently selected Date, ISO string, "hh:mm AA" time string, "YYYY-MM-DD hh:mm AA" datetime string, or timestamp */
+    value?: Date | string | number | null;
+    /** Synthetic event handler — e.target.value is a pre-formatted string */
+    onChange?: (e: DatePickerChangeEvent) => void;
+    /** Display format with tokens: yyyy, MM, dd, hh, mm, aa */
+    dateFormat?: string;
+    /** Placeholder text when empty */
+    placeholderText?: string;
+    /** Bootstrap size variant */
+    size?: 'sm' | 'lg';
+    /** Show a clear button on the input */
+    isClearable?: boolean;
+    /** Disable the input */
+    disabled?: boolean;
+    /** Earliest selectable date */
+    minDate?: Date;
+    /** Latest selectable date */
+    maxDate?: Date;
+    /** Minute step in the time list (default 5) */
+    timeIntervals?: number;
+    /** Timezone identifier (default 'Kampala') */
+    timezone?: string;
+    /** Additional CSS classes on the input */
+    className?: string;
+    /** Input element ID */
+    id?: string;
+    /** Input name attribute — surfaces as e.target.name in onChange */
+    name?: string;
+}
+/**
+ * Custom Bootstrap-styled date / time / datetime picker. Zero dependencies.
+ *
+ * **Important:** The accompanying CSS **must** be imported for the picker to render correctly:
+ * ```js
+ * import 'react-bootstrap-plugins/css/plugins.css'
+ * ```
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+
+export { DatePicker, type DatePickerChangeEvent, type DatePickerProps, DatePicker as default };

package/dist/DatePicker.d.ts

@@ -1,45 +1,57 @@
-import * as React from 'react'
+import * as React from 'react';
 
-export interface DatePickerProps {
-  /** Picker mode (default 'date') */
-  mode?: 'date' | 'time' | 'datetime'
-  /** Currently selected Date (alias for `value`) */
-  selected?: Date | null
-  /** Currently selected Date */
-  value?: Date | string | number | null
-  /**
-   * Synthetic event handler — `e.target.value` is a pre-formatted string:
-   * - date → `"YYYY-MM-DD"`
-   * - time → `"hh:mm AA"`
-   * - datetime → `"YYYY-MM-DD hh:mm AA"`
-   */
-  onChange?: (e: { target: { value: string | null; name: string; type: string } }) => void
-  /** Display format — tokens: yyyy, MM, dd, hh, mm, aa */
-  dateFormat?: string
-  /** Placeholder text when empty */
-  placeholderText?: string
-  /** Bootstrap size variant */
-  size?: 'sm' | 'lg'
-  /** Show a clear button on the input */
-  isClearable?: boolean
-  /** Disable the input */
-  disabled?: boolean
-  /** Earliest selectable date */
-  minDate?: Date
-  /** Latest selectable date */
-  maxDate?: Date
-  /** Minute step in the time list (default 5) */
-  timeIntervals?: number
-  /** Timezone identifier for display (default 'Kampala') */
-  timezone?: string
-  /** Additional CSS classes on the input */
-  className?: string
-  /** Input element ID */
-  id?: string
-  /** Input name attribute */
-  name?: string
+interface DatePickerChangeEvent {
+    target: {
+        value: string | null;
+        name: string;
+        type: string;
+    };
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    nativeEvent: null;
 }
+interface DatePickerProps {
+    /** Picker mode (default 'date') */
+    mode?: 'date' | 'time' | 'datetime';
+    /** Currently selected Date (alias for value) */
+    selected?: Date | null;
+    /** Currently selected Date, ISO string, "hh:mm AA" time string, "YYYY-MM-DD hh:mm AA" datetime string, or timestamp */
+    value?: Date | string | number | null;
+    /** Synthetic event handler — e.target.value is a pre-formatted string */
+    onChange?: (e: DatePickerChangeEvent) => void;
+    /** Display format with tokens: yyyy, MM, dd, hh, mm, aa */
+    dateFormat?: string;
+    /** Placeholder text when empty */
+    placeholderText?: string;
+    /** Bootstrap size variant */
+    size?: 'sm' | 'lg';
+    /** Show a clear button on the input */
+    isClearable?: boolean;
+    /** Disable the input */
+    disabled?: boolean;
+    /** Earliest selectable date */
+    minDate?: Date;
+    /** Latest selectable date */
+    maxDate?: Date;
+    /** Minute step in the time list (default 5) */
+    timeIntervals?: number;
+    /** Timezone identifier (default 'Kampala') */
+    timezone?: string;
+    /** Additional CSS classes on the input */
+    className?: string;
+    /** Input element ID */
+    id?: string;
+    /** Input name attribute — surfaces as e.target.name in onChange */
+    name?: string;
+}
+/**
+ * Custom Bootstrap-styled date / time / datetime picker. Zero dependencies.
+ *
+ * **Important:** The accompanying CSS **must** be imported for the picker to render correctly:
+ * ```js
+ * import 'react-bootstrap-plugins/css/plugins.css'
+ * ```
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 
-export const DatePicker: React.ForwardRefExoticComponent<
-  DatePickerProps & React.RefAttributes<HTMLInputElement>
->
+export { DatePicker, type DatePickerChangeEvent, type DatePickerProps, DatePicker as default };

package/dist/DatePicker.js

@@ -1,2 +1,2 @@
-export{a as DatePicker}from'./chunk-DIUGH74M.js';import'./chunk-46AJ2Q5H.js';//# sourceMappingURL=DatePicker.js.map
-//# sourceMappingURL=DatePicker.js.map
+export{a as DatePicker,b as default}from'./chunk-ES5ABK5L.js';import'./chunk-RR7TBRGI.js';//# sourceMappingURL=DatePicker.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJEYXRlUGlja2VyLmpzIn0=

package/dist/Label.cjs

@@ -1,2 +1,2 @@
-'use strict';var chunkCZV7QBHA_cjs=require('./chunk-CZV7QBHA.cjs');Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunkCZV7QBHA_cjs.a}});//# sourceMappingURL=Label.cjs.map
-//# sourceMappingURL=Label.cjs.map
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var chunk2Q4NZKMX_cjs=require('./chunk-2Q4NZKMX.cjs');Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunk2Q4NZKMX_cjs.a}});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return chunk2Q4NZKMX_cjs.b}});//# sourceMappingURL=Label.cjs.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJMYWJlbC5janMifQ==

package/dist/Label.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface LabelProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** htmlFor attribute — associates label with input ID (default 'default') */
+    hf?: string;
+    /** Whether to show the required asterisk (default true) */
+    required?: boolean;
+    /** Label text content (default 'Title') */
+    label?: string;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label, type LabelProps, Label as default };

package/dist/Label.d.ts

@@ -1,16 +1,15 @@
-import * as React from 'react'
+import * as React from 'react';
 
-export interface LabelProps {
-  /** Additional CSS classes */
-  className?: string
-  /** htmlFor attribute — associates label with input ID (default 'default') */
-  hf?: string
-  /** Whether to show the required asterisk (default true) */
-  required?: boolean
-  /** Label text content (default 'Title') */
-  label?: string
+interface LabelProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** htmlFor attribute — associates label with input ID (default 'default') */
+    hf?: string;
+    /** Whether to show the required asterisk (default true) */
+    required?: boolean;
+    /** Label text content (default 'Title') */
+    label?: string;
 }
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 
-export const Label: React.ForwardRefExoticComponent<
-  LabelProps & React.RefAttributes<HTMLLabelElement>
->
+export { Label, type LabelProps, Label as default };

package/dist/Label.js

@@ -1,2 +1,2 @@
-export{a as Label}from'./chunk-F3KMQZXU.js';//# sourceMappingURL=Label.js.map
-//# sourceMappingURL=Label.js.map
+export{a as Label,b as default}from'./chunk-HYB5IGJK.js';//# sourceMappingURL=Label.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJMYWJlbC5qcyJ9

package/dist/SearchSelect.cjs

@@ -1,2 +1,2 @@
-'use strict';var chunkHBS6VOGV_cjs=require('./chunk-HBS6VOGV.cjs');require('./chunk-QQNPKA7A.cjs');module.exports=chunkHBS6VOGV_cjs.a;//# sourceMappingURL=SearchSelect.cjs.map
-//# sourceMappingURL=SearchSelect.cjs.map
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var chunkAWU5XGMI_cjs=require('./chunk-AWU5XGMI.cjs');require('./chunk-NPQQDBFB.cjs');Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkAWU5XGMI_cjs.a}});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return chunkAWU5XGMI_cjs.b}});//# sourceMappingURL=SearchSelect.cjs.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJTZWFyY2hTZWxlY3QuY2pzIn0=

package/dist/SearchSelect.d.cts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+interface SearchSelectProps<T = unknown> {
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+    /** Selectable options — primitives (string|number|boolean) or objects */
+    options?: T[];
+    /** Key for display text when options are objects (default 'label') */
+    labelKey?: string;
+    /** Key for the value when options are objects (default 'value') */
+    valueKey?: string;
+    /** Placeholder text (default 'Select...') */
+    placeholder?: string;
+    /** Currently selected value */
+    value?: T | null;
+    /** Called with synthetic event; e.target.value is the selected value, e.target.name is the input name */
+    onChange?: (e: {
+        target: {
+            value: T | null;
+            name: string;
+        };
+    }) => void;
+    /** Input element ID */
+    id?: string;
+    /** Input name attribute — surfaces as e.target.name in onChange */
+    name?: string;
+    /** Disable the input */
+    disabled?: boolean;
+}
+/**
+ * A filterable, searchable select dropdown styled with Bootstrap 5.
+ * Supports both primitive arrays and object arrays with configurable label/value keys.
+ */
+interface SearchSelectComponent {
+    <T>(props: SearchSelectProps<T> & React.RefAttributes<HTMLDivElement>): React.ReactElement | null;
+    displayName?: string;
+}
+declare const SearchSelect: SearchSelectComponent;
+
+export { SearchSelect, type SearchSelectProps, SearchSelect as default };