rupoui 1.3.7 → 1.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -248,6 +248,61 @@ import { DatePicker } from "rupoui";
|
|
|
248
248
|
- `size`: `sm`, `md`, `lg`.
|
|
249
249
|
- `radius`: `sm`, `md`, `lg`, `full`.
|
|
250
250
|
|
|
251
|
+
### DateRangePicker
|
|
252
|
+
|
|
253
|
+
A component for selecting a start and end date with calendar range selection, hover preview, and text/segmented input modes.
|
|
254
|
+
|
|
255
|
+
```tsx
|
|
256
|
+
import { DateRangePicker } from "rupoui";
|
|
257
|
+
import { useState } from "react";
|
|
258
|
+
|
|
259
|
+
const Example = () => {
|
|
260
|
+
const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
|
|
261
|
+
start: null,
|
|
262
|
+
end: null,
|
|
263
|
+
});
|
|
264
|
+
|
|
265
|
+
return (
|
|
266
|
+
<>
|
|
267
|
+
<DateRangePicker
|
|
268
|
+
label="Travel Dates"
|
|
269
|
+
value={range}
|
|
270
|
+
onChange={setRange}
|
|
271
|
+
/>
|
|
272
|
+
|
|
273
|
+
<DateRangePicker
|
|
274
|
+
label="Range (Two Inputs)"
|
|
275
|
+
rangeInput="two"
|
|
276
|
+
value={range}
|
|
277
|
+
onChange={setRange}
|
|
278
|
+
/>
|
|
279
|
+
|
|
280
|
+
<DateRangePicker
|
|
281
|
+
label="Range (Segmented)"
|
|
282
|
+
inputMode="segmented"
|
|
283
|
+
value={range}
|
|
284
|
+
onChange={setRange}
|
|
285
|
+
/>
|
|
286
|
+
</>
|
|
287
|
+
);
|
|
288
|
+
};
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
**Props:**
|
|
292
|
+
|
|
293
|
+
- **Field Props**: `label`, `description`, `errorMessage`, `fullWidth`.
|
|
294
|
+
- **State**: `value`, `defaultValue`, `onChange`.
|
|
295
|
+
- **Validation**: `isInvalid`, `isDisabled`, `isReadOnly`, `minDate`, `maxDate`, `disabledDates`.
|
|
296
|
+
- **Range Input**:
|
|
297
|
+
- `rangeInput`: `single` (default) or `two`.
|
|
298
|
+
- `separator`: separator string between start/end (default: ` – `).
|
|
299
|
+
- `inputMode`: `text` (default) or `segmented`.
|
|
300
|
+
- **Style Variants**:
|
|
301
|
+
- `variant`: `solid` (default), `bordered`, `flat`, `ghost`.
|
|
302
|
+
- `color`: `primary`, `secondary`, `success`, `warning`, `danger`.
|
|
303
|
+
- `size`: `sm`, `md`, `lg`.
|
|
304
|
+
- `radius`: `sm`, `md`, `lg`, `full`.
|
|
305
|
+
|
|
251
306
|
### Calendar
|
|
252
307
|
|
|
253
308
|
A pure renderer component for displaying a calendar grid with full keyboard navigation and accessibility support. It uses an external engine for state management, giving you complete control over the calendar's behavior.
|