react-bootstrap-plugins 1.0.5 → 2.1.0

package/src/components/Label.d.ts

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

@@ -1,22 +0,0 @@
-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 }
-export default Label

package/src/components/SearchSelect.d.ts

@@ -1,31 +0,0 @@
-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 synthetic event; e.target.value is the selected value, e.target.name is the input name */
-  onChange?: (e: { target: { value: any; 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
-}
-
-declare const SearchSelect: React.ForwardRefExoticComponent<
-  SearchSelectProps & React.RefAttributes<HTMLDivElement>
->
-
-export default SearchSelect
-export { SearchSelect }

package/src/components/SearchSelect.jsx

@@ -1,155 +0,0 @@
-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 {(e: { target: { value: any, name: string } }) => void} [onChange] - Called with synthetic event; e.target.value is selected value, e.target.name is input name
- * @param {string}   [id='filterable-select'] - Input element ID
- * @param {string}   [name]                - Input name attribute — surfaces as e.target.name in onChange
- * @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',
-  name,
-  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({ target: { value: selectedValue, name: name || id } })
-  }
-
-  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
-export { SearchSelect }

package/src/components/TableLoading.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react'
-
-export interface TableLoadingProps {
-  /** Number of placeholder rows to render (default 5) */
-  rows?: number
-  /** Number of placeholder columns per row (default 4) */
-  columns?: number
-}
-
-declare const TableLoading: React.FC<TableLoadingProps>
-
-export default TableLoading
-export { TableLoading }

package/src/components/TableLoading.jsx

@@ -1,43 +0,0 @@
-import * as React from 'react'
-
-/**
- * Bootstrap 5 placeholder loading rows for table `<tbody>` elements.
- * Renders a grid of shimmer placeholders matching the table column count.
- *
- * @param {number} [rows=5]    - Number of placeholder rows to render
- * @param {number} [columns=4] - Number of placeholder columns per row
- *
- * @example
- * // Inside a table
- * <table className="table">
- *   <thead><tr><th>Name</th><th>Class</th><th>Status</th></tr></thead>
- *   <tbody>
- *     {loading ? (
- *       <TableLoading rows={8} columns={3} />
- *     ) : (
- *       data.map(row => <tr key={row.id}>...</tr>)
- *     )}
- *   </tbody>
- * </table>
- */
-const TableLoading = ({ rows = 5, columns = 4 }) => (
-  <>
-    {Array.from({ length: rows }, (_, r) => (
-      <tr key={r}>
-        {Array.from({ length: columns }, (_, c) => (
-          <td key={c} className="placeholder-glow">
-            <span
-              className="placeholder rounded py-2 col-12"
-              style={{ height: 14, display: 'block' }}
-            />
-          </td>
-        ))}
-      </tr>
-    ))}
-  </>
-)
-
-TableLoading.displayName = 'TableLoading'
-
-export { TableLoading }
-export default TableLoading

package/src/css/datepicker.css

@@ -1,299 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,16 +0,0 @@
-/**
- * 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 { SearchSelect } from './components/SearchSelect.jsx'
-export { Label } from './components/Label.jsx'
-export { TableLoading } from './components/TableLoading.jsx'

package/src/lib/cn.js

@@ -1,35 +0,0 @@
-/**
- * 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(' ')
-}