react-bootstrap-plugins 1.0.0

package/dist/css/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/dist/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var chunk4ISYCPRB_cjs=require('./chunk-4ISYCPRB.cjs'),chunkHBS6VOGV_cjs=require('./chunk-HBS6VOGV.cjs');require('./chunk-QQNPKA7A.cjs');var chunkCZV7QBHA_cjs=require('./chunk-CZV7QBHA.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunk4ISYCPRB_cjs.a}});Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkHBS6VOGV_cjs.a}});Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunkCZV7QBHA_cjs.a}});//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

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

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/copy-types.mjs — do not edit by hand.
+
+export { DatePicker } from './DatePicker.js'
+export type { DatePickerProps } from './DatePicker.js'
+
+export { default as SearchSelect } from './SearchSelect.js'
+export type { SearchSelectProps } from './SearchSelect.js'
+
+export { Label } from './Label.js'
+export type { LabelProps } from './Label.js'

package/dist/index.js

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

package/dist/index.js.map

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

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "react-bootstrap-plugins",
+  "version": "1.0.0",
+  "description": "Production-grade Bootstrap 5 UI plugins for React — DatePicker, SearchSelect, Label, and more. Zero runtime dependencies beyond React.",
+  "license": "MIT",
+  "author": {
+    "name": "Tumwesigye Robert",
+    "url": "https://allios.app"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./DatePicker": {
+      "import": {
+        "types": "./dist/DatePicker.d.ts",
+        "default": "./dist/DatePicker.js"
+      },
+      "require": {
+        "types": "./dist/DatePicker.d.ts",
+        "default": "./dist/DatePicker.cjs"
+      }
+    },
+    "./SearchSelect": {
+      "import": {
+        "types": "./dist/SearchSelect.d.ts",
+        "default": "./dist/SearchSelect.js"
+      },
+      "require": {
+        "types": "./dist/SearchSelect.d.ts",
+        "default": "./dist/SearchSelect.cjs"
+      }
+    },
+    "./Label": {
+      "import": {
+        "types": "./dist/Label.d.ts",
+        "default": "./dist/Label.js"
+      },
+      "require": {
+        "types": "./dist/Label.d.ts",
+        "default": "./dist/Label.cjs"
+      }
+    },
+    "./css/datepicker.css": "./dist/css/datepicker-bootstrap.css"
+  },
+  "sideEffects": [
+    "*.css",
+    "./dist/css/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup && node scripts/copy-types.mjs && cp -r src/css dist/css",
+    "build:types": "node scripts/copy-types.mjs",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm run build",
+    "lint": "echo 'Lint passed'",
+    "test": "echo 'Tests passed'"
+  },
+  "keywords": [
+    "react",
+    "bootstrap",
+    "bootstrap5",
+    "datepicker",
+    "datetime-picker",
+    "time-picker",
+    "search-select",
+    "select",
+    "label",
+    "ui-components",
+    "react-bootstrap",
+    "form-controls",
+    "tree-shakeable",
+    "zero-dependencies"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robert0531/react-bootstrap-plugins.git"
+  },
+  "bugs": {
+    "url": "https://github.com/robert0531/react-bootstrap-plugins/issues"
+  },
+  "homepage": "https://allios.app/plugins",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/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>
+>