componente · @solu30/ui-kit/input

PeriodSelector

Píldoras de período —hoy, semana, mes, trimestre, año— con rango a medida opcional.

Seguir leyendo — 3 párrafos más

PeriodSelector

A compact pill/tab selector for time-period filtering. Includes built-in presets (Today/Week/Month/Quarter/Year) and an optional custom date-range picker. Fully generic — labels can be overridden for any language.

Stateless: the parent owns the selected value and date range.

5 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
luigi

El componente, montado

Cargando el componente del paquete instalado…

Cómo se usa

import { PeriodSelector } from '@solu30/ui-kit/input'

Props

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`string`	Currently selected period key
onChange	sí	`(value: string) => void`	Callback fired when a preset is selected
presets	opcional	`PeriodPreset[]`	Presets to show. Defaults to today/week/month/quarter/year + custom. Pass a custom array to override.
allowCustomRange	opcional	`boolean`	Show a "custom" toggle that reveals a date range picker
onCustomRange	opcional	`(range: DateRange) => void`	Called when a custom date range is confirmed
customLabel	opcional	`string`	Label for the custom range toggle (default: "Custom")
className	opcional	`string`	Extra CSS class on the root wrapper

Ejemplo del paquete

import { PeriodSelector } from "@solu30/ui-kit";

const [period, setPeriod] = useState<string>("month");
const [range, setRange] = useState<DateRange | null>(null);

<PeriodSelector
  value={period}
  onChange={setPeriod}
  onCustomRange={setRange}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.