react-bootstrap-plugins 1.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,426 @@
+# react-bootstrap-plugins
+
+> Production-grade Bootstrap 5 UI components for React 18+. Zero runtime dependencies. Tree-shakeable.
+
+[![license](https://img.shields.io/npm/l/react-bootstrap-plugins)](./LICENSE)
+
+---
+
+## Features
+
+- 🎯 **Zero runtime dependencies** — only React and React DOM as peer dependencies
+- 🌳 **Tree-shakeable** — import only what you need; unused components are stripped at build time
+- 🎨 **Bootstrap 5 native** — uses CSS custom properties (`--bs-*`), respects dark mode via `[data-bs-theme="dark"]`
+- 📦 **ESM + CJS dual format** — works with any bundler (Vite, webpack, Turbopack, Rollup)
+- 🔒 **TypeScript ready** — full `.d.ts` declarations included
+- ♿ **Accessible** — ARIA attributes, keyboard navigation, screen-reader friendly
+- 📱 **Responsive** — mobile-optimized layouts for all components
+
+## Installation
+
+```bash
+npm install react-bootstrap-plugins
+# or
+pnpm add react-bootstrap-plugins
+# or
+yarn add react-bootstrap-plugins
+```
+
+### Peer Dependencies
+
+Make sure you have React 18+ and Bootstrap 5 CSS loaded:
+
+```bash
+npm install react react-dom bootstrap
+```
+
+```js
+// In your app entry point
+import 'bootstrap/dist/css/bootstrap.min.css'
+```
+
+---
+
+## 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'
+
+// Multiple named — tree-shaken
+import { DatePicker, Label } from 'react-bootstrap-plugins'
+
+// All components
+import { DatePicker, SearchSelect, Label } from 'react-bootstrap-plugins'
+
+// CSS (required for DatePicker)
+import 'react-bootstrap-plugins/css/datepicker.css'
+```
+
+---
+
+## Dark Mode
+
+All components respect Bootstrap 5's dark mode. Set `data-bs-theme="dark"` on any parent element:
+
+```html
+<html data-bs-theme="dark">
+  <!-- DatePicker popover, dropdown, and all styling adapt automatically -->
+</html>
+```
+
+Or toggle dynamically:
+
+```jsx
+function App() {
+  const [theme, setTheme] = useState('light')
+
+  return (
+    <div data-bs-theme={theme}>
+      <DatePicker value={date} onChange={handleDate} />
+    </div>
+  )
+}
+```
+
+---
+
+## Bundle Size
+
+| Import | Approx. Size (min+gzip) |
+|---|---|
+| `DatePicker` (with CSS) | ~5.5 KB |
+| `SearchSelect` | ~1.2 KB |
+| `Label` | ~0.3 KB |
+| All three (barrel) | ~6.5 KB |
+
+Measured with ESM, tree-shaken, minified, gzipped. Your actual size depends on your bundler configuration.
+
+---
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 90+
+- Safari 15+
+- Edge 90+
+
+Requires `ResizeObserver` (all modern browsers), CSS Grid, and CSS Custom Properties.
+
+---
+
+## Security
+
+- All user content rendered as React text nodes — no raw HTML injection surfaces
+- No dynamic code evaluation or runtime code generation
+- DatePicker input is `readOnly` — displayed value is always the formatted date, never raw user input
+- Synthetic events use safe, explicit value construction
+- Popover content is isolated from the input DOM tree via React Portal
+
+Report security issues to: security@allios.app
+
+---
+
+## Development
+
+```bash
+# Clone and install
+git clone https://github.com/allios/react-bootstrap-plugins.git
+cd react-bootstrap-plugins
+pnpm install
+
+# Build
+pnpm run build
+
+# Watch mode (rebuild on changes)
+pnpm run dev
+```
+
+### Project Structure
+
+```
+src/
+├── index.js              Barrel export
+├── lib/cn.js             Internal classname utility
+├── components/
+│   ├── DatePicker.jsx    Date/time/datetime picker
+│   ├── SearchSelect.jsx  Searchable select dropdown
+│   ├── Label.jsx         Form label
+│   └── *.d.ts            TypeScript declarations
+└── css/
+    └── datepicker-bootstrap.css
+```
+
+---
+
+## License
+
+MIT © [Tumwesigye Robert](https://allios.app)
+
+---
+
+## Related
+
+- [Bootstrap 5](https://getbootstrap.com/) — CSS framework this package integrates with
+- [React](https://react.dev/) — UI library
+- [AlliOs](https://allios.app) — Multi-tenant SaaS ecosystem this package originated from

package/dist/DatePicker.cjs

@@ -0,0 +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

package/dist/DatePicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"DatePicker.cjs"}

package/dist/DatePicker.d.ts

@@ -0,0 +1,45 @@
+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
+}
+
+export const DatePicker: React.ForwardRefExoticComponent<
+  DatePickerProps & React.RefAttributes<HTMLInputElement>
+>

package/dist/DatePicker.js

@@ -0,0 +1,2 @@
+export{a as DatePicker}from'./chunk-DIUGH74M.js';import'./chunk-46AJ2Q5H.js';//# sourceMappingURL=DatePicker.js.map
+//# sourceMappingURL=DatePicker.js.map

package/dist/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"DatePicker.js"}

package/dist/Label.cjs

@@ -0,0 +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

package/dist/Label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Label.cjs"}

package/dist/Label.d.ts

@@ -0,0 +1,16 @@
+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
+}
+
+export const Label: React.ForwardRefExoticComponent<
+  LabelProps & React.RefAttributes<HTMLLabelElement>
+>

package/dist/Label.js

@@ -0,0 +1,2 @@
+export{a as Label}from'./chunk-F3KMQZXU.js';//# sourceMappingURL=Label.js.map
+//# sourceMappingURL=Label.js.map

package/dist/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Label.js"}

package/dist/SearchSelect.cjs

@@ -0,0 +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

package/dist/SearchSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"SearchSelect.cjs"}

package/dist/SearchSelect.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+export interface SearchSelectProps<T = any> {
+  /** Additional CSS classes on the wrapper */
+  className?: string
+  /** Selectable options — primitives (string/number/boolean) or objects */
+  options?: T[] | Array<string | number | boolean>
+  /** 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?: any
+  /** Called with the selected value when user picks */
+  onChange?: (value: any) => void
+  /** Input element ID */
+  id?: string
+  /** Disable the input */
+  disabled?: boolean
+}
+
+declare const SearchSelect: React.ForwardRefExoticComponent<
+  SearchSelectProps & React.RefAttributes<HTMLDivElement>
+>
+
+export default SearchSelect

package/dist/SearchSelect.js

@@ -0,0 +1,2 @@
+export{a as default}from'./chunk-NOGRIWSU.js';import'./chunk-46AJ2Q5H.js';//# sourceMappingURL=SearchSelect.js.map
+//# sourceMappingURL=SearchSelect.js.map

package/dist/SearchSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"SearchSelect.js"}

package/dist/chunk-46AJ2Q5H.js

@@ -0,0 +1,2 @@
+function f(...t){let s=[];for(let e of t)if(e){if(typeof e=="string")s.push(e);else if(Array.isArray(e)){let o=f(...e);o&&s.push(o);}else if(typeof e=="object")for(let[o,n]of Object.entries(e))n&&s.push(o);}return s.join(" ")}export{f as a};//# sourceMappingURL=chunk-46AJ2Q5H.js.map
+//# sourceMappingURL=chunk-46AJ2Q5H.js.map

package/dist/chunk-46AJ2Q5H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.js"],"names":["cn","args","classes","arg","nested","key","value"],"mappings":"AAeO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAM,CAC1B,IAAMC,CAAAA,CAAU,EAAC,CAEjB,IAAA,IAAWC,CAAAA,IAAOF,CAAAA,CAChB,GAAKE,CAAAA,CAAAA,CAEL,GAAI,OAAOA,CAAAA,EAAQ,QAAA,CACjBD,CAAAA,CAAQ,IAAA,CAAKC,CAAG,CAAA,CAAA,KAAA,GACP,KAAA,CAAM,OAAA,CAAQA,CAAG,CAAA,CAAG,CAC7B,IAAMC,CAAAA,CAASJ,CAAAA,CAAG,GAAGG,CAAG,CAAA,CACpBC,CAAAA,EAAQF,CAAAA,CAAQ,IAAA,CAAKE,CAAM,EACjC,CAAA,KAAA,GAAW,OAAOD,CAAAA,EAAQ,QAAA,CACxB,IAAA,GAAW,CAACE,CAAAA,CAAKC,CAAK,CAAA,GAAK,MAAA,CAAO,OAAA,CAAQH,CAAG,CAAA,CACvCG,CAAAA,EAAOJ,CAAAA,CAAQ,IAAA,CAAKG,CAAG,EAAA,CAKjC,OAAOH,CAAAA,CAAQ,IAAA,CAAK,GAAG,CACzB","file":"chunk-46AJ2Q5H.js","sourcesContent":["/**\n * Utility for conditionally joining CSS class names together.\n * Filters out falsy values and joins with space.\n *\n * @param  {...any} args - Class name strings, objects, or arrays\n * @returns {string} Joined class string\n *\n * @example\n * cn('btn', isActive && 'btn-primary', 'px-3')\n * // => 'btn btn-primary px-3'\n *\n * @example\n * cn('base-class', { 'active': isActive, 'disabled': isDisabled })\n * // => 'base-class active'  (when isActive=true, isDisabled=false)\n */\nexport function cn(...args) {\n  const classes = []\n\n  for (const arg of args) {\n    if (!arg) continue\n\n    if (typeof arg === 'string') {\n      classes.push(arg)\n    } else if (Array.isArray(arg)) {\n      const nested = cn(...arg)\n      if (nested) classes.push(nested)\n    } else if (typeof arg === 'object') {\n      for (const [key, value] of Object.entries(arg)) {\n        if (value) classes.push(key)\n      }\n    }\n  }\n\n  return classes.join(' ')\n}\n"]}

package/dist/chunk-4ISYCPRB.cjs

@@ -0,0 +1,2 @@
+'use strict';var chunkQQNPKA7A_cjs=require('./chunk-QQNPKA7A.cjs'),i=require('react'),reactDom=require('react-dom'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var i__namespace=/*#__PURE__*/_interopNamespace(i);var Ye=["Su","Mo","Tu","We","Th","Fr","Sa"],Ce=["January","February","March","April","May","June","July","August","September","October","November","December"],Ee=Array.from({length:60},(n,t)=>t),g=12,V=(n,t)=>new Date(n,t+1,0).getDate(),ne=(n,t)=>n&&t&&n.getFullYear()===t.getFullYear()&&n.getMonth()===t.getMonth()&&n.getDate()===t.getDate(),Ae=(n,t,r)=>!(t&&n<new Date(t.getFullYear(),t.getMonth(),t.getDate())||r&&n>new Date(r.getFullYear(),r.getMonth(),r.getDate())),Ie=(n,t)=>{let r=new Date(n,t,1).getDay(),m=V(n,t),p=[],b=V(n,t-1);for(let d=r-1;d>=0;d--){let D=b-d;p.push({day:D,date:new Date(n,t-1,D),isOutside:true});}for(let d=1;d<=m;d++)p.push({day:d,date:new Date(n,t,d),isOutside:false});let y=42-p.length;for(let d=1;d<=y;d++)p.push({day:d,date:new Date(n,t+1,d),isOutside:true});return p},L=(n,t,r)=>{if(!n||isNaN(n.getTime()))return "";let m=n.getFullYear(),p=String(n.getMonth()+1).padStart(2,"0"),b=String(n.getDate()).padStart(2,"0"),y=n.getHours(),d=String(n.getMinutes()).padStart(2,"0"),D=y>=12?"PM":"AM";y=y%12||12;let k=String(y).padStart(2,"0");if(r)return r.replace("yyyy",m).replace("MM",p).replace("dd",b).replace("hh",k).replace("mm",d).replace("aa",D);switch(t){case "time":return `${k}:${d} ${D}`;case "datetime":return `${m}-${p}-${b} ${k}:${d} ${D}`;default:return `${m}-${p}-${b}`}},O=(n,t,r="date")=>({target:{value:n,name:t,type:r},preventDefault:()=>{},stopPropagation:()=>{},nativeEvent:null}),Te={date:300,time:300,datetime:400,year:250},Fe=n=>{if(!n)return document.documentElement;let t=n.parentElement;for(;t;){let r=window.getComputedStyle(t),m=r.overflowY||r.overflow;if(m==="auto"||m==="scroll")return t;t=t.parentElement;}return document.documentElement},Oe=(n,t)=>{if(!n)return {};let r=n.getBoundingClientRect(),m=t||300,p=window.innerHeight-r.bottom,b=r.top,y=p<m&&b>p,d=Math.max(r.width,window.innerWidth<576?220:260);return {position:"fixed",top:y?Math.max(4,r.top-m-4):r.bottom+4,left:Math.max(4,Math.min(r.left,window.innerWidth-d-4)),minWidth:d,maxWidth:window.innerWidth-8,zIndex:1070}},$e=i__namespace.forwardRef(({className:n,mode:t="date",selected:r,value:m,onChange:p,dateFormat:b,placeholderText:y,size:d,isClearable:D=false,disabled:k=false,minDate:q,maxDate:z,timeIntervals:We=5,timezone:_e="Kampala",id:se,name:N,...re},$)=>{let ie=e=>{if(!e)return null;if(e instanceof Date)return isNaN(e.getTime())?null:e;if(typeof e=="string"||typeof e=="number"){let a=new Date(e);if(!isNaN(a.getTime()))return a;if(typeof e=="string"){let l=e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(l){let c=parseInt(l[1],10),h=parseInt(l[2],10),_=l[3].toUpperCase();c===12&&_==="AM"&&(c=0),c!==12&&_==="PM"&&(c+=12);let X=new Date;return new Date(X.getFullYear(),X.getMonth(),X.getDate(),c,h,0,0)}let u=e.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(u){let c=parseInt(u[4],10),h=parseInt(u[5],10),_=u[6].toUpperCase();return c===12&&_==="AM"&&(c=0),c!==12&&_==="PM"&&(c+=12),new Date(parseInt(u[1]),parseInt(u[2])-1,parseInt(u[3]),c,h,0,0)}}return null}return null},o=i__namespace.useMemo(()=>ie(r??m),[r instanceof Date?r.getTime():r,m instanceof Date?m.getTime():m]),Z=t==="date"||t==="datetime",S=t==="time"||t==="datetime",[R,I]=i__namespace.useState(false),[P,K]=i__namespace.useState(()=>o?o.getFullYear():new Date().getFullYear()),[v,J]=i__namespace.useState(()=>o?o.getMonth():new Date().getMonth()),[w,x]=i__namespace.useState(o),[Y,ee]=i__namespace.useState(()=>o&&o.getHours()%12||12),[C,te]=i__namespace.useState(()=>o?o.getMinutes():0),[E,ae]=i__namespace.useState(()=>o&&o.getHours()>=12?"PM":"AM"),[U,T]=i__namespace.useState(false),[j,B]=i__namespace.useState(()=>Math.floor((o?o.getFullYear():new Date().getFullYear())/g)*g),[oe,ce]=i__namespace.useState({}),F=i__namespace.useRef(null),H=i__namespace.useRef(null),G=i__namespace.useRef(null);i__namespace.useEffect(()=>{let e=document.createElement("div");return e.className="datepicker-portal-root",document.body.appendChild(e),G.current=e,()=>{e.parentNode&&document.body.removeChild(e),G.current=null;}},[]),i__namespace.useEffect(()=>{o&&!isNaN(o.getTime())?(x(o),K(o.getFullYear()),J(o.getMonth()),ee(o.getHours()%12||12),te(o.getMinutes()),ae(o.getHours()>=12?"PM":"AM"),B(Math.floor(o.getFullYear()/g)*g)):x(null);},[o]),i__namespace.useEffect(()=>{if(!R)return;let e=()=>H.current?H.current.getBoundingClientRect().height:Te[U?"year":t]||300,a=Fe(F.current),l=()=>{requestAnimationFrame(()=>{ce(Oe(F.current,e()));});};return l(),a.addEventListener("scroll",l,{passive:true}),window.addEventListener("resize",l),()=>{a.removeEventListener("scroll",l),window.removeEventListener("resize",l);}},[R,t,U]),i__namespace.useEffect(()=>{if(!R)return;let e=a=>{H.current&&!H.current.contains(a.target)&&F.current&&!F.current.contains(a.target)&&(I(false),T(false));};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[R]);let A=(e,a,l,u)=>{let c=new Date(e),h=a%12;return u==="PM"&&(h+=12),h===12&&u==="AM"&&(h=0),c.setHours(h,l,0,0),c},W=e=>{if(!e||isNaN(e.getTime()))return;let a=L(e,t,b);p?.(O(a,N,t));},le=e=>{if(!e){p?.(O(null,N,t)),I(false),T(false);return}W(e),t==="date"&&(I(false),T(false));},de=e=>{if(x(e),t==="date")le(e);else if(t==="datetime"){let a=A(e,Y,C,E);W(a);}},ue=Ie(P,v),pe=()=>{let e=P,a=v;v===0?(e=P-1,a=11):a=v-1,K(e),J(a);let l=w||new Date,u=V(e,a),c=new Date(e,a,Math.min(l.getDate(),u));x(c),W(S?A(c,Y,C,E):c);},me=()=>{let e=P,a=v;v===11?(e=P+1,a=0):a=v+1,K(e),J(a);let l=w||new Date,u=V(e,a),c=new Date(e,a,Math.min(l.getDate(),u));x(c),W(S?A(c,Y,C,E):c);},fe=new Date,be=q?new Date(q.getFullYear(),q.getMonth(),q.getDate()):null,ge=z?new Date(z.getFullYear(),z.getMonth(),z.getDate()):null,ye=e=>{if(ee(e),S){let a=A(w||new Date,e,C,E);p?.(O(L(a,t,b),N,t));}},ve=e=>{if(te(e),S){let a=A(w||new Date,Y,e,E);p?.(O(L(a,t,b),N,t));}},we=e=>{if(ae(e),S){let a=A(w||new Date,Y,C,e);p?.(O(L(a,t,b),N,t));}},he=()=>{B(Math.floor(P/g)*g),T(true);},Me=e=>{K(e),T(false);let a=w||new Date,l=V(e,v),u=new Date(e,v,Math.min(a.getDate(),l));x(u),W(S?A(u,Y,C,E):u);},Q=Math.floor(j/g)*g,De=Array.from({length:g},(e,a)=>Q+a),ke=e=>{e.stopPropagation(),x(null),p?.(O(null,N));},Ne=e=>{e.key==="Escape"&&(I(false),T(false),F.current?.blur()),(e.key==="ArrowDown"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),I(true));},Se=i__namespace.useCallback(e=>{F.current=e,typeof $=="function"?$(e):$&&($.current=e);},[$]),Re=y??(t==="time"?"Select time":t==="datetime"?"Select date & time":"Select date"),Pe=jsxRuntime.jsxs("div",{ref:H,className:chunkQQNPKA7A_cjs.a("datepicker-popover card border shadow-sm",t==="datetime"&&"datepicker-popover--wide"),style:oe,children:[U&&Z&&jsxRuntime.jsxs("div",{className:"datepicker-year-picker p-3",children:[jsxRuntime.jsxs("div",{className:"d-flex align-items-center justify-content-between mb-2",children:[jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:()=>B(j-g),"aria-label":"Previous years",children:"\u2039"}),jsxRuntime.jsxs("span",{className:"fw-semibold small",children:[Q," \u2013 ",Q+g-1]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:()=>B(j+g),"aria-label":"Next years",children:"\u203A"})]}),jsxRuntime.jsx("div",{className:"datepicker-year-grid",children:De.map(e=>{let a=e===new Date().getFullYear(),l=w&&e===w.getFullYear();return jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-year-cell btn btn-sm",l&&"btn-primary",!l&&a&&"btn-outline-primary",!l&&!a&&"btn-light border"),onClick:()=>Me(e),children:e},e)})})]}),!U&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs("div",{className:chunkQQNPKA7A_cjs.a("d-flex",t==="datetime"?"flex-row":"flex-column"),children:[Z&&jsxRuntime.jsxs("div",{className:"datepicker-calendar p-2",children:[jsxRuntime.jsxs("div",{className:"d-flex align-items-center justify-content-between mb-2",children:[jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:pe,"aria-label":"Previous month",children:"\u2039"}),jsxRuntime.jsxs("div",{className:"d-flex align-items-center gap-1",children:[jsxRuntime.jsx("span",{className:"fw-semibold small",children:Ce[v]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-link text-decoration-none text-primary fw-semibold small p-0",onClick:he,"aria-label":"Choose year",children:P})]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:me,"aria-label":"Next month",children:"\u203A"})]}),jsxRuntime.jsx("div",{className:"datepicker-days-header",children:Ye.map(e=>jsxRuntime.jsx("div",{className:"datepicker-day-label",children:e},e))}),jsxRuntime.jsx("div",{className:"datepicker-days-grid",children:ue.map((e,a)=>{let l=ne(e.date,fe),u=w&&ne(e.date,w),c=Ae(e.date,be,ge),h=e.isOutside||!c;return jsxRuntime.jsx("button",{type:"button",disabled:h,className:chunkQQNPKA7A_cjs.a("datepicker-day",l&&"datepicker-day--today",u&&"datepicker-day--selected",e.isOutside&&"datepicker-day--outside",!c&&"datepicker-day--disabled"),onClick:()=>de(e.date),tabIndex:e.isOutside?-1:0,children:e.day},a)})})]}),t==="datetime"&&jsxRuntime.jsx("div",{className:"vr mx-1 my-2"}),S&&jsxRuntime.jsxs("div",{className:"datepicker-time p-2 d-flex flex-column",style:{minWidth:180},children:[t==="datetime"&&jsxRuntime.jsx("div",{className:"small fw-semibold text-muted text-center mb-1",children:"Time"}),jsxRuntime.jsxs("div",{className:"d-flex justify-content-center gap-2",children:[jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"Hour"}),jsxRuntime.jsx("div",{className:"datepicker-time-col-scroll",children:Array.from({length:12},(e,a)=>a+1).map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item",e===Y&&"active"),onClick:()=>ye(e),children:String(e).padStart(2,"0")},e))})]}),jsxRuntime.jsx("span",{className:"datepicker-time-separator",children:":"}),jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"Min"}),jsxRuntime.jsx("div",{className:"datepicker-time-col-scroll",children:Ee.map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item",e===C&&"active"),onClick:()=>ve(e),children:String(e).padStart(2,"0")},e))})]}),jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"\xA0"}),jsxRuntime.jsx("div",{className:"d-flex flex-column gap-1 mt-1",children:["AM","PM"].map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item","datepicker-time-item--ampm",E===e&&"active"),onClick:()=>we(e),children:e},e))})]})]})]})]})})]});return jsxRuntime.jsxs("div",{className:"position-relative d-inline-block w-100",style:{minWidth:0},children:[jsxRuntime.jsxs("div",{className:"position-relative",children:[jsxRuntime.jsx("input",{ref:Se,id:se,name:N,type:"text",readOnly:true,disabled:k,className:chunkQQNPKA7A_cjs.a("form-control",d==="sm"&&"form-control-sm",d==="lg"&&"form-control-lg","pe-5",n),placeholder:Re,value:L(o,t,b),onClick:()=>!k&&I(!R),onKeyDown:Ne,"aria-haspopup":"dialog","aria-expanded":R,autoComplete:"off",...re}),D&&o&&!k&&jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-link position-absolute top-50 end-0 translate-middle-y pe-2 text-secondary",style:{zIndex:2},onClick:ke,tabIndex:-1,"aria-label":"Clear",children:"\xD7"})]}),R&&!k&&G.current&&reactDom.createPortal(Pe,G.current)]})});$e.displayName="DatePicker";exports.a=$e;//# sourceMappingURL=chunk-4ISYCPRB.cjs.map
+//# sourceMappingURL=chunk-4ISYCPRB.cjs.map