react-bootstrap-plugins 1.0.0

package/src/components/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/src/components/Label.jsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+/**
+ * A simple Bootstrap-styled form label with an optional required indicator.
+ *
+ * @param {string}  [className]      - Additional CSS classes
+ * @param {string}  [hf='default']   - htmlFor attribute (associates label with input ID)
+ * @param {boolean} [required=true]  - Whether to show the required asterisk
+ * @param {string}  [label='Title']  - Label text content
+ */
+const Label = React.forwardRef(({ className, hf = 'default', required = true, label = 'Title' }, ref) => {
+  return (
+    <label htmlFor={hf} className={className} ref={ref}>
+      {label}{required ? <b className="text-danger">*</b> : ''}
+    </label>
+  )
+})
+
+Label.displayName = 'Label'
+
+export { Label }

package/src/components/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/src/components/SearchSelect.jsx

@@ -0,0 +1,152 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { cn } from '../lib/cn.js'
+
+/**
+ * A filterable, searchable select dropdown styled with Bootstrap 5.
+ * Supports both primitive arrays and object arrays with configurable label/value keys.
+ *
+ * @param {string}   [className]           - Additional CSS classes on the wrapper
+ * @param {Array<string|number|boolean|object>} [options=[]] - Selectable options (primitives or objects)
+ * @param {string}   [labelKey='label']    - Key for display text when options are objects
+ * @param {string}   [valueKey='value']    - Key for the value when options are objects
+ * @param {string}   [placeholder='Select...'] - Placeholder text
+ * @param {any}      [value=null]          - Currently selected value
+ * @param {(value: any) => void} [onChange] - Called with the selected value when user picks
+ * @param {string}   [id='filterable-select'] - Input element ID
+ * @param {boolean}  [disabled=false]      - Disable the input
+ */
+const SearchSelect = React.forwardRef(({
+  className,
+  options = [],
+  labelKey = 'label',
+  valueKey = 'value',
+  placeholder = 'Select...',
+  value = null,
+  onChange = null,
+  id = 'filterable-select',
+  disabled = false,
+  ...props
+}, ref) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
+  const wrapperRef = useRef(null)
+
+  // AUTO-DETECT: primitives vs objects
+  const isPrimitiveArray = options.length > 0 &&
+    (typeof options[0] === 'string' || typeof options[0] === 'number' || typeof options[0] === 'boolean')
+
+  const getLabel = (option) => {
+    if (isPrimitiveArray) return String(option)
+    return option?.[labelKey] || ''
+  }
+
+  const getValue = (option) => {
+    if (isPrimitiveArray) return option
+    return option?.[valueKey] ?? null
+  }
+
+  const selectedOption = options.find(opt => getValue(opt) === value)
+
+  // Sync input when value changes externally
+  useEffect(() => {
+    if (selectedOption !== undefined) {
+      setSearchTerm(getLabel(selectedOption))
+    } else {
+      setSearchTerm('')
+    }
+  }, [value, options, labelKey, valueKey])
+
+  // Filter options
+  const filteredOptions = options.filter(option =>
+    getLabel(option).toLowerCase().includes(searchTerm.toLowerCase())
+  )
+
+  // Click outside to close
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const handleSelect = (option) => {
+    const selectedValue = getValue(option)
+    setSearchTerm(getLabel(option))
+    setIsOpen(false)
+    if (onChange) onChange(selectedValue)
+  }
+
+  return (
+    <div
+      ref={(node) => {
+        wrapperRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
+      // flex-fill lets the wrapper participate in Bootstrap input-group flex layout
+      // rounded gives the wrapper a border-radius so the inner input can inherit it
+      // correctly when the input-group adjusts border-radius on adjacent items
+      className={cn('position-relative ', className)}
+      style={{ minWidth: 0 }}
+      {...props}
+    >
+      <input
+        id={id}
+        type="text"
+        className="form-select"
+        placeholder={placeholder}
+        value={searchTerm}
+        disabled={disabled}
+        onChange={(e) => {
+          setSearchTerm(e.target.value)
+          setIsOpen(true)
+        }}
+        onFocus={() => setIsOpen(true)}
+        style={{ cursor: 'text', borderRadius: 'inherit' }}
+      />
+
+      {isOpen && !disabled && (
+        <ul
+          className="dropdown-menu show w-100 overflow-x-hidden"
+          style={{
+            maxHeight: '200px',
+            marginTop: '2px',
+            zIndex: 1050,
+            borderRadius: '0.375rem',
+            boxShadow: '0 0.5rem 1rem rgba(0,0,0,0.15)',
+          }}
+        >
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((option, index) => {
+              const key = getValue(option) ?? `option-${index}`
+              return (
+                <li key={key}>
+                  <button
+                    type="button"
+                    className="dropdown-item text-truncate"
+                    onClick={() => handleSelect(option)}
+                  >
+                    {getLabel(option)}
+                  </button>
+                </li>
+              )
+            })
+          ) : (
+            <li>
+              <span className="dropdown-item disabled text-muted" style={{ cursor: 'default' }}>
+                No options found
+              </span>
+            </li>
+          )}
+        </ul>
+      )}
+    </div>
+  )
+})
+
+SearchSelect.displayName = 'SearchSelect'
+
+export default SearchSelect

package/src/css/datepicker-bootstrap.css

@@ -0,0 +1,299 @@
+/* ==========================================================================
+   Custom DatePicker — Bootstrap 5 design tokens
+   Zero dependencies.  Calendar grid + time picker + year picker + datetime combo.
+   Popover is portaled to document.body — positioning is set inline by JS.
+   ========================================================================== */
+
+/* --- Popover container --- */
+.datepicker-popover {
+  border-radius: var(--bs-border-radius, 0.375rem);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.datepicker-popover--wide {
+  min-width: 420px;
+}
+
+/* --- Calendar panel --- */
+.datepicker-calendar {
+  min-width: 260px;
+}
+
+/* 7-column day-of-week header + day grid */
+.datepicker-days-header,
+.datepicker-days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+/* Day-of-week label */
+.datepicker-day-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color, #6c757d);
+  text-transform: uppercase;
+  text-align: center;
+  padding: 2px 0;
+  width: 34px;
+}
+
+/* Individual day cell */
+.datepicker-day {
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-body-color, #212529);
+  background: transparent;
+  border: none;
+  border-radius: var(--bs-border-radius-sm, 0.25rem);
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected) {
+  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
+}
+
+/* Today */
+.datepicker-day--today {
+  font-weight: 700;
+  border: 1px solid var(--bs-border-color, #dee2e6);
+}
+
+/* Selected (Bootstrap primary) */
+.datepicker-day--selected {
+  background-color: var(--bs-primary, #0d6efd) !important;
+  color: #fff !important;
+  font-weight: 600;
+}
+
+/* Outside current month */
+.datepicker-day--outside {
+  color: var(--bs-tertiary-color, #adb5bd);
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+/* Disabled (outside min/max range) */
+.datepicker-day--disabled {
+  color: var(--bs-tertiary-color, #adb5bd);
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* --- Year picker --- */
+.datepicker-year-picker {
+  min-width: 260px;
+}
+
+/* 4-column year grid */
+.datepicker-year-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.datepicker-year-cell {
+  font-size: 0.85rem;
+  padding: 6px 4px;
+  text-align: center;
+}
+
+/* --- Time panel --- */
+.datepicker-time {
+  min-width: 120px;
+}
+
+/* Three-column scrollable time picker */
+.datepicker-time-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
+  width: 52px;
+}
+
+.datepicker-time-col-label {
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color, #6c757d);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 2px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.datepicker-time-col-scroll {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  overflow-y: scroll;
+  scrollbar-width: none;          /* Firefox */
+  -ms-overflow-style: none;       /* IE/Edge */
+  height: 220px;
+  scroll-behavior: smooth;
+}
+
+.datepicker-time-col-scroll::-webkit-scrollbar {
+  display: none;                  /* Chrome/Safari/Opera */
+}
+
+.datepicker-time-item {
+  width: 44px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--bs-body-color, #212529);
+  background: transparent;
+  border: none;
+  border-radius: var(--bs-border-radius-sm, 0.25rem);
+  cursor: pointer;
+  transition: background-color 0.1s ease, color 0.1s ease;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.datepicker-time-item:hover {
+  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
+}
+
+.datepicker-time-item.active {
+  background-color: var(--bs-primary, #0d6efd);
+  color: #fff;
+  font-weight: 600;
+}
+
+/* AM/PM items — slightly taller since only 2 */
+.datepicker-time-item--ampm {
+  height: 36px;
+  width: 46px;
+  font-size: 0.78rem;
+}
+
+.datepicker-time-separator {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--bs-body-color, #212529);
+  align-self: center;
+  margin-top: 14px;
+  flex: 0 0 auto;
+}
+
+/* Footer bar (Today/Now + Clear) */
+.datepicker-footer {
+  border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
+  border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
+}
+
+/* --- Dark mode --- */
+[data-bs-theme="dark"] .datepicker-popover {
+  background-color: var(--bs-body-bg, #212529);
+  border-color: var(--bs-border-color, #495057);
+}
+
+[data-bs-theme="dark"] .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected) {
+  background-color: var(--bs-primary-bg-subtle, #2c3e50);
+}
+
+[data-bs-theme="dark"] .datepicker-time-item:hover {
+  background-color: var(--bs-primary-bg-subtle, #2c3e50);
+}
+
+[data-bs-theme="dark"] .datepicker-time-item.active {
+  background-color: var(--bs-primary, #0d6efd);
+  color: #fff;
+}
+
+[data-bs-theme="dark"] .datepicker-footer {
+  border-top-color: var(--bs-border-color, #495057);
+}
+
+/* ==========================================================================
+   Mobile responsive — adapts layout and sizing for small screens
+   ========================================================================== */
+
+@media (max-width: 575.98px) {
+  /* Popover: never wider than the viewport */
+  .datepicker-popover {
+    max-width: calc(100vw - 8px) !important;
+    overflow-x: hidden;
+  }
+
+  /* Stack calendar + time vertically in datetime mode */
+  .datepicker-popover--wide .d-flex.flex-row {
+    flex-direction: column !important;
+  }
+
+  /* Hide vertical divider between calendar and time */
+  .datepicker-popover--wide .vr {
+    display: none;
+  }
+
+  /* Slightly smaller day cells to fit narrow screens */
+  .datepicker-day {
+    width: 28px;
+    height: 28px;
+    font-size: 0.72rem;
+  }
+
+  .datepicker-day-label {
+    width: 28px;
+    font-size: 0.62rem;
+  }
+
+  /* Reduce calendar min-width */
+  .datepicker-calendar,
+  .datepicker-year-picker {
+    min-width: 210px;
+  }
+
+  /* Time columns — stack more compactly */
+  .datepicker-time-col-scroll {
+    height: 200px;
+  }
+
+  .datepicker-time-item {
+    width: 38px;
+    height: 26px;
+    font-size: 0.75rem;
+  }
+
+  .datepicker-time-item--ampm {
+    width: 40px;
+    height: 32px;
+  }
+
+  .datepicker-time-separator {
+    font-size: 1rem;
+    margin-top: 12px;
+  }
+
+  /* Increase touch target for footer buttons */
+  .datepicker-footer .btn {
+    font-size: 0.8rem;
+    padding: 6px 8px;
+    min-height: 34px;
+  }
+
+  /* Year grid cells — slightly roomier for tap */
+  .datepicker-year-cell {
+    font-size: 0.8rem;
+    padding: 8px 4px;
+    min-height: 34px;
+  }
+}

package/src/index.js

@@ -0,0 +1,15 @@
+/**
+ * react-bootstrap-plugins — Production-grade Bootstrap 5 UI components for React
+ *
+ * @example
+ * // Tree-shakeable: import only what you need
+ * import { DatePicker, Label } from 'react-bootstrap-plugins'
+ *
+ * // Or individual entry points for maximum tree-shaking
+ * import DatePicker from 'react-bootstrap-plugins/DatePicker'
+ * import SearchSelect from 'react-bootstrap-plugins/SearchSelect'
+ */
+
+export { DatePicker } from './components/DatePicker.jsx'
+export { default as SearchSelect } from './components/SearchSelect.jsx'
+export { Label } from './components/Label.jsx'

package/src/lib/cn.js

@@ -0,0 +1,35 @@
+/**
+ * Utility for conditionally joining CSS class names together.
+ * Filters out falsy values and joins with space.
+ *
+ * @param  {...any} args - Class name strings, objects, or arrays
+ * @returns {string} Joined class string
+ *
+ * @example
+ * cn('btn', isActive && 'btn-primary', 'px-3')
+ * // => 'btn btn-primary px-3'
+ *
+ * @example
+ * cn('base-class', { 'active': isActive, 'disabled': isDisabled })
+ * // => 'base-class active'  (when isActive=true, isDisabled=false)
+ */
+export function cn(...args) {
+  const classes = []
+
+  for (const arg of args) {
+    if (!arg) continue
+
+    if (typeof arg === 'string') {
+      classes.push(arg)
+    } else if (Array.isArray(arg)) {
+      const nested = cn(...arg)
+      if (nested) classes.push(nested)
+    } else if (typeof arg === 'object') {
+      for (const [key, value] of Object.entries(arg)) {
+        if (value) classes.push(key)
+      }
+    }
+  }
+
+  return classes.join(' ')
+}