4c: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"] 4d: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"] 4e:T48eb,'use client' import { IconUser, IconMail, IconBuilding, IconCircleCheck, IconMapPin, IconFilter2, IconChevronDown, } from '@tabler/icons-react' import { useCallback, useMemo, useState } from 'react' import { createFilter, Filters, type Filter, type FilterFieldConfig, type FilterI18nConfig, } from '@/components/spaceui/filters' import { Button } from '@/components/ui/button' import { Menu, MenuPopup, MenuItem, MenuTrigger } from '@/components/ui/menu' // Internationalization configurations const i18nConfigs: Record = { en: { // UI Labels addFilter: 'Add filter', searchFields: 'Search fields...', noFieldsFound: 'No fields found.', noResultsFound: 'No results found.', select: 'Select...', true: 'True', false: 'False', min: 'Min', max: 'Max', to: 'to', typeAndPressEnter: 'Type and press Enter to add tag', selected: 'selected', selectedCount: 'selected', percent: '%', defaultCurrency: '$', defaultColor: '#000000', addFilterTitle: 'Add filter', // Operators operators: { is: 'is', isNot: 'is not', isAnyOf: 'is any of', isNotAnyOf: 'is not any of', includesAll: 'includes all', excludesAll: 'excludes all', before: 'before', after: 'after', between: 'between', notBetween: 'not between', contains: 'contains', notContains: 'does not contain', startsWith: 'starts with', endsWith: 'ends with', isExactly: 'is exactly', equals: 'equals', notEquals: 'not equals', greaterThan: 'greater than', lessThan: 'less than', overlaps: 'overlaps', includes: 'includes', excludes: 'excludes', includesAllOf: 'includes all of', includesAnyOf: 'includes any of', empty: 'is empty', notEmpty: 'is not empty', }, // Placeholders placeholders: { enterField: (fieldType: string) => `Enter ${fieldType}...`, selectField: 'Select...', searchField: (fieldName: string) => `Search ${fieldName.toLowerCase()}...`, enterKey: 'Enter key...', enterValue: 'Enter value...', }, // Helper functions helpers: { formatOperator: (operator: string) => operator.replace(/_/g, ' '), }, // Validation validation: { invalidEmail: 'Invalid email format', invalidUrl: 'Invalid URL format', invalidTel: 'Invalid phone format', invalid: 'Invalid input format', }, }, es: { // UI Labels addFilter: 'Agregar filtro', searchFields: 'Buscar campos...', noFieldsFound: 'No se encontraron campos.', noResultsFound: 'No se encontraron resultados.', select: 'Seleccionar...', true: 'Verdadero', false: 'Falso', min: 'Mín', max: 'Máx', to: 'a', typeAndPressEnter: 'Escriba y presione Enter para agregar etiqueta', selected: 'seleccionado', selectedCount: 'seleccionados', percent: '%', defaultCurrency: '€', defaultColor: '#000000', addFilterTitle: 'Agregar filtro', // Operators operators: { is: 'es', isNot: 'no es', isAnyOf: 'es cualquiera de', isNotAnyOf: 'no es cualquiera de', includesAll: 'incluye todos', excludesAll: 'excluye todos', before: 'antes de', after: 'después de', between: 'entre', notBetween: 'no entre', contains: 'contiene', notContains: 'no contiene', startsWith: 'comienza con', endsWith: 'termina con', isExactly: 'es exactamente', equals: 'igual a', notEquals: 'no igual a', greaterThan: 'mayor que', lessThan: 'menor que', overlaps: 'se superpone', includes: 'incluye', excludes: 'excluye', includesAllOf: 'incluye todos de', includesAnyOf: 'incluye cualquiera de', empty: 'está vacío', notEmpty: 'no está vacío', }, // Placeholders placeholders: { enterField: (fieldType: string) => `Ingrese ${fieldType}...`, selectField: 'Seleccionar...', searchField: (fieldName: string) => `Buscar ${fieldName.toLowerCase()}...`, enterKey: 'Ingrese clave...', enterValue: 'Ingrese valor...', }, // Helper functions helpers: { formatOperator: (operator: string) => operator.replace(/_/g, ' '), }, // Validation validation: { invalidEmail: 'Formato de email inválido', invalidUrl: 'Formato de URL inválido', invalidTel: 'Formato de teléfono inválido', invalid: 'Formato de entrada inválido', }, }, fr: { // UI Labels addFilter: 'Ajouter un filtre', searchFields: 'Rechercher des champs...', noFieldsFound: 'Aucun champ trouvé.', noResultsFound: 'Aucun résultat trouvé.', select: 'Sélectionner...', true: 'Vrai', false: 'Faux', min: 'Min', max: 'Max', to: 'à', typeAndPressEnter: 'Tapez et appuyez sur Entrée pour ajouter une étiquette', selected: 'sélectionné', selectedCount: 'sélectionnés', percent: '%', defaultCurrency: '€', defaultColor: '#000000', addFilterTitle: 'Ajouter un filtre', // Operators operators: { is: 'est', isNot: "n'est pas", isAnyOf: "est l'un de", isNotAnyOf: "n'est pas l'un de", includesAll: 'inclut tous', excludesAll: 'exclut tous', before: 'avant', after: 'après', between: 'entre', notBetween: 'pas entre', contains: 'contient', notContains: 'ne contient pas', startsWith: 'commence par', endsWith: 'se termine par', isExactly: 'est exactement', equals: 'égal à', notEquals: 'pas égal à', greaterThan: 'supérieur à', lessThan: 'inférieur à', overlaps: 'se chevauche', includes: 'inclut', excludes: 'exclut', includesAllOf: 'inclut tous de', includesAnyOf: "inclut l'un de", empty: 'est vide', notEmpty: "n'est pas vide", }, // Placeholders placeholders: { enterField: (fieldType: string) => `Entrez ${fieldType}...`, selectField: 'Sélectionner...', searchField: (fieldName: string) => `Rechercher ${fieldName.toLowerCase()}...`, enterKey: 'Entrez la clé...', enterValue: 'Entrez la valeur...', }, // Helper functions helpers: { formatOperator: (operator: string) => operator.replace(/_/g, ' '), }, // Validation validation: { invalidEmail: "Format d'email invalide", invalidUrl: "Format d'URL invalide", invalidTel: 'Format de téléphone invalide', invalid: 'Format de saisie invalide', }, }, de: { // UI Labels addFilter: 'Filter hinzufügen', searchFields: 'Felder suchen...', noFieldsFound: 'Keine Felder gefunden.', noResultsFound: 'Keine Ergebnisse gefunden.', select: 'Auswählen...', true: 'Wahr', false: 'Falsch', min: 'Min', max: 'Max', to: 'bis', typeAndPressEnter: 'Tippen und Enter drücken, um Tag hinzuzufügen', selected: 'ausgewählt', selectedCount: 'ausgewählt', percent: '%', defaultCurrency: '€', defaultColor: '#000000', addFilterTitle: 'Filter hinzufügen', // Operators operators: { is: 'ist', isNot: 'ist nicht', isAnyOf: 'ist eines von', isNotAnyOf: 'ist nicht eines von', includesAll: 'enthält alle', excludesAll: 'schließt alle aus', before: 'vor', after: 'nach', between: 'zwischen', notBetween: 'nicht zwischen', contains: 'enthält', notContains: 'enthält nicht', startsWith: 'beginnt mit', endsWith: 'endet mit', isExactly: 'ist genau', equals: 'gleich', notEquals: 'nicht gleich', greaterThan: 'größer als', lessThan: 'kleiner als', overlaps: 'überschneidet sich', includes: 'enthält', excludes: 'schließt aus', includesAllOf: 'enthält alle von', includesAnyOf: 'enthält eines von', empty: 'ist leer', notEmpty: 'ist nicht leer', }, // Placeholders placeholders: { enterField: (fieldType: string) => `${fieldType} eingeben...`, selectField: 'Auswählen...', searchField: (fieldName: string) => `${fieldName.toLowerCase()} suchen...`, enterKey: 'Schlüssel eingeben...', enterValue: 'Wert eingeben...', }, // Helper functions helpers: { formatOperator: (operator: string) => operator.replace(/_/g, ' '), }, // Validation validation: { invalidEmail: 'Ungültiges E-Mail-Format', invalidUrl: 'Ungültiges URL-Format', invalidTel: 'Ungültiges Telefonformat', invalid: 'Ungültiges Format', }, }, ja: { // UI Labels addFilter: 'フィルターを追加', searchFields: 'フィールドを検索...', noFieldsFound: 'フィールドが見つかりません。', noResultsFound: '結果が見つかりません。', select: '選択...', true: '真', false: '偽', min: '最小', max: '最大', to: 'から', typeAndPressEnter: '入力してEnterキーを押してタグを追加', selected: '選択済み', selectedCount: '選択済み', percent: '%', defaultCurrency: '¥', defaultColor: '#000000', addFilterTitle: 'フィルターを追加', // Operators operators: { is: 'は', isNot: 'ではない', isAnyOf: 'のいずれか', isNotAnyOf: 'のいずれでもない', includesAll: 'すべて含む', excludesAll: 'すべて除外', before: 'より前', after: 'より後', between: 'の間', notBetween: 'の間ではない', contains: '含む', notContains: '含まない', startsWith: 'で始まる', endsWith: 'で終わる', isExactly: '正確に', equals: '等しい', notEquals: '等しくない', greaterThan: 'より大きい', lessThan: 'より小さい', overlaps: '重複する', includes: '含む', excludes: '除外', includesAllOf: 'すべて含む', includesAnyOf: 'いずれか含む', empty: '空', notEmpty: '空でない', }, // Placeholders placeholders: { enterField: (fieldType: string) => `${fieldType}を入力...`, selectField: '選択...', searchField: (fieldName: string) => `${fieldName.toLowerCase()}を検索...`, enterKey: 'キーを入力...', enterValue: '値を入力...', }, // Helper functions helpers: { formatOperator: (operator: string) => operator.replace(/_/g, ' '), }, // Validation validation: { invalidEmail: '無効なメール形式', invalidUrl: '無効なURL形式', invalidTel: '無効な電話番号形式', invalid: '無効な形式', }, }, } // Language options for the selector const languageOptions = [ { value: 'en', label: 'English', flag: 'us' }, { value: 'es', label: 'Español', flag: 'es' }, { value: 'fr', label: 'Français', flag: 'fr' }, { value: 'de', label: 'Deutsch', flag: 'de' }, { value: 'ja', label: '日本語', flag: 'jp' }, ] export default function Demo() { const [currentLanguage, setCurrentLanguage] = useState('es') const [filters, setFilters] = useState([createFilter('status', 'is', ['active'])]) // Get current i18n configuration const currentI18n = useMemo(() => i18nConfigs[currentLanguage], [currentLanguage]) // Filter field configurations with localized labels const fields: FilterFieldConfig[] = useMemo(() => { const fieldLabels = { en: { name: 'Name', email: 'Email', company: 'Company', role: 'Role', status: 'Status', location: 'Location', joined: 'Joined Date', balance: 'Balance', rating: 'Rating', }, es: { name: 'Nombre', email: 'Correo electrónico', company: 'Empresa', role: 'Rol', status: 'Estado', location: 'Ubicación', joined: 'Fecha de ingreso', balance: 'Saldo', rating: 'Calificación', }, fr: { name: 'Nom', email: 'E-mail', company: 'Entreprise', role: 'Rôle', status: 'Statut', location: 'Localisation', joined: "Date d'adhésion", balance: 'Solde', rating: 'Note', }, de: { name: 'Name', email: 'E-Mail', company: 'Unternehmen', role: 'Rolle', status: 'Status', location: 'Standort', joined: 'Beitrittsdatum', balance: 'Guthaben', rating: 'Bewertung', }, ja: { name: '名前', email: 'メール', company: '会社', role: '役割', status: 'ステータス', location: '場所', joined: '参加日', balance: '残高', rating: '評価', }, } const labels = fieldLabels[currentLanguage as keyof typeof fieldLabels] || fieldLabels.en return [ { key: 'name', label: labels.name, icon: , type: 'text', className: 'w-40', placeholder: currentLanguage === 'en' ? 'Search names...' : currentLanguage === 'es' ? 'Buscar nombres...' : currentLanguage === 'fr' ? 'Rechercher des noms...' : currentLanguage === 'de' ? 'Namen suchen...' : '名前を検索...', }, { key: 'email', label: labels.email, icon: , type: 'text', className: 'w-48', placeholder: 'user@example.com', }, { key: 'company', label: labels.company, icon: , type: 'select', searchable: true, className: 'w-[180px]', options: [ { value: 'TechCorp', label: 'TechCorp' }, { value: 'StartupCo', label: 'StartupCo' }, { value: 'BigCorp', label: 'BigCorp' }, { value: 'InnovateTech', label: 'InnovateTech' }, { value: 'GlobalNet', label: 'GlobalNet' }, ], }, { key: 'role', label: labels.role, icon: , type: 'select', searchable: true, className: 'w-[160px]', options: [ { value: 'Developer', label: 'Developer' }, { value: 'Designer', label: 'Designer' }, { value: 'Manager', label: 'Manager' }, { value: 'Product Manager', label: 'Product Manager' }, { value: 'Sales Rep', label: 'Sales Rep' }, ], }, { key: 'status', label: labels.status, icon: , type: 'select', searchable: false, className: 'w-[140px]', options: [ { value: 'active', label: currentLanguage === 'en' ? 'Active' : currentLanguage === 'es' ? 'Activo' : currentLanguage === 'fr' ? 'Actif' : currentLanguage === 'de' ? 'Aktiv' : 'アクティブ', }, { value: 'inactive', label: currentLanguage === 'en' ? 'Inactive' : currentLanguage === 'es' ? 'Inactivo' : currentLanguage === 'fr' ? 'Inactif' : currentLanguage === 'de' ? 'Inaktiv' : '非アクティブ', }, ], }, { key: 'location', label: labels.location, icon: , type: 'text', className: 'w-40', placeholder: currentLanguage === 'en' ? 'Search locations...' : currentLanguage === 'es' ? 'Buscar ubicaciones...' : currentLanguage === 'fr' ? 'Rechercher des lieux...' : currentLanguage === 'de' ? 'Standorte suchen...' : '場所を検索...', }, ] }, [currentLanguage]) const handleFiltersChange = useCallback((newFilters: Filter[]) => { setFilters(newFilters) }, []) return (

{/* Filters Section */} } i18n={currentI18n} />

{/* Language selection */} {(() => { const lang = languageOptions.find((l) => l.value === currentLanguage) return ( lang && (

) ) })()} {languageOptions.find((lang) => lang.value === currentLanguage)?.label} } /> {languageOptions.map((lang) => ( setCurrentLanguage(lang.value)} className="flex items-center gap-2" >

{lang.label} ))}

) } 4b:["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-filters.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-menu.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/components/spaceui/filters/c-filters-09/index.tsx","content":"$4e","type":"registry:component","target":"components/spaceui/filters.tsx"}],"className":"h-[70svh] min-h-80"}]]}]