El Muestrario — los componentes de @solu30/ui-kit

01

Lo que se ve

Piezas que muestran algo: no capturan datos, los presentan.

Presentación

@solu30/ui-kit/display130 de 149 exports se montan

Ocupación

87%

▲+12%

vs. mes anterior

ActivePending+12.4%-3.1%

ActionCard ActivityTimeline8 props Alert8 props AlertsPredefined Alert variants for common use cases AnimatedCounter5 props AttributeEditor4 props AttributeEditorCollapsible7 props Avatar AvatarInitialsSimple avatar component that displays initials from a name.3 props Badge9 props BrowserFrame6 props CapacityBar11 props Card4 props CardAction CardContent CardDescription CardFooter CardHeader3 props CardTitle CasosSectionTemplate5 props CodeBlock2 props ContentReportModal8 props EmptyState10 props EntityDetailsPanel13 props ErrorBoundary8 props GenericDashboardMockup GlowCard1 prop IconAccommodation IconActivities IconAllergies IconAnchor IconArrowLeft IconArrowRight IconBell IconBeverages IconBook IconBriefcase IconChart IconChat IconCheck IconCheckAll IconChevronDown IconChevronLeft IconChevronRight IconClipboard IconClock IconCommand IconComms IconCompass IconCuisine IconDietary IconEmergencyContact IconExperienceLevels IconExternalLink IconEye IconFlight IconFolder IconGlobe IconGrid IconHeart IconHome IconInbox IconInstagram IconLightbulb IconLightning IconLucy IconMail IconMap IconMenu IconMic IconMoon IconMusicNote IconNetwork IconOccasion IconPencil IconPhone IconPhysicalInfo IconPin IconPlus IconRocket IconRss IconRuler IconSearch IconSend IconSettings IconShield IconSparkles IconStar IconSwarm IconTarget IconTasks IconTeam IconTripInfo IconUser IconVideo IconWaves IconWhatsApp IconWrench IconX InfoCard5 props InfoSection3 props Inline InlineStat5 props InlineStatGroup2 props KPICardGrid Lightbox5 props MetricCard10 props MetricRow6 props PageHeaderSkeletonSkeleton for page headers — matches PageHeader layout.PhoneFrame3 props PhotoGalleryModal5 props ProgressBar7 props ProgressRing6 props SectionCard12 props SectionEyebrow3 props SectionHeader10 props Skeleton5 props SkeletonCollapsibleSkeleton for CollapsibleSection loading state SkeletonForm SkeletonListItem SkeletonTableRowSkeleton for table rows Sparkline16 props Spinner2 props Stack StatCard12 props StatusBadge7 props StatusDot6 props TotalsBreakdown3 props TrendBadge6 props VideoBackground3 props

Datos

@solu30/ui-kit/data-display18 de 30 exports se montan

Salón	Fecha	Invitados
Los Aromos	sáb 5	180
Terraza Norte	vie 11	90
Los Aromos	sáb 19	240

ColumnHeader10 props DateRangeColumnFilter DebouncedSearchInput10 props FilterDropdown8 props FilterableHeader11 props NumberRangeColumnFilter SearchInput7 props SelectColumnFilter Table TableBody TableCaption TableCell1 prop TableFooter TableHead1 prop TableHeader TableRow1 prop TableSkeleton4 props TextColumnFilter

02

Lo que se toca

Lo que el usuario acciona directo: para dar un dato o para moverse.

Entrada

@solu30/ui-kit/input81 de 113 exports se montan

Salón abierto hoy

Con carpa

AccordionList10 props ArrayItemsEditor6 props BusinessHoursCard4 props Button8 props Calendar CellPrice8 props Checkbox11 props CheckboxGroup ChevronDownIcon ChevronLeftIcon ChevronRightIcon ChipPill5 props ChipToggle9 props ChipToggleGroup8 props ClickableRow1 prop Collapsible6 props CollapsibleContent1 prop CollapsibleSection19 props CollapsibleTrigger1 prop ColorPicker Combobox15 props ContactForm10 props CopyButton4 props CurrencyInput10 props DateRangePicker DropZone EditableField10 props EmojiPicker9 props Field10 props FieldGroup9 props FilterChip5 props FilterableSection IconButton ImageUpload InlineColor4 props InlineEditText5 props InlineEditTextarea5 props InlineMarkupField5 props InlineNumberField6 props InlineText7 props InlineTextField6 props Input3 props Label1 prop MultiLangInput10 props MultiSelect18 props OptionCard7 props OptionCardGroup4 props OptionCardItem4 props PeriodSelector7 props QuantityStepper11 props QuantityUnitField11 props QuizOptionButton6 props RadioGroup RadioGroupItem1 prop RadioGroupRoot4 props ScaleRating6 props SeasonRangeCalendar17 props Select17 props SelectContent1 prop SelectGroup2 props SelectItem3 props SelectLabel2 props SelectRoot5 props SelectSeparator SelectTrigger1 prop SelectValue2 props Separator2 props SimpleFormField Slider17 props StarRating StarRatingDisplay Switch8 props SwitchWithLabel9 props TagInput7 props TextArea7 props TextInput13 props TimePicker7 props UnstyledButton WizardNavFooter8 props WizardProgressBar4 props WizardStepHeader4 props

03

Lo que responde

La reacción del sistema: interrupciones, confirmaciones y el movimiento que las acompaña.

Respuesta

@solu30/ui-kit/feedback59 de 63 exports se montan

Margen por combo

AlertDialog3 props AlertDialogAction5 props AlertDialogCancel3 props AlertDialogContent3 props AlertDialogDescription2 props AlertDialogFooter2 props AlertDialogHeader2 props AlertDialogTitle2 props AlertDialogTrigger3 props Command4 props CommandDialog4 props CommandEmpty2 props CommandGroup3 props CommandInput6 props CommandItem5 props CommandList2 props CommandPalette6 props CommandSeparator1 prop CommandShortcut2 props ConfirmDialog11 props Dialog5 props DialogClose3 props DialogContent2 props DialogDescription2 props DialogFooter2 props DialogHeader2 props DialogTitle2 props DialogTrigger3 props DropdownMenu4 props DropdownMenuCheckboxItem7 props DropdownMenuContent3 props DropdownMenuGroup2 props DropdownMenuItem4 props DropdownMenuLabel2 props DropdownMenuSeparator1 prop DropdownMenuTrigger3 props FilePreviewModal InfoTooltip MicroToast2 props Modal24 props Popover4 props PopoverContent8 props PopoverTrigger2 props Sheet SheetClose SheetContent SheetDescription SheetFooter SheetHeader SheetRoot SheetTitle SheetTrigger SideSheet6 props ToastProvider2 props Tooltip6 props TooltipContent2 props TooltipProvider TooltipRoot4 props TooltipTrigger1 prop

Movimiento

@solu30/ui-kit/animation20 de 22 exports se montan

Generando el presupuesto…

Leyendo el contrato…

04

Lo que no se ve

Infraestructura sin markup propio: lógica y formateo que otras piezas consumen.

Comportamiento

@solu30/ui-kit/hooks58 exports

useIsMobile() · useIsTablet() · useIsDesktop()detectando…angostá la ventana y cambia solo

Sin markup propio: se importan como función, así que no hay ficha que montar. Ver la familia entera.

Utilidades

@solu30/ui-kit/utils75 exports

formatCurrency(1500, 'ARS', 'es-AR', 0)$ 1.500

formatDurationMinutes(135)2h 15min

truncate('Salón Los Aromos — quinta', 18)Salón Los Aromos …