react-bootstrap-plugins 1.0.5 → 2.1.0

package/dist/css/datepicker.css

@@ -1,299 +1 @@
-/* ==========================================================================
-   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;
-  }
-}
+.input-group>.datepicker-wrapper,.input-group>.searchselect-wrapper{flex:auto;width:1%;min-width:0;position:relative}.input-group>.datepicker-wrapper:not(:first-child) .form-control,.input-group>.searchselect-wrapper:not(:first-child) .form-select{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.datepicker-wrapper:not(:last-child) .form-control,.input-group>.searchselect-wrapper:not(:last-child) .form-select{border-top-right-radius:0;border-bottom-right-radius:0}.datepicker-popover{border-radius:var(--bs-border-radius,.375rem);-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1rem #00000026}.datepicker-popover--wide{min-width:420px}.datepicker-calendar{min-width:260px}.datepicker-days-header,.datepicker-days-grid{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.datepicker-day-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;text-align:center;width:34px;padding:2px 0;font-size:.7rem;font-weight:600}.datepicker-day{width:34px;height:34px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0 auto;padding:0;font-size:.8rem;font-weight:400;transition:background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected){background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-day--today{border:1px solid var(--bs-border-color,#dee2e6);font-weight:700}.datepicker-day--selected{font-weight:600;background-color:var(--bs-primary,#0d6efd)!important;color:#fff!important}.datepicker-day--outside{color:var(--bs-tertiary-color,#adb5bd);opacity:.45;pointer-events:none}.datepicker-day--disabled{color:var(--bs-tertiary-color,#adb5bd);opacity:.35;cursor:not-allowed;pointer-events:none}.datepicker-year-picker{min-width:260px}.datepicker-year-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.datepicker-year-cell{text-align:center;padding:6px 4px;font-size:.85rem}.datepicker-time{min-width:120px}.datepicker-time-col{flex-direction:column;flex:none;align-items:center;width:52px;display:flex}.datepicker-time-col-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;letter-spacing:.04em;-webkit-user-select:none;user-select:none;margin-bottom:2px;font-size:.6rem;font-weight:600}.datepicker-time-col-scroll{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;flex-direction:column;align-items:center;gap:1px;height:220px;display:flex;overflow-y:scroll}.datepicker-time-col-scroll::-webkit-scrollbar{display:none}.datepicker-time-item{width:44px;height:30px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.82rem;font-weight:500;transition:background-color .1s,color .1s;display:flex}.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}.datepicker-time-item--ampm{width:46px;height:36px;font-size:.78rem}.datepicker-time-separator{color:var(--bs-body-color,#212529);flex:none;align-self:center;margin-top:14px;font-size:1.1rem;font-weight:600}.datepicker-footer{border-bottom-left-radius:var(--bs-border-radius,.375rem);border-bottom-right-radius:var(--bs-border-radius,.375rem)}[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),[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)}@media (max-width:575.98px){.datepicker-popover{overflow-x:hidden;max-width:calc(100vw - 8px)!important}.datepicker-popover--wide .d-flex.flex-row{flex-direction:column!important}.datepicker-popover--wide .vr{display:none}.datepicker-day{width:28px;height:28px;font-size:.72rem}.datepicker-day-label{width:28px;font-size:.62rem}.datepicker-calendar,.datepicker-year-picker{min-width:210px}.datepicker-time-col-scroll{height:200px}.datepicker-time-item{width:38px;height:26px;font-size:.75rem}.datepicker-time-item--ampm{width:40px;height:32px}.datepicker-time-separator{margin-top:12px;font-size:1rem}.datepicker-footer .btn{min-height:34px;padding:6px 8px;font-size:.8rem}.datepicker-year-cell{min-height:34px;padding:8px 4px;font-size:.8rem}}

package/dist/css/plugins.css

@@ -0,0 +1 @@
+.input-group>.datepicker-wrapper,.input-group>.searchselect-wrapper{flex:auto;width:1%;min-width:0;position:relative}.input-group>.datepicker-wrapper:not(:first-child) .form-control,.input-group>.searchselect-wrapper:not(:first-child) .form-select{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.datepicker-wrapper:not(:last-child) .form-control,.input-group>.searchselect-wrapper:not(:last-child) .form-select{border-top-right-radius:0;border-bottom-right-radius:0}.datepicker-popover{border-radius:var(--bs-border-radius,.375rem);-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1rem #00000026}.datepicker-popover--wide{min-width:420px}.datepicker-calendar{min-width:260px}.datepicker-days-header,.datepicker-days-grid{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.datepicker-day-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;text-align:center;width:34px;padding:2px 0;font-size:.7rem;font-weight:600}.datepicker-day{width:34px;height:34px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0 auto;padding:0;font-size:.8rem;font-weight:400;transition:background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected){background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-day--today{border:1px solid var(--bs-border-color,#dee2e6);font-weight:700}.datepicker-day--selected{font-weight:600;background-color:var(--bs-primary,#0d6efd)!important;color:#fff!important}.datepicker-day--outside{color:var(--bs-tertiary-color,#adb5bd);opacity:.45;pointer-events:none}.datepicker-day--disabled{color:var(--bs-tertiary-color,#adb5bd);opacity:.35;cursor:not-allowed;pointer-events:none}.datepicker-year-picker{min-width:260px}.datepicker-year-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.datepicker-year-cell{text-align:center;padding:6px 4px;font-size:.85rem}.datepicker-time{min-width:120px}.datepicker-time-col{flex-direction:column;flex:none;align-items:center;width:52px;display:flex}.datepicker-time-col-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;letter-spacing:.04em;-webkit-user-select:none;user-select:none;margin-bottom:2px;font-size:.6rem;font-weight:600}.datepicker-time-col-scroll{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;flex-direction:column;align-items:center;gap:1px;height:220px;display:flex;overflow-y:scroll}.datepicker-time-col-scroll::-webkit-scrollbar{display:none}.datepicker-time-item{width:44px;height:30px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.82rem;font-weight:500;transition:background-color .1s,color .1s;display:flex}.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}.datepicker-time-item--ampm{width:46px;height:36px;font-size:.78rem}.datepicker-time-separator{color:var(--bs-body-color,#212529);flex:none;align-self:center;margin-top:14px;font-size:1.1rem;font-weight:600}.datepicker-footer{border-bottom-left-radius:var(--bs-border-radius,.375rem);border-bottom-right-radius:var(--bs-border-radius,.375rem)}[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),[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)}@media (max-width:575.98px){.datepicker-popover{overflow-x:hidden;max-width:calc(100vw - 8px)!important}.datepicker-popover--wide .d-flex.flex-row{flex-direction:column!important}.datepicker-popover--wide .vr{display:none}.datepicker-day{width:28px;height:28px;font-size:.72rem}.datepicker-day-label{width:28px;font-size:.62rem}.datepicker-calendar,.datepicker-year-picker{min-width:210px}.datepicker-time-col-scroll{height:200px}.datepicker-time-item{width:38px;height:26px;font-size:.75rem}.datepicker-time-item--ampm{width:40px;height:32px}.datepicker-time-separator{margin-top:12px;font-size:1rem}.datepicker-footer .btn{min-height:34px;padding:6px 8px;font-size:.8rem}.datepicker-year-cell{min-height:34px;padding:8px 4px;font-size:.8rem}}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-'use strict';var chunkKZEOI42M_cjs=require('./chunk-KZEOI42M.cjs'),chunkMQRJBL7S_cjs=require('./chunk-MQRJBL7S.cjs');require('./chunk-QQNPKA7A.cjs');var chunk2JC4VIKL_cjs=require('./chunk-2JC4VIKL.cjs'),chunkJ4TRPVD4_cjs=require('./chunk-J4TRPVD4.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunkKZEOI42M_cjs.a}});Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkMQRJBL7S_cjs.a}});Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunk2JC4VIKL_cjs.a}});Object.defineProperty(exports,"TableLoading",{enumerable:true,get:function(){return chunkJ4TRPVD4_cjs.a}});//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map
+'use strict';var chunkOEFG7PNW_cjs=require('./chunk-OEFG7PNW.cjs'),chunkAWU5XGMI_cjs=require('./chunk-AWU5XGMI.cjs'),chunk2Q4NZKMX_cjs=require('./chunk-2Q4NZKMX.cjs'),chunk5IOLZUVD_cjs=require('./chunk-5IOLZUVD.cjs'),chunkM3OUUXZG_cjs=require('./chunk-M3OUUXZG.cjs');require('./chunk-NPQQDBFB.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunkOEFG7PNW_cjs.a}});Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkAWU5XGMI_cjs.a}});Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunk2Q4NZKMX_cjs.a}});Object.defineProperty(exports,"TableLoading",{enumerable:true,get:function(){return chunk5IOLZUVD_cjs.a}});Object.defineProperty(exports,"AutoTextarea",{enumerable:true,get:function(){return chunkM3OUUXZG_cjs.a}});//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJpbmRleC5janMifQ==

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+export { DatePicker, DatePickerChangeEvent, DatePickerProps } from './DatePicker.cjs';
+export { SearchSelect, SearchSelectProps } from './SearchSelect.cjs';
+export { Label, LabelProps } from './Label.cjs';
+export { TableLoading, TableLoadingProps } from './TableLoading.cjs';
+export { AutoTextarea, AutoTextareaProps } from './AutoTextarea.cjs';
+import 'react';

package/dist/index.d.ts

@@ -1,13 +1,6 @@
-// Generated by scripts/copy-types.mjs — do not edit by hand.
-
-export { DatePicker } from './DatePicker.js'
-export type { DatePickerProps } from './DatePicker.js'
-
-export { SearchSelect } from './SearchSelect.js'
-export type { SearchSelectProps } from './SearchSelect.js'
-
-export { Label } from './Label.js'
-export type { LabelProps } from './Label.js'
-
-export { TableLoading } from './TableLoading.js'
-export type { TableLoadingProps } from './TableLoading.js'
+export { DatePicker, DatePickerChangeEvent, DatePickerProps } from './DatePicker.js';
+export { SearchSelect, SearchSelectProps } from './SearchSelect.js';
+export { Label, LabelProps } from './Label.js';
+export { TableLoading, TableLoadingProps } from './TableLoading.js';
+export { AutoTextarea, AutoTextareaProps } from './AutoTextarea.js';
+import 'react';

package/dist/index.js

@@ -1,2 +1,2 @@
-export{a as DatePicker}from'./chunk-MTRPXJ3C.js';export{a as SearchSelect}from'./chunk-XFHLZ7I3.js';import'./chunk-46AJ2Q5H.js';export{a as Label}from'./chunk-W6UBCMKG.js';export{a as TableLoading}from'./chunk-WPTHY5AJ.js';//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+export{a as DatePicker}from'./chunk-WLMCWTO6.js';export{a as SearchSelect}from'./chunk-ZCAQ7S2A.js';export{a as Label}from'./chunk-HYB5IGJK.js';export{a as TableLoading}from'./chunk-7LXLWNUR.js';export{a as AutoTextarea}from'./chunk-KKWFIJKN.js';import'./chunk-RR7TBRGI.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJpbmRleC5qcyJ9

package/docs/AUTOTEXTAREA.md

@@ -0,0 +1,106 @@
+# AutoTextarea
+
+> Bootstrap 5 textarea that automatically grows and shrinks to fit its content. Grows up to `maxRows` (or a pixel `maxHeight` cap), then becomes scrollable. Zero dependencies.
+
+---
+
+## Import
+
+```js
+// Default import (recommended for single-component tree-shaking)
+import AutoTextarea from 'react-bootstrap-plugins/AutoTextarea'
+
+// Named import from individual entry point
+import { AutoTextarea } from 'react-bootstrap-plugins/AutoTextarea'
+
+// Barrel import
+import { AutoTextarea } from 'react-bootstrap-plugins'
+```
+
+---
+
+## Basic Usage
+
+```jsx
+import { useState } from 'react'
+import { AutoTextarea } from 'react-bootstrap-plugins'
+
+function CommentForm() {
+  const [comment, setComment] = useState('')
+
+  return (
+    <AutoTextarea
+      name="comment"
+      value={comment}
+      onChange={e => setComment(e.target.value)}
+      placeholder="Write a comment…"
+      minRows={2}
+      maxRows={8}
+    />
+  )
+}
+```
+
+The textarea starts at `minRows` tall, grows line-by-line as the user types, and shows a scrollbar once content exceeds `maxRows`. It shrinks back down when content is removed.
+
+---
+
+## Capping Height in Pixels
+
+When you need a hard pixel limit instead of a row count (e.g. fitting a fixed panel), pass `maxHeight`. It overrides the `maxRows`-derived limit — the textarea grows up to `maxHeight` pixels and becomes scrollable beyond it:
+
+```jsx
+<AutoTextarea
+  value={notes}
+  onChange={e => setNotes(e.target.value)}
+  maxHeight={240}   // grow to 240px, then scroll
+/>
+```
+
+---
+
+## Props
+
+Accepts all standard `<textarea>` props (except `rows`, which is managed internally), plus:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `minRows` | `number` | `2` | Minimum number of visible rows |
+| `maxRows` | `number` | `8` | Maximum number of rows before scrolling |
+| `maxHeight` | `number` | — | Hard cap on height in **pixels**. Overrides `maxRows` when provided; content beyond it scrolls |
+| `value` | `string` | — | Controlled value |
+| `onChange` | `function` | — | Change handler (`e.target.value`) |
+| `className` | `string` | — | Additional classes merged with `form-control` |
+| `style` | `object` | — | Inline styles merged onto the textarea |
+
+A `ref` is forwarded to the underlying `<textarea>` element.
+
+---
+
+## Behavior Notes
+
+- Height recalculates on every value change, on user input (works uncontrolled too), and on window resize (line wrapping changes with width).
+- `resize` is disabled — the component owns its height. Override via `style={{ resize: 'vertical' }}` if you must.
+- Row limits are computed from the element's real `line-height`, padding, and border, so they stay correct across font sizes and Bootstrap size utilities.
+
+---
+
+## Dark Mode
+
+Uses Bootstrap's `form-control` class, which adapts automatically. Set `data-bs-theme="dark"` on any parent element.
+
+---
+
+## Bundle Size
+
+~0.4 KB (min+gzip).
+
+---
+
+## See Also
+
+- [DatePicker](./DATEPICKER.md) — Date, time, and datetime picker
+- [SearchSelect](./SEARCHSELECT.md) — Filterable, searchable select dropdown
+- [Label](./LABEL.md) — Bootstrap-styled form label with required indicator
+- [TableLoading](./TABLELOADING.md) — Placeholder loading skeleton for tables
+- [Main README](../README.md) — Package overview, installation, and general info

package/docs/DATEPICKER.md

@@ -17,7 +17,7 @@ import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
 import { DatePicker } from 'react-bootstrap-plugins'
 
 // Required CSS (import once, anywhere in your app)
-import 'react-bootstrap-plugins/css/datepicker.css'
+import 'react-bootstrap-plugins/css/plugins.css'
 ```
 
 ---
@@ -27,7 +27,7 @@ import 'react-bootstrap-plugins/css/datepicker.css'
 ```jsx
 import { useState } from 'react'
 import { DatePicker } from 'react-bootstrap-plugins'
-import 'react-bootstrap-plugins/css/datepicker.css'
+import 'react-bootstrap-plugins/css/plugins.css'
 
 function MyForm() {
   const [date, setDate] = useState(null)
@@ -131,7 +131,7 @@ DatePicker requires a small CSS file for its popover calendar layout. Import it
 
 ```js
 // Recommended — uses the package exports map
-import 'react-bootstrap-plugins/css/datepicker.css'
+import 'react-bootstrap-plugins/css/plugins.css'
 ```
 
 For troubleshooting CSS import issues, see the [main README](./README.md#css-imports).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-plugins",
-  "version": "1.0.5",
+  "version": "2.1.0",
   "description": "Production-grade Bootstrap 5 UI plugins for React — DatePicker, SearchSelect, Label, TableLoading, and more. Zero runtime dependencies beyond React.",
   "license": "MIT",
   "author": {
@@ -62,23 +62,37 @@
         "default": "./dist/TableLoading.cjs"
       }
     },
+    "./AutoTextarea": {
+      "import": {
+        "types": "./dist/AutoTextarea.d.ts",
+        "default": "./dist/AutoTextarea.js"
+      },
+      "require": {
+        "types": "./dist/AutoTextarea.d.ts",
+        "default": "./dist/AutoTextarea.cjs"
+      }
+    },
+    "./css/plugins.css": "./dist/css/plugins.css",
     "./css/datepicker.css": "./dist/css/datepicker.css"
   },
   "sideEffects": [
     "*.css",
-    "./dist/css/*.css"
+    "./dist/css/plugins.css",
+    "./dist/css/datepicker.css"
+  ],
+  "browserslist": [
+    "defaults and fully supports es6-module",
+    "maintained node versions"
   ],
   "files": [
     "docs",
     "dist",
-    "src",
     "LICENSE",
-    "README.md",
-    "CHANGELOG.md"
+    "README.md"
   ],
   "scripts": {
-    "build": "tsup && node scripts/copy-types.mjs && rm -rf dist/css && cp -r src/css dist/css",
-    "build:types": "node scripts/copy-types.mjs",
+    "build": "tsup && node scripts/build-css.mjs",
+    "build:types": "tsup --dts-only",
     "dev": "tsup --watch",
     "prepublishOnly": "pnpm run build",
     "lint": "echo 'Lint passed'",
@@ -98,6 +112,9 @@
     "table-loading",
     "placeholder",
     "skeleton",
+    "textarea",
+    "auto-resize",
+    "autosize",
     "ui-components",
     "react-bootstrap",
     "form-controls",
@@ -124,10 +141,10 @@
       "optional": false
     }
   },
-  "dependencies": {},
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "lightningcss": "^1.32.0",
     "tsup": "^8.3.0",
     "typescript": "^5.6.0"
   },

package/dist/DatePicker.cjs.map

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

package/dist/DatePicker.js.map

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

package/dist/Label.cjs.map

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

package/dist/Label.js.map

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

package/dist/SearchSelect.cjs.map

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

package/dist/SearchSelect.js.map

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

package/dist/TableLoading.cjs.map

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

package/dist/TableLoading.js.map

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

package/dist/chunk-2JC4VIKL.cjs

@@ -1,2 +0,0 @@
-'use strict';var e=require('react'),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 e__namespace=/*#__PURE__*/_interopNamespace(e);var a=e__namespace.forwardRef(({className:l,hf:t="default",required:r=true,label:o="Title"},b)=>jsxRuntime.jsxs("label",{htmlFor:t,className:l,ref:b,children:[o,r?jsxRuntime.jsx("b",{className:"text-danger",children:"*"}):""]}));a.displayName="Label";var d=a;exports.a=a;exports.b=d;//# sourceMappingURL=chunk-2JC4VIKL.cjs.map
-//# sourceMappingURL=chunk-2JC4VIKL.cjs.map

package/dist/chunk-2JC4VIKL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Label.jsx"],"names":["Label","e","className","hf","required","label","ref","jsxs","jsx","Label_default"],"mappings":"kbAUA,IAAMA,CAAAA,CAAcC,YAAA,CAAA,UAAA,CAAW,CAAC,CAAE,SAAA,CAAAC,CAAAA,CAAW,EAAA,CAAAC,CAAAA,CAAK,SAAA,CAAW,SAAAC,CAAAA,CAAW,IAAA,CAAM,KAAA,CAAAC,CAAAA,CAAQ,OAAQ,CAAA,CAAGC,IAE7FC,eAAAA,CAAC,OAAA,CAAA,CAAM,QAASJ,CAAAA,CAAI,SAAA,CAAWD,EAAW,GAAA,CAAKI,CAAAA,CAC5C,QAAA,CAAA,CAAAD,CAAAA,CAAOD,CAAAA,CAAWI,cAAAA,CAAC,KAAE,SAAA,CAAU,aAAA,CAAc,QAAA,CAAA,GAAA,CAAC,CAAA,CAAO,EAAA,CAAA,CACxD,CAEH,EAEDR,CAAAA,CAAM,WAAA,CAAc,OAAA,CAGpB,IAAOS,CAAAA,CAAQT","file":"chunk-2JC4VIKL.cjs","sourcesContent":["import * as React from 'react'\n\n/**\n * A simple Bootstrap-styled form label with an optional required indicator.\n *\n * @param {string}  [className]      - Additional CSS classes\n * @param {string}  [hf='default']   - htmlFor attribute (associates label with input ID)\n * @param {boolean} [required=true]  - Whether to show the required asterisk\n * @param {string}  [label='Title']  - Label text content\n */\nconst Label = React.forwardRef(({ className, hf = 'default', required = true, label = 'Title' }, ref) => {\n  return (\n    <label htmlFor={hf} className={className} ref={ref}>\n      {label}{required ? <b className=\"text-danger\">*</b> : ''}\n    </label>\n  )\n})\n\nLabel.displayName = 'Label'\n\nexport { Label }\nexport default Label\n"]}

package/dist/chunk-46AJ2Q5H.js

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

@@ -1 +0,0 @@
-{"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-J4TRPVD4.cjs

@@ -1,2 +0,0 @@
-'use strict';require('react');var jsxRuntime=require('react/jsx-runtime');var e=({rows:l=5,columns:o=4})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:Array.from({length:l},(p,r)=>jsxRuntime.jsx("tr",{children:Array.from({length:o},(s,t)=>jsxRuntime.jsx("td",{className:"placeholder-glow",children:jsxRuntime.jsx("span",{className:"placeholder rounded py-2 col-12",style:{height:14,display:"block"}})},t))},r))});e.displayName="TableLoading";var c=e;exports.a=e;exports.b=c;//# sourceMappingURL=chunk-J4TRPVD4.cjs.map
-//# sourceMappingURL=chunk-J4TRPVD4.cjs.map

package/dist/chunk-J4TRPVD4.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/TableLoading.jsx"],"names":["TableLoading","rows","columns","jsx","Fragment","_","c","TableLoading_default"],"mappings":"0EAsBA,IAAMA,CAAAA,CAAe,CAAC,CAAE,IAAA,CAAAC,CAAAA,CAAO,CAAA,CAAG,QAAAC,CAAAA,CAAU,CAAE,CAAA,GAC5CC,cAAAA,CAAAC,mBAAAA,CAAA,CACG,QAAA,CAAA,KAAA,CAAM,IAAA,CAAK,CAAE,MAAA,CAAQH,CAAK,CAAA,CAAG,CAACI,CAAAA,CAAG,CAAA,GAChCF,cAAAA,CAAC,IAAA,CAAA,CACE,eAAM,IAAA,CAAK,CAAE,MAAA,CAAQD,CAAQ,CAAA,CAAG,CAACG,CAAAA,CAAGC,CAAAA,GACnCH,eAAC,IAAA,CAAA,CAAW,SAAA,CAAU,kBAAA,CACpB,QAAA,CAAAA,cAAAA,CAAC,MAAA,CAAA,CACC,SAAA,CAAU,iCAAA,CACV,MAAO,CAAE,MAAA,CAAQ,EAAA,CAAI,OAAA,CAAS,OAAQ,CAAA,CACxC,CAAA,CAAA,CAJOG,CAKT,CACD,CAAA,CAAA,CARM,CAST,CACD,CAAA,CACH,EAGFN,CAAAA,CAAa,WAAA,CAAc,cAAA,KAGpBO,CAAAA,CAAQP","file":"chunk-J4TRPVD4.cjs","sourcesContent":["import * as React from 'react'\n\n/**\n * Bootstrap 5 placeholder loading rows for table `<tbody>` elements.\n * Renders a grid of shimmer placeholders matching the table column count.\n *\n * @param {number} [rows=5]    - Number of placeholder rows to render\n * @param {number} [columns=4] - Number of placeholder columns per row\n *\n * @example\n * // Inside a table\n * <table className=\"table\">\n *   <thead><tr><th>Name</th><th>Class</th><th>Status</th></tr></thead>\n *   <tbody>\n *     {loading ? (\n *       <TableLoading rows={8} columns={3} />\n *     ) : (\n *       data.map(row => <tr key={row.id}>...</tr>)\n *     )}\n *   </tbody>\n * </table>\n */\nconst TableLoading = ({ rows = 5, columns = 4 }) => (\n  <>\n    {Array.from({ length: rows }, (_, r) => (\n      <tr key={r}>\n        {Array.from({ length: columns }, (_, c) => (\n          <td key={c} className=\"placeholder-glow\">\n            <span\n              className=\"placeholder rounded py-2 col-12\"\n              style={{ height: 14, display: 'block' }}\n            />\n          </td>\n        ))}\n      </tr>\n    ))}\n  </>\n)\n\nTableLoading.displayName = 'TableLoading'\n\nexport { TableLoading }\nexport default TableLoading\n"]}