4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2297,'use client' import { IconChevronDown, IconCalendarEvent } from '@tabler/icons-react' import { useEffect, useMemo, useState } from 'react' import { DateSelector, DEFAULT_DATE_SELECTOR_I18N, formatDateValue, type DateSelectorI18nConfig, type DateSelectorValue, } from '@/components/spaceui/date-selector' import { Button } from '@/components/ui/button' import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog' import { Menu, MenuPopup, MenuItem, MenuTrigger } from '@/components/ui/menu' // Helper function to create i18n config from translations function createI18nConfig(translations: Partial): DateSelectorI18nConfig { return { ...DEFAULT_DATE_SELECTOR_I18N, ...translations } } // Language-specific translations const translations: Record> = { es: { selectDate: 'Seleccionar fecha', apply: 'Aplicar', cancel: 'Cancelar', clear: 'Limpiar', today: 'Hoy', filterTypes: { is: 'es', before: 'antes de', after: 'después de', between: 'entre', }, periodTypes: { day: 'Día', month: 'Mes', quarter: 'Trimestre', halfYear: 'Semestre', year: 'Año', }, months: [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre', ], monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], quarters: ['T1', 'T2', 'T3', 'T4'], halfYears: ['S1', 'S2'], weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'], weekdaysShort: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'], placeholder: 'Seleccionar fecha...', rangePlaceholder: 'Seleccionar rango de fechas...', }, fr: { selectDate: 'Sélectionner une date', apply: 'Appliquer', cancel: 'Annuler', clear: 'Effacer', today: "Aujourd'hui", filterTypes: { is: 'est', before: 'avant', after: 'après', between: 'entre', }, periodTypes: { day: 'Jour', month: 'Mois', quarter: 'Trimestre', halfYear: 'Semestre', year: 'Année', }, months: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre', ], monthsShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'], quarters: ['T1', 'T2', 'T3', 'T4'], halfYears: ['S1', 'S2'], weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], weekdaysShort: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'], placeholder: 'Sélectionner une date...', rangePlaceholder: 'Sélectionner une plage de dates...', }, de: { selectDate: 'Datum auswählen', apply: 'Anwenden', cancel: 'Abbrechen', clear: 'Löschen', today: 'Heute', filterTypes: { is: 'ist', before: 'vor', after: 'nach', between: 'zwischen', }, periodTypes: { day: 'Tag', month: 'Monat', quarter: 'Quartal', halfYear: 'Halbjahr', year: 'Jahr', }, months: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember', ], monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'], quarters: ['Q1', 'Q2', 'Q3', 'Q4'], halfYears: ['H1', 'H2'], weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'], weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'], placeholder: 'Datum auswählen...', rangePlaceholder: 'Datumsbereich auswählen...', }, } // Internationalization configurations const i18nConfigs: Record = { en: DEFAULT_DATE_SELECTOR_I18N, es: createI18nConfig(translations.es), fr: createI18nConfig(translations.fr), de: createI18nConfig(translations.de), } // Language metadata const languageMetadata = { en: { label: 'English', flag: '🇺🇸', dateFormat: 'MM/dd/yyyy', weekStartsOn: 0 as const, ui: { label: 'Due date', hint: 'Try: 2025, Q4, 05/10/2025', placeholder: 'Select a date', }, }, es: { label: 'Español', flag: '🇪🇸', dateFormat: 'dd/MM/yyyy', weekStartsOn: 1 as const, ui: { label: 'Fecha de vencimiento', hint: 'Prueba: 2025, T4, 05/10/2025', placeholder: 'Seleccionar una fecha', }, }, fr: { label: 'Français', flag: '🇫🇷', dateFormat: 'dd/MM/yyyy', weekStartsOn: 1 as const, ui: { label: "Date d'échéance", hint: 'Essayez: 2025, T4, 05/10/2025', placeholder: 'Sélectionner une date', }, }, de: { label: 'Deutsch', flag: '🇩🇪', dateFormat: 'dd.MM.yyyy', weekStartsOn: 1 as const, ui: { label: 'Fälligkeitsdatum', hint: 'Versuchen Sie: 2025, Q4, 05.10.2025', placeholder: 'Datum auswählen', }, }, } // Language options for the selector const languageOptions = Object.entries(languageMetadata).map(([value, meta]) => ({ value, label: meta.label, flag: meta.flag, })) export default function Demo() { const [value, setValue] = useState() const [open, setOpen] = useState(false) const [internalValue, setInternalValue] = useState(value) const [currentLanguage, setCurrentLanguage] = useState('fr') // Get current language metadata and i18n config const currentMeta = useMemo(() => languageMetadata[currentLanguage] || languageMetadata.en, [currentLanguage]) const currentI18n = useMemo(() => i18nConfigs[currentLanguage] || i18nConfigs.en, [currentLanguage]) useEffect(() => { if (open) { setInternalValue(value) } }, [open, value]) const formattedValue = useMemo( () => (value ? formatDateValue(value, currentI18n, currentMeta.dateFormat) : ''), [value, currentI18n, currentMeta.dateFormat], ) const displayText = formattedValue || currentMeta.ui.placeholder const handleApply = () => { setValue(internalValue) setOpen(false) } const handleCancel = () => { setInternalValue(value) setOpen(false) } return (

{currentMeta.flag} {currentMeta.label} } /> {languageOptions.map((lang) => ( setCurrentLanguage(lang.value as keyof typeof languageMetadata)} className="flex items-center gap-2" > {lang.flag} {lang.label} ))}

) } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}]]}],["$","$L4d",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-date-selector.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-dialog.json","https://www.spaceui.one/r/primitives-menu.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/registry/demo/components/spaceui/date-selector/c-date-selector-04/index.tsx","content":"$4f","type":"registry:component","target":"components/spaceui/date-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]