From c81dedff1781a79c5754c0b9e390f1d4450a01d7 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Fri, 24 Jul 2026 12:46:44 +0530 Subject: [PATCH] release: WRNexusJS 0.3.5 --- .publish/ai/package.json | 2 +- .publish/authz/package.json | 2 +- .publish/cli/package.json | 26 +- .publish/compiler/README.md | 1 + .publish/compiler/package.json | 4 +- .publish/core/package.json | 2 +- .publish/csr/package.json | 4 +- .publish/db/package.json | 2 +- .publish/dev-server/package.json | 30 +- .publish/dev-toolbar/package.json | 2 +- .publish/encryption/package.json | 2 +- .publish/helpers/package.json | 4 +- .publish/i18n/package.json | 4 +- .publish/jwt/package.json | 2 +- .publish/mobile/package.json | 4 +- .publish/native/package.json | 2 +- .publish/oauth/package.json | 2 +- .publish/plugin/package.json | 4 +- .publish/pubsub/package.json | 2 +- .publish/queue/package.json | 2 +- .publish/reactive/package.json | 2 +- .publish/router/package.json | 6 +- .publish/ssr/package.json | 4 +- .publish/styles/package.json | 8 +- .publish/syntax/package.json | 2 +- .publish/test/package.json | 2 +- .publish/tracking/package.json | 2 +- .publish/ui/COMPONENTS.md | 8521 +-- .publish/ui/component-catalog.json | 4368 +- .publish/ui/component-migrations.json | 5 + .publish/ui/component-reference.json | 48985 +--------------- .../ui/components/AcceptAllCookiesButton.wrn | 11 - .../ui/components/AccessibleAccordion.wrn | 13 - .publish/ui/components/AccessibleCarousel.wrn | 13 - .../ui/components/AccessibleChartSummary.wrn | 15 - .publish/ui/components/AccessibleDialog.wrn | 10 - .../ui/components/AccessibleErrorSummary.wrn | 13 - .publish/ui/components/AccessibleIcon.wrn | 13 - .publish/ui/components/AccessibleMenu.wrn | 10 - .publish/ui/components/AccessibleTabs.wrn | 13 - .publish/ui/components/AccessibleTooltip.wrn | 13 - .publish/ui/components/Accordion.wrn | 42 +- .publish/ui/components/AccountMenu.wrn | 10 - .../ui/components/AccountStatusBanner.wrn | 11 - .publish/ui/components/ActionMenu.wrn | 10 - .publish/ui/components/ActiveFilterList.wrn | 10 - .publish/ui/components/ActivityList.wrn | 10 - .publish/ui/components/AddOnCard.wrn | 13 - .publish/ui/components/AddressInput.wrn | 16 - .publish/ui/components/AddressPreview.wrn | 13 - .publish/ui/components/AdvancedDatePicker.wrn | 19 + .../ui/components/AdvancedFilterBuilder.wrn | 13 - .../ui/components/AdvancedRangeSlider.wrn | 19 + .publish/ui/components/AdvancedSelect.wrn | 456 + .publish/ui/components/AlertDialog.wrn | 10 - .publish/ui/components/AmountInput.wrn | 16 - .../components/AnalyticsDashboardPreview.wrn | 83 - .publish/ui/components/AnchorNavigation.wrn | 10 - .publish/ui/components/AnnouncementBar.wrn | 96 - .publish/ui/components/ApartmentInput.wrn | 16 - .../ui/components/ApiAuthenticationNotice.wrn | 11 - .publish/ui/components/ApiEndpointCard.wrn | 39 - .publish/ui/components/ApiErrorExample.wrn | 13 - .publish/ui/components/ApiHeaderTable.wrn | 10 - .publish/ui/components/ApiKeyCreateDialog.wrn | 10 - .publish/ui/components/ApiKeyDisplay.wrn | 13 - .publish/ui/components/ApiKeyInput.wrn | 16 - .publish/ui/components/ApiMethodBadge.wrn | 11 - .publish/ui/components/ApiParameterTable.wrn | 10 - .publish/ui/components/ApiRateLimitNotice.wrn | 11 - .publish/ui/components/ApiRequestExample.wrn | 13 - .publish/ui/components/ApiResponseExample.wrn | 13 - .publish/ui/components/ApiSchemaTable.wrn | 10 - .publish/ui/components/ApiSchemaViewer.wrn | 13 - .publish/ui/components/ApiVersionBadge.wrn | 11 - .publish/ui/components/AppHeader.wrn | 10 - .../ui/components/ArchitectureSection.wrn | 10 - .publish/ui/components/AreaChart.wrn | 11 - .publish/ui/components/ArticleHero.wrn | 10 - .publish/ui/components/ArticleLayout.wrn | 10 - .../ui/components/ArticleNewsletterCTA.wrn | 11 - .publish/ui/components/ArticlePageShell.wrn | 10 - .../ui/components/ArticleShareActions.wrn | 11 - .publish/ui/components/AspectRatio.wrn | 6 - .publish/ui/components/AssetCard.wrn | 9 - .publish/ui/components/AttachmentPicker.wrn | 16 - .publish/ui/components/AttachmentUpload.wrn | 13 - .publish/ui/components/AudioUpload.wrn | 13 - .publish/ui/components/AuditLogPreview.wrn | 13 - .publish/ui/components/AuditTable.wrn | 10 - .../ui/components/AuthenticatorCodeInput.wrn | 16 - .publish/ui/components/AuthorAvatar.wrn | 13 - .publish/ui/components/AuthorCard.wrn | 13 - .../components/AuthorizedApplicationCard.wrn | 13 - .publish/ui/components/AutoGrid.wrn | 6 - .../ui/components/AutomationExampleCard.wrn | 13 - .../ui/components/AvailabilityCalendar.wrn | 13 - .publish/ui/components/AvatarGroup.wrn | 25 +- .publish/ui/components/AvatarUpload.wrn | 13 - .publish/ui/components/BackButton.wrn | 9 - .publish/ui/components/BackToTop.wrn | 94 - .../ui/components/BankTransferDetails.wrn | 13 - .publish/ui/components/Banner.wrn | 12 - .publish/ui/components/BarChart.wrn | 11 - .publish/ui/components/BetaBadge.wrn | 8 - .publish/ui/components/BillingAddressForm.wrn | 13 - .publish/ui/components/BillingExample.wrn | 13 - .../ui/components/BillingPeriodToggle.wrn | 16 - .publish/ui/components/BlackoutDatePicker.wrn | 16 - .publish/ui/components/Blockquote.wrn | 19 + .publish/ui/components/BlogCard.wrn | 13 - .publish/ui/components/BlogGrid.wrn | 10 - .publish/ui/components/BlogList.wrn | 10 - .publish/ui/components/BlogSearch.wrn | 13 - .publish/ui/components/BodyText.wrn | 8 - .publish/ui/components/BorderRadiusPicker.wrn | 16 - .publish/ui/components/BottomNavigation.wrn | 10 - .publish/ui/components/BrandColorPicker.wrn | 16 - .publish/ui/components/BrandSelector.wrn | 16 - .publish/ui/components/Breadcrumb.wrn | 17 + .publish/ui/components/Breadcrumbs.wrn | 105 - .publish/ui/components/BrowserFrame.wrn | 10 - .publish/ui/components/BudgetRangeSlider.wrn | 13 - .publish/ui/components/BudgetSelector.wrn | 16 - .../ui/components/BusinessHoursPicker.wrn | 16 - .publish/ui/components/ButtonGroup.wrn | 25 +- .publish/ui/components/ButtonSelector.wrn | 16 - .publish/ui/components/CTASection.wrn | 15 - .publish/ui/components/Calendar.wrn | 13 - .publish/ui/components/CalendarGrid.wrn | 10 - .publish/ui/components/CalendarHeader.wrn | 10 - .publish/ui/components/CalendarNavigation.wrn | 10 - .publish/ui/components/CallbackUrlInput.wrn | 16 - .publish/ui/components/CampaignCard.wrn | 10 - .../components/CampaignPerformancePreview.wrn | 13 - .publish/ui/components/CampaignProgress.wrn | 11 - .publish/ui/components/CapabilityGrid.wrn | 10 - .publish/ui/components/CaptchaField.wrn | 16 - .publish/ui/components/CardPaymentForm.wrn | 13 - .publish/ui/components/CardSelector.wrn | 16 - .publish/ui/components/CardSkeleton.wrn | 11 - .../ui/components/CareerApplicationForm.wrn | 13 - .publish/ui/components/CareerBenefitsGrid.wrn | 10 - .publish/ui/components/Carousel.wrn | 20 +- .publish/ui/components/CaseStudyCard.wrn | 13 - .publish/ui/components/CaseStudyHero.wrn | 10 - .publish/ui/components/CaseStudyPreview.wrn | 13 - .publish/ui/components/CenteredCTA.wrn | 11 - .publish/ui/components/CenteredHero.wrn | 10 - .../ui/components/CenteredSectionHeader.wrn | 10 - .publish/ui/components/CertificateUpload.wrn | 13 - .publish/ui/components/CertificationBadge.wrn | 11 - .publish/ui/components/ChallengeSection.wrn | 10 - .publish/ui/components/ChannelBadge.wrn | 11 - .publish/ui/components/ChannelCard.wrn | 54 - .../ui/components/ChannelComparisonChart.wrn | 11 - .../ui/components/ChannelComparisonTable.wrn | 10 - .../ui/components/ChannelFallbackDiagram.wrn | 11 - .publish/ui/components/ChannelFlow.wrn | 49 - .publish/ui/components/ChannelIcon.wrn | 13 - .publish/ui/components/ChannelRateTable.wrn | 10 - .publish/ui/components/ChannelSelector.wrn | 16 - .publish/ui/components/CharacterCounter.wrn | 11 - .publish/ui/components/Chart.wrn | 19 + .publish/ui/components/ChartEmptyState.wrn | 11 - .publish/ui/components/ChartTooltip.wrn | 13 - .publish/ui/components/ChatBubble.wrn | 19 + .publish/ui/components/CheckboxGroup.wrn | 16 - .publish/ui/components/Checklist.wrn | 13 - .publish/ui/components/ChecklistProgress.wrn | 11 - .publish/ui/components/Chip.wrn | 8 - .publish/ui/components/ChipInput.wrn | 16 - .publish/ui/components/CircularProgress.wrn | 11 - .publish/ui/components/CitySelector.wrn | 16 - .publish/ui/components/ClearFiltersButton.wrn | 11 - .publish/ui/components/ClickableCard.wrn | 9 - .publish/ui/components/Clipboard.wrn | 19 + .publish/ui/components/CloseButton.wrn | 9 - .publish/ui/components/Cluster.wrn | 11 - .publish/ui/components/Code.wrn | 13 - .publish/ui/components/CodeBlock.wrn | 26 - .publish/ui/components/CodeCopyButton.wrn | 11 - .publish/ui/components/CodeHeader.wrn | 10 - .publish/ui/components/CodeInput.wrn | 16 - .publish/ui/components/CodeLanguageBadge.wrn | 11 - .publish/ui/components/CodeTabs.wrn | 13 - .publish/ui/components/CodeText.wrn | 8 - .publish/ui/components/CohortChart.wrn | 11 - .publish/ui/components/Collapse.wrn | 15 + .publish/ui/components/ColorGrid.wrn | 10 - .publish/ui/components/ColorHexInput.wrn | 16 - .publish/ui/components/ColorPicker.wrn | 18 +- .publish/ui/components/ColorSelector.wrn | 16 - .publish/ui/components/ColorSwatch.wrn | 13 - .publish/ui/components/Columns.wrn | 13 + .publish/ui/components/Combobox.wrn | 383 +- .publish/ui/components/ComingSoonBadge.wrn | 8 - .publish/ui/components/ComingSoonState.wrn | 11 - .publish/ui/components/CommandBlock.wrn | 13 - .publish/ui/components/CommandMenu.wrn | 10 - .publish/ui/components/CommandSearchInput.wrn | 16 - .publish/ui/components/CompanyHero.wrn | 10 - .publish/ui/components/CompanyNameInput.wrn | 16 - .publish/ui/components/CompanyPageShell.wrn | 10 - .../ui/components/CompanySizeSelector.wrn | 16 - .../components/ComparisonDateRangePicker.wrn | 16 - .publish/ui/components/ComparisonTable.wrn | 10 - .publish/ui/components/CompletionMeter.wrn | 11 - .../ui/components/ComplianceBadgeList.wrn | 10 - .../ui/components/ComplianceProgramCard.wrn | 13 - .publish/ui/components/Confetti.wrn | 19 + .../ui/components/ConfirmPasswordInput.wrn | 16 - .publish/ui/components/ConfirmationDialog.wrn | 15 - .../ui/components/ConnectedAccountCard.wrn | 13 - .publish/ui/components/ConnectionCard.wrn | 9 - .../ui/components/ConsentTimelinePreview.wrn | 15 - .publish/ui/components/ContactCTA.wrn | 11 - .publish/ui/components/ContactCard.wrn | 9 - .publish/ui/components/ContactForm.wrn | 13 - .publish/ui/components/ContactHero.wrn | 10 - .publish/ui/components/ContactPageShell.wrn | 10 - .publish/ui/components/ContactSalesBanner.wrn | 195 - .publish/ui/components/ContactSalesButton.wrn | 11 - .publish/ui/components/ContactSalesForm.wrn | 13 - .publish/ui/components/ContextMenu.wrn | 13 +- .publish/ui/components/ContextSwitcher.wrn | 13 - .publish/ui/components/ConversationList.wrn | 10 - .../ui/components/ConversationPreview.wrn | 15 - .publish/ui/components/ConversionChart.wrn | 11 - .publish/ui/components/CookieBanner.wrn | 12 - .publish/ui/components/CookieCategoryList.wrn | 10 - .../ui/components/CookieCategoryToggle.wrn | 16 - .publish/ui/components/CookieConsent.wrn | 372 - .publish/ui/components/CookieDetailsTable.wrn | 10 - .../ui/components/CookiePreferencesDialog.wrn | 17 - .publish/ui/components/CookieTable.wrn | 10 - .publish/ui/components/CoordinatesInput.wrn | 16 - .publish/ui/components/CoordinatesPicker.wrn | 16 - .publish/ui/components/CopyButton.wrn | 9 - .publish/ui/components/CopyCodeButton.wrn | 11 - .publish/ui/components/CopyMarkup.wrn | 20 + .publish/ui/components/CopySecretField.wrn | 16 - .publish/ui/components/CostBreakdownChart.wrn | 11 - .publish/ui/components/CostSummary.wrn | 13 - .publish/ui/components/Counter.wrn | 8 - .../ui/components/CountryCallingCodeInput.wrn | 16 - .../components/CountryCallingCodeSelector.wrn | 16 - .publish/ui/components/CountrySelector.wrn | 16 - .publish/ui/components/CouponInput.wrn | 16 - .publish/ui/components/CreditAmountInput.wrn | 16 - .publish/ui/components/CronBuilder.wrn | 13 - .publish/ui/components/CronInput.wrn | 16 - .publish/ui/components/CsvUpload.wrn | 13 - .publish/ui/components/CurrencyInput.wrn | 16 - .publish/ui/components/CurrencySelector.wrn | 16 - .../ui/components/CurrentPasswordInput.wrn | 16 - .publish/ui/components/CustomScrollbar.wrn | 13 + .publish/ui/components/CustomerLogo.wrn | 13 - .publish/ui/components/CustomerStoryCard.wrn | 13 - .publish/ui/components/DangerButton.wrn | 9 - .publish/ui/components/DataMap.wrn | 19 + .publish/ui/components/DataProtectionCard.wrn | 13 - .publish/ui/components/DataRetentionTable.wrn | 10 - .publish/ui/components/DataTable.wrn | 9 +- .publish/ui/components/DateInput.wrn | 24 - .publish/ui/components/DatePicker.wrn | 21 +- .publish/ui/components/DateRangeCalendar.wrn | 13 - .publish/ui/components/DateRangePicker.wrn | 11 - .publish/ui/components/DateRangeSlider.wrn | 13 - .publish/ui/components/DateTimeInput.wrn | 24 - .publish/ui/components/DateTimePicker.wrn | 14 - .../ui/components/DateTimeRangePicker.wrn | 16 - .publish/ui/components/DecimalInput.wrn | 16 - .publish/ui/components/DefinitionList.wrn | 10 - .../components/DeleteConfirmationDialog.wrn | 10 - .publish/ui/components/DeliveryPreview.wrn | 13 - .../ui/components/DeliveryStatusChart.wrn | 11 - .../ui/components/DeliveryStatusTimeline.wrn | 11 - .publish/ui/components/DemoRequestForm.wrn | 13 - .publish/ui/components/DepartmentInput.wrn | 16 - .../ui/components/DeprecatedFeatureAlert.wrn | 11 - .publish/ui/components/DescriptionList.wrn | 10 - .publish/ui/components/DesktopNavigation.wrn | 8 - .publish/ui/components/DeveloperCTA.wrn | 11 - .publish/ui/components/DeveloperHero.wrn | 10 - .publish/ui/components/DeveloperPageShell.wrn | 10 - .publish/ui/components/DeveloperSearch.wrn | 13 - .publish/ui/components/DevelopersMegaMenu.wrn | 421 - .publish/ui/components/DevelopersMenu.wrn | 10 - .publish/ui/components/DeviceCard.wrn | 13 - .publish/ui/components/DeviceFrame.wrn | 19 + .publish/ui/components/DiscountInput.wrn | 16 - .publish/ui/components/DisplayHeading.wrn | 8 - .publish/ui/components/DisplayNameInput.wrn | 16 - .publish/ui/components/DoNotSellLink.wrn | 11 - .publish/ui/components/DocumentPreview.wrn | 13 - .publish/ui/components/DocumentUpload.wrn | 13 - .publish/ui/components/DomainInput.wrn | 16 - .publish/ui/components/DonutChart.wrn | 11 - .publish/ui/components/DownloadAction.wrn | 11 - .publish/ui/components/DownloadButton.wrn | 9 - .publish/ui/components/DownloadGateForm.wrn | 13 - .../ui/components/DownloadPolicyButton.wrn | 11 - .../ui/components/DownloadResourceForm.wrn | 13 - .publish/ui/components/DragAndDrop.wrn | 19 + .publish/ui/components/Drawer.wrn | 17 +- .publish/ui/components/Dropdown.wrn | 19 + .publish/ui/components/DropdownMenu.wrn | 10 - .publish/ui/components/DropdownNavigation.wrn | 10 - .publish/ui/components/DurationInput.wrn | 16 - .publish/ui/components/DurationPicker.wrn | 16 - .publish/ui/components/DurationSlider.wrn | 13 - .publish/ui/components/ElevatedCard.wrn | 9 - .publish/ui/components/EmailBodyEditor.wrn | 16 - .publish/ui/components/EmailComposer.wrn | 13 - .publish/ui/components/EmailInput.wrn | 27 - .publish/ui/components/EmojiPicker.wrn | 16 - .publish/ui/components/EmptyState.wrn | 167 - .publish/ui/components/EncryptionDiagram.wrn | 11 - .publish/ui/components/EnterpriseCTA.wrn | 11 - .publish/ui/components/EnterpriseHero.wrn | 10 - .../ui/components/EnterprisePricingCard.wrn | 13 - .../ui/components/EnvironmentSelector.wrn | 16 - .../ui/components/EnvironmentSwitcher.wrn | 13 - .publish/ui/components/ErrorActions.wrn | 11 - .publish/ui/components/ErrorCard.wrn | 9 - .publish/ui/components/ErrorCode.wrn | 13 - .publish/ui/components/ErrorHero.wrn | 10 - .publish/ui/components/ErrorIllustration.wrn | 13 - .publish/ui/components/ErrorPage.wrn | 13 - .publish/ui/components/ErrorPageShell.wrn | 10 - .publish/ui/components/ErrorState.wrn | 193 - .publish/ui/components/ErrorSupportLink.wrn | 11 - .../ui/components/EstimatedCostSummary.wrn | 13 - .publish/ui/components/EventTable.wrn | 10 - .publish/ui/components/ExpandableText.wrn | 13 - .../ui/components/ExpiryDateTimePicker.wrn | 16 - .publish/ui/components/ExportProgress.wrn | 11 - .publish/ui/components/ExternalLink.wrn | 11 - .publish/ui/components/EyebrowText.wrn | 8 - .publish/ui/components/FAQ.wrn | 13 - .publish/ui/components/FAQAccordion.wrn | 235 - .publish/ui/components/FactorCard.wrn | 13 - .../ui/components/FallbackRouteBuilder.wrn | 13 - .../ui/components/FallbackRouteDiagram.wrn | 11 - .publish/ui/components/FaviconUpload.wrn | 13 - .publish/ui/components/FaxInput.wrn | 16 - .publish/ui/components/FeatureCard.wrn | 12 - .publish/ui/components/FeatureChecklist.wrn | 15 - .../ui/components/FeatureComparisonTable.wrn | 10 - .../ui/components/FeatureDetailsPanel.wrn | 10 - .publish/ui/components/FeatureGrid.wrn | 9 - .publish/ui/components/FeatureIconCard.wrn | 13 - .publish/ui/components/FeatureList.wrn | 10 - .publish/ui/components/FeatureTabs.wrn | 32 - .publish/ui/components/FeatureTimeline.wrn | 11 - .../ui/components/FeatureUnavailableState.wrn | 11 - .publish/ui/components/FeaturedBlogCard.wrn | 13 - .publish/ui/components/FieldActions.wrn | 11 - .publish/ui/components/FileInput.wrn | 18 +- .publish/ui/components/FileList.wrn | 10 - .publish/ui/components/FileSizeInput.wrn | 16 - .publish/ui/components/FileSizeLabel.wrn | 13 - .publish/ui/components/FileTypeBadge.wrn | 11 - .publish/ui/components/FileUpload.wrn | 19 +- .publish/ui/components/FileUploadProgress.wrn | 17 + .publish/ui/components/FilterBar.wrn | 9 - .publish/ui/components/FilterMenu.wrn | 10 - .publish/ui/components/FilterSearchInput.wrn | 16 - .publish/ui/components/FilterableTable.wrn | 10 - .publish/ui/components/FinalCTA.wrn | 68 - .publish/ui/components/FirstNameInput.wrn | 16 - .publish/ui/components/Flex.wrn | 6 - .publish/ui/components/FontPicker.wrn | 16 - .publish/ui/components/FontSizePicker.wrn | 16 - .publish/ui/components/FontWeightPicker.wrn | 16 - .../ui/components/FooterLanguageSwitcher.wrn | 13 - .../ui/components/FooterStatusIndicator.wrn | 11 - .publish/ui/components/ForbiddenPage.wrn | 13 - .publish/ui/components/ForbiddenState.wrn | 11 - .publish/ui/components/ForgotPasswordForm.wrn | 13 - .publish/ui/components/Form.wrn | 12 - .publish/ui/components/FormActions.wrn | 11 - .publish/ui/components/FormAlert.wrn | 11 - .publish/ui/components/FormDialog.wrn | 10 - .publish/ui/components/FormError.wrn | 8 - .publish/ui/components/FormErrorSummary.wrn | 10 - .publish/ui/components/FormField.wrn | 12 - .publish/ui/components/FormGrid.wrn | 10 - .publish/ui/components/FormGroup.wrn | 16 - .publish/ui/components/FormHelpText.wrn | 8 - .publish/ui/components/FormLabel.wrn | 12 - .publish/ui/components/FormProgress.wrn | 11 - .publish/ui/components/FormRow.wrn | 10 - .publish/ui/components/FormSection.wrn | 10 - .publish/ui/components/FullBleed.wrn | 6 - .publish/ui/components/FullscreenDialog.wrn | 10 - .publish/ui/components/FunnelChart.wrn | 11 - .publish/ui/components/GeoChart.wrn | 11 - .publish/ui/components/GeofenceEditor.wrn | 16 - .publish/ui/components/GhostButton.wrn | 9 - .publish/ui/components/GlassCard.wrn | 9 - .publish/ui/components/GlobalSearch.wrn | 13 - .publish/ui/components/GradientCTA.wrn | 11 - .publish/ui/components/GradientPicker.wrn | 16 - .publish/ui/components/GradientStopEditor.wrn | 16 - .publish/ui/components/GuideCard.wrn | 13 - .publish/ui/components/GuideChecklist.wrn | 13 - .../ui/components/GuideDifficultyBadge.wrn | 11 - .publish/ui/components/GuideGrid.wrn | 10 - .publish/ui/components/GuideStep.wrn | 13 - .publish/ui/components/Header.wrn | 10 - .publish/ui/components/HeaderActions.wrn | 11 - .publish/ui/components/HealthIndicator.wrn | 8 - .publish/ui/components/Hero.wrn | 17 - .publish/ui/components/HeroActions.wrn | 11 - .publish/ui/components/HeroCodePanel.wrn | 10 - .publish/ui/components/HeroGradientText.wrn | 13 - .publish/ui/components/HeroPrimaryAction.wrn | 11 - .publish/ui/components/HeroProductPreview.wrn | 13 - .../ui/components/HeroSecondaryAction.wrn | 11 - .publish/ui/components/HeroTrustText.wrn | 13 - .publish/ui/components/HexColorInput.wrn | 16 - .publish/ui/components/HiddenField.wrn | 16 - .publish/ui/components/HighlightText.wrn | 13 - .publish/ui/components/HolidayCalendar.wrn | 13 - .publish/ui/components/HostnameInput.wrn | 16 - .publish/ui/components/HourPicker.wrn | 16 - .publish/ui/components/HslColorInput.wrn | 16 - .publish/ui/components/HtmlEditor.wrn | 16 - .publish/ui/components/HumanApprovalStep.wrn | 13 - .publish/ui/components/Icon.wrn | 13 - .publish/ui/components/IconButton.wrn | 10 - .publish/ui/components/IconPicker.wrn | 16 - .publish/ui/components/IconSelector.wrn | 16 - .publish/ui/components/IdentifierInput.wrn | 16 - .publish/ui/components/Illustration.wrn | 13 - .publish/ui/components/Image.wrn | 19 + .../ui/components/ImageCompressionPreview.wrn | 13 - .publish/ui/components/ImageEditor.wrn | 16 - .publish/ui/components/ImagePreviewDialog.wrn | 10 - .publish/ui/components/ImageSelector.wrn | 16 - .publish/ui/components/ImageUpload.wrn | 13 - .publish/ui/components/ImportProgress.wrn | 11 - .publish/ui/components/IncidentAlert.wrn | 11 - .publish/ui/components/IncidentBanner.wrn | 11 - .publish/ui/components/IncidentCard.wrn | 13 - .publish/ui/components/IncidentList.wrn | 10 - .../ui/components/IncidentResponseFlow.wrn | 11 - .../ui/components/IncidentSeverityBadge.wrn | 11 - .publish/ui/components/IncidentTimeline.wrn | 11 - .publish/ui/components/IndustryBadge.wrn | 11 - .publish/ui/components/IndustrySelector.wrn | 16 - .publish/ui/components/InfoCard.wrn | 9 - .publish/ui/components/Inline.wrn | 9 - .publish/ui/components/InlineAlert.wrn | 11 - .publish/ui/components/InlineCode.wrn | 8 - .publish/ui/components/InputGroup.wrn | 16 +- .publish/ui/components/InputNumber.wrn | 20 + .publish/ui/components/InsetPanel.wrn | 6 - .publish/ui/components/IntegerInput.wrn | 16 - .publish/ui/components/IntegrationCard.wrn | 10 - .publish/ui/components/InvoiceLineItem.wrn | 13 - .publish/ui/components/InvoiceSummary.wrn | 13 - .publish/ui/components/IpAddressInput.wrn | 16 - .publish/ui/components/JobCard.wrn | 13 - .publish/ui/components/JobProgress.wrn | 11 - .publish/ui/components/JobTitleInput.wrn | 16 - .publish/ui/components/JsonInput.wrn | 16 - .publish/ui/components/JsonViewer.wrn | 13 - .publish/ui/components/Kbd.wrn | 9 + .publish/ui/components/KeyValueTable.wrn | 10 - .publish/ui/components/KycDocumentUpload.wrn | 13 - .publish/ui/components/LanguageSelector.wrn | 16 - .publish/ui/components/LanguageSwitcher.wrn | 13 - .publish/ui/components/LastNameInput.wrn | 16 - .publish/ui/components/LatencyMetric.wrn | 11 - .publish/ui/components/LatitudeInput.wrn | 16 - .publish/ui/components/LayoutSplitter.wrn | 13 + .publish/ui/components/LeadText.wrn | 8 - .publish/ui/components/LeadershipGrid.wrn | 10 - .../ui/components/LegalAcceptanceNotice.wrn | 11 - .publish/ui/components/LegalBulletList.wrn | 10 - .publish/ui/components/LegalContactBlock.wrn | 13 - .../ui/components/LegalDefinitionList.wrn | 10 - .../ui/components/LegalDocumentHeader.wrn | 10 - .../ui/components/LegalDocumentLayout.wrn | 11 - .publish/ui/components/LegalHero.wrn | 10 - .../ui/components/LegalLanguageSelector.wrn | 16 - .publish/ui/components/LegalNotice.wrn | 11 - .publish/ui/components/LegalPageShell.wrn | 6 - .publish/ui/components/LegalPrintButton.wrn | 11 - .../ui/components/LegalRegionSelector.wrn | 16 - .publish/ui/components/LegalSection.wrn | 10 - .publish/ui/components/LegalSummary.wrn | 13 - .publish/ui/components/LegalTable.wrn | 10 - .../ui/components/LegalTableOfContents.wrn | 8 - .publish/ui/components/LegalVersionBadge.wrn | 11 - .publish/ui/components/LegendIndicator.wrn | 19 + .../ui/components/LetterSpacingPicker.wrn | 16 - .publish/ui/components/LicenseKeyInput.wrn | 16 - .publish/ui/components/Lightbox.wrn | 10 - .publish/ui/components/LineChart.wrn | 11 - .publish/ui/components/LineHeightPicker.wrn | 16 - .publish/ui/components/Link.wrn | 10 +- .publish/ui/components/LinkButton.wrn | 9 - .publish/ui/components/List.wrn | 17 +- .publish/ui/components/ListGroup.wrn | 19 + .publish/ui/components/LoadingButton.wrn | 14 - .publish/ui/components/LocaleSelector.wrn | 16 - .publish/ui/components/LocalizedRouteLink.wrn | 11 - .publish/ui/components/LocationPicker.wrn | 16 - .publish/ui/components/LogTable.wrn | 10 - .publish/ui/components/Logo.wrn | 13 - .publish/ui/components/LogoCloud.wrn | 150 - .publish/ui/components/LogoUpload.wrn | 13 - .publish/ui/components/LogoutDialog.wrn | 10 - .publish/ui/components/LongitudeInput.wrn | 16 - .publish/ui/components/MaintenanceAlert.wrn | 11 - .publish/ui/components/MaintenanceBanner.wrn | 11 - .publish/ui/components/MaintenanceCard.wrn | 13 - .publish/ui/components/MaintenancePage.wrn | 13 - .publish/ui/components/MaintenanceState.wrn | 11 - .../ui/components/MaintenanceWindowPicker.wrn | 16 - .publish/ui/components/Map.wrn | 19 + .publish/ui/components/MapPicker.wrn | 16 - .publish/ui/components/MarkdownEditor.wrn | 16 - .publish/ui/components/MarketingPageShell.wrn | 6 - .../ui/components/MarketingSectionHeader.wrn | 35 - .publish/ui/components/Marquee.wrn | 19 + .publish/ui/components/MaskedSecretField.wrn | 16 - .publish/ui/components/MegaMenu.wrn | 14 +- .publish/ui/components/MemberList.wrn | 10 - .publish/ui/components/MentionInput.wrn | 16 - .../ui/components/MessageCharacterCounter.wrn | 11 - .publish/ui/components/MessageComposer.wrn | 13 - .../ui/components/MessageComposerPreview.wrn | 13 - .publish/ui/components/MessageLimitInput.wrn | 16 - .publish/ui/components/MessagePreview.wrn | 13 - .../ui/components/MessageVolumeSlider.wrn | 13 - .publish/ui/components/Metric.wrn | 11 - .publish/ui/components/MetricCard.wrn | 13 - .publish/ui/components/MetricGrid.wrn | 35 - .publish/ui/components/MetricText.wrn | 8 - .publish/ui/components/MinutePicker.wrn | 16 - .publish/ui/components/MissionSection.wrn | 10 - .publish/ui/components/MobileDeviceFrame.wrn | 10 - .publish/ui/components/MobileInput.wrn | 16 - .publish/ui/components/MobileMenuButton.wrn | 11 - .publish/ui/components/MobileNavigation.wrn | 12 - .publish/ui/components/MobileTableCard.wrn | 13 - .publish/ui/components/Modal.wrn | 15 +- .publish/ui/components/MonthPicker.wrn | 16 - .publish/ui/components/MonthYearPicker.wrn | 16 - .../ui/components/MonthlyVolumeSelector.wrn | 16 - .publish/ui/components/MultiFileUpload.wrn | 13 - .publish/ui/components/MultiSelect.wrn | 15 - .publish/ui/components/MultipleEmailInput.wrn | 16 - .publish/ui/components/MutedText.wrn | 8 - .publish/ui/components/NameInput.wrn | 16 - .publish/ui/components/NarrowContainer.wrn | 6 - .publish/ui/components/Nav.wrn | 17 + .publish/ui/components/Navbar.wrn | 17 + .publish/ui/components/Navigation.wrn | 10 - .publish/ui/components/NavigationItem.wrn | 13 - .publish/ui/components/NavigationMegaMenu.wrn | 10 - .publish/ui/components/NewBadge.wrn | 8 - .publish/ui/components/NewPasswordInput.wrn | 16 - .publish/ui/components/NewsletterCTA.wrn | 11 - .publish/ui/components/NewsletterForm.wrn | 214 - .publish/ui/components/NoResultsState.wrn | 11 - .publish/ui/components/NotFoundPage.wrn | 13 - .publish/ui/components/NotFoundState.wrn | 11 - .publish/ui/components/NotificationCard.wrn | 9 - .publish/ui/components/NotificationDot.wrn | 8 - .publish/ui/components/NotificationList.wrn | 10 - .publish/ui/components/NumberInput.wrn | 24 - .publish/ui/components/OfficeCard.wrn | 13 - .publish/ui/components/OfflinePage.wrn | 13 - .publish/ui/components/OfflineState.wrn | 11 - .publish/ui/components/OnboardingProgress.wrn | 11 - .../ui/components/OneTimeSecretDisplay.wrn | 13 - .publish/ui/components/OnlineIndicator.wrn | 8 - .publish/ui/components/OpacitySlider.wrn | 13 - .publish/ui/components/OpenAPICTA.wrn | 11 - .publish/ui/components/OptionalIndicator.wrn | 11 - .../ui/components/OrganizationSelector.wrn | 16 - .publish/ui/components/OtpInput.wrn | 11 - .../ui/components/OtpVerificationForm.wrn | 13 - .publish/ui/components/OutlinedCard.wrn | 9 - .publish/ui/components/PageAlert.wrn | 11 - .publish/ui/components/PageHeader.wrn | 172 - .publish/ui/components/PageHeading.wrn | 8 - .publish/ui/components/PageShell.wrn | 8 - .publish/ui/components/PageSkeleton.wrn | 11 - .publish/ui/components/Pagination.wrn | 200 +- .publish/ui/components/Panel.wrn | 6 - .../ui/components/PartnerApplicationForm.wrn | 13 - .publish/ui/components/PartnerLogoGrid.wrn | 10 - .publish/ui/components/PartnerProgramCard.wrn | 13 - .publish/ui/components/PasskeyButton.wrn | 28 - .publish/ui/components/PasswordInput.wrn | 32 - .../ui/components/PasswordRequirementList.wrn | 10 - .../ui/components/PasswordStrengthMeter.wrn | 11 - .../components/PasswordVisibilityToggle.wrn | 16 - .publish/ui/components/PathInput.wrn | 16 - .publish/ui/components/PaymentMethodCard.wrn | 13 - .publish/ui/components/PdfPreview.wrn | 13 - .publish/ui/components/PercentageInput.wrn | 16 - .publish/ui/components/PermissionSelector.wrn | 16 - .publish/ui/components/PhoneInput.wrn | 24 - .publish/ui/components/PieChart.wrn | 11 - .publish/ui/components/Pill.wrn | 8 - .publish/ui/components/PinInput.wrn | 112 +- .publish/ui/components/PlainTextEditor.wrn | 16 - .publish/ui/components/PlanCTA.wrn | 11 - .publish/ui/components/PlanFeatureList.wrn | 10 - .publish/ui/components/PlanLimitList.wrn | 10 - .publish/ui/components/PlanSelector.wrn | 16 - .publish/ui/components/PlatformPillarCard.wrn | 13 - .publish/ui/components/PolicyVersionTable.wrn | 10 - .publish/ui/components/Popover.wrn | 13 +- .publish/ui/components/PortInput.wrn | 16 - .publish/ui/components/PortNumberInput.wrn | 16 - .../ui/components/PositiveNumberInput.wrn | 16 - .publish/ui/components/PostalCodeInput.wrn | 16 - .publish/ui/components/PostmanCTA.wrn | 11 - .../ui/components/PresetDateRangePicker.wrn | 16 - .publish/ui/components/PressReleaseCard.wrn | 13 - .publish/ui/components/PreviewBadge.wrn | 8 - .../ui/components/PreviousNextNavigation.wrn | 10 - .publish/ui/components/PriceInput.wrn | 16 - .publish/ui/components/PriceRangeSlider.wrn | 13 - .publish/ui/components/PriceText.wrn | 8 - .publish/ui/components/PricingCard.wrn | 13 - .../ui/components/PricingComparisonTable.wrn | 35 - .publish/ui/components/PricingContactForm.wrn | 13 - .../ui/components/PricingFeatureGroup.wrn | 16 - .publish/ui/components/PricingGrid.wrn | 10 - .publish/ui/components/PricingHero.wrn | 66 - .publish/ui/components/PricingPlanCard.wrn | 64 - .publish/ui/components/PricingTable.wrn | 10 - .publish/ui/components/PricingToggle.wrn | 16 - .publish/ui/components/PrimaryButton.wrn | 9 - .publish/ui/components/PrintAction.wrn | 11 - .publish/ui/components/PrintPolicyButton.wrn | 11 - .publish/ui/components/PrioritySelector.wrn | 16 - .publish/ui/components/PrivacyNotice.wrn | 11 - .../components/ProductArchitectureDiagram.wrn | 35 - .publish/ui/components/ProductCTA.wrn | 11 - .publish/ui/components/ProductCard.wrn | 27 - .../ui/components/ProductCategorySection.wrn | 10 - .publish/ui/components/ProductFeatureList.wrn | 10 - .publish/ui/components/ProductGrid.wrn | 28 - .publish/ui/components/ProductHero.wrn | 55 - .publish/ui/components/ProductIcon.wrn | 13 - .../ui/components/ProductIntegrationList.wrn | 10 - .publish/ui/components/ProductList.wrn | 10 - .publish/ui/components/ProductLogo.wrn | 13 - .publish/ui/components/ProductMegaMenu.wrn | 332 - .publish/ui/components/ProductMiniCard.wrn | 13 - .../ui/components/ProductNavigationCard.wrn | 13 - .publish/ui/components/ProductPageShell.wrn | 13 - .publish/ui/components/ProductSelector.wrn | 16 - .publish/ui/components/ProductStatusBadge.wrn | 16 - .publish/ui/components/ProductUseCaseList.wrn | 10 - .publish/ui/components/ProductsMegaMenu.wrn | 8 - .publish/ui/components/ProgressBar.wrn | 12 - .publish/ui/components/ProgressChart.wrn | 11 - .publish/ui/components/ProgressRing.wrn | 11 - .publish/ui/components/ProgressSlider.wrn | 13 - .publish/ui/components/ProjectCard.wrn | 9 - .publish/ui/components/ProjectSelector.wrn | 16 - .publish/ui/components/ProjectSwitcher.wrn | 13 - .publish/ui/components/PromoCodeInput.wrn | 16 - .publish/ui/components/PromptDialog.wrn | 10 - .publish/ui/components/ProviderSelector.wrn | 16 - .publish/ui/components/PublicFooter.wrn | 675 - .publish/ui/components/PublicHeader.wrn | 350 - .publish/ui/components/PublicHeaderLogo.wrn | 13 - .../ui/components/PublicMobileNavigation.wrn | 589 - .publish/ui/components/PublicPageShell.wrn | 10 - .publish/ui/components/PublicSearch.wrn | 125 - .../ui/components/PublishDateTimePicker.wrn | 16 - .publish/ui/components/PushComposer.wrn | 13 - .../ui/components/PushNotificationEditor.wrn | 16 - .publish/ui/components/QrCode.wrn | 13 - .publish/ui/components/QuantityInput.wrn | 16 - .publish/ui/components/QuantityStepper.wrn | 13 - .publish/ui/components/QuietHoursPicker.wrn | 15 - .publish/ui/components/QuoteText.wrn | 8 - .publish/ui/components/RadioGroup.wrn | 10 - .publish/ui/components/RangeInput.wrn | 16 - .publish/ui/components/RangeSlider.wrn | 23 +- .publish/ui/components/RateLimitInput.wrn | 16 - .publish/ui/components/RateLimitPage.wrn | 13 - .publish/ui/components/RateLimitedState.wrn | 11 - .publish/ui/components/RateTable.wrn | 10 - .publish/ui/components/Rating.wrn | 19 + .publish/ui/components/RatingSlider.wrn | 13 - .publish/ui/components/RecipientSelector.wrn | 16 - .publish/ui/components/RecoveryCodeForm.wrn | 13 - .publish/ui/components/RecoveryCodeInput.wrn | 16 - .../ui/components/RecurrenceRuleBuilder.wrn | 13 - .../ui/components/RecurringSchedulePicker.wrn | 13 - .publish/ui/components/RedirectUriInput.wrn | 16 - .publish/ui/components/ReferenceInput.wrn | 16 - .publish/ui/components/RegexInput.wrn | 16 - .../ui/components/RegionAvailabilityTable.wrn | 10 - .publish/ui/components/RegionSelector.wrn | 16 - .../ui/components/RegionUnavailableAlert.wrn | 11 - .../ui/components/RegionUnavailableState.wrn | 11 - .../ui/components/RegionalPrivacyBanner.wrn | 11 - .../RejectOptionalCookiesButton.wrn | 11 - .../components/ReopenCookieSettingsButton.wrn | 11 - .publish/ui/components/ReportCard.wrn | 13 - .../ui/components/RequestResponseViewer.wrn | 13 - .publish/ui/components/RequestViewer.wrn | 13 - .publish/ui/components/RequiredIndicator.wrn | 11 - .publish/ui/components/ResetPasswordForm.wrn | 13 - .publish/ui/components/ResizablePanel.wrn | 10 - .publish/ui/components/ResourceCard.wrn | 13 - .../ui/components/ResourceDownloadCard.wrn | 13 - .publish/ui/components/ResourcePageShell.wrn | 10 - .publish/ui/components/ResourceSearch.wrn | 13 - .publish/ui/components/ResourceTypeBadge.wrn | 11 - .publish/ui/components/ResourcesMegaMenu.wrn | 365 - .publish/ui/components/ResponseViewer.wrn | 13 - .../components/ResponsibleDisclosureCTA.wrn | 11 - .publish/ui/components/ResponsiveTable.wrn | 10 - .publish/ui/components/ResultsSection.wrn | 10 - .publish/ui/components/RetentionTable.wrn | 10 - .publish/ui/components/RetryCountInput.wrn | 16 - .publish/ui/components/RevenueChart.wrn | 11 - .publish/ui/components/RgbColorInput.wrn | 16 - .publish/ui/components/RichTextEditor.wrn | 16 - .publish/ui/components/RichTextInput.wrn | 16 - .publish/ui/components/RoleSelector.wrn | 16 - .../ui/components/RollingDateRangePicker.wrn | 16 - .publish/ui/components/SDKCard.wrn | 13 - .publish/ui/components/SDKLanguageTabs.wrn | 13 - .publish/ui/components/SDKTabs.wrn | 10 - .../SaveCookiePreferencesButton.wrn | 11 - .../ui/components/SavedFilterSelector.wrn | 16 - .../ui/components/ScheduleMessagePicker.wrn | 16 - .publish/ui/components/SchedulePicker.wrn | 9 - .../ui/components/ScheduledDateTimePicker.wrn | 16 - .publish/ui/components/ScreenshotFrame.wrn | 10 - .publish/ui/components/ScrollArea.wrn | 6 - .publish/ui/components/Scrollspy.wrn | 17 + .../ui/components/SdkLanguageSelector.wrn | 16 - .publish/ui/components/SearchBox.wrn | 20 + .publish/ui/components/SearchButton.wrn | 11 - .publish/ui/components/SearchCategoryTabs.wrn | 13 - .publish/ui/components/SearchDialog.wrn | 10 - .publish/ui/components/SearchEmptyState.wrn | 11 - .publish/ui/components/SearchInput.wrn | 24 - .publish/ui/components/SearchLoadingState.wrn | 11 - .publish/ui/components/SearchResultItem.wrn | 13 - .publish/ui/components/SecondPicker.wrn | 16 - .publish/ui/components/SecondaryButton.wrn | 9 - .publish/ui/components/SecretDisplay.wrn | 13 - .publish/ui/components/SecretInput.wrn | 16 - .publish/ui/components/SecretRevealDialog.wrn | 10 - .publish/ui/components/Section.wrn | 11 - .publish/ui/components/SectionActions.wrn | 13 - .publish/ui/components/SectionHeader.wrn | 12 - .publish/ui/components/SectionHeading.wrn | 8 - .publish/ui/components/SecurityAlert.wrn | 11 - .../ui/components/SecurityContactCard.wrn | 13 - .../ui/components/SecurityFeatureCard.wrn | 13 - .publish/ui/components/SecurityHero.wrn | 10 - .publish/ui/components/SecurityPillarGrid.wrn | 10 - .../ui/components/SecurityPracticeList.wrn | 10 - .publish/ui/components/SecurityReportForm.wrn | 13 - .../ui/components/SegmentedButtonGroup.wrn | 44 - .publish/ui/components/SenderIdInput.wrn | 16 - .publish/ui/components/ServerErrorPage.wrn | 13 - .publish/ui/components/ServiceLevelTable.wrn | 10 - .publish/ui/components/ServiceStatusBadge.wrn | 11 - .publish/ui/components/ServiceStatusList.wrn | 10 - .publish/ui/components/ServiceStatusRow.wrn | 10 - .publish/ui/components/SessionCard.wrn | 13 - .../ui/components/SessionExpiredDialog.wrn | 10 - .publish/ui/components/SetupChecklist.wrn | 13 - .publish/ui/components/SeveritySelector.wrn | 16 - .publish/ui/components/ShadowPicker.wrn | 16 - .publish/ui/components/ShareAction.wrn | 11 - .publish/ui/components/ShareButton.wrn | 9 - .publish/ui/components/SidePanel.wrn | 10 - .publish/ui/components/Sidebar.wrn | 17 + .publish/ui/components/SidebarLayout.wrn | 6 - .publish/ui/components/SignInForm.wrn | 13 - .publish/ui/components/SignInLink.wrn | 30 - .publish/ui/components/SignUpForm.wrn | 13 - .publish/ui/components/SiteSearch.wrn | 13 - .publish/ui/components/SkipLink.wrn | 11 - .publish/ui/components/SlaTable.wrn | 10 - .publish/ui/components/Slider.wrn | 13 - .publish/ui/components/SlugInput.wrn | 16 - .publish/ui/components/SmallText.wrn | 8 - .publish/ui/components/SmartRouteDiagram.wrn | 11 - .publish/ui/components/SmsComposer.wrn | 13 - .publish/ui/components/SmsMessageEditor.wrn | 16 - .publish/ui/components/SmsSegmentCounter.wrn | 11 - .publish/ui/components/SocialShare.wrn | 143 - .publish/ui/components/SolutionHero.wrn | 10 - .publish/ui/components/SolutionPageShell.wrn | 10 - .publish/ui/components/SolutionSection.wrn | 10 - .publish/ui/components/SolutionsMegaMenu.wrn | 368 - .publish/ui/components/SortableTable.wrn | 10 - .publish/ui/components/SplitButton.wrn | 11 - .publish/ui/components/SplitCTA.wrn | 11 - .publish/ui/components/SplitHero.wrn | 10 - .publish/ui/components/SplitLayout.wrn | 6 - .publish/ui/components/SplitSectionHeader.wrn | 10 - .publish/ui/components/StartFreeButton.wrn | 11 - .publish/ui/components/StatCard.wrn | 12 - .publish/ui/components/StateSelector.wrn | 16 - .publish/ui/components/StatusBadge.wrn | 9 - .publish/ui/components/StatusBanner.wrn | 122 - .publish/ui/components/StatusPageShell.wrn | 10 - .publish/ui/components/StatusSelector.wrn | 16 - .../ui/components/StatusSubscribeForm.wrn | 13 - .publish/ui/components/StatusTable.wrn | 10 - .publish/ui/components/StepNavigation.wrn | 10 - .../components/StepUpAuthenticationDialog.wrn | 10 - .publish/ui/components/Stepper.wrn | 20 +- .publish/ui/components/StepperInput.wrn | 16 - .publish/ui/components/StickerPicker.wrn | 16 - .publish/ui/components/Sticky.wrn | 6 - .publish/ui/components/StickyLayout.wrn | 6 - .publish/ui/components/StreetAddressInput.wrn | 16 - .publish/ui/components/StrongPassword.wrn | 215 + .publish/ui/components/StyledIcon.wrn | 19 + .publish/ui/components/SubdomainInput.wrn | 16 - .publish/ui/components/SubjectInput.wrn | 16 - .publish/ui/components/SubprocessorTable.wrn | 10 - .publish/ui/components/SubsectionHeading.wrn | 8 - .publish/ui/components/SuccessCard.wrn | 9 - .publish/ui/components/SuccessState.wrn | 11 - .publish/ui/components/SupportRequestForm.wrn | 13 - .publish/ui/components/Surface.wrn | 6 - .publish/ui/components/TableHeader.wrn | 10 - .publish/ui/components/TableRow.wrn | 10 - .publish/ui/components/TableSkeleton.wrn | 11 - .publish/ui/components/Tabs.wrn | 13 +- .publish/ui/components/TagInput.wrn | 16 - .publish/ui/components/TaxNotice.wrn | 11 - .publish/ui/components/TaxRateInput.wrn | 16 - .publish/ui/components/TeamMemberCard.wrn | 13 - .publish/ui/components/TeamSizeSelector.wrn | 16 - .publish/ui/components/TemplateCard.wrn | 9 - .publish/ui/components/TemplateSelector.wrn | 16 - .../ui/components/TemplateVariableInput.wrn | 16 - .../ui/components/TenantIsolationDiagram.wrn | 11 - .publish/ui/components/TerminalBlock.wrn | 13 - .publish/ui/components/TertiaryButton.wrn | 9 - .publish/ui/components/TestMessageDialog.wrn | 10 - .publish/ui/components/TestimonialCard.wrn | 13 - .../ui/components/TestimonialCarousel.wrn | 13 - .publish/ui/components/TextInput.wrn | 24 - .publish/ui/components/TextLink.wrn | 11 - .publish/ui/components/TextSkeleton.wrn | 11 - .publish/ui/components/ThemeColorPicker.wrn | 16 - .publish/ui/components/ThemeSwitcher.wrn | 13 - .publish/ui/components/TimeInput.wrn | 24 - .publish/ui/components/TimePicker.wrn | 17 +- .publish/ui/components/TimeRangePicker.wrn | 16 - .publish/ui/components/Timeline.wrn | 14 +- .publish/ui/components/TimelineChart.wrn | 11 - .publish/ui/components/TimelineItem.wrn | 12 - .publish/ui/components/TimeoutInput.wrn | 16 - .../ui/components/TimezoneAwareTimePicker.wrn | 16 - .publish/ui/components/TimezoneSelector.wrn | 11 - .publish/ui/components/Toast.wrn | 18 +- .publish/ui/components/ToastAction.wrn | 11 - .publish/ui/components/ToastHost.wrn | 212 - .publish/ui/components/ToastIcon.wrn | 13 - .publish/ui/components/ToastNotifications.wrn | 19 + .publish/ui/components/ToastProgress.wrn | 11 - .publish/ui/components/Toggle.wrn | 16 - .publish/ui/components/ToggleCount.wrn | 20 + .publish/ui/components/ToggleGroup.wrn | 16 - .publish/ui/components/TogglePassword.wrn | 153 + .publish/ui/components/TokenInput.wrn | 16 - .../ui/components/TotpVerificationForm.wrn | 13 - .publish/ui/components/TranslatedText.wrn | 13 - .publish/ui/components/TreeTable.wrn | 10 - .publish/ui/components/TreeView.wrn | 19 + .publish/ui/components/TrendIndicator.wrn | 11 - .publish/ui/components/TruncatedText.wrn | 13 - .publish/ui/components/TrustBadgeList.wrn | 15 - .publish/ui/components/Typography.wrn | 10 +- .../ui/components/UnavailableRegionState.wrn | 11 - .../ui/components/UnifiedTimelinePreview.wrn | 15 - .../ui/components/UnsavedChangesDialog.wrn | 10 - .publish/ui/components/UploadItem.wrn | 13 - .publish/ui/components/UploadPreview.wrn | 13 - .publish/ui/components/UploadProgress.wrn | 11 - .publish/ui/components/UptimeChart.wrn | 11 - .publish/ui/components/UptimeMetric.wrn | 11 - .publish/ui/components/UrlInput.wrn | 24 - .publish/ui/components/UsagePricingTable.wrn | 10 - .publish/ui/components/UseCaseSelector.wrn | 16 - .publish/ui/components/UserCard.wrn | 9 - .publish/ui/components/UsernameInput.wrn | 16 - .publish/ui/components/ValueCard.wrn | 13 - .publish/ui/components/ValuesGrid.wrn | 10 - .../ui/components/VerificationCodeInput.wrn | 16 - .publish/ui/components/VerifiedBadge.wrn | 8 - .publish/ui/components/VersionSelector.wrn | 16 - .publish/ui/components/VerticalTabs.wrn | 13 - .publish/ui/components/VideoCard.wrn | 13 - .publish/ui/components/VideoPreviewDialog.wrn | 10 - .publish/ui/components/VideoUpload.wrn | 13 - .publish/ui/components/VirtualizedTable.wrn | 10 - .publish/ui/components/VisionSection.wrn | 10 - .publish/ui/components/VisuallyHidden.wrn | 8 - .../ui/components/VoiceScriptComposer.wrn | 13 - .publish/ui/components/VoiceScriptEditor.wrn | 16 - .publish/ui/components/VolumeInput.wrn | 16 - .publish/ui/components/VolumeSlider.wrn | 13 - .publish/ui/components/WarningCard.wrn | 9 - .publish/ui/components/WebhookEventCard.wrn | 13 - .publish/ui/components/WebhookFlowDiagram.wrn | 11 - .../ui/components/WebhookPayloadViewer.wrn | 13 - .publish/ui/components/WebhookUrlInput.wrn | 16 - .publish/ui/components/WebinarCard.wrn | 13 - .../ui/components/WebinarRegistrationForm.wrn | 13 - .publish/ui/components/Well.wrn | 6 - .publish/ui/components/WhatsAppComposer.wrn | 13 - .../ui/components/WhatsAppNumberInput.wrn | 16 - .../ui/components/WhatsAppTemplateEditor.wrn | 16 - .publish/ui/components/WideContainer.wrn | 6 - .publish/ui/components/Wizard.wrn | 13 - .publish/ui/components/WizardHeader.wrn | 10 - .publish/ui/components/WizardNavigation.wrn | 10 - .../ui/components/WorkflowCanvasPreview.wrn | 18 - .publish/ui/components/WorkflowProgress.wrn | 11 - .publish/ui/components/WorkspaceCard.wrn | 9 - .publish/ui/components/WorkspaceSelector.wrn | 16 - .publish/ui/components/WorkspaceSwitcher.wrn | 13 - .publish/ui/components/WysiwygEditor.wrn | 19 + .publish/ui/components/YearPicker.wrn | 16 - .publish/ui/components/ZoomSlider.wrn | 13 - .publish/ui/components/alert.wrn | 28 +- .publish/ui/components/avatar.wrn | 17 +- .publish/ui/components/badge.wrn | 30 +- .publish/ui/components/button.wrn | 171 +- .publish/ui/components/card.wrn | 16 +- .publish/ui/components/checkbox.wrn | 11 +- .publish/ui/components/container.wrn | 8 +- .publish/ui/components/disclosure.wrn | 13 - .publish/ui/components/divider.wrn | 8 +- .publish/ui/components/file-upload.wrn | 21 - .publish/ui/components/grid.wrn | 10 +- .publish/ui/components/hstack.wrn | 12 - .publish/ui/components/input.wrn | 13 +- .publish/ui/components/progress.wrn | 12 +- .publish/ui/components/radio.wrn | 14 +- .publish/ui/components/select.wrn | 16 +- .publish/ui/components/skeleton.wrn | 12 +- .publish/ui/components/spacer.wrn | 9 - .publish/ui/components/spinner.wrn | 8 +- .publish/ui/components/stack.wrn | 9 - .publish/ui/components/switch.wrn | 12 +- .publish/ui/components/table.wrn | 24 +- .publish/ui/components/tag.wrn | 11 - .publish/ui/components/textarea.wrn | 13 +- .publish/ui/components/theme-toggle.wrn | 11 - .publish/ui/components/tooltip.wrn | 15 +- .publish/ui/package.json | 6 +- .publish/ui/ui.css | 1417 +- .publish/uploader/package.json | 4 +- .publish/validation/package.json | 2 +- README.md | 20 + bun.lock | 475 +- docs/GUIDE.md | 8 +- editors/vscode/package.json | 12 +- editors/vscode/src/compiler.cjs | 227 +- editors/vscode/src/component-metadata.js | 20 +- editors/vscode/src/diagnostics.js | 68 +- editors/vscode/src/extension.js | 5 +- editors/vscode/src/formatter.js | 151 +- editors/vscode/syntaxes/wrn.tmLanguage.json | 17 + .../vscode/test/component-metadata.test.js | 20 + editors/vscode/test/diagnostics.test.js | 35 + editors/vscode/test/formatter.test.js | 145 + examples/basic-app/app/db/queries.gen.ts | 8 +- examples/basic-app/app/pages/test.wrn | 233 + examples/basic-app/app/routes.gen.ts | 58 +- examples/component-showcase/README.md | 23 + examples/component-showcase/app/api/teams.ts | 44 + .../app/layouts/document.wrn | 22 + .../app/layouts/showcase.wrn | 70 + .../app/pages/accessibility.wrn | 16 + .../app/pages/advanced-forms.wrn | 107 + .../component-showcase/app/pages/base.wrn | 287 + .../component-showcase/app/pages/blocks.wrn | 11 + .../component-showcase/app/pages/colors.wrn | 16 + .../app/pages/components/accordion.wrn | 656 + .../pages/components/advanced-date-picker.wrn | 664 + .../components/advanced-range-slider.wrn | 664 + .../app/pages/components/advanced-select.wrn | 2604 + .../app/pages/components/alert.wrn | 664 + .../app/pages/components/avatar-group.wrn | 664 + .../app/pages/components/avatar.wrn | 664 + .../app/pages/components/badge.wrn | 664 + .../app/pages/components/blockquote.wrn | 664 + .../app/pages/components/breadcrumb.wrn | 656 + .../app/pages/components/button-group.wrn | 664 + .../app/pages/components/button.wrn | 256 + .../app/pages/components/card.wrn | 664 + .../app/pages/components/carousel.wrn | 664 + .../app/pages/components/chart.wrn | 664 + .../app/pages/components/chat-bubble.wrn | 664 + .../app/pages/components/checkbox.wrn | 122 + .../app/pages/components/clipboard.wrn | 664 + .../app/pages/components/collapse.wrn | 652 + .../app/pages/components/color-picker.wrn | 131 + .../app/pages/components/columns.wrn | 112 + .../app/pages/components/combo-box.wrn | 1343 + .../app/pages/components/confetti.wrn | 664 + .../app/pages/components/container.wrn | 118 + .../app/pages/components/context-menu.wrn | 132 + .../app/pages/components/copy-markup.wrn | 131 + .../app/pages/components/custom-scrollbar.wrn | 112 + .../app/pages/components/data-map.wrn | 664 + .../app/pages/components/data-table.wrn | 1193 + .../app/pages/components/date-picker.wrn | 131 + .../app/pages/components/device-frame.wrn | 664 + .../app/pages/components/divider.wrn | 117 + .../app/pages/components/drag-and-drop.wrn | 664 + .../app/pages/components/drawer.wrn | 132 + .../app/pages/components/dropdown.wrn | 132 + .../app/pages/components/file-input.wrn | 131 + .../pages/components/file-upload-progress.wrn | 123 + .../app/pages/components/file-upload.wrn | 664 + .../app/pages/components/grid.wrn | 112 + .../app/pages/components/image.wrn | 115 + .../app/pages/components/input-group.wrn | 131 + .../app/pages/components/input-number.wrn | 131 + .../app/pages/components/input.wrn | 131 + .../app/pages/components/kbd.wrn | 116 + .../app/pages/components/layout-splitter.wrn | 112 + .../app/pages/components/legend-indicator.wrn | 664 + .../app/pages/components/link.wrn | 122 + .../app/pages/components/list-group.wrn | 664 + .../app/pages/components/list.wrn | 664 + .../app/pages/components/map.wrn | 664 + .../app/pages/components/marquee.wrn | 664 + .../app/pages/components/mega-menu.wrn | 656 + .../app/pages/components/modal.wrn | 132 + .../app/pages/components/nav.wrn | 656 + .../app/pages/components/navbar.wrn | 656 + .../app/pages/components/pagination.wrn | 656 + .../app/pages/components/pin-input.wrn | 436 + .../app/pages/components/popover.wrn | 132 + .../app/pages/components/progress.wrn | 121 + .../app/pages/components/radio.wrn | 122 + .../app/pages/components/range-slider.wrn | 131 + .../app/pages/components/rating.wrn | 664 + .../app/pages/components/scrollspy.wrn | 656 + .../app/pages/components/search-box.wrn | 131 + .../app/pages/components/select.wrn | 667 + .../app/pages/components/sidebar.wrn | 656 + .../app/pages/components/skeleton.wrn | 117 + .../app/pages/components/spinner.wrn | 117 + .../app/pages/components/stepper.wrn | 656 + .../app/pages/components/strong-password.wrn | 216 + .../app/pages/components/styled-icon.wrn | 664 + .../app/pages/components/switch.wrn | 122 + .../app/pages/components/table.wrn | 1197 + .../app/pages/components/tabs.wrn | 656 + .../app/pages/components/textarea.wrn | 128 + .../app/pages/components/time-picker.wrn | 131 + .../app/pages/components/timeline.wrn | 664 + .../pages/components/toast-notifications.wrn | 664 + .../app/pages/components/toast.wrn | 664 + .../app/pages/components/toggle-count.wrn | 131 + .../app/pages/components/toggle-password.wrn | 325 + .../app/pages/components/tooltip.wrn | 136 + .../app/pages/components/tree-view.wrn | 664 + .../app/pages/components/typography.wrn | 118 + .../app/pages/components/wysiwyg-editor.wrn | 664 + .../app/pages/dark-mode.wrn | 16 + .../component-showcase/app/pages/docs.wrn | 10 + .../component-showcase/app/pages/fonts.wrn | 16 + .../component-showcase/app/pages/forms.wrn | 127 + .../app/pages/framework-guides.wrn | 16 + .../component-showcase/app/pages/index.wrn | 27 + .../app/pages/installation.wrn | 16 + .../app/pages/integrations.wrn | 137 + .../component-showcase/app/pages/layout.wrn | 117 + .../app/pages/navigation.wrn | 107 + .../component-showcase/app/pages/overlays.wrn | 77 + .../app/pages/resources.wrn | 16 + .../component-showcase/app/pages/sizing.wrn | 16 + .../component-showcase/app/pages/tables.wrn | 27 + .../app/pages/templates.wrn | 11 + .../component-showcase/app/pages/themes.wrn | 16 + examples/component-showcase/app/routes.gen.ts | 160 + .../advanced-select-dynamic-validation.ts | 5 + .../app/schemas/advanced-select-validation.ts | 5 + .../app/schemas/combobox-validation.ts | 5 + .../app/schemas/pin-input-validation.ts | 8 + .../app/schemas/toggle-password-validation.ts | 8 + .../component-showcase/app/styles/global.css | 2467 + examples/component-showcase/package.json | 25 + .../component-showcase/public/playground.js | 313 + .../scripts/generate-showcase.mjs | 1724 + .../component-showcase/test/showcase.test.ts | 231 + examples/component-showcase/tsconfig.json | 7 + examples/component-showcase/wrnexus.config.ts | 30 + packages/ai/package.json | 2 +- packages/authz/package.json | 2 +- packages/cli/package.json | 2 +- packages/cli/src/create.ts | 26 + packages/cli/src/update.ts | 37 +- packages/cli/test/create.test.ts | 5 + packages/compiler/README.md | 1 + packages/compiler/package.json | 2 +- packages/compiler/src/codegen.ts | 227 +- packages/compiler/src/index.ts | 1 + packages/compiler/test/compiler.test.ts | 119 + packages/core/package.json | 2 +- packages/csr/package.json | 2 +- packages/csr/src/reactive-runtime.ts | 659 +- packages/csr/test/reactive.test.ts | 41 + packages/db/package.json | 2 +- packages/dev-server/package.json | 2 +- packages/dev-server/src/runtime.ts | 75 +- packages/dev-server/test/props.test.ts | 14 +- packages/dev-toolbar/package.json | 2 +- packages/encryption/package.json | 2 +- packages/helpers/package.json | 2 +- packages/i18n/package.json | 2 +- packages/jwt/package.json | 2 +- packages/mobile/package.json | 2 +- packages/native/package.json | 2 +- packages/oauth/package.json | 2 +- packages/plugin/package.json | 2 +- packages/pubsub/package.json | 2 +- packages/queue/package.json | 2 +- packages/reactive/package.json | 2 +- packages/router/package.json | 2 +- packages/ssr/package.json | 2 +- packages/ssr/src/index.ts | 25 + packages/ssr/test/ssr.test.ts | 18 + packages/styles/package.json | 2 +- packages/syntax/package.json | 2 +- packages/syntax/src/index.ts | 1 + packages/syntax/src/parser.ts | 30 +- packages/syntax/test/syntax.test.ts | 14 + packages/test/package.json | 2 +- packages/test/src/index.ts | 4 + packages/tracking/package.json | 2 +- packages/ui/COMPONENTS.md | 8521 +-- packages/ui/component-catalog.json | 4368 +- packages/ui/component-migrations.json | 5 + packages/ui/component-reference.json | 48985 +--------------- .../ui/components/AcceptAllCookiesButton.wrn | 11 - .../ui/components/AccessibleAccordion.wrn | 13 - packages/ui/components/AccessibleCarousel.wrn | 13 - .../ui/components/AccessibleChartSummary.wrn | 15 - packages/ui/components/AccessibleDialog.wrn | 10 - .../ui/components/AccessibleErrorSummary.wrn | 13 - packages/ui/components/AccessibleIcon.wrn | 13 - packages/ui/components/AccessibleMenu.wrn | 10 - packages/ui/components/AccessibleTabs.wrn | 13 - packages/ui/components/AccessibleTooltip.wrn | 13 - packages/ui/components/Accordion.wrn | 42 +- packages/ui/components/AccountMenu.wrn | 10 - .../ui/components/AccountStatusBanner.wrn | 11 - packages/ui/components/ActionMenu.wrn | 10 - packages/ui/components/ActiveFilterList.wrn | 10 - packages/ui/components/ActivityList.wrn | 10 - packages/ui/components/AddOnCard.wrn | 13 - packages/ui/components/AddressInput.wrn | 16 - packages/ui/components/AddressPreview.wrn | 13 - packages/ui/components/AdvancedDatePicker.wrn | 19 + .../ui/components/AdvancedFilterBuilder.wrn | 13 - .../ui/components/AdvancedRangeSlider.wrn | 19 + packages/ui/components/AdvancedSelect.wrn | 456 + packages/ui/components/AlertDialog.wrn | 10 - packages/ui/components/AmountInput.wrn | 16 - .../components/AnalyticsDashboardPreview.wrn | 83 - packages/ui/components/AnchorNavigation.wrn | 10 - packages/ui/components/AnnouncementBar.wrn | 96 - packages/ui/components/ApartmentInput.wrn | 16 - .../ui/components/ApiAuthenticationNotice.wrn | 11 - packages/ui/components/ApiEndpointCard.wrn | 39 - packages/ui/components/ApiErrorExample.wrn | 13 - packages/ui/components/ApiHeaderTable.wrn | 10 - packages/ui/components/ApiKeyCreateDialog.wrn | 10 - packages/ui/components/ApiKeyDisplay.wrn | 13 - packages/ui/components/ApiKeyInput.wrn | 16 - packages/ui/components/ApiMethodBadge.wrn | 11 - packages/ui/components/ApiParameterTable.wrn | 10 - packages/ui/components/ApiRateLimitNotice.wrn | 11 - packages/ui/components/ApiRequestExample.wrn | 13 - packages/ui/components/ApiResponseExample.wrn | 13 - packages/ui/components/ApiSchemaTable.wrn | 10 - packages/ui/components/ApiSchemaViewer.wrn | 13 - packages/ui/components/ApiVersionBadge.wrn | 11 - packages/ui/components/AppHeader.wrn | 10 - .../ui/components/ArchitectureSection.wrn | 10 - packages/ui/components/AreaChart.wrn | 11 - packages/ui/components/ArticleHero.wrn | 10 - packages/ui/components/ArticleLayout.wrn | 10 - .../ui/components/ArticleNewsletterCTA.wrn | 11 - packages/ui/components/ArticlePageShell.wrn | 10 - .../ui/components/ArticleShareActions.wrn | 11 - packages/ui/components/AspectRatio.wrn | 6 - packages/ui/components/AssetCard.wrn | 9 - packages/ui/components/AttachmentPicker.wrn | 16 - packages/ui/components/AttachmentUpload.wrn | 13 - packages/ui/components/AudioUpload.wrn | 13 - packages/ui/components/AuditLogPreview.wrn | 13 - packages/ui/components/AuditTable.wrn | 10 - .../ui/components/AuthenticatorCodeInput.wrn | 16 - packages/ui/components/AuthorAvatar.wrn | 13 - packages/ui/components/AuthorCard.wrn | 13 - .../components/AuthorizedApplicationCard.wrn | 13 - packages/ui/components/AutoGrid.wrn | 6 - .../ui/components/AutomationExampleCard.wrn | 13 - .../ui/components/AvailabilityCalendar.wrn | 13 - packages/ui/components/AvatarGroup.wrn | 25 +- packages/ui/components/AvatarUpload.wrn | 13 - packages/ui/components/BackButton.wrn | 9 - packages/ui/components/BackToTop.wrn | 94 - .../ui/components/BankTransferDetails.wrn | 13 - packages/ui/components/Banner.wrn | 12 - packages/ui/components/BarChart.wrn | 11 - packages/ui/components/BetaBadge.wrn | 8 - packages/ui/components/BillingAddressForm.wrn | 13 - packages/ui/components/BillingExample.wrn | 13 - .../ui/components/BillingPeriodToggle.wrn | 16 - packages/ui/components/BlackoutDatePicker.wrn | 16 - packages/ui/components/Blockquote.wrn | 19 + packages/ui/components/BlogCard.wrn | 13 - packages/ui/components/BlogGrid.wrn | 10 - packages/ui/components/BlogList.wrn | 10 - packages/ui/components/BlogSearch.wrn | 13 - packages/ui/components/BodyText.wrn | 8 - packages/ui/components/BorderRadiusPicker.wrn | 16 - packages/ui/components/BottomNavigation.wrn | 10 - packages/ui/components/BrandColorPicker.wrn | 16 - packages/ui/components/BrandSelector.wrn | 16 - packages/ui/components/Breadcrumb.wrn | 17 + packages/ui/components/Breadcrumbs.wrn | 105 - packages/ui/components/BrowserFrame.wrn | 10 - packages/ui/components/BudgetRangeSlider.wrn | 13 - packages/ui/components/BudgetSelector.wrn | 16 - .../ui/components/BusinessHoursPicker.wrn | 16 - packages/ui/components/ButtonGroup.wrn | 25 +- packages/ui/components/ButtonSelector.wrn | 16 - packages/ui/components/CTASection.wrn | 15 - packages/ui/components/Calendar.wrn | 13 - packages/ui/components/CalendarGrid.wrn | 10 - packages/ui/components/CalendarHeader.wrn | 10 - packages/ui/components/CalendarNavigation.wrn | 10 - packages/ui/components/CallbackUrlInput.wrn | 16 - packages/ui/components/CampaignCard.wrn | 10 - .../components/CampaignPerformancePreview.wrn | 13 - packages/ui/components/CampaignProgress.wrn | 11 - packages/ui/components/CapabilityGrid.wrn | 10 - packages/ui/components/CaptchaField.wrn | 16 - packages/ui/components/CardPaymentForm.wrn | 13 - packages/ui/components/CardSelector.wrn | 16 - packages/ui/components/CardSkeleton.wrn | 11 - .../ui/components/CareerApplicationForm.wrn | 13 - packages/ui/components/CareerBenefitsGrid.wrn | 10 - packages/ui/components/Carousel.wrn | 20 +- packages/ui/components/CaseStudyCard.wrn | 13 - packages/ui/components/CaseStudyHero.wrn | 10 - packages/ui/components/CaseStudyPreview.wrn | 13 - packages/ui/components/CenteredCTA.wrn | 11 - packages/ui/components/CenteredHero.wrn | 10 - .../ui/components/CenteredSectionHeader.wrn | 10 - packages/ui/components/CertificateUpload.wrn | 13 - packages/ui/components/CertificationBadge.wrn | 11 - packages/ui/components/ChallengeSection.wrn | 10 - packages/ui/components/ChannelBadge.wrn | 11 - packages/ui/components/ChannelCard.wrn | 54 - .../ui/components/ChannelComparisonChart.wrn | 11 - .../ui/components/ChannelComparisonTable.wrn | 10 - .../ui/components/ChannelFallbackDiagram.wrn | 11 - packages/ui/components/ChannelFlow.wrn | 49 - packages/ui/components/ChannelIcon.wrn | 13 - packages/ui/components/ChannelRateTable.wrn | 10 - packages/ui/components/ChannelSelector.wrn | 16 - packages/ui/components/CharacterCounter.wrn | 11 - packages/ui/components/Chart.wrn | 19 + packages/ui/components/ChartEmptyState.wrn | 11 - packages/ui/components/ChartTooltip.wrn | 13 - packages/ui/components/ChatBubble.wrn | 19 + packages/ui/components/CheckboxGroup.wrn | 16 - packages/ui/components/Checklist.wrn | 13 - packages/ui/components/ChecklistProgress.wrn | 11 - packages/ui/components/Chip.wrn | 8 - packages/ui/components/ChipInput.wrn | 16 - packages/ui/components/CircularProgress.wrn | 11 - packages/ui/components/CitySelector.wrn | 16 - packages/ui/components/ClearFiltersButton.wrn | 11 - packages/ui/components/ClickableCard.wrn | 9 - packages/ui/components/Clipboard.wrn | 19 + packages/ui/components/CloseButton.wrn | 9 - packages/ui/components/Cluster.wrn | 11 - packages/ui/components/Code.wrn | 13 - packages/ui/components/CodeBlock.wrn | 26 - packages/ui/components/CodeCopyButton.wrn | 11 - packages/ui/components/CodeHeader.wrn | 10 - packages/ui/components/CodeInput.wrn | 16 - packages/ui/components/CodeLanguageBadge.wrn | 11 - packages/ui/components/CodeTabs.wrn | 13 - packages/ui/components/CodeText.wrn | 8 - packages/ui/components/CohortChart.wrn | 11 - packages/ui/components/Collapse.wrn | 15 + packages/ui/components/ColorGrid.wrn | 10 - packages/ui/components/ColorHexInput.wrn | 16 - packages/ui/components/ColorPicker.wrn | 18 +- packages/ui/components/ColorSelector.wrn | 16 - packages/ui/components/ColorSwatch.wrn | 13 - packages/ui/components/Columns.wrn | 13 + packages/ui/components/Combobox.wrn | 383 +- packages/ui/components/ComingSoonBadge.wrn | 8 - packages/ui/components/ComingSoonState.wrn | 11 - packages/ui/components/CommandBlock.wrn | 13 - packages/ui/components/CommandMenu.wrn | 10 - packages/ui/components/CommandSearchInput.wrn | 16 - packages/ui/components/CompanyHero.wrn | 10 - packages/ui/components/CompanyNameInput.wrn | 16 - packages/ui/components/CompanyPageShell.wrn | 10 - .../ui/components/CompanySizeSelector.wrn | 16 - .../components/ComparisonDateRangePicker.wrn | 16 - packages/ui/components/ComparisonTable.wrn | 10 - packages/ui/components/CompletionMeter.wrn | 11 - .../ui/components/ComplianceBadgeList.wrn | 10 - .../ui/components/ComplianceProgramCard.wrn | 13 - packages/ui/components/Confetti.wrn | 19 + .../ui/components/ConfirmPasswordInput.wrn | 16 - packages/ui/components/ConfirmationDialog.wrn | 15 - .../ui/components/ConnectedAccountCard.wrn | 13 - packages/ui/components/ConnectionCard.wrn | 9 - .../ui/components/ConsentTimelinePreview.wrn | 15 - packages/ui/components/ContactCTA.wrn | 11 - packages/ui/components/ContactCard.wrn | 9 - packages/ui/components/ContactForm.wrn | 13 - packages/ui/components/ContactHero.wrn | 10 - packages/ui/components/ContactPageShell.wrn | 10 - packages/ui/components/ContactSalesBanner.wrn | 195 - packages/ui/components/ContactSalesButton.wrn | 11 - packages/ui/components/ContactSalesForm.wrn | 13 - packages/ui/components/ContextMenu.wrn | 13 +- packages/ui/components/ContextSwitcher.wrn | 13 - packages/ui/components/ConversationList.wrn | 10 - .../ui/components/ConversationPreview.wrn | 15 - packages/ui/components/ConversionChart.wrn | 11 - packages/ui/components/CookieBanner.wrn | 12 - packages/ui/components/CookieCategoryList.wrn | 10 - .../ui/components/CookieCategoryToggle.wrn | 16 - packages/ui/components/CookieConsent.wrn | 372 - packages/ui/components/CookieDetailsTable.wrn | 10 - .../ui/components/CookiePreferencesDialog.wrn | 17 - packages/ui/components/CookieTable.wrn | 10 - packages/ui/components/CoordinatesInput.wrn | 16 - packages/ui/components/CoordinatesPicker.wrn | 16 - packages/ui/components/CopyButton.wrn | 9 - packages/ui/components/CopyCodeButton.wrn | 11 - packages/ui/components/CopyMarkup.wrn | 20 + packages/ui/components/CopySecretField.wrn | 16 - packages/ui/components/CostBreakdownChart.wrn | 11 - packages/ui/components/CostSummary.wrn | 13 - packages/ui/components/Counter.wrn | 8 - .../ui/components/CountryCallingCodeInput.wrn | 16 - .../components/CountryCallingCodeSelector.wrn | 16 - packages/ui/components/CountrySelector.wrn | 16 - packages/ui/components/CouponInput.wrn | 16 - packages/ui/components/CreditAmountInput.wrn | 16 - packages/ui/components/CronBuilder.wrn | 13 - packages/ui/components/CronInput.wrn | 16 - packages/ui/components/CsvUpload.wrn | 13 - packages/ui/components/CurrencyInput.wrn | 16 - packages/ui/components/CurrencySelector.wrn | 16 - .../ui/components/CurrentPasswordInput.wrn | 16 - packages/ui/components/CustomScrollbar.wrn | 13 + packages/ui/components/CustomerLogo.wrn | 13 - packages/ui/components/CustomerStoryCard.wrn | 13 - packages/ui/components/DangerButton.wrn | 9 - packages/ui/components/DataMap.wrn | 19 + packages/ui/components/DataProtectionCard.wrn | 13 - packages/ui/components/DataRetentionTable.wrn | 10 - packages/ui/components/DataTable.wrn | 9 +- packages/ui/components/DateInput.wrn | 24 - packages/ui/components/DatePicker.wrn | 21 +- packages/ui/components/DateRangeCalendar.wrn | 13 - packages/ui/components/DateRangePicker.wrn | 11 - packages/ui/components/DateRangeSlider.wrn | 13 - packages/ui/components/DateTimeInput.wrn | 24 - packages/ui/components/DateTimePicker.wrn | 14 - .../ui/components/DateTimeRangePicker.wrn | 16 - packages/ui/components/DecimalInput.wrn | 16 - packages/ui/components/DefinitionList.wrn | 10 - .../components/DeleteConfirmationDialog.wrn | 10 - packages/ui/components/DeliveryPreview.wrn | 13 - .../ui/components/DeliveryStatusChart.wrn | 11 - .../ui/components/DeliveryStatusTimeline.wrn | 11 - packages/ui/components/DemoRequestForm.wrn | 13 - packages/ui/components/DepartmentInput.wrn | 16 - .../ui/components/DeprecatedFeatureAlert.wrn | 11 - packages/ui/components/DescriptionList.wrn | 10 - packages/ui/components/DesktopNavigation.wrn | 8 - packages/ui/components/DeveloperCTA.wrn | 11 - packages/ui/components/DeveloperHero.wrn | 10 - packages/ui/components/DeveloperPageShell.wrn | 10 - packages/ui/components/DeveloperSearch.wrn | 13 - packages/ui/components/DevelopersMegaMenu.wrn | 421 - packages/ui/components/DevelopersMenu.wrn | 10 - packages/ui/components/DeviceCard.wrn | 13 - packages/ui/components/DeviceFrame.wrn | 19 + packages/ui/components/DiscountInput.wrn | 16 - packages/ui/components/DisplayHeading.wrn | 8 - packages/ui/components/DisplayNameInput.wrn | 16 - packages/ui/components/DoNotSellLink.wrn | 11 - packages/ui/components/DocumentPreview.wrn | 13 - packages/ui/components/DocumentUpload.wrn | 13 - packages/ui/components/DomainInput.wrn | 16 - packages/ui/components/DonutChart.wrn | 11 - packages/ui/components/DownloadAction.wrn | 11 - packages/ui/components/DownloadButton.wrn | 9 - packages/ui/components/DownloadGateForm.wrn | 13 - .../ui/components/DownloadPolicyButton.wrn | 11 - .../ui/components/DownloadResourceForm.wrn | 13 - packages/ui/components/DragAndDrop.wrn | 19 + packages/ui/components/Drawer.wrn | 17 +- packages/ui/components/Dropdown.wrn | 19 + packages/ui/components/DropdownMenu.wrn | 10 - packages/ui/components/DropdownNavigation.wrn | 10 - packages/ui/components/DurationInput.wrn | 16 - packages/ui/components/DurationPicker.wrn | 16 - packages/ui/components/DurationSlider.wrn | 13 - packages/ui/components/ElevatedCard.wrn | 9 - packages/ui/components/EmailBodyEditor.wrn | 16 - packages/ui/components/EmailComposer.wrn | 13 - packages/ui/components/EmailInput.wrn | 27 - packages/ui/components/EmojiPicker.wrn | 16 - packages/ui/components/EmptyState.wrn | 167 - packages/ui/components/EncryptionDiagram.wrn | 11 - packages/ui/components/EnterpriseCTA.wrn | 11 - packages/ui/components/EnterpriseHero.wrn | 10 - .../ui/components/EnterprisePricingCard.wrn | 13 - .../ui/components/EnvironmentSelector.wrn | 16 - .../ui/components/EnvironmentSwitcher.wrn | 13 - packages/ui/components/ErrorActions.wrn | 11 - packages/ui/components/ErrorCard.wrn | 9 - packages/ui/components/ErrorCode.wrn | 13 - packages/ui/components/ErrorHero.wrn | 10 - packages/ui/components/ErrorIllustration.wrn | 13 - packages/ui/components/ErrorPage.wrn | 13 - packages/ui/components/ErrorPageShell.wrn | 10 - packages/ui/components/ErrorState.wrn | 193 - packages/ui/components/ErrorSupportLink.wrn | 11 - .../ui/components/EstimatedCostSummary.wrn | 13 - packages/ui/components/EventTable.wrn | 10 - packages/ui/components/ExpandableText.wrn | 13 - .../ui/components/ExpiryDateTimePicker.wrn | 16 - packages/ui/components/ExportProgress.wrn | 11 - packages/ui/components/ExternalLink.wrn | 11 - packages/ui/components/EyebrowText.wrn | 8 - packages/ui/components/FAQ.wrn | 13 - packages/ui/components/FAQAccordion.wrn | 235 - packages/ui/components/FactorCard.wrn | 13 - .../ui/components/FallbackRouteBuilder.wrn | 13 - .../ui/components/FallbackRouteDiagram.wrn | 11 - packages/ui/components/FaviconUpload.wrn | 13 - packages/ui/components/FaxInput.wrn | 16 - packages/ui/components/FeatureCard.wrn | 12 - packages/ui/components/FeatureChecklist.wrn | 15 - .../ui/components/FeatureComparisonTable.wrn | 10 - .../ui/components/FeatureDetailsPanel.wrn | 10 - packages/ui/components/FeatureGrid.wrn | 9 - packages/ui/components/FeatureIconCard.wrn | 13 - packages/ui/components/FeatureList.wrn | 10 - packages/ui/components/FeatureTabs.wrn | 32 - packages/ui/components/FeatureTimeline.wrn | 11 - .../ui/components/FeatureUnavailableState.wrn | 11 - packages/ui/components/FeaturedBlogCard.wrn | 13 - packages/ui/components/FieldActions.wrn | 11 - packages/ui/components/FileInput.wrn | 18 +- packages/ui/components/FileList.wrn | 10 - packages/ui/components/FileSizeInput.wrn | 16 - packages/ui/components/FileSizeLabel.wrn | 13 - packages/ui/components/FileTypeBadge.wrn | 11 - packages/ui/components/FileUpload.wrn | 19 +- packages/ui/components/FileUploadProgress.wrn | 17 + packages/ui/components/FilterBar.wrn | 9 - packages/ui/components/FilterMenu.wrn | 10 - packages/ui/components/FilterSearchInput.wrn | 16 - packages/ui/components/FilterableTable.wrn | 10 - packages/ui/components/FinalCTA.wrn | 68 - packages/ui/components/FirstNameInput.wrn | 16 - packages/ui/components/Flex.wrn | 6 - packages/ui/components/FontPicker.wrn | 16 - packages/ui/components/FontSizePicker.wrn | 16 - packages/ui/components/FontWeightPicker.wrn | 16 - .../ui/components/FooterLanguageSwitcher.wrn | 13 - .../ui/components/FooterStatusIndicator.wrn | 11 - packages/ui/components/ForbiddenPage.wrn | 13 - packages/ui/components/ForbiddenState.wrn | 11 - packages/ui/components/ForgotPasswordForm.wrn | 13 - packages/ui/components/Form.wrn | 12 - packages/ui/components/FormActions.wrn | 11 - packages/ui/components/FormAlert.wrn | 11 - packages/ui/components/FormDialog.wrn | 10 - packages/ui/components/FormError.wrn | 8 - packages/ui/components/FormErrorSummary.wrn | 10 - packages/ui/components/FormField.wrn | 12 - packages/ui/components/FormGrid.wrn | 10 - packages/ui/components/FormGroup.wrn | 16 - packages/ui/components/FormHelpText.wrn | 8 - packages/ui/components/FormLabel.wrn | 12 - packages/ui/components/FormProgress.wrn | 11 - packages/ui/components/FormRow.wrn | 10 - packages/ui/components/FormSection.wrn | 10 - packages/ui/components/FullBleed.wrn | 6 - packages/ui/components/FullscreenDialog.wrn | 10 - packages/ui/components/FunnelChart.wrn | 11 - packages/ui/components/GeoChart.wrn | 11 - packages/ui/components/GeofenceEditor.wrn | 16 - packages/ui/components/GhostButton.wrn | 9 - packages/ui/components/GlassCard.wrn | 9 - packages/ui/components/GlobalSearch.wrn | 13 - packages/ui/components/GradientCTA.wrn | 11 - packages/ui/components/GradientPicker.wrn | 16 - packages/ui/components/GradientStopEditor.wrn | 16 - packages/ui/components/GuideCard.wrn | 13 - packages/ui/components/GuideChecklist.wrn | 13 - .../ui/components/GuideDifficultyBadge.wrn | 11 - packages/ui/components/GuideGrid.wrn | 10 - packages/ui/components/GuideStep.wrn | 13 - packages/ui/components/Header.wrn | 10 - packages/ui/components/HeaderActions.wrn | 11 - packages/ui/components/HealthIndicator.wrn | 8 - packages/ui/components/Hero.wrn | 17 - packages/ui/components/HeroActions.wrn | 11 - packages/ui/components/HeroCodePanel.wrn | 10 - packages/ui/components/HeroGradientText.wrn | 13 - packages/ui/components/HeroPrimaryAction.wrn | 11 - packages/ui/components/HeroProductPreview.wrn | 13 - .../ui/components/HeroSecondaryAction.wrn | 11 - packages/ui/components/HeroTrustText.wrn | 13 - packages/ui/components/HexColorInput.wrn | 16 - packages/ui/components/HiddenField.wrn | 16 - packages/ui/components/HighlightText.wrn | 13 - packages/ui/components/HolidayCalendar.wrn | 13 - packages/ui/components/HostnameInput.wrn | 16 - packages/ui/components/HourPicker.wrn | 16 - packages/ui/components/HslColorInput.wrn | 16 - packages/ui/components/HtmlEditor.wrn | 16 - packages/ui/components/HumanApprovalStep.wrn | 13 - packages/ui/components/Icon.wrn | 13 - packages/ui/components/IconButton.wrn | 10 - packages/ui/components/IconPicker.wrn | 16 - packages/ui/components/IconSelector.wrn | 16 - packages/ui/components/IdentifierInput.wrn | 16 - packages/ui/components/Illustration.wrn | 13 - packages/ui/components/Image.wrn | 19 + .../ui/components/ImageCompressionPreview.wrn | 13 - packages/ui/components/ImageEditor.wrn | 16 - packages/ui/components/ImagePreviewDialog.wrn | 10 - packages/ui/components/ImageSelector.wrn | 16 - packages/ui/components/ImageUpload.wrn | 13 - packages/ui/components/ImportProgress.wrn | 11 - packages/ui/components/IncidentAlert.wrn | 11 - packages/ui/components/IncidentBanner.wrn | 11 - packages/ui/components/IncidentCard.wrn | 13 - packages/ui/components/IncidentList.wrn | 10 - .../ui/components/IncidentResponseFlow.wrn | 11 - .../ui/components/IncidentSeverityBadge.wrn | 11 - packages/ui/components/IncidentTimeline.wrn | 11 - packages/ui/components/IndustryBadge.wrn | 11 - packages/ui/components/IndustrySelector.wrn | 16 - packages/ui/components/InfoCard.wrn | 9 - packages/ui/components/Inline.wrn | 9 - packages/ui/components/InlineAlert.wrn | 11 - packages/ui/components/InlineCode.wrn | 8 - packages/ui/components/InputGroup.wrn | 16 +- packages/ui/components/InputNumber.wrn | 20 + packages/ui/components/InsetPanel.wrn | 6 - packages/ui/components/IntegerInput.wrn | 16 - packages/ui/components/IntegrationCard.wrn | 10 - packages/ui/components/InvoiceLineItem.wrn | 13 - packages/ui/components/InvoiceSummary.wrn | 13 - packages/ui/components/IpAddressInput.wrn | 16 - packages/ui/components/JobCard.wrn | 13 - packages/ui/components/JobProgress.wrn | 11 - packages/ui/components/JobTitleInput.wrn | 16 - packages/ui/components/JsonInput.wrn | 16 - packages/ui/components/JsonViewer.wrn | 13 - packages/ui/components/Kbd.wrn | 9 + packages/ui/components/KeyValueTable.wrn | 10 - packages/ui/components/KycDocumentUpload.wrn | 13 - packages/ui/components/LanguageSelector.wrn | 16 - packages/ui/components/LanguageSwitcher.wrn | 13 - packages/ui/components/LastNameInput.wrn | 16 - packages/ui/components/LatencyMetric.wrn | 11 - packages/ui/components/LatitudeInput.wrn | 16 - packages/ui/components/LayoutSplitter.wrn | 13 + packages/ui/components/LeadText.wrn | 8 - packages/ui/components/LeadershipGrid.wrn | 10 - .../ui/components/LegalAcceptanceNotice.wrn | 11 - packages/ui/components/LegalBulletList.wrn | 10 - packages/ui/components/LegalContactBlock.wrn | 13 - .../ui/components/LegalDefinitionList.wrn | 10 - .../ui/components/LegalDocumentHeader.wrn | 10 - .../ui/components/LegalDocumentLayout.wrn | 11 - packages/ui/components/LegalHero.wrn | 10 - .../ui/components/LegalLanguageSelector.wrn | 16 - packages/ui/components/LegalNotice.wrn | 11 - packages/ui/components/LegalPageShell.wrn | 6 - packages/ui/components/LegalPrintButton.wrn | 11 - .../ui/components/LegalRegionSelector.wrn | 16 - packages/ui/components/LegalSection.wrn | 10 - packages/ui/components/LegalSummary.wrn | 13 - packages/ui/components/LegalTable.wrn | 10 - .../ui/components/LegalTableOfContents.wrn | 8 - packages/ui/components/LegalVersionBadge.wrn | 11 - packages/ui/components/LegendIndicator.wrn | 19 + .../ui/components/LetterSpacingPicker.wrn | 16 - packages/ui/components/LicenseKeyInput.wrn | 16 - packages/ui/components/Lightbox.wrn | 10 - packages/ui/components/LineChart.wrn | 11 - packages/ui/components/LineHeightPicker.wrn | 16 - packages/ui/components/Link.wrn | 10 +- packages/ui/components/LinkButton.wrn | 9 - packages/ui/components/List.wrn | 17 +- packages/ui/components/ListGroup.wrn | 19 + packages/ui/components/LoadingButton.wrn | 14 - packages/ui/components/LocaleSelector.wrn | 16 - packages/ui/components/LocalizedRouteLink.wrn | 11 - packages/ui/components/LocationPicker.wrn | 16 - packages/ui/components/LogTable.wrn | 10 - packages/ui/components/Logo.wrn | 13 - packages/ui/components/LogoCloud.wrn | 150 - packages/ui/components/LogoUpload.wrn | 13 - packages/ui/components/LogoutDialog.wrn | 10 - packages/ui/components/LongitudeInput.wrn | 16 - packages/ui/components/MaintenanceAlert.wrn | 11 - packages/ui/components/MaintenanceBanner.wrn | 11 - packages/ui/components/MaintenanceCard.wrn | 13 - packages/ui/components/MaintenancePage.wrn | 13 - packages/ui/components/MaintenanceState.wrn | 11 - .../ui/components/MaintenanceWindowPicker.wrn | 16 - packages/ui/components/Map.wrn | 19 + packages/ui/components/MapPicker.wrn | 16 - packages/ui/components/MarkdownEditor.wrn | 16 - packages/ui/components/MarketingPageShell.wrn | 6 - .../ui/components/MarketingSectionHeader.wrn | 35 - packages/ui/components/Marquee.wrn | 19 + packages/ui/components/MaskedSecretField.wrn | 16 - packages/ui/components/MegaMenu.wrn | 14 +- packages/ui/components/MemberList.wrn | 10 - packages/ui/components/MentionInput.wrn | 16 - .../ui/components/MessageCharacterCounter.wrn | 11 - packages/ui/components/MessageComposer.wrn | 13 - .../ui/components/MessageComposerPreview.wrn | 13 - packages/ui/components/MessageLimitInput.wrn | 16 - packages/ui/components/MessagePreview.wrn | 13 - .../ui/components/MessageVolumeSlider.wrn | 13 - packages/ui/components/Metric.wrn | 11 - packages/ui/components/MetricCard.wrn | 13 - packages/ui/components/MetricGrid.wrn | 35 - packages/ui/components/MetricText.wrn | 8 - packages/ui/components/MinutePicker.wrn | 16 - packages/ui/components/MissionSection.wrn | 10 - packages/ui/components/MobileDeviceFrame.wrn | 10 - packages/ui/components/MobileInput.wrn | 16 - packages/ui/components/MobileMenuButton.wrn | 11 - packages/ui/components/MobileNavigation.wrn | 12 - packages/ui/components/MobileTableCard.wrn | 13 - packages/ui/components/Modal.wrn | 15 +- packages/ui/components/MonthPicker.wrn | 16 - packages/ui/components/MonthYearPicker.wrn | 16 - .../ui/components/MonthlyVolumeSelector.wrn | 16 - packages/ui/components/MultiFileUpload.wrn | 13 - packages/ui/components/MultiSelect.wrn | 15 - packages/ui/components/MultipleEmailInput.wrn | 16 - packages/ui/components/MutedText.wrn | 8 - packages/ui/components/NameInput.wrn | 16 - packages/ui/components/NarrowContainer.wrn | 6 - packages/ui/components/Nav.wrn | 17 + packages/ui/components/Navbar.wrn | 17 + packages/ui/components/Navigation.wrn | 10 - packages/ui/components/NavigationItem.wrn | 13 - packages/ui/components/NavigationMegaMenu.wrn | 10 - packages/ui/components/NewBadge.wrn | 8 - packages/ui/components/NewPasswordInput.wrn | 16 - packages/ui/components/NewsletterCTA.wrn | 11 - packages/ui/components/NewsletterForm.wrn | 214 - packages/ui/components/NoResultsState.wrn | 11 - packages/ui/components/NotFoundPage.wrn | 13 - packages/ui/components/NotFoundState.wrn | 11 - packages/ui/components/NotificationCard.wrn | 9 - packages/ui/components/NotificationDot.wrn | 8 - packages/ui/components/NotificationList.wrn | 10 - packages/ui/components/NumberInput.wrn | 24 - packages/ui/components/OfficeCard.wrn | 13 - packages/ui/components/OfflinePage.wrn | 13 - packages/ui/components/OfflineState.wrn | 11 - packages/ui/components/OnboardingProgress.wrn | 11 - .../ui/components/OneTimeSecretDisplay.wrn | 13 - packages/ui/components/OnlineIndicator.wrn | 8 - packages/ui/components/OpacitySlider.wrn | 13 - packages/ui/components/OpenAPICTA.wrn | 11 - packages/ui/components/OptionalIndicator.wrn | 11 - .../ui/components/OrganizationSelector.wrn | 16 - packages/ui/components/OtpInput.wrn | 11 - .../ui/components/OtpVerificationForm.wrn | 13 - packages/ui/components/OutlinedCard.wrn | 9 - packages/ui/components/PageAlert.wrn | 11 - packages/ui/components/PageHeader.wrn | 172 - packages/ui/components/PageHeading.wrn | 8 - packages/ui/components/PageShell.wrn | 8 - packages/ui/components/PageSkeleton.wrn | 11 - packages/ui/components/Pagination.wrn | 200 +- packages/ui/components/Panel.wrn | 6 - .../ui/components/PartnerApplicationForm.wrn | 13 - packages/ui/components/PartnerLogoGrid.wrn | 10 - packages/ui/components/PartnerProgramCard.wrn | 13 - packages/ui/components/PasskeyButton.wrn | 28 - packages/ui/components/PasswordInput.wrn | 32 - .../ui/components/PasswordRequirementList.wrn | 10 - .../ui/components/PasswordStrengthMeter.wrn | 11 - .../components/PasswordVisibilityToggle.wrn | 16 - packages/ui/components/PathInput.wrn | 16 - packages/ui/components/PaymentMethodCard.wrn | 13 - packages/ui/components/PdfPreview.wrn | 13 - packages/ui/components/PercentageInput.wrn | 16 - packages/ui/components/PermissionSelector.wrn | 16 - packages/ui/components/PhoneInput.wrn | 24 - packages/ui/components/PieChart.wrn | 11 - packages/ui/components/Pill.wrn | 8 - packages/ui/components/PinInput.wrn | 112 +- packages/ui/components/PlainTextEditor.wrn | 16 - packages/ui/components/PlanCTA.wrn | 11 - packages/ui/components/PlanFeatureList.wrn | 10 - packages/ui/components/PlanLimitList.wrn | 10 - packages/ui/components/PlanSelector.wrn | 16 - packages/ui/components/PlatformPillarCard.wrn | 13 - packages/ui/components/PolicyVersionTable.wrn | 10 - packages/ui/components/Popover.wrn | 13 +- packages/ui/components/PortInput.wrn | 16 - packages/ui/components/PortNumberInput.wrn | 16 - .../ui/components/PositiveNumberInput.wrn | 16 - packages/ui/components/PostalCodeInput.wrn | 16 - packages/ui/components/PostmanCTA.wrn | 11 - .../ui/components/PresetDateRangePicker.wrn | 16 - packages/ui/components/PressReleaseCard.wrn | 13 - packages/ui/components/PreviewBadge.wrn | 8 - .../ui/components/PreviousNextNavigation.wrn | 10 - packages/ui/components/PriceInput.wrn | 16 - packages/ui/components/PriceRangeSlider.wrn | 13 - packages/ui/components/PriceText.wrn | 8 - packages/ui/components/PricingCard.wrn | 13 - .../ui/components/PricingComparisonTable.wrn | 35 - packages/ui/components/PricingContactForm.wrn | 13 - .../ui/components/PricingFeatureGroup.wrn | 16 - packages/ui/components/PricingGrid.wrn | 10 - packages/ui/components/PricingHero.wrn | 66 - packages/ui/components/PricingPlanCard.wrn | 64 - packages/ui/components/PricingTable.wrn | 10 - packages/ui/components/PricingToggle.wrn | 16 - packages/ui/components/PrimaryButton.wrn | 9 - packages/ui/components/PrintAction.wrn | 11 - packages/ui/components/PrintPolicyButton.wrn | 11 - packages/ui/components/PrioritySelector.wrn | 16 - packages/ui/components/PrivacyNotice.wrn | 11 - .../components/ProductArchitectureDiagram.wrn | 35 - packages/ui/components/ProductCTA.wrn | 11 - packages/ui/components/ProductCard.wrn | 27 - .../ui/components/ProductCategorySection.wrn | 10 - packages/ui/components/ProductFeatureList.wrn | 10 - packages/ui/components/ProductGrid.wrn | 28 - packages/ui/components/ProductHero.wrn | 55 - packages/ui/components/ProductIcon.wrn | 13 - .../ui/components/ProductIntegrationList.wrn | 10 - packages/ui/components/ProductList.wrn | 10 - packages/ui/components/ProductLogo.wrn | 13 - packages/ui/components/ProductMegaMenu.wrn | 332 - packages/ui/components/ProductMiniCard.wrn | 13 - .../ui/components/ProductNavigationCard.wrn | 13 - packages/ui/components/ProductPageShell.wrn | 13 - packages/ui/components/ProductSelector.wrn | 16 - packages/ui/components/ProductStatusBadge.wrn | 16 - packages/ui/components/ProductUseCaseList.wrn | 10 - packages/ui/components/ProductsMegaMenu.wrn | 8 - packages/ui/components/ProgressBar.wrn | 12 - packages/ui/components/ProgressChart.wrn | 11 - packages/ui/components/ProgressRing.wrn | 11 - packages/ui/components/ProgressSlider.wrn | 13 - packages/ui/components/ProjectCard.wrn | 9 - packages/ui/components/ProjectSelector.wrn | 16 - packages/ui/components/ProjectSwitcher.wrn | 13 - packages/ui/components/PromoCodeInput.wrn | 16 - packages/ui/components/PromptDialog.wrn | 10 - packages/ui/components/ProviderSelector.wrn | 16 - packages/ui/components/PublicFooter.wrn | 675 - packages/ui/components/PublicHeader.wrn | 350 - packages/ui/components/PublicHeaderLogo.wrn | 13 - .../ui/components/PublicMobileNavigation.wrn | 589 - packages/ui/components/PublicPageShell.wrn | 10 - packages/ui/components/PublicSearch.wrn | 125 - .../ui/components/PublishDateTimePicker.wrn | 16 - packages/ui/components/PushComposer.wrn | 13 - .../ui/components/PushNotificationEditor.wrn | 16 - packages/ui/components/QrCode.wrn | 13 - packages/ui/components/QuantityInput.wrn | 16 - packages/ui/components/QuantityStepper.wrn | 13 - packages/ui/components/QuietHoursPicker.wrn | 15 - packages/ui/components/QuoteText.wrn | 8 - packages/ui/components/RadioGroup.wrn | 10 - packages/ui/components/RangeInput.wrn | 16 - packages/ui/components/RangeSlider.wrn | 23 +- packages/ui/components/RateLimitInput.wrn | 16 - packages/ui/components/RateLimitPage.wrn | 13 - packages/ui/components/RateLimitedState.wrn | 11 - packages/ui/components/RateTable.wrn | 10 - packages/ui/components/Rating.wrn | 19 + packages/ui/components/RatingSlider.wrn | 13 - packages/ui/components/RecipientSelector.wrn | 16 - packages/ui/components/RecoveryCodeForm.wrn | 13 - packages/ui/components/RecoveryCodeInput.wrn | 16 - .../ui/components/RecurrenceRuleBuilder.wrn | 13 - .../ui/components/RecurringSchedulePicker.wrn | 13 - packages/ui/components/RedirectUriInput.wrn | 16 - packages/ui/components/ReferenceInput.wrn | 16 - packages/ui/components/RegexInput.wrn | 16 - .../ui/components/RegionAvailabilityTable.wrn | 10 - packages/ui/components/RegionSelector.wrn | 16 - .../ui/components/RegionUnavailableAlert.wrn | 11 - .../ui/components/RegionUnavailableState.wrn | 11 - .../ui/components/RegionalPrivacyBanner.wrn | 11 - .../RejectOptionalCookiesButton.wrn | 11 - .../components/ReopenCookieSettingsButton.wrn | 11 - packages/ui/components/ReportCard.wrn | 13 - .../ui/components/RequestResponseViewer.wrn | 13 - packages/ui/components/RequestViewer.wrn | 13 - packages/ui/components/RequiredIndicator.wrn | 11 - packages/ui/components/ResetPasswordForm.wrn | 13 - packages/ui/components/ResizablePanel.wrn | 10 - packages/ui/components/ResourceCard.wrn | 13 - .../ui/components/ResourceDownloadCard.wrn | 13 - packages/ui/components/ResourcePageShell.wrn | 10 - packages/ui/components/ResourceSearch.wrn | 13 - packages/ui/components/ResourceTypeBadge.wrn | 11 - packages/ui/components/ResourcesMegaMenu.wrn | 365 - packages/ui/components/ResponseViewer.wrn | 13 - .../components/ResponsibleDisclosureCTA.wrn | 11 - packages/ui/components/ResponsiveTable.wrn | 10 - packages/ui/components/ResultsSection.wrn | 10 - packages/ui/components/RetentionTable.wrn | 10 - packages/ui/components/RetryCountInput.wrn | 16 - packages/ui/components/RevenueChart.wrn | 11 - packages/ui/components/RgbColorInput.wrn | 16 - packages/ui/components/RichTextEditor.wrn | 16 - packages/ui/components/RichTextInput.wrn | 16 - packages/ui/components/RoleSelector.wrn | 16 - .../ui/components/RollingDateRangePicker.wrn | 16 - packages/ui/components/SDKCard.wrn | 13 - packages/ui/components/SDKLanguageTabs.wrn | 13 - packages/ui/components/SDKTabs.wrn | 10 - .../SaveCookiePreferencesButton.wrn | 11 - .../ui/components/SavedFilterSelector.wrn | 16 - .../ui/components/ScheduleMessagePicker.wrn | 16 - packages/ui/components/SchedulePicker.wrn | 9 - .../ui/components/ScheduledDateTimePicker.wrn | 16 - packages/ui/components/ScreenshotFrame.wrn | 10 - packages/ui/components/ScrollArea.wrn | 6 - packages/ui/components/Scrollspy.wrn | 17 + .../ui/components/SdkLanguageSelector.wrn | 16 - packages/ui/components/SearchBox.wrn | 20 + packages/ui/components/SearchButton.wrn | 11 - packages/ui/components/SearchCategoryTabs.wrn | 13 - packages/ui/components/SearchDialog.wrn | 10 - packages/ui/components/SearchEmptyState.wrn | 11 - packages/ui/components/SearchInput.wrn | 24 - packages/ui/components/SearchLoadingState.wrn | 11 - packages/ui/components/SearchResultItem.wrn | 13 - packages/ui/components/SecondPicker.wrn | 16 - packages/ui/components/SecondaryButton.wrn | 9 - packages/ui/components/SecretDisplay.wrn | 13 - packages/ui/components/SecretInput.wrn | 16 - packages/ui/components/SecretRevealDialog.wrn | 10 - packages/ui/components/Section.wrn | 11 - packages/ui/components/SectionActions.wrn | 13 - packages/ui/components/SectionHeader.wrn | 12 - packages/ui/components/SectionHeading.wrn | 8 - packages/ui/components/SecurityAlert.wrn | 11 - .../ui/components/SecurityContactCard.wrn | 13 - .../ui/components/SecurityFeatureCard.wrn | 13 - packages/ui/components/SecurityHero.wrn | 10 - packages/ui/components/SecurityPillarGrid.wrn | 10 - .../ui/components/SecurityPracticeList.wrn | 10 - packages/ui/components/SecurityReportForm.wrn | 13 - .../ui/components/SegmentedButtonGroup.wrn | 44 - packages/ui/components/SenderIdInput.wrn | 16 - packages/ui/components/ServerErrorPage.wrn | 13 - packages/ui/components/ServiceLevelTable.wrn | 10 - packages/ui/components/ServiceStatusBadge.wrn | 11 - packages/ui/components/ServiceStatusList.wrn | 10 - packages/ui/components/ServiceStatusRow.wrn | 10 - packages/ui/components/SessionCard.wrn | 13 - .../ui/components/SessionExpiredDialog.wrn | 10 - packages/ui/components/SetupChecklist.wrn | 13 - packages/ui/components/SeveritySelector.wrn | 16 - packages/ui/components/ShadowPicker.wrn | 16 - packages/ui/components/ShareAction.wrn | 11 - packages/ui/components/ShareButton.wrn | 9 - packages/ui/components/SidePanel.wrn | 10 - packages/ui/components/Sidebar.wrn | 17 + packages/ui/components/SidebarLayout.wrn | 6 - packages/ui/components/SignInForm.wrn | 13 - packages/ui/components/SignInLink.wrn | 30 - packages/ui/components/SignUpForm.wrn | 13 - packages/ui/components/SiteSearch.wrn | 13 - packages/ui/components/SkipLink.wrn | 11 - packages/ui/components/SlaTable.wrn | 10 - packages/ui/components/Slider.wrn | 13 - packages/ui/components/SlugInput.wrn | 16 - packages/ui/components/SmallText.wrn | 8 - packages/ui/components/SmartRouteDiagram.wrn | 11 - packages/ui/components/SmsComposer.wrn | 13 - packages/ui/components/SmsMessageEditor.wrn | 16 - packages/ui/components/SmsSegmentCounter.wrn | 11 - packages/ui/components/SocialShare.wrn | 143 - packages/ui/components/SolutionHero.wrn | 10 - packages/ui/components/SolutionPageShell.wrn | 10 - packages/ui/components/SolutionSection.wrn | 10 - packages/ui/components/SolutionsMegaMenu.wrn | 368 - packages/ui/components/SortableTable.wrn | 10 - packages/ui/components/SplitButton.wrn | 11 - packages/ui/components/SplitCTA.wrn | 11 - packages/ui/components/SplitHero.wrn | 10 - packages/ui/components/SplitLayout.wrn | 6 - packages/ui/components/SplitSectionHeader.wrn | 10 - packages/ui/components/StartFreeButton.wrn | 11 - packages/ui/components/StatCard.wrn | 12 - packages/ui/components/StateSelector.wrn | 16 - packages/ui/components/StatusBadge.wrn | 9 - packages/ui/components/StatusBanner.wrn | 122 - packages/ui/components/StatusPageShell.wrn | 10 - packages/ui/components/StatusSelector.wrn | 16 - .../ui/components/StatusSubscribeForm.wrn | 13 - packages/ui/components/StatusTable.wrn | 10 - packages/ui/components/StepNavigation.wrn | 10 - .../components/StepUpAuthenticationDialog.wrn | 10 - packages/ui/components/Stepper.wrn | 20 +- packages/ui/components/StepperInput.wrn | 16 - packages/ui/components/StickerPicker.wrn | 16 - packages/ui/components/Sticky.wrn | 6 - packages/ui/components/StickyLayout.wrn | 6 - packages/ui/components/StreetAddressInput.wrn | 16 - packages/ui/components/StrongPassword.wrn | 215 + packages/ui/components/StyledIcon.wrn | 19 + packages/ui/components/SubdomainInput.wrn | 16 - packages/ui/components/SubjectInput.wrn | 16 - packages/ui/components/SubprocessorTable.wrn | 10 - packages/ui/components/SubsectionHeading.wrn | 8 - packages/ui/components/SuccessCard.wrn | 9 - packages/ui/components/SuccessState.wrn | 11 - packages/ui/components/SupportRequestForm.wrn | 13 - packages/ui/components/Surface.wrn | 6 - packages/ui/components/TableHeader.wrn | 10 - packages/ui/components/TableRow.wrn | 10 - packages/ui/components/TableSkeleton.wrn | 11 - packages/ui/components/Tabs.wrn | 13 +- packages/ui/components/TagInput.wrn | 16 - packages/ui/components/TaxNotice.wrn | 11 - packages/ui/components/TaxRateInput.wrn | 16 - packages/ui/components/TeamMemberCard.wrn | 13 - packages/ui/components/TeamSizeSelector.wrn | 16 - packages/ui/components/TemplateCard.wrn | 9 - packages/ui/components/TemplateSelector.wrn | 16 - .../ui/components/TemplateVariableInput.wrn | 16 - .../ui/components/TenantIsolationDiagram.wrn | 11 - packages/ui/components/TerminalBlock.wrn | 13 - packages/ui/components/TertiaryButton.wrn | 9 - packages/ui/components/TestMessageDialog.wrn | 10 - packages/ui/components/TestimonialCard.wrn | 13 - .../ui/components/TestimonialCarousel.wrn | 13 - packages/ui/components/TextInput.wrn | 24 - packages/ui/components/TextLink.wrn | 11 - packages/ui/components/TextSkeleton.wrn | 11 - packages/ui/components/ThemeColorPicker.wrn | 16 - packages/ui/components/ThemeSwitcher.wrn | 13 - packages/ui/components/TimeInput.wrn | 24 - packages/ui/components/TimePicker.wrn | 17 +- packages/ui/components/TimeRangePicker.wrn | 16 - packages/ui/components/Timeline.wrn | 14 +- packages/ui/components/TimelineChart.wrn | 11 - packages/ui/components/TimelineItem.wrn | 12 - packages/ui/components/TimeoutInput.wrn | 16 - .../ui/components/TimezoneAwareTimePicker.wrn | 16 - packages/ui/components/TimezoneSelector.wrn | 11 - packages/ui/components/Toast.wrn | 18 +- packages/ui/components/ToastAction.wrn | 11 - packages/ui/components/ToastHost.wrn | 212 - packages/ui/components/ToastIcon.wrn | 13 - packages/ui/components/ToastNotifications.wrn | 19 + packages/ui/components/ToastProgress.wrn | 11 - packages/ui/components/Toggle.wrn | 16 - packages/ui/components/ToggleCount.wrn | 20 + packages/ui/components/ToggleGroup.wrn | 16 - packages/ui/components/TogglePassword.wrn | 153 + packages/ui/components/TokenInput.wrn | 16 - .../ui/components/TotpVerificationForm.wrn | 13 - packages/ui/components/TranslatedText.wrn | 13 - packages/ui/components/TreeTable.wrn | 10 - packages/ui/components/TreeView.wrn | 19 + packages/ui/components/TrendIndicator.wrn | 11 - packages/ui/components/TruncatedText.wrn | 13 - packages/ui/components/TrustBadgeList.wrn | 15 - packages/ui/components/Typography.wrn | 10 +- .../ui/components/UnavailableRegionState.wrn | 11 - .../ui/components/UnifiedTimelinePreview.wrn | 15 - .../ui/components/UnsavedChangesDialog.wrn | 10 - packages/ui/components/UploadItem.wrn | 13 - packages/ui/components/UploadPreview.wrn | 13 - packages/ui/components/UploadProgress.wrn | 11 - packages/ui/components/UptimeChart.wrn | 11 - packages/ui/components/UptimeMetric.wrn | 11 - packages/ui/components/UrlInput.wrn | 24 - packages/ui/components/UsagePricingTable.wrn | 10 - packages/ui/components/UseCaseSelector.wrn | 16 - packages/ui/components/UserCard.wrn | 9 - packages/ui/components/UsernameInput.wrn | 16 - packages/ui/components/ValueCard.wrn | 13 - packages/ui/components/ValuesGrid.wrn | 10 - .../ui/components/VerificationCodeInput.wrn | 16 - packages/ui/components/VerifiedBadge.wrn | 8 - packages/ui/components/VersionSelector.wrn | 16 - packages/ui/components/VerticalTabs.wrn | 13 - packages/ui/components/VideoCard.wrn | 13 - packages/ui/components/VideoPreviewDialog.wrn | 10 - packages/ui/components/VideoUpload.wrn | 13 - packages/ui/components/VirtualizedTable.wrn | 10 - packages/ui/components/VisionSection.wrn | 10 - packages/ui/components/VisuallyHidden.wrn | 8 - .../ui/components/VoiceScriptComposer.wrn | 13 - packages/ui/components/VoiceScriptEditor.wrn | 16 - packages/ui/components/VolumeInput.wrn | 16 - packages/ui/components/VolumeSlider.wrn | 13 - packages/ui/components/WarningCard.wrn | 9 - packages/ui/components/WebhookEventCard.wrn | 13 - packages/ui/components/WebhookFlowDiagram.wrn | 11 - .../ui/components/WebhookPayloadViewer.wrn | 13 - packages/ui/components/WebhookUrlInput.wrn | 16 - packages/ui/components/WebinarCard.wrn | 13 - .../ui/components/WebinarRegistrationForm.wrn | 13 - packages/ui/components/Well.wrn | 6 - packages/ui/components/WhatsAppComposer.wrn | 13 - .../ui/components/WhatsAppNumberInput.wrn | 16 - .../ui/components/WhatsAppTemplateEditor.wrn | 16 - packages/ui/components/WideContainer.wrn | 6 - packages/ui/components/Wizard.wrn | 13 - packages/ui/components/WizardHeader.wrn | 10 - packages/ui/components/WizardNavigation.wrn | 10 - .../ui/components/WorkflowCanvasPreview.wrn | 18 - packages/ui/components/WorkflowProgress.wrn | 11 - packages/ui/components/WorkspaceCard.wrn | 9 - packages/ui/components/WorkspaceSelector.wrn | 16 - packages/ui/components/WorkspaceSwitcher.wrn | 13 - packages/ui/components/WysiwygEditor.wrn | 19 + packages/ui/components/YearPicker.wrn | 16 - packages/ui/components/ZoomSlider.wrn | 13 - packages/ui/components/alert.wrn | 28 +- packages/ui/components/avatar.wrn | 17 +- packages/ui/components/badge.wrn | 30 +- packages/ui/components/button.wrn | 171 +- packages/ui/components/card.wrn | 16 +- packages/ui/components/checkbox.wrn | 11 +- packages/ui/components/container.wrn | 8 +- packages/ui/components/disclosure.wrn | 13 - packages/ui/components/divider.wrn | 8 +- packages/ui/components/file-upload.wrn | 21 - packages/ui/components/grid.wrn | 10 +- packages/ui/components/hstack.wrn | 12 - packages/ui/components/input.wrn | 13 +- packages/ui/components/progress.wrn | 12 +- packages/ui/components/radio.wrn | 14 +- packages/ui/components/select.wrn | 16 +- packages/ui/components/skeleton.wrn | 12 +- packages/ui/components/spacer.wrn | 9 - packages/ui/components/spinner.wrn | 8 +- packages/ui/components/stack.wrn | 9 - packages/ui/components/switch.wrn | 12 +- packages/ui/components/table.wrn | 24 +- packages/ui/components/tag.wrn | 11 - packages/ui/components/textarea.wrn | 13 +- packages/ui/components/theme-toggle.wrn | 11 - packages/ui/components/tooltip.wrn | 15 +- packages/ui/package.json | 3 +- packages/ui/test/ui.test.ts | 868 +- packages/ui/ui.css | 1417 +- packages/uploader/package.json | 2 +- packages/validation/package.json | 2 +- packages/validation/src/runtime.ts | 4 + packages/validation/test/validation.test.ts | 3 + scripts/generate-ui-component-reference.mjs | 16 +- scripts/publish-packages.ts | 1 + scripts/reset-ui-components.mjs | 448 + update-package-versions.mjs | 2 +- 2114 files changed, 65790 insertions(+), 150559 deletions(-) create mode 100644 .publish/ui/component-migrations.json delete mode 100644 .publish/ui/components/AcceptAllCookiesButton.wrn delete mode 100644 .publish/ui/components/AccessibleAccordion.wrn delete mode 100644 .publish/ui/components/AccessibleCarousel.wrn delete mode 100644 .publish/ui/components/AccessibleChartSummary.wrn delete mode 100644 .publish/ui/components/AccessibleDialog.wrn delete mode 100644 .publish/ui/components/AccessibleErrorSummary.wrn delete mode 100644 .publish/ui/components/AccessibleIcon.wrn delete mode 100644 .publish/ui/components/AccessibleMenu.wrn delete mode 100644 .publish/ui/components/AccessibleTabs.wrn delete mode 100644 .publish/ui/components/AccessibleTooltip.wrn delete mode 100644 .publish/ui/components/AccountMenu.wrn delete mode 100644 .publish/ui/components/AccountStatusBanner.wrn delete mode 100644 .publish/ui/components/ActionMenu.wrn delete mode 100644 .publish/ui/components/ActiveFilterList.wrn delete mode 100644 .publish/ui/components/ActivityList.wrn delete mode 100644 .publish/ui/components/AddOnCard.wrn delete mode 100644 .publish/ui/components/AddressInput.wrn delete mode 100644 .publish/ui/components/AddressPreview.wrn create mode 100644 .publish/ui/components/AdvancedDatePicker.wrn delete mode 100644 .publish/ui/components/AdvancedFilterBuilder.wrn create mode 100644 .publish/ui/components/AdvancedRangeSlider.wrn create mode 100644 .publish/ui/components/AdvancedSelect.wrn delete mode 100644 .publish/ui/components/AlertDialog.wrn delete mode 100644 .publish/ui/components/AmountInput.wrn delete mode 100644 .publish/ui/components/AnalyticsDashboardPreview.wrn delete mode 100644 .publish/ui/components/AnchorNavigation.wrn delete mode 100644 .publish/ui/components/AnnouncementBar.wrn delete mode 100644 .publish/ui/components/ApartmentInput.wrn delete mode 100644 .publish/ui/components/ApiAuthenticationNotice.wrn delete mode 100644 .publish/ui/components/ApiEndpointCard.wrn delete mode 100644 .publish/ui/components/ApiErrorExample.wrn delete mode 100644 .publish/ui/components/ApiHeaderTable.wrn delete mode 100644 .publish/ui/components/ApiKeyCreateDialog.wrn delete mode 100644 .publish/ui/components/ApiKeyDisplay.wrn delete mode 100644 .publish/ui/components/ApiKeyInput.wrn delete mode 100644 .publish/ui/components/ApiMethodBadge.wrn delete mode 100644 .publish/ui/components/ApiParameterTable.wrn delete mode 100644 .publish/ui/components/ApiRateLimitNotice.wrn delete mode 100644 .publish/ui/components/ApiRequestExample.wrn delete mode 100644 .publish/ui/components/ApiResponseExample.wrn delete mode 100644 .publish/ui/components/ApiSchemaTable.wrn delete mode 100644 .publish/ui/components/ApiSchemaViewer.wrn delete mode 100644 .publish/ui/components/ApiVersionBadge.wrn delete mode 100644 .publish/ui/components/AppHeader.wrn delete mode 100644 .publish/ui/components/ArchitectureSection.wrn delete mode 100644 .publish/ui/components/AreaChart.wrn delete mode 100644 .publish/ui/components/ArticleHero.wrn delete mode 100644 .publish/ui/components/ArticleLayout.wrn delete mode 100644 .publish/ui/components/ArticleNewsletterCTA.wrn delete mode 100644 .publish/ui/components/ArticlePageShell.wrn delete mode 100644 .publish/ui/components/ArticleShareActions.wrn delete mode 100644 .publish/ui/components/AspectRatio.wrn delete mode 100644 .publish/ui/components/AssetCard.wrn delete mode 100644 .publish/ui/components/AttachmentPicker.wrn delete mode 100644 .publish/ui/components/AttachmentUpload.wrn delete mode 100644 .publish/ui/components/AudioUpload.wrn delete mode 100644 .publish/ui/components/AuditLogPreview.wrn delete mode 100644 .publish/ui/components/AuditTable.wrn delete mode 100644 .publish/ui/components/AuthenticatorCodeInput.wrn delete mode 100644 .publish/ui/components/AuthorAvatar.wrn delete mode 100644 .publish/ui/components/AuthorCard.wrn delete mode 100644 .publish/ui/components/AuthorizedApplicationCard.wrn delete mode 100644 .publish/ui/components/AutoGrid.wrn delete mode 100644 .publish/ui/components/AutomationExampleCard.wrn delete mode 100644 .publish/ui/components/AvailabilityCalendar.wrn delete mode 100644 .publish/ui/components/AvatarUpload.wrn delete mode 100644 .publish/ui/components/BackButton.wrn delete mode 100644 .publish/ui/components/BackToTop.wrn delete mode 100644 .publish/ui/components/BankTransferDetails.wrn delete mode 100644 .publish/ui/components/Banner.wrn delete mode 100644 .publish/ui/components/BarChart.wrn delete mode 100644 .publish/ui/components/BetaBadge.wrn delete mode 100644 .publish/ui/components/BillingAddressForm.wrn delete mode 100644 .publish/ui/components/BillingExample.wrn delete mode 100644 .publish/ui/components/BillingPeriodToggle.wrn delete mode 100644 .publish/ui/components/BlackoutDatePicker.wrn create mode 100644 .publish/ui/components/Blockquote.wrn delete mode 100644 .publish/ui/components/BlogCard.wrn delete mode 100644 .publish/ui/components/BlogGrid.wrn delete mode 100644 .publish/ui/components/BlogList.wrn delete mode 100644 .publish/ui/components/BlogSearch.wrn delete mode 100644 .publish/ui/components/BodyText.wrn delete mode 100644 .publish/ui/components/BorderRadiusPicker.wrn delete mode 100644 .publish/ui/components/BottomNavigation.wrn delete mode 100644 .publish/ui/components/BrandColorPicker.wrn delete mode 100644 .publish/ui/components/BrandSelector.wrn create mode 100644 .publish/ui/components/Breadcrumb.wrn delete mode 100644 .publish/ui/components/Breadcrumbs.wrn delete mode 100644 .publish/ui/components/BrowserFrame.wrn delete mode 100644 .publish/ui/components/BudgetRangeSlider.wrn delete mode 100644 .publish/ui/components/BudgetSelector.wrn delete mode 100644 .publish/ui/components/BusinessHoursPicker.wrn delete mode 100644 .publish/ui/components/ButtonSelector.wrn delete mode 100644 .publish/ui/components/CTASection.wrn delete mode 100644 .publish/ui/components/Calendar.wrn delete mode 100644 .publish/ui/components/CalendarGrid.wrn delete mode 100644 .publish/ui/components/CalendarHeader.wrn delete mode 100644 .publish/ui/components/CalendarNavigation.wrn delete mode 100644 .publish/ui/components/CallbackUrlInput.wrn delete mode 100644 .publish/ui/components/CampaignCard.wrn delete mode 100644 .publish/ui/components/CampaignPerformancePreview.wrn delete mode 100644 .publish/ui/components/CampaignProgress.wrn delete mode 100644 .publish/ui/components/CapabilityGrid.wrn delete mode 100644 .publish/ui/components/CaptchaField.wrn delete mode 100644 .publish/ui/components/CardPaymentForm.wrn delete mode 100644 .publish/ui/components/CardSelector.wrn delete mode 100644 .publish/ui/components/CardSkeleton.wrn delete mode 100644 .publish/ui/components/CareerApplicationForm.wrn delete mode 100644 .publish/ui/components/CareerBenefitsGrid.wrn delete mode 100644 .publish/ui/components/CaseStudyCard.wrn delete mode 100644 .publish/ui/components/CaseStudyHero.wrn delete mode 100644 .publish/ui/components/CaseStudyPreview.wrn delete mode 100644 .publish/ui/components/CenteredCTA.wrn delete mode 100644 .publish/ui/components/CenteredHero.wrn delete mode 100644 .publish/ui/components/CenteredSectionHeader.wrn delete mode 100644 .publish/ui/components/CertificateUpload.wrn delete mode 100644 .publish/ui/components/CertificationBadge.wrn delete mode 100644 .publish/ui/components/ChallengeSection.wrn delete mode 100644 .publish/ui/components/ChannelBadge.wrn delete mode 100644 .publish/ui/components/ChannelCard.wrn delete mode 100644 .publish/ui/components/ChannelComparisonChart.wrn delete mode 100644 .publish/ui/components/ChannelComparisonTable.wrn delete mode 100644 .publish/ui/components/ChannelFallbackDiagram.wrn delete mode 100644 .publish/ui/components/ChannelFlow.wrn delete mode 100644 .publish/ui/components/ChannelIcon.wrn delete mode 100644 .publish/ui/components/ChannelRateTable.wrn delete mode 100644 .publish/ui/components/ChannelSelector.wrn delete mode 100644 .publish/ui/components/CharacterCounter.wrn create mode 100644 .publish/ui/components/Chart.wrn delete mode 100644 .publish/ui/components/ChartEmptyState.wrn delete mode 100644 .publish/ui/components/ChartTooltip.wrn create mode 100644 .publish/ui/components/ChatBubble.wrn delete mode 100644 .publish/ui/components/CheckboxGroup.wrn delete mode 100644 .publish/ui/components/Checklist.wrn delete mode 100644 .publish/ui/components/ChecklistProgress.wrn delete mode 100644 .publish/ui/components/Chip.wrn delete mode 100644 .publish/ui/components/ChipInput.wrn delete mode 100644 .publish/ui/components/CircularProgress.wrn delete mode 100644 .publish/ui/components/CitySelector.wrn delete mode 100644 .publish/ui/components/ClearFiltersButton.wrn delete mode 100644 .publish/ui/components/ClickableCard.wrn create mode 100644 .publish/ui/components/Clipboard.wrn delete mode 100644 .publish/ui/components/CloseButton.wrn delete mode 100644 .publish/ui/components/Cluster.wrn delete mode 100644 .publish/ui/components/Code.wrn delete mode 100644 .publish/ui/components/CodeBlock.wrn delete mode 100644 .publish/ui/components/CodeCopyButton.wrn delete mode 100644 .publish/ui/components/CodeHeader.wrn delete mode 100644 .publish/ui/components/CodeInput.wrn delete mode 100644 .publish/ui/components/CodeLanguageBadge.wrn delete mode 100644 .publish/ui/components/CodeTabs.wrn delete mode 100644 .publish/ui/components/CodeText.wrn delete mode 100644 .publish/ui/components/CohortChart.wrn create mode 100644 .publish/ui/components/Collapse.wrn delete mode 100644 .publish/ui/components/ColorGrid.wrn delete mode 100644 .publish/ui/components/ColorHexInput.wrn delete mode 100644 .publish/ui/components/ColorSelector.wrn delete mode 100644 .publish/ui/components/ColorSwatch.wrn create mode 100644 .publish/ui/components/Columns.wrn delete mode 100644 .publish/ui/components/ComingSoonBadge.wrn delete mode 100644 .publish/ui/components/ComingSoonState.wrn delete mode 100644 .publish/ui/components/CommandBlock.wrn delete mode 100644 .publish/ui/components/CommandMenu.wrn delete mode 100644 .publish/ui/components/CommandSearchInput.wrn delete mode 100644 .publish/ui/components/CompanyHero.wrn delete mode 100644 .publish/ui/components/CompanyNameInput.wrn delete mode 100644 .publish/ui/components/CompanyPageShell.wrn delete mode 100644 .publish/ui/components/CompanySizeSelector.wrn delete mode 100644 .publish/ui/components/ComparisonDateRangePicker.wrn delete mode 100644 .publish/ui/components/ComparisonTable.wrn delete mode 100644 .publish/ui/components/CompletionMeter.wrn delete mode 100644 .publish/ui/components/ComplianceBadgeList.wrn delete mode 100644 .publish/ui/components/ComplianceProgramCard.wrn create mode 100644 .publish/ui/components/Confetti.wrn delete mode 100644 .publish/ui/components/ConfirmPasswordInput.wrn delete mode 100644 .publish/ui/components/ConfirmationDialog.wrn delete mode 100644 .publish/ui/components/ConnectedAccountCard.wrn delete mode 100644 .publish/ui/components/ConnectionCard.wrn delete mode 100644 .publish/ui/components/ConsentTimelinePreview.wrn delete mode 100644 .publish/ui/components/ContactCTA.wrn delete mode 100644 .publish/ui/components/ContactCard.wrn delete mode 100644 .publish/ui/components/ContactForm.wrn delete mode 100644 .publish/ui/components/ContactHero.wrn delete mode 100644 .publish/ui/components/ContactPageShell.wrn delete mode 100644 .publish/ui/components/ContactSalesBanner.wrn delete mode 100644 .publish/ui/components/ContactSalesButton.wrn delete mode 100644 .publish/ui/components/ContactSalesForm.wrn delete mode 100644 .publish/ui/components/ContextSwitcher.wrn delete mode 100644 .publish/ui/components/ConversationList.wrn delete mode 100644 .publish/ui/components/ConversationPreview.wrn delete mode 100644 .publish/ui/components/ConversionChart.wrn delete mode 100644 .publish/ui/components/CookieBanner.wrn delete mode 100644 .publish/ui/components/CookieCategoryList.wrn delete mode 100644 .publish/ui/components/CookieCategoryToggle.wrn delete mode 100644 .publish/ui/components/CookieConsent.wrn delete mode 100644 .publish/ui/components/CookieDetailsTable.wrn delete mode 100644 .publish/ui/components/CookiePreferencesDialog.wrn delete mode 100644 .publish/ui/components/CookieTable.wrn delete mode 100644 .publish/ui/components/CoordinatesInput.wrn delete mode 100644 .publish/ui/components/CoordinatesPicker.wrn delete mode 100644 .publish/ui/components/CopyButton.wrn delete mode 100644 .publish/ui/components/CopyCodeButton.wrn create mode 100644 .publish/ui/components/CopyMarkup.wrn delete mode 100644 .publish/ui/components/CopySecretField.wrn delete mode 100644 .publish/ui/components/CostBreakdownChart.wrn delete mode 100644 .publish/ui/components/CostSummary.wrn delete mode 100644 .publish/ui/components/Counter.wrn delete mode 100644 .publish/ui/components/CountryCallingCodeInput.wrn delete mode 100644 .publish/ui/components/CountryCallingCodeSelector.wrn delete mode 100644 .publish/ui/components/CountrySelector.wrn delete mode 100644 .publish/ui/components/CouponInput.wrn delete mode 100644 .publish/ui/components/CreditAmountInput.wrn delete mode 100644 .publish/ui/components/CronBuilder.wrn delete mode 100644 .publish/ui/components/CronInput.wrn delete mode 100644 .publish/ui/components/CsvUpload.wrn delete mode 100644 .publish/ui/components/CurrencyInput.wrn delete mode 100644 .publish/ui/components/CurrencySelector.wrn delete mode 100644 .publish/ui/components/CurrentPasswordInput.wrn create mode 100644 .publish/ui/components/CustomScrollbar.wrn delete mode 100644 .publish/ui/components/CustomerLogo.wrn delete mode 100644 .publish/ui/components/CustomerStoryCard.wrn delete mode 100644 .publish/ui/components/DangerButton.wrn create mode 100644 .publish/ui/components/DataMap.wrn delete mode 100644 .publish/ui/components/DataProtectionCard.wrn delete mode 100644 .publish/ui/components/DataRetentionTable.wrn delete mode 100644 .publish/ui/components/DateInput.wrn delete mode 100644 .publish/ui/components/DateRangeCalendar.wrn delete mode 100644 .publish/ui/components/DateRangePicker.wrn delete mode 100644 .publish/ui/components/DateRangeSlider.wrn delete mode 100644 .publish/ui/components/DateTimeInput.wrn delete mode 100644 .publish/ui/components/DateTimePicker.wrn delete mode 100644 .publish/ui/components/DateTimeRangePicker.wrn delete mode 100644 .publish/ui/components/DecimalInput.wrn delete mode 100644 .publish/ui/components/DefinitionList.wrn delete mode 100644 .publish/ui/components/DeleteConfirmationDialog.wrn delete mode 100644 .publish/ui/components/DeliveryPreview.wrn delete mode 100644 .publish/ui/components/DeliveryStatusChart.wrn delete mode 100644 .publish/ui/components/DeliveryStatusTimeline.wrn delete mode 100644 .publish/ui/components/DemoRequestForm.wrn delete mode 100644 .publish/ui/components/DepartmentInput.wrn delete mode 100644 .publish/ui/components/DeprecatedFeatureAlert.wrn delete mode 100644 .publish/ui/components/DescriptionList.wrn delete mode 100644 .publish/ui/components/DesktopNavigation.wrn delete mode 100644 .publish/ui/components/DeveloperCTA.wrn delete mode 100644 .publish/ui/components/DeveloperHero.wrn delete mode 100644 .publish/ui/components/DeveloperPageShell.wrn delete mode 100644 .publish/ui/components/DeveloperSearch.wrn delete mode 100644 .publish/ui/components/DevelopersMegaMenu.wrn delete mode 100644 .publish/ui/components/DevelopersMenu.wrn delete mode 100644 .publish/ui/components/DeviceCard.wrn create mode 100644 .publish/ui/components/DeviceFrame.wrn delete mode 100644 .publish/ui/components/DiscountInput.wrn delete mode 100644 .publish/ui/components/DisplayHeading.wrn delete mode 100644 .publish/ui/components/DisplayNameInput.wrn delete mode 100644 .publish/ui/components/DoNotSellLink.wrn delete mode 100644 .publish/ui/components/DocumentPreview.wrn delete mode 100644 .publish/ui/components/DocumentUpload.wrn delete mode 100644 .publish/ui/components/DomainInput.wrn delete mode 100644 .publish/ui/components/DonutChart.wrn delete mode 100644 .publish/ui/components/DownloadAction.wrn delete mode 100644 .publish/ui/components/DownloadButton.wrn delete mode 100644 .publish/ui/components/DownloadGateForm.wrn delete mode 100644 .publish/ui/components/DownloadPolicyButton.wrn delete mode 100644 .publish/ui/components/DownloadResourceForm.wrn create mode 100644 .publish/ui/components/DragAndDrop.wrn create mode 100644 .publish/ui/components/Dropdown.wrn delete mode 100644 .publish/ui/components/DropdownMenu.wrn delete mode 100644 .publish/ui/components/DropdownNavigation.wrn delete mode 100644 .publish/ui/components/DurationInput.wrn delete mode 100644 .publish/ui/components/DurationPicker.wrn delete mode 100644 .publish/ui/components/DurationSlider.wrn delete mode 100644 .publish/ui/components/ElevatedCard.wrn delete mode 100644 .publish/ui/components/EmailBodyEditor.wrn delete mode 100644 .publish/ui/components/EmailComposer.wrn delete mode 100644 .publish/ui/components/EmailInput.wrn delete mode 100644 .publish/ui/components/EmojiPicker.wrn delete mode 100644 .publish/ui/components/EmptyState.wrn delete mode 100644 .publish/ui/components/EncryptionDiagram.wrn delete mode 100644 .publish/ui/components/EnterpriseCTA.wrn delete mode 100644 .publish/ui/components/EnterpriseHero.wrn delete mode 100644 .publish/ui/components/EnterprisePricingCard.wrn delete mode 100644 .publish/ui/components/EnvironmentSelector.wrn delete mode 100644 .publish/ui/components/EnvironmentSwitcher.wrn delete mode 100644 .publish/ui/components/ErrorActions.wrn delete mode 100644 .publish/ui/components/ErrorCard.wrn delete mode 100644 .publish/ui/components/ErrorCode.wrn delete mode 100644 .publish/ui/components/ErrorHero.wrn delete mode 100644 .publish/ui/components/ErrorIllustration.wrn delete mode 100644 .publish/ui/components/ErrorPage.wrn delete mode 100644 .publish/ui/components/ErrorPageShell.wrn delete mode 100644 .publish/ui/components/ErrorState.wrn delete mode 100644 .publish/ui/components/ErrorSupportLink.wrn delete mode 100644 .publish/ui/components/EstimatedCostSummary.wrn delete mode 100644 .publish/ui/components/EventTable.wrn delete mode 100644 .publish/ui/components/ExpandableText.wrn delete mode 100644 .publish/ui/components/ExpiryDateTimePicker.wrn delete mode 100644 .publish/ui/components/ExportProgress.wrn delete mode 100644 .publish/ui/components/ExternalLink.wrn delete mode 100644 .publish/ui/components/EyebrowText.wrn delete mode 100644 .publish/ui/components/FAQ.wrn delete mode 100644 .publish/ui/components/FAQAccordion.wrn delete mode 100644 .publish/ui/components/FactorCard.wrn delete mode 100644 .publish/ui/components/FallbackRouteBuilder.wrn delete mode 100644 .publish/ui/components/FallbackRouteDiagram.wrn delete mode 100644 .publish/ui/components/FaviconUpload.wrn delete mode 100644 .publish/ui/components/FaxInput.wrn delete mode 100644 .publish/ui/components/FeatureCard.wrn delete mode 100644 .publish/ui/components/FeatureChecklist.wrn delete mode 100644 .publish/ui/components/FeatureComparisonTable.wrn delete mode 100644 .publish/ui/components/FeatureDetailsPanel.wrn delete mode 100644 .publish/ui/components/FeatureGrid.wrn delete mode 100644 .publish/ui/components/FeatureIconCard.wrn delete mode 100644 .publish/ui/components/FeatureList.wrn delete mode 100644 .publish/ui/components/FeatureTabs.wrn delete mode 100644 .publish/ui/components/FeatureTimeline.wrn delete mode 100644 .publish/ui/components/FeatureUnavailableState.wrn delete mode 100644 .publish/ui/components/FeaturedBlogCard.wrn delete mode 100644 .publish/ui/components/FieldActions.wrn delete mode 100644 .publish/ui/components/FileList.wrn delete mode 100644 .publish/ui/components/FileSizeInput.wrn delete mode 100644 .publish/ui/components/FileSizeLabel.wrn delete mode 100644 .publish/ui/components/FileTypeBadge.wrn create mode 100644 .publish/ui/components/FileUploadProgress.wrn delete mode 100644 .publish/ui/components/FilterBar.wrn delete mode 100644 .publish/ui/components/FilterMenu.wrn delete mode 100644 .publish/ui/components/FilterSearchInput.wrn delete mode 100644 .publish/ui/components/FilterableTable.wrn delete mode 100644 .publish/ui/components/FinalCTA.wrn delete mode 100644 .publish/ui/components/FirstNameInput.wrn delete mode 100644 .publish/ui/components/Flex.wrn delete mode 100644 .publish/ui/components/FontPicker.wrn delete mode 100644 .publish/ui/components/FontSizePicker.wrn delete mode 100644 .publish/ui/components/FontWeightPicker.wrn delete mode 100644 .publish/ui/components/FooterLanguageSwitcher.wrn delete mode 100644 .publish/ui/components/FooterStatusIndicator.wrn delete mode 100644 .publish/ui/components/ForbiddenPage.wrn delete mode 100644 .publish/ui/components/ForbiddenState.wrn delete mode 100644 .publish/ui/components/ForgotPasswordForm.wrn delete mode 100644 .publish/ui/components/Form.wrn delete mode 100644 .publish/ui/components/FormActions.wrn delete mode 100644 .publish/ui/components/FormAlert.wrn delete mode 100644 .publish/ui/components/FormDialog.wrn delete mode 100644 .publish/ui/components/FormError.wrn delete mode 100644 .publish/ui/components/FormErrorSummary.wrn delete mode 100644 .publish/ui/components/FormField.wrn delete mode 100644 .publish/ui/components/FormGrid.wrn delete mode 100644 .publish/ui/components/FormGroup.wrn delete mode 100644 .publish/ui/components/FormHelpText.wrn delete mode 100644 .publish/ui/components/FormLabel.wrn delete mode 100644 .publish/ui/components/FormProgress.wrn delete mode 100644 .publish/ui/components/FormRow.wrn delete mode 100644 .publish/ui/components/FormSection.wrn delete mode 100644 .publish/ui/components/FullBleed.wrn delete mode 100644 .publish/ui/components/FullscreenDialog.wrn delete mode 100644 .publish/ui/components/FunnelChart.wrn delete mode 100644 .publish/ui/components/GeoChart.wrn delete mode 100644 .publish/ui/components/GeofenceEditor.wrn delete mode 100644 .publish/ui/components/GhostButton.wrn delete mode 100644 .publish/ui/components/GlassCard.wrn delete mode 100644 .publish/ui/components/GlobalSearch.wrn delete mode 100644 .publish/ui/components/GradientCTA.wrn delete mode 100644 .publish/ui/components/GradientPicker.wrn delete mode 100644 .publish/ui/components/GradientStopEditor.wrn delete mode 100644 .publish/ui/components/GuideCard.wrn delete mode 100644 .publish/ui/components/GuideChecklist.wrn delete mode 100644 .publish/ui/components/GuideDifficultyBadge.wrn delete mode 100644 .publish/ui/components/GuideGrid.wrn delete mode 100644 .publish/ui/components/GuideStep.wrn delete mode 100644 .publish/ui/components/Header.wrn delete mode 100644 .publish/ui/components/HeaderActions.wrn delete mode 100644 .publish/ui/components/HealthIndicator.wrn delete mode 100644 .publish/ui/components/Hero.wrn delete mode 100644 .publish/ui/components/HeroActions.wrn delete mode 100644 .publish/ui/components/HeroCodePanel.wrn delete mode 100644 .publish/ui/components/HeroGradientText.wrn delete mode 100644 .publish/ui/components/HeroPrimaryAction.wrn delete mode 100644 .publish/ui/components/HeroProductPreview.wrn delete mode 100644 .publish/ui/components/HeroSecondaryAction.wrn delete mode 100644 .publish/ui/components/HeroTrustText.wrn delete mode 100644 .publish/ui/components/HexColorInput.wrn delete mode 100644 .publish/ui/components/HiddenField.wrn delete mode 100644 .publish/ui/components/HighlightText.wrn delete mode 100644 .publish/ui/components/HolidayCalendar.wrn delete mode 100644 .publish/ui/components/HostnameInput.wrn delete mode 100644 .publish/ui/components/HourPicker.wrn delete mode 100644 .publish/ui/components/HslColorInput.wrn delete mode 100644 .publish/ui/components/HtmlEditor.wrn delete mode 100644 .publish/ui/components/HumanApprovalStep.wrn delete mode 100644 .publish/ui/components/Icon.wrn delete mode 100644 .publish/ui/components/IconButton.wrn delete mode 100644 .publish/ui/components/IconPicker.wrn delete mode 100644 .publish/ui/components/IconSelector.wrn delete mode 100644 .publish/ui/components/IdentifierInput.wrn delete mode 100644 .publish/ui/components/Illustration.wrn create mode 100644 .publish/ui/components/Image.wrn delete mode 100644 .publish/ui/components/ImageCompressionPreview.wrn delete mode 100644 .publish/ui/components/ImageEditor.wrn delete mode 100644 .publish/ui/components/ImagePreviewDialog.wrn delete mode 100644 .publish/ui/components/ImageSelector.wrn delete mode 100644 .publish/ui/components/ImageUpload.wrn delete mode 100644 .publish/ui/components/ImportProgress.wrn delete mode 100644 .publish/ui/components/IncidentAlert.wrn delete mode 100644 .publish/ui/components/IncidentBanner.wrn delete mode 100644 .publish/ui/components/IncidentCard.wrn delete mode 100644 .publish/ui/components/IncidentList.wrn delete mode 100644 .publish/ui/components/IncidentResponseFlow.wrn delete mode 100644 .publish/ui/components/IncidentSeverityBadge.wrn delete mode 100644 .publish/ui/components/IncidentTimeline.wrn delete mode 100644 .publish/ui/components/IndustryBadge.wrn delete mode 100644 .publish/ui/components/IndustrySelector.wrn delete mode 100644 .publish/ui/components/InfoCard.wrn delete mode 100644 .publish/ui/components/Inline.wrn delete mode 100644 .publish/ui/components/InlineAlert.wrn delete mode 100644 .publish/ui/components/InlineCode.wrn create mode 100644 .publish/ui/components/InputNumber.wrn delete mode 100644 .publish/ui/components/InsetPanel.wrn delete mode 100644 .publish/ui/components/IntegerInput.wrn delete mode 100644 .publish/ui/components/IntegrationCard.wrn delete mode 100644 .publish/ui/components/InvoiceLineItem.wrn delete mode 100644 .publish/ui/components/InvoiceSummary.wrn delete mode 100644 .publish/ui/components/IpAddressInput.wrn delete mode 100644 .publish/ui/components/JobCard.wrn delete mode 100644 .publish/ui/components/JobProgress.wrn delete mode 100644 .publish/ui/components/JobTitleInput.wrn delete mode 100644 .publish/ui/components/JsonInput.wrn delete mode 100644 .publish/ui/components/JsonViewer.wrn create mode 100644 .publish/ui/components/Kbd.wrn delete mode 100644 .publish/ui/components/KeyValueTable.wrn delete mode 100644 .publish/ui/components/KycDocumentUpload.wrn delete mode 100644 .publish/ui/components/LanguageSelector.wrn delete mode 100644 .publish/ui/components/LanguageSwitcher.wrn delete mode 100644 .publish/ui/components/LastNameInput.wrn delete mode 100644 .publish/ui/components/LatencyMetric.wrn delete mode 100644 .publish/ui/components/LatitudeInput.wrn create mode 100644 .publish/ui/components/LayoutSplitter.wrn delete mode 100644 .publish/ui/components/LeadText.wrn delete mode 100644 .publish/ui/components/LeadershipGrid.wrn delete mode 100644 .publish/ui/components/LegalAcceptanceNotice.wrn delete mode 100644 .publish/ui/components/LegalBulletList.wrn delete mode 100644 .publish/ui/components/LegalContactBlock.wrn delete mode 100644 .publish/ui/components/LegalDefinitionList.wrn delete mode 100644 .publish/ui/components/LegalDocumentHeader.wrn delete mode 100644 .publish/ui/components/LegalDocumentLayout.wrn delete mode 100644 .publish/ui/components/LegalHero.wrn delete mode 100644 .publish/ui/components/LegalLanguageSelector.wrn delete mode 100644 .publish/ui/components/LegalNotice.wrn delete mode 100644 .publish/ui/components/LegalPageShell.wrn delete mode 100644 .publish/ui/components/LegalPrintButton.wrn delete mode 100644 .publish/ui/components/LegalRegionSelector.wrn delete mode 100644 .publish/ui/components/LegalSection.wrn delete mode 100644 .publish/ui/components/LegalSummary.wrn delete mode 100644 .publish/ui/components/LegalTable.wrn delete mode 100644 .publish/ui/components/LegalTableOfContents.wrn delete mode 100644 .publish/ui/components/LegalVersionBadge.wrn create mode 100644 .publish/ui/components/LegendIndicator.wrn delete mode 100644 .publish/ui/components/LetterSpacingPicker.wrn delete mode 100644 .publish/ui/components/LicenseKeyInput.wrn delete mode 100644 .publish/ui/components/Lightbox.wrn delete mode 100644 .publish/ui/components/LineChart.wrn delete mode 100644 .publish/ui/components/LineHeightPicker.wrn delete mode 100644 .publish/ui/components/LinkButton.wrn create mode 100644 .publish/ui/components/ListGroup.wrn delete mode 100644 .publish/ui/components/LoadingButton.wrn delete mode 100644 .publish/ui/components/LocaleSelector.wrn delete mode 100644 .publish/ui/components/LocalizedRouteLink.wrn delete mode 100644 .publish/ui/components/LocationPicker.wrn delete mode 100644 .publish/ui/components/LogTable.wrn delete mode 100644 .publish/ui/components/Logo.wrn delete mode 100644 .publish/ui/components/LogoCloud.wrn delete mode 100644 .publish/ui/components/LogoUpload.wrn delete mode 100644 .publish/ui/components/LogoutDialog.wrn delete mode 100644 .publish/ui/components/LongitudeInput.wrn delete mode 100644 .publish/ui/components/MaintenanceAlert.wrn delete mode 100644 .publish/ui/components/MaintenanceBanner.wrn delete mode 100644 .publish/ui/components/MaintenanceCard.wrn delete mode 100644 .publish/ui/components/MaintenancePage.wrn delete mode 100644 .publish/ui/components/MaintenanceState.wrn delete mode 100644 .publish/ui/components/MaintenanceWindowPicker.wrn create mode 100644 .publish/ui/components/Map.wrn delete mode 100644 .publish/ui/components/MapPicker.wrn delete mode 100644 .publish/ui/components/MarkdownEditor.wrn delete mode 100644 .publish/ui/components/MarketingPageShell.wrn delete mode 100644 .publish/ui/components/MarketingSectionHeader.wrn create mode 100644 .publish/ui/components/Marquee.wrn delete mode 100644 .publish/ui/components/MaskedSecretField.wrn delete mode 100644 .publish/ui/components/MemberList.wrn delete mode 100644 .publish/ui/components/MentionInput.wrn delete mode 100644 .publish/ui/components/MessageCharacterCounter.wrn delete mode 100644 .publish/ui/components/MessageComposer.wrn delete mode 100644 .publish/ui/components/MessageComposerPreview.wrn delete mode 100644 .publish/ui/components/MessageLimitInput.wrn delete mode 100644 .publish/ui/components/MessagePreview.wrn delete mode 100644 .publish/ui/components/MessageVolumeSlider.wrn delete mode 100644 .publish/ui/components/Metric.wrn delete mode 100644 .publish/ui/components/MetricCard.wrn delete mode 100644 .publish/ui/components/MetricGrid.wrn delete mode 100644 .publish/ui/components/MetricText.wrn delete mode 100644 .publish/ui/components/MinutePicker.wrn delete mode 100644 .publish/ui/components/MissionSection.wrn delete mode 100644 .publish/ui/components/MobileDeviceFrame.wrn delete mode 100644 .publish/ui/components/MobileInput.wrn delete mode 100644 .publish/ui/components/MobileMenuButton.wrn delete mode 100644 .publish/ui/components/MobileNavigation.wrn delete mode 100644 .publish/ui/components/MobileTableCard.wrn delete mode 100644 .publish/ui/components/MonthPicker.wrn delete mode 100644 .publish/ui/components/MonthYearPicker.wrn delete mode 100644 .publish/ui/components/MonthlyVolumeSelector.wrn delete mode 100644 .publish/ui/components/MultiFileUpload.wrn delete mode 100644 .publish/ui/components/MultiSelect.wrn delete mode 100644 .publish/ui/components/MultipleEmailInput.wrn delete mode 100644 .publish/ui/components/MutedText.wrn delete mode 100644 .publish/ui/components/NameInput.wrn delete mode 100644 .publish/ui/components/NarrowContainer.wrn create mode 100644 .publish/ui/components/Nav.wrn create mode 100644 .publish/ui/components/Navbar.wrn delete mode 100644 .publish/ui/components/Navigation.wrn delete mode 100644 .publish/ui/components/NavigationItem.wrn delete mode 100644 .publish/ui/components/NavigationMegaMenu.wrn delete mode 100644 .publish/ui/components/NewBadge.wrn delete mode 100644 .publish/ui/components/NewPasswordInput.wrn delete mode 100644 .publish/ui/components/NewsletterCTA.wrn delete mode 100644 .publish/ui/components/NewsletterForm.wrn delete mode 100644 .publish/ui/components/NoResultsState.wrn delete mode 100644 .publish/ui/components/NotFoundPage.wrn delete mode 100644 .publish/ui/components/NotFoundState.wrn delete mode 100644 .publish/ui/components/NotificationCard.wrn delete mode 100644 .publish/ui/components/NotificationDot.wrn delete mode 100644 .publish/ui/components/NotificationList.wrn delete mode 100644 .publish/ui/components/NumberInput.wrn delete mode 100644 .publish/ui/components/OfficeCard.wrn delete mode 100644 .publish/ui/components/OfflinePage.wrn delete mode 100644 .publish/ui/components/OfflineState.wrn delete mode 100644 .publish/ui/components/OnboardingProgress.wrn delete mode 100644 .publish/ui/components/OneTimeSecretDisplay.wrn delete mode 100644 .publish/ui/components/OnlineIndicator.wrn delete mode 100644 .publish/ui/components/OpacitySlider.wrn delete mode 100644 .publish/ui/components/OpenAPICTA.wrn delete mode 100644 .publish/ui/components/OptionalIndicator.wrn delete mode 100644 .publish/ui/components/OrganizationSelector.wrn delete mode 100644 .publish/ui/components/OtpInput.wrn delete mode 100644 .publish/ui/components/OtpVerificationForm.wrn delete mode 100644 .publish/ui/components/OutlinedCard.wrn delete mode 100644 .publish/ui/components/PageAlert.wrn delete mode 100644 .publish/ui/components/PageHeader.wrn delete mode 100644 .publish/ui/components/PageHeading.wrn delete mode 100644 .publish/ui/components/PageShell.wrn delete mode 100644 .publish/ui/components/PageSkeleton.wrn delete mode 100644 .publish/ui/components/Panel.wrn delete mode 100644 .publish/ui/components/PartnerApplicationForm.wrn delete mode 100644 .publish/ui/components/PartnerLogoGrid.wrn delete mode 100644 .publish/ui/components/PartnerProgramCard.wrn delete mode 100644 .publish/ui/components/PasskeyButton.wrn delete mode 100644 .publish/ui/components/PasswordInput.wrn delete mode 100644 .publish/ui/components/PasswordRequirementList.wrn delete mode 100644 .publish/ui/components/PasswordStrengthMeter.wrn delete mode 100644 .publish/ui/components/PasswordVisibilityToggle.wrn delete mode 100644 .publish/ui/components/PathInput.wrn delete mode 100644 .publish/ui/components/PaymentMethodCard.wrn delete mode 100644 .publish/ui/components/PdfPreview.wrn delete mode 100644 .publish/ui/components/PercentageInput.wrn delete mode 100644 .publish/ui/components/PermissionSelector.wrn delete mode 100644 .publish/ui/components/PhoneInput.wrn delete mode 100644 .publish/ui/components/PieChart.wrn delete mode 100644 .publish/ui/components/Pill.wrn delete mode 100644 .publish/ui/components/PlainTextEditor.wrn delete mode 100644 .publish/ui/components/PlanCTA.wrn delete mode 100644 .publish/ui/components/PlanFeatureList.wrn delete mode 100644 .publish/ui/components/PlanLimitList.wrn delete mode 100644 .publish/ui/components/PlanSelector.wrn delete mode 100644 .publish/ui/components/PlatformPillarCard.wrn delete mode 100644 .publish/ui/components/PolicyVersionTable.wrn delete mode 100644 .publish/ui/components/PortInput.wrn delete mode 100644 .publish/ui/components/PortNumberInput.wrn delete mode 100644 .publish/ui/components/PositiveNumberInput.wrn delete mode 100644 .publish/ui/components/PostalCodeInput.wrn delete mode 100644 .publish/ui/components/PostmanCTA.wrn delete mode 100644 .publish/ui/components/PresetDateRangePicker.wrn delete mode 100644 .publish/ui/components/PressReleaseCard.wrn delete mode 100644 .publish/ui/components/PreviewBadge.wrn delete mode 100644 .publish/ui/components/PreviousNextNavigation.wrn delete mode 100644 .publish/ui/components/PriceInput.wrn delete mode 100644 .publish/ui/components/PriceRangeSlider.wrn delete mode 100644 .publish/ui/components/PriceText.wrn delete mode 100644 .publish/ui/components/PricingCard.wrn delete mode 100644 .publish/ui/components/PricingComparisonTable.wrn delete mode 100644 .publish/ui/components/PricingContactForm.wrn delete mode 100644 .publish/ui/components/PricingFeatureGroup.wrn delete mode 100644 .publish/ui/components/PricingGrid.wrn delete mode 100644 .publish/ui/components/PricingHero.wrn delete mode 100644 .publish/ui/components/PricingPlanCard.wrn delete mode 100644 .publish/ui/components/PricingTable.wrn delete mode 100644 .publish/ui/components/PricingToggle.wrn delete mode 100644 .publish/ui/components/PrimaryButton.wrn delete mode 100644 .publish/ui/components/PrintAction.wrn delete mode 100644 .publish/ui/components/PrintPolicyButton.wrn delete mode 100644 .publish/ui/components/PrioritySelector.wrn delete mode 100644 .publish/ui/components/PrivacyNotice.wrn delete mode 100644 .publish/ui/components/ProductArchitectureDiagram.wrn delete mode 100644 .publish/ui/components/ProductCTA.wrn delete mode 100644 .publish/ui/components/ProductCard.wrn delete mode 100644 .publish/ui/components/ProductCategorySection.wrn delete mode 100644 .publish/ui/components/ProductFeatureList.wrn delete mode 100644 .publish/ui/components/ProductGrid.wrn delete mode 100644 .publish/ui/components/ProductHero.wrn delete mode 100644 .publish/ui/components/ProductIcon.wrn delete mode 100644 .publish/ui/components/ProductIntegrationList.wrn delete mode 100644 .publish/ui/components/ProductList.wrn delete mode 100644 .publish/ui/components/ProductLogo.wrn delete mode 100644 .publish/ui/components/ProductMegaMenu.wrn delete mode 100644 .publish/ui/components/ProductMiniCard.wrn delete mode 100644 .publish/ui/components/ProductNavigationCard.wrn delete mode 100644 .publish/ui/components/ProductPageShell.wrn delete mode 100644 .publish/ui/components/ProductSelector.wrn delete mode 100644 .publish/ui/components/ProductStatusBadge.wrn delete mode 100644 .publish/ui/components/ProductUseCaseList.wrn delete mode 100644 .publish/ui/components/ProductsMegaMenu.wrn delete mode 100644 .publish/ui/components/ProgressBar.wrn delete mode 100644 .publish/ui/components/ProgressChart.wrn delete mode 100644 .publish/ui/components/ProgressRing.wrn delete mode 100644 .publish/ui/components/ProgressSlider.wrn delete mode 100644 .publish/ui/components/ProjectCard.wrn delete mode 100644 .publish/ui/components/ProjectSelector.wrn delete mode 100644 .publish/ui/components/ProjectSwitcher.wrn delete mode 100644 .publish/ui/components/PromoCodeInput.wrn delete mode 100644 .publish/ui/components/PromptDialog.wrn delete mode 100644 .publish/ui/components/ProviderSelector.wrn delete mode 100644 .publish/ui/components/PublicFooter.wrn delete mode 100644 .publish/ui/components/PublicHeader.wrn delete mode 100644 .publish/ui/components/PublicHeaderLogo.wrn delete mode 100644 .publish/ui/components/PublicMobileNavigation.wrn delete mode 100644 .publish/ui/components/PublicPageShell.wrn delete mode 100644 .publish/ui/components/PublicSearch.wrn delete mode 100644 .publish/ui/components/PublishDateTimePicker.wrn delete mode 100644 .publish/ui/components/PushComposer.wrn delete mode 100644 .publish/ui/components/PushNotificationEditor.wrn delete mode 100644 .publish/ui/components/QrCode.wrn delete mode 100644 .publish/ui/components/QuantityInput.wrn delete mode 100644 .publish/ui/components/QuantityStepper.wrn delete mode 100644 .publish/ui/components/QuietHoursPicker.wrn delete mode 100644 .publish/ui/components/QuoteText.wrn delete mode 100644 .publish/ui/components/RadioGroup.wrn delete mode 100644 .publish/ui/components/RangeInput.wrn delete mode 100644 .publish/ui/components/RateLimitInput.wrn delete mode 100644 .publish/ui/components/RateLimitPage.wrn delete mode 100644 .publish/ui/components/RateLimitedState.wrn delete mode 100644 .publish/ui/components/RateTable.wrn create mode 100644 .publish/ui/components/Rating.wrn delete mode 100644 .publish/ui/components/RatingSlider.wrn delete mode 100644 .publish/ui/components/RecipientSelector.wrn delete mode 100644 .publish/ui/components/RecoveryCodeForm.wrn delete mode 100644 .publish/ui/components/RecoveryCodeInput.wrn delete mode 100644 .publish/ui/components/RecurrenceRuleBuilder.wrn delete mode 100644 .publish/ui/components/RecurringSchedulePicker.wrn delete mode 100644 .publish/ui/components/RedirectUriInput.wrn delete mode 100644 .publish/ui/components/ReferenceInput.wrn delete mode 100644 .publish/ui/components/RegexInput.wrn delete mode 100644 .publish/ui/components/RegionAvailabilityTable.wrn delete mode 100644 .publish/ui/components/RegionSelector.wrn delete mode 100644 .publish/ui/components/RegionUnavailableAlert.wrn delete mode 100644 .publish/ui/components/RegionUnavailableState.wrn delete mode 100644 .publish/ui/components/RegionalPrivacyBanner.wrn delete mode 100644 .publish/ui/components/RejectOptionalCookiesButton.wrn delete mode 100644 .publish/ui/components/ReopenCookieSettingsButton.wrn delete mode 100644 .publish/ui/components/ReportCard.wrn delete mode 100644 .publish/ui/components/RequestResponseViewer.wrn delete mode 100644 .publish/ui/components/RequestViewer.wrn delete mode 100644 .publish/ui/components/RequiredIndicator.wrn delete mode 100644 .publish/ui/components/ResetPasswordForm.wrn delete mode 100644 .publish/ui/components/ResizablePanel.wrn delete mode 100644 .publish/ui/components/ResourceCard.wrn delete mode 100644 .publish/ui/components/ResourceDownloadCard.wrn delete mode 100644 .publish/ui/components/ResourcePageShell.wrn delete mode 100644 .publish/ui/components/ResourceSearch.wrn delete mode 100644 .publish/ui/components/ResourceTypeBadge.wrn delete mode 100644 .publish/ui/components/ResourcesMegaMenu.wrn delete mode 100644 .publish/ui/components/ResponseViewer.wrn delete mode 100644 .publish/ui/components/ResponsibleDisclosureCTA.wrn delete mode 100644 .publish/ui/components/ResponsiveTable.wrn delete mode 100644 .publish/ui/components/ResultsSection.wrn delete mode 100644 .publish/ui/components/RetentionTable.wrn delete mode 100644 .publish/ui/components/RetryCountInput.wrn delete mode 100644 .publish/ui/components/RevenueChart.wrn delete mode 100644 .publish/ui/components/RgbColorInput.wrn delete mode 100644 .publish/ui/components/RichTextEditor.wrn delete mode 100644 .publish/ui/components/RichTextInput.wrn delete mode 100644 .publish/ui/components/RoleSelector.wrn delete mode 100644 .publish/ui/components/RollingDateRangePicker.wrn delete mode 100644 .publish/ui/components/SDKCard.wrn delete mode 100644 .publish/ui/components/SDKLanguageTabs.wrn delete mode 100644 .publish/ui/components/SDKTabs.wrn delete mode 100644 .publish/ui/components/SaveCookiePreferencesButton.wrn delete mode 100644 .publish/ui/components/SavedFilterSelector.wrn delete mode 100644 .publish/ui/components/ScheduleMessagePicker.wrn delete mode 100644 .publish/ui/components/SchedulePicker.wrn delete mode 100644 .publish/ui/components/ScheduledDateTimePicker.wrn delete mode 100644 .publish/ui/components/ScreenshotFrame.wrn delete mode 100644 .publish/ui/components/ScrollArea.wrn create mode 100644 .publish/ui/components/Scrollspy.wrn delete mode 100644 .publish/ui/components/SdkLanguageSelector.wrn create mode 100644 .publish/ui/components/SearchBox.wrn delete mode 100644 .publish/ui/components/SearchButton.wrn delete mode 100644 .publish/ui/components/SearchCategoryTabs.wrn delete mode 100644 .publish/ui/components/SearchDialog.wrn delete mode 100644 .publish/ui/components/SearchEmptyState.wrn delete mode 100644 .publish/ui/components/SearchInput.wrn delete mode 100644 .publish/ui/components/SearchLoadingState.wrn delete mode 100644 .publish/ui/components/SearchResultItem.wrn delete mode 100644 .publish/ui/components/SecondPicker.wrn delete mode 100644 .publish/ui/components/SecondaryButton.wrn delete mode 100644 .publish/ui/components/SecretDisplay.wrn delete mode 100644 .publish/ui/components/SecretInput.wrn delete mode 100644 .publish/ui/components/SecretRevealDialog.wrn delete mode 100644 .publish/ui/components/Section.wrn delete mode 100644 .publish/ui/components/SectionActions.wrn delete mode 100644 .publish/ui/components/SectionHeader.wrn delete mode 100644 .publish/ui/components/SectionHeading.wrn delete mode 100644 .publish/ui/components/SecurityAlert.wrn delete mode 100644 .publish/ui/components/SecurityContactCard.wrn delete mode 100644 .publish/ui/components/SecurityFeatureCard.wrn delete mode 100644 .publish/ui/components/SecurityHero.wrn delete mode 100644 .publish/ui/components/SecurityPillarGrid.wrn delete mode 100644 .publish/ui/components/SecurityPracticeList.wrn delete mode 100644 .publish/ui/components/SecurityReportForm.wrn delete mode 100644 .publish/ui/components/SegmentedButtonGroup.wrn delete mode 100644 .publish/ui/components/SenderIdInput.wrn delete mode 100644 .publish/ui/components/ServerErrorPage.wrn delete mode 100644 .publish/ui/components/ServiceLevelTable.wrn delete mode 100644 .publish/ui/components/ServiceStatusBadge.wrn delete mode 100644 .publish/ui/components/ServiceStatusList.wrn delete mode 100644 .publish/ui/components/ServiceStatusRow.wrn delete mode 100644 .publish/ui/components/SessionCard.wrn delete mode 100644 .publish/ui/components/SessionExpiredDialog.wrn delete mode 100644 .publish/ui/components/SetupChecklist.wrn delete mode 100644 .publish/ui/components/SeveritySelector.wrn delete mode 100644 .publish/ui/components/ShadowPicker.wrn delete mode 100644 .publish/ui/components/ShareAction.wrn delete mode 100644 .publish/ui/components/ShareButton.wrn delete mode 100644 .publish/ui/components/SidePanel.wrn create mode 100644 .publish/ui/components/Sidebar.wrn delete mode 100644 .publish/ui/components/SidebarLayout.wrn delete mode 100644 .publish/ui/components/SignInForm.wrn delete mode 100644 .publish/ui/components/SignInLink.wrn delete mode 100644 .publish/ui/components/SignUpForm.wrn delete mode 100644 .publish/ui/components/SiteSearch.wrn delete mode 100644 .publish/ui/components/SkipLink.wrn delete mode 100644 .publish/ui/components/SlaTable.wrn delete mode 100644 .publish/ui/components/Slider.wrn delete mode 100644 .publish/ui/components/SlugInput.wrn delete mode 100644 .publish/ui/components/SmallText.wrn delete mode 100644 .publish/ui/components/SmartRouteDiagram.wrn delete mode 100644 .publish/ui/components/SmsComposer.wrn delete mode 100644 .publish/ui/components/SmsMessageEditor.wrn delete mode 100644 .publish/ui/components/SmsSegmentCounter.wrn delete mode 100644 .publish/ui/components/SocialShare.wrn delete mode 100644 .publish/ui/components/SolutionHero.wrn delete mode 100644 .publish/ui/components/SolutionPageShell.wrn delete mode 100644 .publish/ui/components/SolutionSection.wrn delete mode 100644 .publish/ui/components/SolutionsMegaMenu.wrn delete mode 100644 .publish/ui/components/SortableTable.wrn delete mode 100644 .publish/ui/components/SplitButton.wrn delete mode 100644 .publish/ui/components/SplitCTA.wrn delete mode 100644 .publish/ui/components/SplitHero.wrn delete mode 100644 .publish/ui/components/SplitLayout.wrn delete mode 100644 .publish/ui/components/SplitSectionHeader.wrn delete mode 100644 .publish/ui/components/StartFreeButton.wrn delete mode 100644 .publish/ui/components/StatCard.wrn delete mode 100644 .publish/ui/components/StateSelector.wrn delete mode 100644 .publish/ui/components/StatusBadge.wrn delete mode 100644 .publish/ui/components/StatusBanner.wrn delete mode 100644 .publish/ui/components/StatusPageShell.wrn delete mode 100644 .publish/ui/components/StatusSelector.wrn delete mode 100644 .publish/ui/components/StatusSubscribeForm.wrn delete mode 100644 .publish/ui/components/StatusTable.wrn delete mode 100644 .publish/ui/components/StepNavigation.wrn delete mode 100644 .publish/ui/components/StepUpAuthenticationDialog.wrn delete mode 100644 .publish/ui/components/StepperInput.wrn delete mode 100644 .publish/ui/components/StickerPicker.wrn delete mode 100644 .publish/ui/components/Sticky.wrn delete mode 100644 .publish/ui/components/StickyLayout.wrn delete mode 100644 .publish/ui/components/StreetAddressInput.wrn create mode 100644 .publish/ui/components/StrongPassword.wrn create mode 100644 .publish/ui/components/StyledIcon.wrn delete mode 100644 .publish/ui/components/SubdomainInput.wrn delete mode 100644 .publish/ui/components/SubjectInput.wrn delete mode 100644 .publish/ui/components/SubprocessorTable.wrn delete mode 100644 .publish/ui/components/SubsectionHeading.wrn delete mode 100644 .publish/ui/components/SuccessCard.wrn delete mode 100644 .publish/ui/components/SuccessState.wrn delete mode 100644 .publish/ui/components/SupportRequestForm.wrn delete mode 100644 .publish/ui/components/Surface.wrn delete mode 100644 .publish/ui/components/TableHeader.wrn delete mode 100644 .publish/ui/components/TableRow.wrn delete mode 100644 .publish/ui/components/TableSkeleton.wrn delete mode 100644 .publish/ui/components/TagInput.wrn delete mode 100644 .publish/ui/components/TaxNotice.wrn delete mode 100644 .publish/ui/components/TaxRateInput.wrn delete mode 100644 .publish/ui/components/TeamMemberCard.wrn delete mode 100644 .publish/ui/components/TeamSizeSelector.wrn delete mode 100644 .publish/ui/components/TemplateCard.wrn delete mode 100644 .publish/ui/components/TemplateSelector.wrn delete mode 100644 .publish/ui/components/TemplateVariableInput.wrn delete mode 100644 .publish/ui/components/TenantIsolationDiagram.wrn delete mode 100644 .publish/ui/components/TerminalBlock.wrn delete mode 100644 .publish/ui/components/TertiaryButton.wrn delete mode 100644 .publish/ui/components/TestMessageDialog.wrn delete mode 100644 .publish/ui/components/TestimonialCard.wrn delete mode 100644 .publish/ui/components/TestimonialCarousel.wrn delete mode 100644 .publish/ui/components/TextInput.wrn delete mode 100644 .publish/ui/components/TextLink.wrn delete mode 100644 .publish/ui/components/TextSkeleton.wrn delete mode 100644 .publish/ui/components/ThemeColorPicker.wrn delete mode 100644 .publish/ui/components/ThemeSwitcher.wrn delete mode 100644 .publish/ui/components/TimeInput.wrn delete mode 100644 .publish/ui/components/TimeRangePicker.wrn delete mode 100644 .publish/ui/components/TimelineChart.wrn delete mode 100644 .publish/ui/components/TimelineItem.wrn delete mode 100644 .publish/ui/components/TimeoutInput.wrn delete mode 100644 .publish/ui/components/TimezoneAwareTimePicker.wrn delete mode 100644 .publish/ui/components/TimezoneSelector.wrn delete mode 100644 .publish/ui/components/ToastAction.wrn delete mode 100644 .publish/ui/components/ToastHost.wrn delete mode 100644 .publish/ui/components/ToastIcon.wrn create mode 100644 .publish/ui/components/ToastNotifications.wrn delete mode 100644 .publish/ui/components/ToastProgress.wrn delete mode 100644 .publish/ui/components/Toggle.wrn create mode 100644 .publish/ui/components/ToggleCount.wrn delete mode 100644 .publish/ui/components/ToggleGroup.wrn create mode 100644 .publish/ui/components/TogglePassword.wrn delete mode 100644 .publish/ui/components/TokenInput.wrn delete mode 100644 .publish/ui/components/TotpVerificationForm.wrn delete mode 100644 .publish/ui/components/TranslatedText.wrn delete mode 100644 .publish/ui/components/TreeTable.wrn create mode 100644 .publish/ui/components/TreeView.wrn delete mode 100644 .publish/ui/components/TrendIndicator.wrn delete mode 100644 .publish/ui/components/TruncatedText.wrn delete mode 100644 .publish/ui/components/TrustBadgeList.wrn delete mode 100644 .publish/ui/components/UnavailableRegionState.wrn delete mode 100644 .publish/ui/components/UnifiedTimelinePreview.wrn delete mode 100644 .publish/ui/components/UnsavedChangesDialog.wrn delete mode 100644 .publish/ui/components/UploadItem.wrn delete mode 100644 .publish/ui/components/UploadPreview.wrn delete mode 100644 .publish/ui/components/UploadProgress.wrn delete mode 100644 .publish/ui/components/UptimeChart.wrn delete mode 100644 .publish/ui/components/UptimeMetric.wrn delete mode 100644 .publish/ui/components/UrlInput.wrn delete mode 100644 .publish/ui/components/UsagePricingTable.wrn delete mode 100644 .publish/ui/components/UseCaseSelector.wrn delete mode 100644 .publish/ui/components/UserCard.wrn delete mode 100644 .publish/ui/components/UsernameInput.wrn delete mode 100644 .publish/ui/components/ValueCard.wrn delete mode 100644 .publish/ui/components/ValuesGrid.wrn delete mode 100644 .publish/ui/components/VerificationCodeInput.wrn delete mode 100644 .publish/ui/components/VerifiedBadge.wrn delete mode 100644 .publish/ui/components/VersionSelector.wrn delete mode 100644 .publish/ui/components/VerticalTabs.wrn delete mode 100644 .publish/ui/components/VideoCard.wrn delete mode 100644 .publish/ui/components/VideoPreviewDialog.wrn delete mode 100644 .publish/ui/components/VideoUpload.wrn delete mode 100644 .publish/ui/components/VirtualizedTable.wrn delete mode 100644 .publish/ui/components/VisionSection.wrn delete mode 100644 .publish/ui/components/VisuallyHidden.wrn delete mode 100644 .publish/ui/components/VoiceScriptComposer.wrn delete mode 100644 .publish/ui/components/VoiceScriptEditor.wrn delete mode 100644 .publish/ui/components/VolumeInput.wrn delete mode 100644 .publish/ui/components/VolumeSlider.wrn delete mode 100644 .publish/ui/components/WarningCard.wrn delete mode 100644 .publish/ui/components/WebhookEventCard.wrn delete mode 100644 .publish/ui/components/WebhookFlowDiagram.wrn delete mode 100644 .publish/ui/components/WebhookPayloadViewer.wrn delete mode 100644 .publish/ui/components/WebhookUrlInput.wrn delete mode 100644 .publish/ui/components/WebinarCard.wrn delete mode 100644 .publish/ui/components/WebinarRegistrationForm.wrn delete mode 100644 .publish/ui/components/Well.wrn delete mode 100644 .publish/ui/components/WhatsAppComposer.wrn delete mode 100644 .publish/ui/components/WhatsAppNumberInput.wrn delete mode 100644 .publish/ui/components/WhatsAppTemplateEditor.wrn delete mode 100644 .publish/ui/components/WideContainer.wrn delete mode 100644 .publish/ui/components/Wizard.wrn delete mode 100644 .publish/ui/components/WizardHeader.wrn delete mode 100644 .publish/ui/components/WizardNavigation.wrn delete mode 100644 .publish/ui/components/WorkflowCanvasPreview.wrn delete mode 100644 .publish/ui/components/WorkflowProgress.wrn delete mode 100644 .publish/ui/components/WorkspaceCard.wrn delete mode 100644 .publish/ui/components/WorkspaceSelector.wrn delete mode 100644 .publish/ui/components/WorkspaceSwitcher.wrn create mode 100644 .publish/ui/components/WysiwygEditor.wrn delete mode 100644 .publish/ui/components/YearPicker.wrn delete mode 100644 .publish/ui/components/ZoomSlider.wrn delete mode 100644 .publish/ui/components/disclosure.wrn delete mode 100644 .publish/ui/components/file-upload.wrn delete mode 100644 .publish/ui/components/hstack.wrn delete mode 100644 .publish/ui/components/spacer.wrn delete mode 100644 .publish/ui/components/stack.wrn delete mode 100644 .publish/ui/components/tag.wrn delete mode 100644 .publish/ui/components/theme-toggle.wrn create mode 100644 examples/basic-app/app/pages/test.wrn create mode 100644 examples/component-showcase/README.md create mode 100644 examples/component-showcase/app/api/teams.ts create mode 100644 examples/component-showcase/app/layouts/document.wrn create mode 100644 examples/component-showcase/app/layouts/showcase.wrn create mode 100644 examples/component-showcase/app/pages/accessibility.wrn create mode 100644 examples/component-showcase/app/pages/advanced-forms.wrn create mode 100644 examples/component-showcase/app/pages/base.wrn create mode 100644 examples/component-showcase/app/pages/blocks.wrn create mode 100644 examples/component-showcase/app/pages/colors.wrn create mode 100644 examples/component-showcase/app/pages/components/accordion.wrn create mode 100644 examples/component-showcase/app/pages/components/advanced-date-picker.wrn create mode 100644 examples/component-showcase/app/pages/components/advanced-range-slider.wrn create mode 100644 examples/component-showcase/app/pages/components/advanced-select.wrn create mode 100644 examples/component-showcase/app/pages/components/alert.wrn create mode 100644 examples/component-showcase/app/pages/components/avatar-group.wrn create mode 100644 examples/component-showcase/app/pages/components/avatar.wrn create mode 100644 examples/component-showcase/app/pages/components/badge.wrn create mode 100644 examples/component-showcase/app/pages/components/blockquote.wrn create mode 100644 examples/component-showcase/app/pages/components/breadcrumb.wrn create mode 100644 examples/component-showcase/app/pages/components/button-group.wrn create mode 100644 examples/component-showcase/app/pages/components/button.wrn create mode 100644 examples/component-showcase/app/pages/components/card.wrn create mode 100644 examples/component-showcase/app/pages/components/carousel.wrn create mode 100644 examples/component-showcase/app/pages/components/chart.wrn create mode 100644 examples/component-showcase/app/pages/components/chat-bubble.wrn create mode 100644 examples/component-showcase/app/pages/components/checkbox.wrn create mode 100644 examples/component-showcase/app/pages/components/clipboard.wrn create mode 100644 examples/component-showcase/app/pages/components/collapse.wrn create mode 100644 examples/component-showcase/app/pages/components/color-picker.wrn create mode 100644 examples/component-showcase/app/pages/components/columns.wrn create mode 100644 examples/component-showcase/app/pages/components/combo-box.wrn create mode 100644 examples/component-showcase/app/pages/components/confetti.wrn create mode 100644 examples/component-showcase/app/pages/components/container.wrn create mode 100644 examples/component-showcase/app/pages/components/context-menu.wrn create mode 100644 examples/component-showcase/app/pages/components/copy-markup.wrn create mode 100644 examples/component-showcase/app/pages/components/custom-scrollbar.wrn create mode 100644 examples/component-showcase/app/pages/components/data-map.wrn create mode 100644 examples/component-showcase/app/pages/components/data-table.wrn create mode 100644 examples/component-showcase/app/pages/components/date-picker.wrn create mode 100644 examples/component-showcase/app/pages/components/device-frame.wrn create mode 100644 examples/component-showcase/app/pages/components/divider.wrn create mode 100644 examples/component-showcase/app/pages/components/drag-and-drop.wrn create mode 100644 examples/component-showcase/app/pages/components/drawer.wrn create mode 100644 examples/component-showcase/app/pages/components/dropdown.wrn create mode 100644 examples/component-showcase/app/pages/components/file-input.wrn create mode 100644 examples/component-showcase/app/pages/components/file-upload-progress.wrn create mode 100644 examples/component-showcase/app/pages/components/file-upload.wrn create mode 100644 examples/component-showcase/app/pages/components/grid.wrn create mode 100644 examples/component-showcase/app/pages/components/image.wrn create mode 100644 examples/component-showcase/app/pages/components/input-group.wrn create mode 100644 examples/component-showcase/app/pages/components/input-number.wrn create mode 100644 examples/component-showcase/app/pages/components/input.wrn create mode 100644 examples/component-showcase/app/pages/components/kbd.wrn create mode 100644 examples/component-showcase/app/pages/components/layout-splitter.wrn create mode 100644 examples/component-showcase/app/pages/components/legend-indicator.wrn create mode 100644 examples/component-showcase/app/pages/components/link.wrn create mode 100644 examples/component-showcase/app/pages/components/list-group.wrn create mode 100644 examples/component-showcase/app/pages/components/list.wrn create mode 100644 examples/component-showcase/app/pages/components/map.wrn create mode 100644 examples/component-showcase/app/pages/components/marquee.wrn create mode 100644 examples/component-showcase/app/pages/components/mega-menu.wrn create mode 100644 examples/component-showcase/app/pages/components/modal.wrn create mode 100644 examples/component-showcase/app/pages/components/nav.wrn create mode 100644 examples/component-showcase/app/pages/components/navbar.wrn create mode 100644 examples/component-showcase/app/pages/components/pagination.wrn create mode 100644 examples/component-showcase/app/pages/components/pin-input.wrn create mode 100644 examples/component-showcase/app/pages/components/popover.wrn create mode 100644 examples/component-showcase/app/pages/components/progress.wrn create mode 100644 examples/component-showcase/app/pages/components/radio.wrn create mode 100644 examples/component-showcase/app/pages/components/range-slider.wrn create mode 100644 examples/component-showcase/app/pages/components/rating.wrn create mode 100644 examples/component-showcase/app/pages/components/scrollspy.wrn create mode 100644 examples/component-showcase/app/pages/components/search-box.wrn create mode 100644 examples/component-showcase/app/pages/components/select.wrn create mode 100644 examples/component-showcase/app/pages/components/sidebar.wrn create mode 100644 examples/component-showcase/app/pages/components/skeleton.wrn create mode 100644 examples/component-showcase/app/pages/components/spinner.wrn create mode 100644 examples/component-showcase/app/pages/components/stepper.wrn create mode 100644 examples/component-showcase/app/pages/components/strong-password.wrn create mode 100644 examples/component-showcase/app/pages/components/styled-icon.wrn create mode 100644 examples/component-showcase/app/pages/components/switch.wrn create mode 100644 examples/component-showcase/app/pages/components/table.wrn create mode 100644 examples/component-showcase/app/pages/components/tabs.wrn create mode 100644 examples/component-showcase/app/pages/components/textarea.wrn create mode 100644 examples/component-showcase/app/pages/components/time-picker.wrn create mode 100644 examples/component-showcase/app/pages/components/timeline.wrn create mode 100644 examples/component-showcase/app/pages/components/toast-notifications.wrn create mode 100644 examples/component-showcase/app/pages/components/toast.wrn create mode 100644 examples/component-showcase/app/pages/components/toggle-count.wrn create mode 100644 examples/component-showcase/app/pages/components/toggle-password.wrn create mode 100644 examples/component-showcase/app/pages/components/tooltip.wrn create mode 100644 examples/component-showcase/app/pages/components/tree-view.wrn create mode 100644 examples/component-showcase/app/pages/components/typography.wrn create mode 100644 examples/component-showcase/app/pages/components/wysiwyg-editor.wrn create mode 100644 examples/component-showcase/app/pages/dark-mode.wrn create mode 100644 examples/component-showcase/app/pages/docs.wrn create mode 100644 examples/component-showcase/app/pages/fonts.wrn create mode 100644 examples/component-showcase/app/pages/forms.wrn create mode 100644 examples/component-showcase/app/pages/framework-guides.wrn create mode 100644 examples/component-showcase/app/pages/index.wrn create mode 100644 examples/component-showcase/app/pages/installation.wrn create mode 100644 examples/component-showcase/app/pages/integrations.wrn create mode 100644 examples/component-showcase/app/pages/layout.wrn create mode 100644 examples/component-showcase/app/pages/navigation.wrn create mode 100644 examples/component-showcase/app/pages/overlays.wrn create mode 100644 examples/component-showcase/app/pages/resources.wrn create mode 100644 examples/component-showcase/app/pages/sizing.wrn create mode 100644 examples/component-showcase/app/pages/tables.wrn create mode 100644 examples/component-showcase/app/pages/templates.wrn create mode 100644 examples/component-showcase/app/pages/themes.wrn create mode 100644 examples/component-showcase/app/routes.gen.ts create mode 100644 examples/component-showcase/app/schemas/advanced-select-dynamic-validation.ts create mode 100644 examples/component-showcase/app/schemas/advanced-select-validation.ts create mode 100644 examples/component-showcase/app/schemas/combobox-validation.ts create mode 100644 examples/component-showcase/app/schemas/pin-input-validation.ts create mode 100644 examples/component-showcase/app/schemas/toggle-password-validation.ts create mode 100644 examples/component-showcase/app/styles/global.css create mode 100644 examples/component-showcase/package.json create mode 100644 examples/component-showcase/public/playground.js create mode 100644 examples/component-showcase/scripts/generate-showcase.mjs create mode 100644 examples/component-showcase/test/showcase.test.ts create mode 100644 examples/component-showcase/tsconfig.json create mode 100644 examples/component-showcase/wrnexus.config.ts create mode 100644 packages/ui/component-migrations.json delete mode 100644 packages/ui/components/AcceptAllCookiesButton.wrn delete mode 100644 packages/ui/components/AccessibleAccordion.wrn delete mode 100644 packages/ui/components/AccessibleCarousel.wrn delete mode 100644 packages/ui/components/AccessibleChartSummary.wrn delete mode 100644 packages/ui/components/AccessibleDialog.wrn delete mode 100644 packages/ui/components/AccessibleErrorSummary.wrn delete mode 100644 packages/ui/components/AccessibleIcon.wrn delete mode 100644 packages/ui/components/AccessibleMenu.wrn delete mode 100644 packages/ui/components/AccessibleTabs.wrn delete mode 100644 packages/ui/components/AccessibleTooltip.wrn delete mode 100644 packages/ui/components/AccountMenu.wrn delete mode 100644 packages/ui/components/AccountStatusBanner.wrn delete mode 100644 packages/ui/components/ActionMenu.wrn delete mode 100644 packages/ui/components/ActiveFilterList.wrn delete mode 100644 packages/ui/components/ActivityList.wrn delete mode 100644 packages/ui/components/AddOnCard.wrn delete mode 100644 packages/ui/components/AddressInput.wrn delete mode 100644 packages/ui/components/AddressPreview.wrn create mode 100644 packages/ui/components/AdvancedDatePicker.wrn delete mode 100644 packages/ui/components/AdvancedFilterBuilder.wrn create mode 100644 packages/ui/components/AdvancedRangeSlider.wrn create mode 100644 packages/ui/components/AdvancedSelect.wrn delete mode 100644 packages/ui/components/AlertDialog.wrn delete mode 100644 packages/ui/components/AmountInput.wrn delete mode 100644 packages/ui/components/AnalyticsDashboardPreview.wrn delete mode 100644 packages/ui/components/AnchorNavigation.wrn delete mode 100644 packages/ui/components/AnnouncementBar.wrn delete mode 100644 packages/ui/components/ApartmentInput.wrn delete mode 100644 packages/ui/components/ApiAuthenticationNotice.wrn delete mode 100644 packages/ui/components/ApiEndpointCard.wrn delete mode 100644 packages/ui/components/ApiErrorExample.wrn delete mode 100644 packages/ui/components/ApiHeaderTable.wrn delete mode 100644 packages/ui/components/ApiKeyCreateDialog.wrn delete mode 100644 packages/ui/components/ApiKeyDisplay.wrn delete mode 100644 packages/ui/components/ApiKeyInput.wrn delete mode 100644 packages/ui/components/ApiMethodBadge.wrn delete mode 100644 packages/ui/components/ApiParameterTable.wrn delete mode 100644 packages/ui/components/ApiRateLimitNotice.wrn delete mode 100644 packages/ui/components/ApiRequestExample.wrn delete mode 100644 packages/ui/components/ApiResponseExample.wrn delete mode 100644 packages/ui/components/ApiSchemaTable.wrn delete mode 100644 packages/ui/components/ApiSchemaViewer.wrn delete mode 100644 packages/ui/components/ApiVersionBadge.wrn delete mode 100644 packages/ui/components/AppHeader.wrn delete mode 100644 packages/ui/components/ArchitectureSection.wrn delete mode 100644 packages/ui/components/AreaChart.wrn delete mode 100644 packages/ui/components/ArticleHero.wrn delete mode 100644 packages/ui/components/ArticleLayout.wrn delete mode 100644 packages/ui/components/ArticleNewsletterCTA.wrn delete mode 100644 packages/ui/components/ArticlePageShell.wrn delete mode 100644 packages/ui/components/ArticleShareActions.wrn delete mode 100644 packages/ui/components/AspectRatio.wrn delete mode 100644 packages/ui/components/AssetCard.wrn delete mode 100644 packages/ui/components/AttachmentPicker.wrn delete mode 100644 packages/ui/components/AttachmentUpload.wrn delete mode 100644 packages/ui/components/AudioUpload.wrn delete mode 100644 packages/ui/components/AuditLogPreview.wrn delete mode 100644 packages/ui/components/AuditTable.wrn delete mode 100644 packages/ui/components/AuthenticatorCodeInput.wrn delete mode 100644 packages/ui/components/AuthorAvatar.wrn delete mode 100644 packages/ui/components/AuthorCard.wrn delete mode 100644 packages/ui/components/AuthorizedApplicationCard.wrn delete mode 100644 packages/ui/components/AutoGrid.wrn delete mode 100644 packages/ui/components/AutomationExampleCard.wrn delete mode 100644 packages/ui/components/AvailabilityCalendar.wrn delete mode 100644 packages/ui/components/AvatarUpload.wrn delete mode 100644 packages/ui/components/BackButton.wrn delete mode 100644 packages/ui/components/BackToTop.wrn delete mode 100644 packages/ui/components/BankTransferDetails.wrn delete mode 100644 packages/ui/components/Banner.wrn delete mode 100644 packages/ui/components/BarChart.wrn delete mode 100644 packages/ui/components/BetaBadge.wrn delete mode 100644 packages/ui/components/BillingAddressForm.wrn delete mode 100644 packages/ui/components/BillingExample.wrn delete mode 100644 packages/ui/components/BillingPeriodToggle.wrn delete mode 100644 packages/ui/components/BlackoutDatePicker.wrn create mode 100644 packages/ui/components/Blockquote.wrn delete mode 100644 packages/ui/components/BlogCard.wrn delete mode 100644 packages/ui/components/BlogGrid.wrn delete mode 100644 packages/ui/components/BlogList.wrn delete mode 100644 packages/ui/components/BlogSearch.wrn delete mode 100644 packages/ui/components/BodyText.wrn delete mode 100644 packages/ui/components/BorderRadiusPicker.wrn delete mode 100644 packages/ui/components/BottomNavigation.wrn delete mode 100644 packages/ui/components/BrandColorPicker.wrn delete mode 100644 packages/ui/components/BrandSelector.wrn create mode 100644 packages/ui/components/Breadcrumb.wrn delete mode 100644 packages/ui/components/Breadcrumbs.wrn delete mode 100644 packages/ui/components/BrowserFrame.wrn delete mode 100644 packages/ui/components/BudgetRangeSlider.wrn delete mode 100644 packages/ui/components/BudgetSelector.wrn delete mode 100644 packages/ui/components/BusinessHoursPicker.wrn delete mode 100644 packages/ui/components/ButtonSelector.wrn delete mode 100644 packages/ui/components/CTASection.wrn delete mode 100644 packages/ui/components/Calendar.wrn delete mode 100644 packages/ui/components/CalendarGrid.wrn delete mode 100644 packages/ui/components/CalendarHeader.wrn delete mode 100644 packages/ui/components/CalendarNavigation.wrn delete mode 100644 packages/ui/components/CallbackUrlInput.wrn delete mode 100644 packages/ui/components/CampaignCard.wrn delete mode 100644 packages/ui/components/CampaignPerformancePreview.wrn delete mode 100644 packages/ui/components/CampaignProgress.wrn delete mode 100644 packages/ui/components/CapabilityGrid.wrn delete mode 100644 packages/ui/components/CaptchaField.wrn delete mode 100644 packages/ui/components/CardPaymentForm.wrn delete mode 100644 packages/ui/components/CardSelector.wrn delete mode 100644 packages/ui/components/CardSkeleton.wrn delete mode 100644 packages/ui/components/CareerApplicationForm.wrn delete mode 100644 packages/ui/components/CareerBenefitsGrid.wrn delete mode 100644 packages/ui/components/CaseStudyCard.wrn delete mode 100644 packages/ui/components/CaseStudyHero.wrn delete mode 100644 packages/ui/components/CaseStudyPreview.wrn delete mode 100644 packages/ui/components/CenteredCTA.wrn delete mode 100644 packages/ui/components/CenteredHero.wrn delete mode 100644 packages/ui/components/CenteredSectionHeader.wrn delete mode 100644 packages/ui/components/CertificateUpload.wrn delete mode 100644 packages/ui/components/CertificationBadge.wrn delete mode 100644 packages/ui/components/ChallengeSection.wrn delete mode 100644 packages/ui/components/ChannelBadge.wrn delete mode 100644 packages/ui/components/ChannelCard.wrn delete mode 100644 packages/ui/components/ChannelComparisonChart.wrn delete mode 100644 packages/ui/components/ChannelComparisonTable.wrn delete mode 100644 packages/ui/components/ChannelFallbackDiagram.wrn delete mode 100644 packages/ui/components/ChannelFlow.wrn delete mode 100644 packages/ui/components/ChannelIcon.wrn delete mode 100644 packages/ui/components/ChannelRateTable.wrn delete mode 100644 packages/ui/components/ChannelSelector.wrn delete mode 100644 packages/ui/components/CharacterCounter.wrn create mode 100644 packages/ui/components/Chart.wrn delete mode 100644 packages/ui/components/ChartEmptyState.wrn delete mode 100644 packages/ui/components/ChartTooltip.wrn create mode 100644 packages/ui/components/ChatBubble.wrn delete mode 100644 packages/ui/components/CheckboxGroup.wrn delete mode 100644 packages/ui/components/Checklist.wrn delete mode 100644 packages/ui/components/ChecklistProgress.wrn delete mode 100644 packages/ui/components/Chip.wrn delete mode 100644 packages/ui/components/ChipInput.wrn delete mode 100644 packages/ui/components/CircularProgress.wrn delete mode 100644 packages/ui/components/CitySelector.wrn delete mode 100644 packages/ui/components/ClearFiltersButton.wrn delete mode 100644 packages/ui/components/ClickableCard.wrn create mode 100644 packages/ui/components/Clipboard.wrn delete mode 100644 packages/ui/components/CloseButton.wrn delete mode 100644 packages/ui/components/Cluster.wrn delete mode 100644 packages/ui/components/Code.wrn delete mode 100644 packages/ui/components/CodeBlock.wrn delete mode 100644 packages/ui/components/CodeCopyButton.wrn delete mode 100644 packages/ui/components/CodeHeader.wrn delete mode 100644 packages/ui/components/CodeInput.wrn delete mode 100644 packages/ui/components/CodeLanguageBadge.wrn delete mode 100644 packages/ui/components/CodeTabs.wrn delete mode 100644 packages/ui/components/CodeText.wrn delete mode 100644 packages/ui/components/CohortChart.wrn create mode 100644 packages/ui/components/Collapse.wrn delete mode 100644 packages/ui/components/ColorGrid.wrn delete mode 100644 packages/ui/components/ColorHexInput.wrn delete mode 100644 packages/ui/components/ColorSelector.wrn delete mode 100644 packages/ui/components/ColorSwatch.wrn create mode 100644 packages/ui/components/Columns.wrn delete mode 100644 packages/ui/components/ComingSoonBadge.wrn delete mode 100644 packages/ui/components/ComingSoonState.wrn delete mode 100644 packages/ui/components/CommandBlock.wrn delete mode 100644 packages/ui/components/CommandMenu.wrn delete mode 100644 packages/ui/components/CommandSearchInput.wrn delete mode 100644 packages/ui/components/CompanyHero.wrn delete mode 100644 packages/ui/components/CompanyNameInput.wrn delete mode 100644 packages/ui/components/CompanyPageShell.wrn delete mode 100644 packages/ui/components/CompanySizeSelector.wrn delete mode 100644 packages/ui/components/ComparisonDateRangePicker.wrn delete mode 100644 packages/ui/components/ComparisonTable.wrn delete mode 100644 packages/ui/components/CompletionMeter.wrn delete mode 100644 packages/ui/components/ComplianceBadgeList.wrn delete mode 100644 packages/ui/components/ComplianceProgramCard.wrn create mode 100644 packages/ui/components/Confetti.wrn delete mode 100644 packages/ui/components/ConfirmPasswordInput.wrn delete mode 100644 packages/ui/components/ConfirmationDialog.wrn delete mode 100644 packages/ui/components/ConnectedAccountCard.wrn delete mode 100644 packages/ui/components/ConnectionCard.wrn delete mode 100644 packages/ui/components/ConsentTimelinePreview.wrn delete mode 100644 packages/ui/components/ContactCTA.wrn delete mode 100644 packages/ui/components/ContactCard.wrn delete mode 100644 packages/ui/components/ContactForm.wrn delete mode 100644 packages/ui/components/ContactHero.wrn delete mode 100644 packages/ui/components/ContactPageShell.wrn delete mode 100644 packages/ui/components/ContactSalesBanner.wrn delete mode 100644 packages/ui/components/ContactSalesButton.wrn delete mode 100644 packages/ui/components/ContactSalesForm.wrn delete mode 100644 packages/ui/components/ContextSwitcher.wrn delete mode 100644 packages/ui/components/ConversationList.wrn delete mode 100644 packages/ui/components/ConversationPreview.wrn delete mode 100644 packages/ui/components/ConversionChart.wrn delete mode 100644 packages/ui/components/CookieBanner.wrn delete mode 100644 packages/ui/components/CookieCategoryList.wrn delete mode 100644 packages/ui/components/CookieCategoryToggle.wrn delete mode 100644 packages/ui/components/CookieConsent.wrn delete mode 100644 packages/ui/components/CookieDetailsTable.wrn delete mode 100644 packages/ui/components/CookiePreferencesDialog.wrn delete mode 100644 packages/ui/components/CookieTable.wrn delete mode 100644 packages/ui/components/CoordinatesInput.wrn delete mode 100644 packages/ui/components/CoordinatesPicker.wrn delete mode 100644 packages/ui/components/CopyButton.wrn delete mode 100644 packages/ui/components/CopyCodeButton.wrn create mode 100644 packages/ui/components/CopyMarkup.wrn delete mode 100644 packages/ui/components/CopySecretField.wrn delete mode 100644 packages/ui/components/CostBreakdownChart.wrn delete mode 100644 packages/ui/components/CostSummary.wrn delete mode 100644 packages/ui/components/Counter.wrn delete mode 100644 packages/ui/components/CountryCallingCodeInput.wrn delete mode 100644 packages/ui/components/CountryCallingCodeSelector.wrn delete mode 100644 packages/ui/components/CountrySelector.wrn delete mode 100644 packages/ui/components/CouponInput.wrn delete mode 100644 packages/ui/components/CreditAmountInput.wrn delete mode 100644 packages/ui/components/CronBuilder.wrn delete mode 100644 packages/ui/components/CronInput.wrn delete mode 100644 packages/ui/components/CsvUpload.wrn delete mode 100644 packages/ui/components/CurrencyInput.wrn delete mode 100644 packages/ui/components/CurrencySelector.wrn delete mode 100644 packages/ui/components/CurrentPasswordInput.wrn create mode 100644 packages/ui/components/CustomScrollbar.wrn delete mode 100644 packages/ui/components/CustomerLogo.wrn delete mode 100644 packages/ui/components/CustomerStoryCard.wrn delete mode 100644 packages/ui/components/DangerButton.wrn create mode 100644 packages/ui/components/DataMap.wrn delete mode 100644 packages/ui/components/DataProtectionCard.wrn delete mode 100644 packages/ui/components/DataRetentionTable.wrn delete mode 100644 packages/ui/components/DateInput.wrn delete mode 100644 packages/ui/components/DateRangeCalendar.wrn delete mode 100644 packages/ui/components/DateRangePicker.wrn delete mode 100644 packages/ui/components/DateRangeSlider.wrn delete mode 100644 packages/ui/components/DateTimeInput.wrn delete mode 100644 packages/ui/components/DateTimePicker.wrn delete mode 100644 packages/ui/components/DateTimeRangePicker.wrn delete mode 100644 packages/ui/components/DecimalInput.wrn delete mode 100644 packages/ui/components/DefinitionList.wrn delete mode 100644 packages/ui/components/DeleteConfirmationDialog.wrn delete mode 100644 packages/ui/components/DeliveryPreview.wrn delete mode 100644 packages/ui/components/DeliveryStatusChart.wrn delete mode 100644 packages/ui/components/DeliveryStatusTimeline.wrn delete mode 100644 packages/ui/components/DemoRequestForm.wrn delete mode 100644 packages/ui/components/DepartmentInput.wrn delete mode 100644 packages/ui/components/DeprecatedFeatureAlert.wrn delete mode 100644 packages/ui/components/DescriptionList.wrn delete mode 100644 packages/ui/components/DesktopNavigation.wrn delete mode 100644 packages/ui/components/DeveloperCTA.wrn delete mode 100644 packages/ui/components/DeveloperHero.wrn delete mode 100644 packages/ui/components/DeveloperPageShell.wrn delete mode 100644 packages/ui/components/DeveloperSearch.wrn delete mode 100644 packages/ui/components/DevelopersMegaMenu.wrn delete mode 100644 packages/ui/components/DevelopersMenu.wrn delete mode 100644 packages/ui/components/DeviceCard.wrn create mode 100644 packages/ui/components/DeviceFrame.wrn delete mode 100644 packages/ui/components/DiscountInput.wrn delete mode 100644 packages/ui/components/DisplayHeading.wrn delete mode 100644 packages/ui/components/DisplayNameInput.wrn delete mode 100644 packages/ui/components/DoNotSellLink.wrn delete mode 100644 packages/ui/components/DocumentPreview.wrn delete mode 100644 packages/ui/components/DocumentUpload.wrn delete mode 100644 packages/ui/components/DomainInput.wrn delete mode 100644 packages/ui/components/DonutChart.wrn delete mode 100644 packages/ui/components/DownloadAction.wrn delete mode 100644 packages/ui/components/DownloadButton.wrn delete mode 100644 packages/ui/components/DownloadGateForm.wrn delete mode 100644 packages/ui/components/DownloadPolicyButton.wrn delete mode 100644 packages/ui/components/DownloadResourceForm.wrn create mode 100644 packages/ui/components/DragAndDrop.wrn create mode 100644 packages/ui/components/Dropdown.wrn delete mode 100644 packages/ui/components/DropdownMenu.wrn delete mode 100644 packages/ui/components/DropdownNavigation.wrn delete mode 100644 packages/ui/components/DurationInput.wrn delete mode 100644 packages/ui/components/DurationPicker.wrn delete mode 100644 packages/ui/components/DurationSlider.wrn delete mode 100644 packages/ui/components/ElevatedCard.wrn delete mode 100644 packages/ui/components/EmailBodyEditor.wrn delete mode 100644 packages/ui/components/EmailComposer.wrn delete mode 100644 packages/ui/components/EmailInput.wrn delete mode 100644 packages/ui/components/EmojiPicker.wrn delete mode 100644 packages/ui/components/EmptyState.wrn delete mode 100644 packages/ui/components/EncryptionDiagram.wrn delete mode 100644 packages/ui/components/EnterpriseCTA.wrn delete mode 100644 packages/ui/components/EnterpriseHero.wrn delete mode 100644 packages/ui/components/EnterprisePricingCard.wrn delete mode 100644 packages/ui/components/EnvironmentSelector.wrn delete mode 100644 packages/ui/components/EnvironmentSwitcher.wrn delete mode 100644 packages/ui/components/ErrorActions.wrn delete mode 100644 packages/ui/components/ErrorCard.wrn delete mode 100644 packages/ui/components/ErrorCode.wrn delete mode 100644 packages/ui/components/ErrorHero.wrn delete mode 100644 packages/ui/components/ErrorIllustration.wrn delete mode 100644 packages/ui/components/ErrorPage.wrn delete mode 100644 packages/ui/components/ErrorPageShell.wrn delete mode 100644 packages/ui/components/ErrorState.wrn delete mode 100644 packages/ui/components/ErrorSupportLink.wrn delete mode 100644 packages/ui/components/EstimatedCostSummary.wrn delete mode 100644 packages/ui/components/EventTable.wrn delete mode 100644 packages/ui/components/ExpandableText.wrn delete mode 100644 packages/ui/components/ExpiryDateTimePicker.wrn delete mode 100644 packages/ui/components/ExportProgress.wrn delete mode 100644 packages/ui/components/ExternalLink.wrn delete mode 100644 packages/ui/components/EyebrowText.wrn delete mode 100644 packages/ui/components/FAQ.wrn delete mode 100644 packages/ui/components/FAQAccordion.wrn delete mode 100644 packages/ui/components/FactorCard.wrn delete mode 100644 packages/ui/components/FallbackRouteBuilder.wrn delete mode 100644 packages/ui/components/FallbackRouteDiagram.wrn delete mode 100644 packages/ui/components/FaviconUpload.wrn delete mode 100644 packages/ui/components/FaxInput.wrn delete mode 100644 packages/ui/components/FeatureCard.wrn delete mode 100644 packages/ui/components/FeatureChecklist.wrn delete mode 100644 packages/ui/components/FeatureComparisonTable.wrn delete mode 100644 packages/ui/components/FeatureDetailsPanel.wrn delete mode 100644 packages/ui/components/FeatureGrid.wrn delete mode 100644 packages/ui/components/FeatureIconCard.wrn delete mode 100644 packages/ui/components/FeatureList.wrn delete mode 100644 packages/ui/components/FeatureTabs.wrn delete mode 100644 packages/ui/components/FeatureTimeline.wrn delete mode 100644 packages/ui/components/FeatureUnavailableState.wrn delete mode 100644 packages/ui/components/FeaturedBlogCard.wrn delete mode 100644 packages/ui/components/FieldActions.wrn delete mode 100644 packages/ui/components/FileList.wrn delete mode 100644 packages/ui/components/FileSizeInput.wrn delete mode 100644 packages/ui/components/FileSizeLabel.wrn delete mode 100644 packages/ui/components/FileTypeBadge.wrn create mode 100644 packages/ui/components/FileUploadProgress.wrn delete mode 100644 packages/ui/components/FilterBar.wrn delete mode 100644 packages/ui/components/FilterMenu.wrn delete mode 100644 packages/ui/components/FilterSearchInput.wrn delete mode 100644 packages/ui/components/FilterableTable.wrn delete mode 100644 packages/ui/components/FinalCTA.wrn delete mode 100644 packages/ui/components/FirstNameInput.wrn delete mode 100644 packages/ui/components/Flex.wrn delete mode 100644 packages/ui/components/FontPicker.wrn delete mode 100644 packages/ui/components/FontSizePicker.wrn delete mode 100644 packages/ui/components/FontWeightPicker.wrn delete mode 100644 packages/ui/components/FooterLanguageSwitcher.wrn delete mode 100644 packages/ui/components/FooterStatusIndicator.wrn delete mode 100644 packages/ui/components/ForbiddenPage.wrn delete mode 100644 packages/ui/components/ForbiddenState.wrn delete mode 100644 packages/ui/components/ForgotPasswordForm.wrn delete mode 100644 packages/ui/components/Form.wrn delete mode 100644 packages/ui/components/FormActions.wrn delete mode 100644 packages/ui/components/FormAlert.wrn delete mode 100644 packages/ui/components/FormDialog.wrn delete mode 100644 packages/ui/components/FormError.wrn delete mode 100644 packages/ui/components/FormErrorSummary.wrn delete mode 100644 packages/ui/components/FormField.wrn delete mode 100644 packages/ui/components/FormGrid.wrn delete mode 100644 packages/ui/components/FormGroup.wrn delete mode 100644 packages/ui/components/FormHelpText.wrn delete mode 100644 packages/ui/components/FormLabel.wrn delete mode 100644 packages/ui/components/FormProgress.wrn delete mode 100644 packages/ui/components/FormRow.wrn delete mode 100644 packages/ui/components/FormSection.wrn delete mode 100644 packages/ui/components/FullBleed.wrn delete mode 100644 packages/ui/components/FullscreenDialog.wrn delete mode 100644 packages/ui/components/FunnelChart.wrn delete mode 100644 packages/ui/components/GeoChart.wrn delete mode 100644 packages/ui/components/GeofenceEditor.wrn delete mode 100644 packages/ui/components/GhostButton.wrn delete mode 100644 packages/ui/components/GlassCard.wrn delete mode 100644 packages/ui/components/GlobalSearch.wrn delete mode 100644 packages/ui/components/GradientCTA.wrn delete mode 100644 packages/ui/components/GradientPicker.wrn delete mode 100644 packages/ui/components/GradientStopEditor.wrn delete mode 100644 packages/ui/components/GuideCard.wrn delete mode 100644 packages/ui/components/GuideChecklist.wrn delete mode 100644 packages/ui/components/GuideDifficultyBadge.wrn delete mode 100644 packages/ui/components/GuideGrid.wrn delete mode 100644 packages/ui/components/GuideStep.wrn delete mode 100644 packages/ui/components/Header.wrn delete mode 100644 packages/ui/components/HeaderActions.wrn delete mode 100644 packages/ui/components/HealthIndicator.wrn delete mode 100644 packages/ui/components/Hero.wrn delete mode 100644 packages/ui/components/HeroActions.wrn delete mode 100644 packages/ui/components/HeroCodePanel.wrn delete mode 100644 packages/ui/components/HeroGradientText.wrn delete mode 100644 packages/ui/components/HeroPrimaryAction.wrn delete mode 100644 packages/ui/components/HeroProductPreview.wrn delete mode 100644 packages/ui/components/HeroSecondaryAction.wrn delete mode 100644 packages/ui/components/HeroTrustText.wrn delete mode 100644 packages/ui/components/HexColorInput.wrn delete mode 100644 packages/ui/components/HiddenField.wrn delete mode 100644 packages/ui/components/HighlightText.wrn delete mode 100644 packages/ui/components/HolidayCalendar.wrn delete mode 100644 packages/ui/components/HostnameInput.wrn delete mode 100644 packages/ui/components/HourPicker.wrn delete mode 100644 packages/ui/components/HslColorInput.wrn delete mode 100644 packages/ui/components/HtmlEditor.wrn delete mode 100644 packages/ui/components/HumanApprovalStep.wrn delete mode 100644 packages/ui/components/Icon.wrn delete mode 100644 packages/ui/components/IconButton.wrn delete mode 100644 packages/ui/components/IconPicker.wrn delete mode 100644 packages/ui/components/IconSelector.wrn delete mode 100644 packages/ui/components/IdentifierInput.wrn delete mode 100644 packages/ui/components/Illustration.wrn create mode 100644 packages/ui/components/Image.wrn delete mode 100644 packages/ui/components/ImageCompressionPreview.wrn delete mode 100644 packages/ui/components/ImageEditor.wrn delete mode 100644 packages/ui/components/ImagePreviewDialog.wrn delete mode 100644 packages/ui/components/ImageSelector.wrn delete mode 100644 packages/ui/components/ImageUpload.wrn delete mode 100644 packages/ui/components/ImportProgress.wrn delete mode 100644 packages/ui/components/IncidentAlert.wrn delete mode 100644 packages/ui/components/IncidentBanner.wrn delete mode 100644 packages/ui/components/IncidentCard.wrn delete mode 100644 packages/ui/components/IncidentList.wrn delete mode 100644 packages/ui/components/IncidentResponseFlow.wrn delete mode 100644 packages/ui/components/IncidentSeverityBadge.wrn delete mode 100644 packages/ui/components/IncidentTimeline.wrn delete mode 100644 packages/ui/components/IndustryBadge.wrn delete mode 100644 packages/ui/components/IndustrySelector.wrn delete mode 100644 packages/ui/components/InfoCard.wrn delete mode 100644 packages/ui/components/Inline.wrn delete mode 100644 packages/ui/components/InlineAlert.wrn delete mode 100644 packages/ui/components/InlineCode.wrn create mode 100644 packages/ui/components/InputNumber.wrn delete mode 100644 packages/ui/components/InsetPanel.wrn delete mode 100644 packages/ui/components/IntegerInput.wrn delete mode 100644 packages/ui/components/IntegrationCard.wrn delete mode 100644 packages/ui/components/InvoiceLineItem.wrn delete mode 100644 packages/ui/components/InvoiceSummary.wrn delete mode 100644 packages/ui/components/IpAddressInput.wrn delete mode 100644 packages/ui/components/JobCard.wrn delete mode 100644 packages/ui/components/JobProgress.wrn delete mode 100644 packages/ui/components/JobTitleInput.wrn delete mode 100644 packages/ui/components/JsonInput.wrn delete mode 100644 packages/ui/components/JsonViewer.wrn create mode 100644 packages/ui/components/Kbd.wrn delete mode 100644 packages/ui/components/KeyValueTable.wrn delete mode 100644 packages/ui/components/KycDocumentUpload.wrn delete mode 100644 packages/ui/components/LanguageSelector.wrn delete mode 100644 packages/ui/components/LanguageSwitcher.wrn delete mode 100644 packages/ui/components/LastNameInput.wrn delete mode 100644 packages/ui/components/LatencyMetric.wrn delete mode 100644 packages/ui/components/LatitudeInput.wrn create mode 100644 packages/ui/components/LayoutSplitter.wrn delete mode 100644 packages/ui/components/LeadText.wrn delete mode 100644 packages/ui/components/LeadershipGrid.wrn delete mode 100644 packages/ui/components/LegalAcceptanceNotice.wrn delete mode 100644 packages/ui/components/LegalBulletList.wrn delete mode 100644 packages/ui/components/LegalContactBlock.wrn delete mode 100644 packages/ui/components/LegalDefinitionList.wrn delete mode 100644 packages/ui/components/LegalDocumentHeader.wrn delete mode 100644 packages/ui/components/LegalDocumentLayout.wrn delete mode 100644 packages/ui/components/LegalHero.wrn delete mode 100644 packages/ui/components/LegalLanguageSelector.wrn delete mode 100644 packages/ui/components/LegalNotice.wrn delete mode 100644 packages/ui/components/LegalPageShell.wrn delete mode 100644 packages/ui/components/LegalPrintButton.wrn delete mode 100644 packages/ui/components/LegalRegionSelector.wrn delete mode 100644 packages/ui/components/LegalSection.wrn delete mode 100644 packages/ui/components/LegalSummary.wrn delete mode 100644 packages/ui/components/LegalTable.wrn delete mode 100644 packages/ui/components/LegalTableOfContents.wrn delete mode 100644 packages/ui/components/LegalVersionBadge.wrn create mode 100644 packages/ui/components/LegendIndicator.wrn delete mode 100644 packages/ui/components/LetterSpacingPicker.wrn delete mode 100644 packages/ui/components/LicenseKeyInput.wrn delete mode 100644 packages/ui/components/Lightbox.wrn delete mode 100644 packages/ui/components/LineChart.wrn delete mode 100644 packages/ui/components/LineHeightPicker.wrn delete mode 100644 packages/ui/components/LinkButton.wrn create mode 100644 packages/ui/components/ListGroup.wrn delete mode 100644 packages/ui/components/LoadingButton.wrn delete mode 100644 packages/ui/components/LocaleSelector.wrn delete mode 100644 packages/ui/components/LocalizedRouteLink.wrn delete mode 100644 packages/ui/components/LocationPicker.wrn delete mode 100644 packages/ui/components/LogTable.wrn delete mode 100644 packages/ui/components/Logo.wrn delete mode 100644 packages/ui/components/LogoCloud.wrn delete mode 100644 packages/ui/components/LogoUpload.wrn delete mode 100644 packages/ui/components/LogoutDialog.wrn delete mode 100644 packages/ui/components/LongitudeInput.wrn delete mode 100644 packages/ui/components/MaintenanceAlert.wrn delete mode 100644 packages/ui/components/MaintenanceBanner.wrn delete mode 100644 packages/ui/components/MaintenanceCard.wrn delete mode 100644 packages/ui/components/MaintenancePage.wrn delete mode 100644 packages/ui/components/MaintenanceState.wrn delete mode 100644 packages/ui/components/MaintenanceWindowPicker.wrn create mode 100644 packages/ui/components/Map.wrn delete mode 100644 packages/ui/components/MapPicker.wrn delete mode 100644 packages/ui/components/MarkdownEditor.wrn delete mode 100644 packages/ui/components/MarketingPageShell.wrn delete mode 100644 packages/ui/components/MarketingSectionHeader.wrn create mode 100644 packages/ui/components/Marquee.wrn delete mode 100644 packages/ui/components/MaskedSecretField.wrn delete mode 100644 packages/ui/components/MemberList.wrn delete mode 100644 packages/ui/components/MentionInput.wrn delete mode 100644 packages/ui/components/MessageCharacterCounter.wrn delete mode 100644 packages/ui/components/MessageComposer.wrn delete mode 100644 packages/ui/components/MessageComposerPreview.wrn delete mode 100644 packages/ui/components/MessageLimitInput.wrn delete mode 100644 packages/ui/components/MessagePreview.wrn delete mode 100644 packages/ui/components/MessageVolumeSlider.wrn delete mode 100644 packages/ui/components/Metric.wrn delete mode 100644 packages/ui/components/MetricCard.wrn delete mode 100644 packages/ui/components/MetricGrid.wrn delete mode 100644 packages/ui/components/MetricText.wrn delete mode 100644 packages/ui/components/MinutePicker.wrn delete mode 100644 packages/ui/components/MissionSection.wrn delete mode 100644 packages/ui/components/MobileDeviceFrame.wrn delete mode 100644 packages/ui/components/MobileInput.wrn delete mode 100644 packages/ui/components/MobileMenuButton.wrn delete mode 100644 packages/ui/components/MobileNavigation.wrn delete mode 100644 packages/ui/components/MobileTableCard.wrn delete mode 100644 packages/ui/components/MonthPicker.wrn delete mode 100644 packages/ui/components/MonthYearPicker.wrn delete mode 100644 packages/ui/components/MonthlyVolumeSelector.wrn delete mode 100644 packages/ui/components/MultiFileUpload.wrn delete mode 100644 packages/ui/components/MultiSelect.wrn delete mode 100644 packages/ui/components/MultipleEmailInput.wrn delete mode 100644 packages/ui/components/MutedText.wrn delete mode 100644 packages/ui/components/NameInput.wrn delete mode 100644 packages/ui/components/NarrowContainer.wrn create mode 100644 packages/ui/components/Nav.wrn create mode 100644 packages/ui/components/Navbar.wrn delete mode 100644 packages/ui/components/Navigation.wrn delete mode 100644 packages/ui/components/NavigationItem.wrn delete mode 100644 packages/ui/components/NavigationMegaMenu.wrn delete mode 100644 packages/ui/components/NewBadge.wrn delete mode 100644 packages/ui/components/NewPasswordInput.wrn delete mode 100644 packages/ui/components/NewsletterCTA.wrn delete mode 100644 packages/ui/components/NewsletterForm.wrn delete mode 100644 packages/ui/components/NoResultsState.wrn delete mode 100644 packages/ui/components/NotFoundPage.wrn delete mode 100644 packages/ui/components/NotFoundState.wrn delete mode 100644 packages/ui/components/NotificationCard.wrn delete mode 100644 packages/ui/components/NotificationDot.wrn delete mode 100644 packages/ui/components/NotificationList.wrn delete mode 100644 packages/ui/components/NumberInput.wrn delete mode 100644 packages/ui/components/OfficeCard.wrn delete mode 100644 packages/ui/components/OfflinePage.wrn delete mode 100644 packages/ui/components/OfflineState.wrn delete mode 100644 packages/ui/components/OnboardingProgress.wrn delete mode 100644 packages/ui/components/OneTimeSecretDisplay.wrn delete mode 100644 packages/ui/components/OnlineIndicator.wrn delete mode 100644 packages/ui/components/OpacitySlider.wrn delete mode 100644 packages/ui/components/OpenAPICTA.wrn delete mode 100644 packages/ui/components/OptionalIndicator.wrn delete mode 100644 packages/ui/components/OrganizationSelector.wrn delete mode 100644 packages/ui/components/OtpInput.wrn delete mode 100644 packages/ui/components/OtpVerificationForm.wrn delete mode 100644 packages/ui/components/OutlinedCard.wrn delete mode 100644 packages/ui/components/PageAlert.wrn delete mode 100644 packages/ui/components/PageHeader.wrn delete mode 100644 packages/ui/components/PageHeading.wrn delete mode 100644 packages/ui/components/PageShell.wrn delete mode 100644 packages/ui/components/PageSkeleton.wrn delete mode 100644 packages/ui/components/Panel.wrn delete mode 100644 packages/ui/components/PartnerApplicationForm.wrn delete mode 100644 packages/ui/components/PartnerLogoGrid.wrn delete mode 100644 packages/ui/components/PartnerProgramCard.wrn delete mode 100644 packages/ui/components/PasskeyButton.wrn delete mode 100644 packages/ui/components/PasswordInput.wrn delete mode 100644 packages/ui/components/PasswordRequirementList.wrn delete mode 100644 packages/ui/components/PasswordStrengthMeter.wrn delete mode 100644 packages/ui/components/PasswordVisibilityToggle.wrn delete mode 100644 packages/ui/components/PathInput.wrn delete mode 100644 packages/ui/components/PaymentMethodCard.wrn delete mode 100644 packages/ui/components/PdfPreview.wrn delete mode 100644 packages/ui/components/PercentageInput.wrn delete mode 100644 packages/ui/components/PermissionSelector.wrn delete mode 100644 packages/ui/components/PhoneInput.wrn delete mode 100644 packages/ui/components/PieChart.wrn delete mode 100644 packages/ui/components/Pill.wrn delete mode 100644 packages/ui/components/PlainTextEditor.wrn delete mode 100644 packages/ui/components/PlanCTA.wrn delete mode 100644 packages/ui/components/PlanFeatureList.wrn delete mode 100644 packages/ui/components/PlanLimitList.wrn delete mode 100644 packages/ui/components/PlanSelector.wrn delete mode 100644 packages/ui/components/PlatformPillarCard.wrn delete mode 100644 packages/ui/components/PolicyVersionTable.wrn delete mode 100644 packages/ui/components/PortInput.wrn delete mode 100644 packages/ui/components/PortNumberInput.wrn delete mode 100644 packages/ui/components/PositiveNumberInput.wrn delete mode 100644 packages/ui/components/PostalCodeInput.wrn delete mode 100644 packages/ui/components/PostmanCTA.wrn delete mode 100644 packages/ui/components/PresetDateRangePicker.wrn delete mode 100644 packages/ui/components/PressReleaseCard.wrn delete mode 100644 packages/ui/components/PreviewBadge.wrn delete mode 100644 packages/ui/components/PreviousNextNavigation.wrn delete mode 100644 packages/ui/components/PriceInput.wrn delete mode 100644 packages/ui/components/PriceRangeSlider.wrn delete mode 100644 packages/ui/components/PriceText.wrn delete mode 100644 packages/ui/components/PricingCard.wrn delete mode 100644 packages/ui/components/PricingComparisonTable.wrn delete mode 100644 packages/ui/components/PricingContactForm.wrn delete mode 100644 packages/ui/components/PricingFeatureGroup.wrn delete mode 100644 packages/ui/components/PricingGrid.wrn delete mode 100644 packages/ui/components/PricingHero.wrn delete mode 100644 packages/ui/components/PricingPlanCard.wrn delete mode 100644 packages/ui/components/PricingTable.wrn delete mode 100644 packages/ui/components/PricingToggle.wrn delete mode 100644 packages/ui/components/PrimaryButton.wrn delete mode 100644 packages/ui/components/PrintAction.wrn delete mode 100644 packages/ui/components/PrintPolicyButton.wrn delete mode 100644 packages/ui/components/PrioritySelector.wrn delete mode 100644 packages/ui/components/PrivacyNotice.wrn delete mode 100644 packages/ui/components/ProductArchitectureDiagram.wrn delete mode 100644 packages/ui/components/ProductCTA.wrn delete mode 100644 packages/ui/components/ProductCard.wrn delete mode 100644 packages/ui/components/ProductCategorySection.wrn delete mode 100644 packages/ui/components/ProductFeatureList.wrn delete mode 100644 packages/ui/components/ProductGrid.wrn delete mode 100644 packages/ui/components/ProductHero.wrn delete mode 100644 packages/ui/components/ProductIcon.wrn delete mode 100644 packages/ui/components/ProductIntegrationList.wrn delete mode 100644 packages/ui/components/ProductList.wrn delete mode 100644 packages/ui/components/ProductLogo.wrn delete mode 100644 packages/ui/components/ProductMegaMenu.wrn delete mode 100644 packages/ui/components/ProductMiniCard.wrn delete mode 100644 packages/ui/components/ProductNavigationCard.wrn delete mode 100644 packages/ui/components/ProductPageShell.wrn delete mode 100644 packages/ui/components/ProductSelector.wrn delete mode 100644 packages/ui/components/ProductStatusBadge.wrn delete mode 100644 packages/ui/components/ProductUseCaseList.wrn delete mode 100644 packages/ui/components/ProductsMegaMenu.wrn delete mode 100644 packages/ui/components/ProgressBar.wrn delete mode 100644 packages/ui/components/ProgressChart.wrn delete mode 100644 packages/ui/components/ProgressRing.wrn delete mode 100644 packages/ui/components/ProgressSlider.wrn delete mode 100644 packages/ui/components/ProjectCard.wrn delete mode 100644 packages/ui/components/ProjectSelector.wrn delete mode 100644 packages/ui/components/ProjectSwitcher.wrn delete mode 100644 packages/ui/components/PromoCodeInput.wrn delete mode 100644 packages/ui/components/PromptDialog.wrn delete mode 100644 packages/ui/components/ProviderSelector.wrn delete mode 100644 packages/ui/components/PublicFooter.wrn delete mode 100644 packages/ui/components/PublicHeader.wrn delete mode 100644 packages/ui/components/PublicHeaderLogo.wrn delete mode 100644 packages/ui/components/PublicMobileNavigation.wrn delete mode 100644 packages/ui/components/PublicPageShell.wrn delete mode 100644 packages/ui/components/PublicSearch.wrn delete mode 100644 packages/ui/components/PublishDateTimePicker.wrn delete mode 100644 packages/ui/components/PushComposer.wrn delete mode 100644 packages/ui/components/PushNotificationEditor.wrn delete mode 100644 packages/ui/components/QrCode.wrn delete mode 100644 packages/ui/components/QuantityInput.wrn delete mode 100644 packages/ui/components/QuantityStepper.wrn delete mode 100644 packages/ui/components/QuietHoursPicker.wrn delete mode 100644 packages/ui/components/QuoteText.wrn delete mode 100644 packages/ui/components/RadioGroup.wrn delete mode 100644 packages/ui/components/RangeInput.wrn delete mode 100644 packages/ui/components/RateLimitInput.wrn delete mode 100644 packages/ui/components/RateLimitPage.wrn delete mode 100644 packages/ui/components/RateLimitedState.wrn delete mode 100644 packages/ui/components/RateTable.wrn create mode 100644 packages/ui/components/Rating.wrn delete mode 100644 packages/ui/components/RatingSlider.wrn delete mode 100644 packages/ui/components/RecipientSelector.wrn delete mode 100644 packages/ui/components/RecoveryCodeForm.wrn delete mode 100644 packages/ui/components/RecoveryCodeInput.wrn delete mode 100644 packages/ui/components/RecurrenceRuleBuilder.wrn delete mode 100644 packages/ui/components/RecurringSchedulePicker.wrn delete mode 100644 packages/ui/components/RedirectUriInput.wrn delete mode 100644 packages/ui/components/ReferenceInput.wrn delete mode 100644 packages/ui/components/RegexInput.wrn delete mode 100644 packages/ui/components/RegionAvailabilityTable.wrn delete mode 100644 packages/ui/components/RegionSelector.wrn delete mode 100644 packages/ui/components/RegionUnavailableAlert.wrn delete mode 100644 packages/ui/components/RegionUnavailableState.wrn delete mode 100644 packages/ui/components/RegionalPrivacyBanner.wrn delete mode 100644 packages/ui/components/RejectOptionalCookiesButton.wrn delete mode 100644 packages/ui/components/ReopenCookieSettingsButton.wrn delete mode 100644 packages/ui/components/ReportCard.wrn delete mode 100644 packages/ui/components/RequestResponseViewer.wrn delete mode 100644 packages/ui/components/RequestViewer.wrn delete mode 100644 packages/ui/components/RequiredIndicator.wrn delete mode 100644 packages/ui/components/ResetPasswordForm.wrn delete mode 100644 packages/ui/components/ResizablePanel.wrn delete mode 100644 packages/ui/components/ResourceCard.wrn delete mode 100644 packages/ui/components/ResourceDownloadCard.wrn delete mode 100644 packages/ui/components/ResourcePageShell.wrn delete mode 100644 packages/ui/components/ResourceSearch.wrn delete mode 100644 packages/ui/components/ResourceTypeBadge.wrn delete mode 100644 packages/ui/components/ResourcesMegaMenu.wrn delete mode 100644 packages/ui/components/ResponseViewer.wrn delete mode 100644 packages/ui/components/ResponsibleDisclosureCTA.wrn delete mode 100644 packages/ui/components/ResponsiveTable.wrn delete mode 100644 packages/ui/components/ResultsSection.wrn delete mode 100644 packages/ui/components/RetentionTable.wrn delete mode 100644 packages/ui/components/RetryCountInput.wrn delete mode 100644 packages/ui/components/RevenueChart.wrn delete mode 100644 packages/ui/components/RgbColorInput.wrn delete mode 100644 packages/ui/components/RichTextEditor.wrn delete mode 100644 packages/ui/components/RichTextInput.wrn delete mode 100644 packages/ui/components/RoleSelector.wrn delete mode 100644 packages/ui/components/RollingDateRangePicker.wrn delete mode 100644 packages/ui/components/SDKCard.wrn delete mode 100644 packages/ui/components/SDKLanguageTabs.wrn delete mode 100644 packages/ui/components/SDKTabs.wrn delete mode 100644 packages/ui/components/SaveCookiePreferencesButton.wrn delete mode 100644 packages/ui/components/SavedFilterSelector.wrn delete mode 100644 packages/ui/components/ScheduleMessagePicker.wrn delete mode 100644 packages/ui/components/SchedulePicker.wrn delete mode 100644 packages/ui/components/ScheduledDateTimePicker.wrn delete mode 100644 packages/ui/components/ScreenshotFrame.wrn delete mode 100644 packages/ui/components/ScrollArea.wrn create mode 100644 packages/ui/components/Scrollspy.wrn delete mode 100644 packages/ui/components/SdkLanguageSelector.wrn create mode 100644 packages/ui/components/SearchBox.wrn delete mode 100644 packages/ui/components/SearchButton.wrn delete mode 100644 packages/ui/components/SearchCategoryTabs.wrn delete mode 100644 packages/ui/components/SearchDialog.wrn delete mode 100644 packages/ui/components/SearchEmptyState.wrn delete mode 100644 packages/ui/components/SearchInput.wrn delete mode 100644 packages/ui/components/SearchLoadingState.wrn delete mode 100644 packages/ui/components/SearchResultItem.wrn delete mode 100644 packages/ui/components/SecondPicker.wrn delete mode 100644 packages/ui/components/SecondaryButton.wrn delete mode 100644 packages/ui/components/SecretDisplay.wrn delete mode 100644 packages/ui/components/SecretInput.wrn delete mode 100644 packages/ui/components/SecretRevealDialog.wrn delete mode 100644 packages/ui/components/Section.wrn delete mode 100644 packages/ui/components/SectionActions.wrn delete mode 100644 packages/ui/components/SectionHeader.wrn delete mode 100644 packages/ui/components/SectionHeading.wrn delete mode 100644 packages/ui/components/SecurityAlert.wrn delete mode 100644 packages/ui/components/SecurityContactCard.wrn delete mode 100644 packages/ui/components/SecurityFeatureCard.wrn delete mode 100644 packages/ui/components/SecurityHero.wrn delete mode 100644 packages/ui/components/SecurityPillarGrid.wrn delete mode 100644 packages/ui/components/SecurityPracticeList.wrn delete mode 100644 packages/ui/components/SecurityReportForm.wrn delete mode 100644 packages/ui/components/SegmentedButtonGroup.wrn delete mode 100644 packages/ui/components/SenderIdInput.wrn delete mode 100644 packages/ui/components/ServerErrorPage.wrn delete mode 100644 packages/ui/components/ServiceLevelTable.wrn delete mode 100644 packages/ui/components/ServiceStatusBadge.wrn delete mode 100644 packages/ui/components/ServiceStatusList.wrn delete mode 100644 packages/ui/components/ServiceStatusRow.wrn delete mode 100644 packages/ui/components/SessionCard.wrn delete mode 100644 packages/ui/components/SessionExpiredDialog.wrn delete mode 100644 packages/ui/components/SetupChecklist.wrn delete mode 100644 packages/ui/components/SeveritySelector.wrn delete mode 100644 packages/ui/components/ShadowPicker.wrn delete mode 100644 packages/ui/components/ShareAction.wrn delete mode 100644 packages/ui/components/ShareButton.wrn delete mode 100644 packages/ui/components/SidePanel.wrn create mode 100644 packages/ui/components/Sidebar.wrn delete mode 100644 packages/ui/components/SidebarLayout.wrn delete mode 100644 packages/ui/components/SignInForm.wrn delete mode 100644 packages/ui/components/SignInLink.wrn delete mode 100644 packages/ui/components/SignUpForm.wrn delete mode 100644 packages/ui/components/SiteSearch.wrn delete mode 100644 packages/ui/components/SkipLink.wrn delete mode 100644 packages/ui/components/SlaTable.wrn delete mode 100644 packages/ui/components/Slider.wrn delete mode 100644 packages/ui/components/SlugInput.wrn delete mode 100644 packages/ui/components/SmallText.wrn delete mode 100644 packages/ui/components/SmartRouteDiagram.wrn delete mode 100644 packages/ui/components/SmsComposer.wrn delete mode 100644 packages/ui/components/SmsMessageEditor.wrn delete mode 100644 packages/ui/components/SmsSegmentCounter.wrn delete mode 100644 packages/ui/components/SocialShare.wrn delete mode 100644 packages/ui/components/SolutionHero.wrn delete mode 100644 packages/ui/components/SolutionPageShell.wrn delete mode 100644 packages/ui/components/SolutionSection.wrn delete mode 100644 packages/ui/components/SolutionsMegaMenu.wrn delete mode 100644 packages/ui/components/SortableTable.wrn delete mode 100644 packages/ui/components/SplitButton.wrn delete mode 100644 packages/ui/components/SplitCTA.wrn delete mode 100644 packages/ui/components/SplitHero.wrn delete mode 100644 packages/ui/components/SplitLayout.wrn delete mode 100644 packages/ui/components/SplitSectionHeader.wrn delete mode 100644 packages/ui/components/StartFreeButton.wrn delete mode 100644 packages/ui/components/StatCard.wrn delete mode 100644 packages/ui/components/StateSelector.wrn delete mode 100644 packages/ui/components/StatusBadge.wrn delete mode 100644 packages/ui/components/StatusBanner.wrn delete mode 100644 packages/ui/components/StatusPageShell.wrn delete mode 100644 packages/ui/components/StatusSelector.wrn delete mode 100644 packages/ui/components/StatusSubscribeForm.wrn delete mode 100644 packages/ui/components/StatusTable.wrn delete mode 100644 packages/ui/components/StepNavigation.wrn delete mode 100644 packages/ui/components/StepUpAuthenticationDialog.wrn delete mode 100644 packages/ui/components/StepperInput.wrn delete mode 100644 packages/ui/components/StickerPicker.wrn delete mode 100644 packages/ui/components/Sticky.wrn delete mode 100644 packages/ui/components/StickyLayout.wrn delete mode 100644 packages/ui/components/StreetAddressInput.wrn create mode 100644 packages/ui/components/StrongPassword.wrn create mode 100644 packages/ui/components/StyledIcon.wrn delete mode 100644 packages/ui/components/SubdomainInput.wrn delete mode 100644 packages/ui/components/SubjectInput.wrn delete mode 100644 packages/ui/components/SubprocessorTable.wrn delete mode 100644 packages/ui/components/SubsectionHeading.wrn delete mode 100644 packages/ui/components/SuccessCard.wrn delete mode 100644 packages/ui/components/SuccessState.wrn delete mode 100644 packages/ui/components/SupportRequestForm.wrn delete mode 100644 packages/ui/components/Surface.wrn delete mode 100644 packages/ui/components/TableHeader.wrn delete mode 100644 packages/ui/components/TableRow.wrn delete mode 100644 packages/ui/components/TableSkeleton.wrn delete mode 100644 packages/ui/components/TagInput.wrn delete mode 100644 packages/ui/components/TaxNotice.wrn delete mode 100644 packages/ui/components/TaxRateInput.wrn delete mode 100644 packages/ui/components/TeamMemberCard.wrn delete mode 100644 packages/ui/components/TeamSizeSelector.wrn delete mode 100644 packages/ui/components/TemplateCard.wrn delete mode 100644 packages/ui/components/TemplateSelector.wrn delete mode 100644 packages/ui/components/TemplateVariableInput.wrn delete mode 100644 packages/ui/components/TenantIsolationDiagram.wrn delete mode 100644 packages/ui/components/TerminalBlock.wrn delete mode 100644 packages/ui/components/TertiaryButton.wrn delete mode 100644 packages/ui/components/TestMessageDialog.wrn delete mode 100644 packages/ui/components/TestimonialCard.wrn delete mode 100644 packages/ui/components/TestimonialCarousel.wrn delete mode 100644 packages/ui/components/TextInput.wrn delete mode 100644 packages/ui/components/TextLink.wrn delete mode 100644 packages/ui/components/TextSkeleton.wrn delete mode 100644 packages/ui/components/ThemeColorPicker.wrn delete mode 100644 packages/ui/components/ThemeSwitcher.wrn delete mode 100644 packages/ui/components/TimeInput.wrn delete mode 100644 packages/ui/components/TimeRangePicker.wrn delete mode 100644 packages/ui/components/TimelineChart.wrn delete mode 100644 packages/ui/components/TimelineItem.wrn delete mode 100644 packages/ui/components/TimeoutInput.wrn delete mode 100644 packages/ui/components/TimezoneAwareTimePicker.wrn delete mode 100644 packages/ui/components/TimezoneSelector.wrn delete mode 100644 packages/ui/components/ToastAction.wrn delete mode 100644 packages/ui/components/ToastHost.wrn delete mode 100644 packages/ui/components/ToastIcon.wrn create mode 100644 packages/ui/components/ToastNotifications.wrn delete mode 100644 packages/ui/components/ToastProgress.wrn delete mode 100644 packages/ui/components/Toggle.wrn create mode 100644 packages/ui/components/ToggleCount.wrn delete mode 100644 packages/ui/components/ToggleGroup.wrn create mode 100644 packages/ui/components/TogglePassword.wrn delete mode 100644 packages/ui/components/TokenInput.wrn delete mode 100644 packages/ui/components/TotpVerificationForm.wrn delete mode 100644 packages/ui/components/TranslatedText.wrn delete mode 100644 packages/ui/components/TreeTable.wrn create mode 100644 packages/ui/components/TreeView.wrn delete mode 100644 packages/ui/components/TrendIndicator.wrn delete mode 100644 packages/ui/components/TruncatedText.wrn delete mode 100644 packages/ui/components/TrustBadgeList.wrn delete mode 100644 packages/ui/components/UnavailableRegionState.wrn delete mode 100644 packages/ui/components/UnifiedTimelinePreview.wrn delete mode 100644 packages/ui/components/UnsavedChangesDialog.wrn delete mode 100644 packages/ui/components/UploadItem.wrn delete mode 100644 packages/ui/components/UploadPreview.wrn delete mode 100644 packages/ui/components/UploadProgress.wrn delete mode 100644 packages/ui/components/UptimeChart.wrn delete mode 100644 packages/ui/components/UptimeMetric.wrn delete mode 100644 packages/ui/components/UrlInput.wrn delete mode 100644 packages/ui/components/UsagePricingTable.wrn delete mode 100644 packages/ui/components/UseCaseSelector.wrn delete mode 100644 packages/ui/components/UserCard.wrn delete mode 100644 packages/ui/components/UsernameInput.wrn delete mode 100644 packages/ui/components/ValueCard.wrn delete mode 100644 packages/ui/components/ValuesGrid.wrn delete mode 100644 packages/ui/components/VerificationCodeInput.wrn delete mode 100644 packages/ui/components/VerifiedBadge.wrn delete mode 100644 packages/ui/components/VersionSelector.wrn delete mode 100644 packages/ui/components/VerticalTabs.wrn delete mode 100644 packages/ui/components/VideoCard.wrn delete mode 100644 packages/ui/components/VideoPreviewDialog.wrn delete mode 100644 packages/ui/components/VideoUpload.wrn delete mode 100644 packages/ui/components/VirtualizedTable.wrn delete mode 100644 packages/ui/components/VisionSection.wrn delete mode 100644 packages/ui/components/VisuallyHidden.wrn delete mode 100644 packages/ui/components/VoiceScriptComposer.wrn delete mode 100644 packages/ui/components/VoiceScriptEditor.wrn delete mode 100644 packages/ui/components/VolumeInput.wrn delete mode 100644 packages/ui/components/VolumeSlider.wrn delete mode 100644 packages/ui/components/WarningCard.wrn delete mode 100644 packages/ui/components/WebhookEventCard.wrn delete mode 100644 packages/ui/components/WebhookFlowDiagram.wrn delete mode 100644 packages/ui/components/WebhookPayloadViewer.wrn delete mode 100644 packages/ui/components/WebhookUrlInput.wrn delete mode 100644 packages/ui/components/WebinarCard.wrn delete mode 100644 packages/ui/components/WebinarRegistrationForm.wrn delete mode 100644 packages/ui/components/Well.wrn delete mode 100644 packages/ui/components/WhatsAppComposer.wrn delete mode 100644 packages/ui/components/WhatsAppNumberInput.wrn delete mode 100644 packages/ui/components/WhatsAppTemplateEditor.wrn delete mode 100644 packages/ui/components/WideContainer.wrn delete mode 100644 packages/ui/components/Wizard.wrn delete mode 100644 packages/ui/components/WizardHeader.wrn delete mode 100644 packages/ui/components/WizardNavigation.wrn delete mode 100644 packages/ui/components/WorkflowCanvasPreview.wrn delete mode 100644 packages/ui/components/WorkflowProgress.wrn delete mode 100644 packages/ui/components/WorkspaceCard.wrn delete mode 100644 packages/ui/components/WorkspaceSelector.wrn delete mode 100644 packages/ui/components/WorkspaceSwitcher.wrn create mode 100644 packages/ui/components/WysiwygEditor.wrn delete mode 100644 packages/ui/components/YearPicker.wrn delete mode 100644 packages/ui/components/ZoomSlider.wrn delete mode 100644 packages/ui/components/disclosure.wrn delete mode 100644 packages/ui/components/file-upload.wrn delete mode 100644 packages/ui/components/hstack.wrn delete mode 100644 packages/ui/components/spacer.wrn delete mode 100644 packages/ui/components/stack.wrn delete mode 100644 packages/ui/components/tag.wrn delete mode 100644 packages/ui/components/theme-toggle.wrn create mode 100644 scripts/reset-ui-components.mjs diff --git a/.publish/ai/package.json b/.publish/ai/package.json index 23b12d45..fda30891 100644 --- a/.publish/ai/package.json +++ b/.publish/ai/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ai", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.", "license": "MIT", diff --git a/.publish/authz/package.json b/.publish/authz/package.json index 1d310f86..6f7d0d22 100644 --- a/.publish/authz/package.json +++ b/.publish/authz/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/authz", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/authz — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/cli/package.json b/.publish/cli/package.json index acf6e052..9fe7b399 100644 --- a/.publish/cli/package.json +++ b/.publish/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/cli", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/cli — part of the WrNexus framework.", "license": "MIT", @@ -28,18 +28,18 @@ "wrnexus": "./dist/index.js" }, "dependencies": { - "@wrnexus/core": "^0.3.4", - "@wrnexus/router": "^0.3.4", - "@wrnexus/csr": "^0.3.4", - "@wrnexus/compiler": "^0.3.4", - "@wrnexus/styles": "^0.3.4", - "@wrnexus/dev-server": "^0.3.4", - "@wrnexus/ui": "^0.3.4", - "@wrnexus/validation": "^0.3.4", - "@wrnexus/i18n": "^0.3.4", - "@wrnexus/db": "^0.3.4", - "@wrnexus/plugin": "^0.3.4", - "@wrnexus/syntax": "^0.3.4" + "@wrnexus/core": "^0.3.5", + "@wrnexus/router": "^0.3.5", + "@wrnexus/csr": "^0.3.5", + "@wrnexus/compiler": "^0.3.5", + "@wrnexus/styles": "^0.3.5", + "@wrnexus/dev-server": "^0.3.5", + "@wrnexus/ui": "^0.3.5", + "@wrnexus/validation": "^0.3.5", + "@wrnexus/i18n": "^0.3.5", + "@wrnexus/db": "^0.3.5", + "@wrnexus/plugin": "^0.3.5", + "@wrnexus/syntax": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/compiler/README.md b/.publish/compiler/README.md index e41d34de..141d0023 100644 --- a/.publish/compiler/README.md +++ b/.publish/compiler/README.md @@ -163,6 +163,7 @@ A file opens with `page ` or `component ` followed by a `{ ... }` bo - `layout = ""` — selects `app/layouts/.wrn` (pages only). - `types { }` — reusable interfaces and aliases for the current file. - `props { name: Type = ... }` — typed component props. Omit `= ` to make a prop required. Legacy inferred props remain supported. +- `@event name = function` inside `props` — declares a public component event. Emit it from component behavior with `name(detail)` or `$emit("name", detail)`, and consume it with ``. - `state : Type = ` — typed reactive state seeded from a raw JS expression. The annotation is optional for backward compatibility. - `view { }` — plain HTML with `{expr}` interpolation in text and attributes, hyphenated attributes, boolean attributes, `@event="..."` client bindings, and ``. Attribute expressions that reference `state` keep an SSR value and update reactively in the browser. - `seo { key = "value" ... }` — metadata merged into the generated `meta`. diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json index ab9bc2f4..32464afa 100644 --- a/.publish/compiler/package.json +++ b/.publish/compiler/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/compiler", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/compiler — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/syntax": "^0.3.4" + "@wrnexus/syntax": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/core/package.json b/.publish/core/package.json index e6a72f84..bfd0070a 100644 --- a/.publish/core/package.json +++ b/.publish/core/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/core", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/core — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/csr/package.json b/.publish/csr/package.json index 1daeafb7..f3e23f1e 100644 --- a/.publish/csr/package.json +++ b/.publish/csr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/csr", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/csr — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.3.4" + "@wrnexus/core": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/db/package.json b/.publish/db/package.json index 084c0939..84113ed0 100644 --- a/.publish/db/package.json +++ b/.publish/db/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/db", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/db — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/dev-server/package.json b/.publish/dev-server/package.json index 7c45b3d7..8e2d259e 100644 --- a/.publish/dev-server/package.json +++ b/.publish/dev-server/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-server", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/dev-server — part of the WrNexus framework.", "license": "MIT", @@ -25,20 +25,20 @@ } }, "dependencies": { - "@wrnexus/core": "^0.3.4", - "@wrnexus/dev-toolbar": "^0.3.4", - "@wrnexus/router": "^0.3.4", - "@wrnexus/ssr": "^0.3.4", - "@wrnexus/csr": "^0.3.4", - "@wrnexus/compiler": "^0.3.4", - "@wrnexus/styles": "^0.3.4", - "@wrnexus/ui": "^0.3.4", - "@wrnexus/validation": "^0.3.4", - "@wrnexus/i18n": "^0.3.4", - "@wrnexus/db": "^0.3.4", - "@wrnexus/pubsub": "^0.3.4", - "@wrnexus/uploader": "^0.3.4", - "@wrnexus/plugin": "^0.3.4" + "@wrnexus/core": "^0.3.5", + "@wrnexus/dev-toolbar": "^0.3.5", + "@wrnexus/router": "^0.3.5", + "@wrnexus/ssr": "^0.3.5", + "@wrnexus/csr": "^0.3.5", + "@wrnexus/compiler": "^0.3.5", + "@wrnexus/styles": "^0.3.5", + "@wrnexus/ui": "^0.3.5", + "@wrnexus/validation": "^0.3.5", + "@wrnexus/i18n": "^0.3.5", + "@wrnexus/db": "^0.3.5", + "@wrnexus/pubsub": "^0.3.5", + "@wrnexus/uploader": "^0.3.5", + "@wrnexus/plugin": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/dev-toolbar/package.json b/.publish/dev-toolbar/package.json index 7f97d34a..cd9e3d94 100644 --- a/.publish/dev-toolbar/package.json +++ b/.publish/dev-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-toolbar", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/dev-toolbar — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json index 4a533091..6036f715 100644 --- a/.publish/encryption/package.json +++ b/.publish/encryption/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/encryption", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/encryption — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/helpers/package.json b/.publish/helpers/package.json index 4a9e465a..1aa6022a 100644 --- a/.publish/helpers/package.json +++ b/.publish/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/helpers", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "Safe convenience helpers for WrNexus request contexts and common application flows.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.3.4" + "@wrnexus/core": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json index 3ec12835..3b644401 100644 --- a/.publish/i18n/package.json +++ b/.publish/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/i18n", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/i18n — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.3.4" + "@wrnexus/core": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json index 0aaba8bb..3d85e14d 100644 --- a/.publish/jwt/package.json +++ b/.publish/jwt/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/jwt", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/jwt — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/mobile/package.json b/.publish/mobile/package.json index 1d5fcc09..4943a41d 100644 --- a/.publish/mobile/package.json +++ b/.publish/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/mobile", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/mobile — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/native": "^0.3.4" + "@wrnexus/native": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/native/package.json b/.publish/native/package.json index 7df3d4bb..25394cef 100644 --- a/.publish/native/package.json +++ b/.publish/native/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/native", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/native — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/oauth/package.json b/.publish/oauth/package.json index d8be3c3b..24777d6b 100644 --- a/.publish/oauth/package.json +++ b/.publish/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/oauth", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/oauth — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/plugin/package.json b/.publish/plugin/package.json index f6b98d88..bc4be801 100644 --- a/.publish/plugin/package.json +++ b/.publish/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/plugin", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/plugin — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/syntax": "^0.3.4" + "@wrnexus/syntax": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json index 7bd89f23..5017c7ae 100644 --- a/.publish/pubsub/package.json +++ b/.publish/pubsub/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/pubsub", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/pubsub — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/queue/package.json b/.publish/queue/package.json index 8c5ba981..4540d515 100644 --- a/.publish/queue/package.json +++ b/.publish/queue/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/queue", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/queue — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/reactive/package.json b/.publish/reactive/package.json index ba22581c..015fd5c0 100644 --- a/.publish/reactive/package.json +++ b/.publish/reactive/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/reactive", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/reactive — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/router/package.json b/.publish/router/package.json index ea9ed237..4b4d5260 100644 --- a/.publish/router/package.json +++ b/.publish/router/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/router", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/router — part of the WrNexus framework.", "license": "MIT", @@ -21,8 +21,8 @@ } }, "dependencies": { - "@wrnexus/compiler": "^0.3.4", - "@wrnexus/core": "^0.3.4" + "@wrnexus/compiler": "^0.3.5", + "@wrnexus/core": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json index bcbc663c..01a31e5e 100644 --- a/.publish/ssr/package.json +++ b/.publish/ssr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ssr", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/ssr — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.3.4" + "@wrnexus/core": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/styles/package.json b/.publish/styles/package.json index f50a3856..401537a2 100644 --- a/.publish/styles/package.json +++ b/.publish/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/styles", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/styles — part of the WrNexus framework.", "license": "MIT", @@ -21,9 +21,9 @@ } }, "dependencies": { - "@wrnexus/uploader": "^0.3.4", - "@wrnexus/core": "^0.3.4", - "@wrnexus/plugin": "^0.3.4" + "@wrnexus/uploader": "^0.3.5", + "@wrnexus/core": "^0.3.5", + "@wrnexus/plugin": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/syntax/package.json b/.publish/syntax/package.json index cca20f91..cb50e35b 100644 --- a/.publish/syntax/package.json +++ b/.publish/syntax/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/syntax", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/syntax — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/test/package.json b/.publish/test/package.json index 967d74bf..108da83e 100644 --- a/.publish/test/package.json +++ b/.publish/test/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/test", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/test — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/tracking/package.json b/.publish/tracking/package.json index eee41a03..1d543ce2 100644 --- a/.publish/tracking/package.json +++ b/.publish/tracking/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/tracking", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/tracking — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/ui/COMPONENTS.md b/.publish/ui/COMPONENTS.md index 3b2817cd..c45638be 100644 --- a/.publish/ui/COMPONENTS.md +++ b/.publish/ui/COMPONENTS.md @@ -1,8139 +1,784 @@ # WRNexus UI component reference -This reference is generated from the 902 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. +This reference is generated from the 85 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. -## Actions +## Advanced-forms -### AcceptAllCookiesButton +### AdvancedSelect -Reusable accept all cookies button component. +Theme-aware, responsive advanced select component. -- Mount: `data-component="AcceptAllCookiesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleNewsletterCTA - -Reusable article newsletter c t a component. - -- Mount: `data-component="ArticleNewsletterCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleShareActions - -Reusable article share actions component. - -- Mount: `data-component="ArticleShareActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### BackButton - -Reusable back button component. - -- Mount: `data-component="BackButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### Button - -Reusable button component. - -- Mount: `data-component="Button"` -- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `fullWidth: boolean = false`, `className: string = ""` -- Slots: `default` -- Events: None - -### CenteredCTA - -Reusable centered c t a component. - -- Mount: `data-component="CenteredCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ClearFiltersButton - -Reusable clear filters button component. - -- Mount: `data-component="ClearFiltersButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CloseButton - -Reusable close button component. - -- Mount: `data-component="CloseButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeCopyButton - -Reusable code copy button component. - -- Mount: `data-component="CodeCopyButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactCTA - -Reusable contact c t a component. - -- Mount: `data-component="ContactCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactSalesButton - -Reusable contact sales button component. - -- Mount: `data-component="ContactSalesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CopyButton - -Reusable copy button component. - -- Mount: `data-component="CopyButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CopyCodeButton - -Reusable copy code button component. - -- Mount: `data-component="CopyCodeButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DangerButton - -Reusable danger button component. - -- Mount: `data-component="DangerButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeveloperCTA - -Reusable developer c t a component. - -- Mount: `data-component="DeveloperCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DoNotSellLink - -Reusable do not sell link component. - -- Mount: `data-component="DoNotSellLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadAction - -Reusable download action component. - -- Mount: `data-component="DownloadAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadButton - -Reusable download button component. - -- Mount: `data-component="DownloadButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadPolicyButton - -Reusable download policy button component. - -- Mount: `data-component="DownloadPolicyButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnterpriseCTA - -Reusable enterprise c t a component. - -- Mount: `data-component="EnterpriseCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorActions - -Reusable error actions component. - -- Mount: `data-component="ErrorActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorSupportLink - -Reusable error support link component. - -- Mount: `data-component="ErrorSupportLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExternalLink - -Reusable external link component. - -- Mount: `data-component="ExternalLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FieldActions - -Reusable field actions component. - -- Mount: `data-component="FieldActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FinalCTA - -Reusable final c t a component. - -- Mount: `data-component="FinalCTA"` -- Props: `label: string = "Get started"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormActions - -Reusable form actions component. - -- Mount: `data-component="FormActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### GhostButton - -Reusable ghost button component. - -- Mount: `data-component="GhostButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### GradientCTA - -Reusable gradient c t a component. - -- Mount: `data-component="GradientCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeaderActions - -Reusable header actions component. - -- Mount: `data-component="HeaderActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroActions - -Reusable hero actions component. - -- Mount: `data-component="HeroActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroPrimaryAction - -Reusable hero primary action component. - -- Mount: `data-component="HeroPrimaryAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroSecondaryAction - -Reusable hero secondary action component. - -- Mount: `data-component="HeroSecondaryAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### IconButton - -Reusable icon button component. - -- Mount: `data-component="IconButton"` -- Props: `class: string = ""`, `label: string = "Action"`, `icon: string = "•"`, `variant: string = "ghost"`, `disabled: boolean = false` -- Slots: None -- Events: None - -### LegalPrintButton - -Reusable legal print button component. - -- Mount: `data-component="LegalPrintButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LinkButton - -Reusable link button component. - -- Mount: `data-component="LinkButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LoadingButton - -Reusable loading button component. - -- Mount: `data-component="LoadingButton"` -- Props: `label: string = "Continue"`, `loadingLabel: string = "Loading…"`, `loading: boolean = false`, `disabled: boolean = false`, `type: string = "button"`, `variant: string = "primary"`, `class: string = ""` -- Slots: None -- Events: None - -### LocalizedRouteLink - -Reusable localized route link component. - -- Mount: `data-component="LocalizedRouteLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileMenuButton - -Reusable mobile menu button component. - -- Mount: `data-component="MobileMenuButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewsletterCTA - -Reusable newsletter c t a component. - -- Mount: `data-component="NewsletterCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### OpenAPICTA - -Reusable open a p i c t a component. - -- Mount: `data-component="OpenAPICTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PasskeyButton - -Reusable passkey button component. - -- Mount: `data-component="PasskeyButton"` -- Props: `label: string = "Continue with a passkey"`, `description: string = "Use fingerprint, face recognition, or device PIN"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### PlanCTA - -Reusable plan c t a component. - -- Mount: `data-component="PlanCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PostmanCTA - -Reusable postman c t a component. - -- Mount: `data-component="PostmanCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrimaryButton - -Reusable primary button component. - -- Mount: `data-component="PrimaryButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrintAction - -Reusable print action component. - -- Mount: `data-component="PrintAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrintPolicyButton - -Reusable print policy button component. - -- Mount: `data-component="PrintPolicyButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductCTA - -Reusable product c t a component. - -- Mount: `data-component="ProductCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### RejectOptionalCookiesButton - -Reusable reject optional cookies button component. - -- Mount: `data-component="RejectOptionalCookiesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ReopenCookieSettingsButton - -Reusable reopen cookie settings button component. - -- Mount: `data-component="ReopenCookieSettingsButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResponsibleDisclosureCTA - -Reusable responsible disclosure c t a component. - -- Mount: `data-component="ResponsibleDisclosureCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SaveCookiePreferencesButton - -Reusable save cookie preferences button component. - -- Mount: `data-component="SaveCookiePreferencesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchButton - -Reusable search button component. - -- Mount: `data-component="SearchButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecondaryButton - -Reusable secondary button component. - -- Mount: `data-component="SecondaryButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SectionActions - -Reusable section actions component. - -- Mount: `data-component="SectionActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ShareAction - -Reusable share action component. - -- Mount: `data-component="ShareAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ShareButton - -Reusable share button component. - -- Mount: `data-component="ShareButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SignInLink - -Reusable sign in link component. - -- Mount: `data-component="SignInLink"` -- Props: `label: string = "Sign in with password"`, `description: string = "Use your username or email and password"`, `href: string = ""`, `type: string = "button"`, `variant: string = "secondary"`, `disabled: boolean = false`, `icon: string = "icon-[lucide--lock-keyhole]"`, `tone: string = "password"`, `class: string = ""` -- Slots: None -- Events: None - -### SkipLink - -Reusable skip link component. - -- Mount: `data-component="SkipLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitButton - -Reusable split button component. - -- Mount: `data-component="SplitButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitCTA - -Reusable split c t a component. - -- Mount: `data-component="SplitCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### StartFreeButton - -Reusable start free button component. - -- Mount: `data-component="StartFreeButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### TertiaryButton - -Reusable tertiary button component. - -- Mount: `data-component="TertiaryButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### TextLink - -Reusable text link component. - -- Mount: `data-component="TextLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ToastAction - -Reusable toast action component. - -- Mount: `data-component="ToastAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -## Content - -### AccessibleAccordion - -Reusable accessible accordion component. - -- Mount: `data-component="AccessibleAccordion"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleCarousel - -Reusable accessible carousel component. - -- Mount: `data-component="AccessibleCarousel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleChartSummary - -Reusable accessible chart summary component. - -- Mount: `data-component="AccessibleChartSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleErrorSummary - -Reusable accessible error summary component. - -- Mount: `data-component="AccessibleErrorSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleIcon - -Reusable accessible icon component. - -- Mount: `data-component="AccessibleIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleTabs - -Reusable accessible tabs component. - -- Mount: `data-component="AccessibleTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleTooltip - -Reusable accessible tooltip component. - -- Mount: `data-component="AccessibleTooltip"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Accordion - -Reusable accordion component. - -- Mount: `data-component="Accordion"` -- Props: `class: string = ""`, `title: string = "Question"`, `open: boolean = false` -- Slots: `default` -- Events: `click` - -### AddOnCard - -Reusable add on card component. - -- Mount: `data-component="AddOnCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AddressPreview - -Reusable address preview component. - -- Mount: `data-component="AddressPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AdvancedFilterBuilder - -Reusable advanced filter builder component. - -- Mount: `data-component="AdvancedFilterBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AnalyticsDashboardPreview - -Reusable analytics dashboard preview component. - -- Mount: `data-component="AnalyticsDashboardPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiEndpointCard - -Reusable api endpoint card component. - -- Mount: `data-component="ApiEndpointCard"` -- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "View endpoint"` -- Slots: `default` -- Events: None - -### ApiErrorExample - -Reusable api error example component. - -- Mount: `data-component="ApiErrorExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiKeyDisplay - -Reusable api key display component. - -- Mount: `data-component="ApiKeyDisplay"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiRequestExample - -Reusable api request example component. - -- Mount: `data-component="ApiRequestExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiResponseExample - -Reusable api response example component. - -- Mount: `data-component="ApiResponseExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiSchemaViewer - -Reusable api schema viewer component. - -- Mount: `data-component="ApiSchemaViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AssetCard - -Reusable asset card component. - -- Mount: `data-component="AssetCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AttachmentUpload - -Reusable attachment upload component. - -- Mount: `data-component="AttachmentUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AudioUpload - -Reusable audio upload component. - -- Mount: `data-component="AudioUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuditLogPreview - -Reusable audit log preview component. - -- Mount: `data-component="AuditLogPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthorAvatar - -Reusable author avatar component. - -- Mount: `data-component="AuthorAvatar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthorCard - -Reusable author card component. - -- Mount: `data-component="AuthorCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthorizedApplicationCard - -Reusable authorized application card component. - -- Mount: `data-component="AuthorizedApplicationCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AutomationExampleCard - -Reusable automation example card component. - -- Mount: `data-component="AutomationExampleCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AvailabilityCalendar - -Reusable availability calendar component. - -- Mount: `data-component="AvailabilityCalendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Avatar - -Reusable avatar component. - -- Mount: `data-component="Avatar"` -- Props: `class: string = ""`, `src: string = ""`, `alt: string = ""`, `initials: string = "WR"`, `size: string = "md"` -- Slots: None -- Events: None - -### AvatarUpload - -Reusable avatar upload component. - -- Mount: `data-component="AvatarUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BankTransferDetails - -Reusable bank transfer details component. - -- Mount: `data-component="BankTransferDetails"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BillingAddressForm - -Reusable billing address form component. - -- Mount: `data-component="BillingAddressForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BillingExample - -Reusable billing example component. - -- Mount: `data-component="BillingExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlogCard - -Reusable blog card component. - -- Mount: `data-component="BlogCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlogSearch - -Reusable blog search component. - -- Mount: `data-component="BlogSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BodyText - -Reusable body text component. - -- Mount: `data-component="BodyText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### BudgetRangeSlider - -Reusable budget range slider component. - -- Mount: `data-component="BudgetRangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Calendar - -Reusable calendar component. - -- Mount: `data-component="Calendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CampaignCard - -Reusable campaign card component. - -- Mount: `data-component="CampaignCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--send]"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CampaignPerformancePreview - -Reusable campaign performance preview component. - -- Mount: `data-component="CampaignPerformancePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CardPaymentForm - -Reusable card payment form component. - -- Mount: `data-component="CardPaymentForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CareerApplicationForm - -Reusable career application form component. - -- Mount: `data-component="CareerApplicationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Carousel - -Reusable carousel component. - -- Mount: `data-component="Carousel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaseStudyCard - -Reusable case study card component. - -- Mount: `data-component="CaseStudyCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaseStudyPreview - -Reusable case study preview component. - -- Mount: `data-component="CaseStudyPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CertificateUpload - -Reusable certificate upload component. - -- Mount: `data-component="CertificateUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelCard - -Reusable channel card component. - -- Mount: `data-component="ChannelCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = ""`, `actionLabel: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelIcon - -Reusable channel icon component. - -- Mount: `data-component="ChannelIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChartTooltip - -Reusable chart tooltip component. - -- Mount: `data-component="ChartTooltip"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Checklist - -Reusable checklist component. - -- Mount: `data-component="Checklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ClickableCard - -Reusable clickable card component. - -- Mount: `data-component="ClickableCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Code - -Reusable code component. - -- Mount: `data-component="Code"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeBlock - -Reusable code block component. - -- Mount: `data-component="CodeBlock"` -- Props: `language: string = "text"`, `title: string = ""`, `code: string = ""`, `copyable: boolean = true`, `class: string = ""` -- Slots: None -- Events: None - -### CodeTabs - -Reusable code tabs component. - -- Mount: `data-component="CodeTabs"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### CodeText - -Reusable code text component. - -- Mount: `data-component="CodeText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorSwatch - -Reusable color swatch component. - -- Mount: `data-component="ColorSwatch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CommandBlock - -Reusable command block component. - -- Mount: `data-component="CommandBlock"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComplianceProgramCard - -Reusable compliance program card component. - -- Mount: `data-component="ComplianceProgramCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConnectedAccountCard - -Reusable connected account card component. - -- Mount: `data-component="ConnectedAccountCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConnectionCard - -Reusable connection card component. - -- Mount: `data-component="ConnectionCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConsentTimelinePreview - -Reusable consent timeline preview component. - -- Mount: `data-component="ConsentTimelinePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactCard - -Reusable contact card component. - -- Mount: `data-component="ContactCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactForm - -Reusable contact form component. - -- Mount: `data-component="ContactForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactSalesForm - -Reusable contact sales form component. - -- Mount: `data-component="ContactSalesForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContextSwitcher - -Reusable context switcher component. - -- Mount: `data-component="ContextSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConversationPreview - -Reusable conversation preview component. - -- Mount: `data-component="ConversationPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CostSummary - -Reusable cost summary component. - -- Mount: `data-component="CostSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CronBuilder - -Reusable cron builder component. - -- Mount: `data-component="CronBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CsvUpload - -Reusable csv upload component. - -- Mount: `data-component="CsvUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CustomerLogo - -Reusable customer logo component. - -- Mount: `data-component="CustomerLogo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CustomerStoryCard - -Reusable customer story card component. - -- Mount: `data-component="CustomerStoryCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DataProtectionCard - -Reusable data protection card component. - -- Mount: `data-component="DataProtectionCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DateRangeCalendar - -Reusable date range calendar component. - -- Mount: `data-component="DateRangeCalendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DateRangeSlider - -Reusable date range slider component. - -- Mount: `data-component="DateRangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeliveryPreview - -Reusable delivery preview component. - -- Mount: `data-component="DeliveryPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DemoRequestForm - -Reusable demo request form component. - -- Mount: `data-component="DemoRequestForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeveloperSearch - -Reusable developer search component. - -- Mount: `data-component="DeveloperSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeviceCard - -Reusable device card component. - -- Mount: `data-component="DeviceCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DocumentPreview - -Reusable document preview component. - -- Mount: `data-component="DocumentPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DocumentUpload - -Reusable document upload component. - -- Mount: `data-component="DocumentUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadGateForm - -Reusable download gate form component. - -- Mount: `data-component="DownloadGateForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadResourceForm - -Reusable download resource form component. - -- Mount: `data-component="DownloadResourceForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DurationSlider - -Reusable duration slider component. - -- Mount: `data-component="DurationSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ElevatedCard - -Reusable elevated card component. - -- Mount: `data-component="ElevatedCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmailComposer - -Reusable email composer component. - -- Mount: `data-component="EmailComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnterprisePricingCard - -Reusable enterprise pricing card component. - -- Mount: `data-component="EnterprisePricingCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnvironmentSwitcher - -Reusable environment switcher component. - -- Mount: `data-component="EnvironmentSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorCard - -Reusable error card component. - -- Mount: `data-component="ErrorCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorCode - -Reusable error code component. - -- Mount: `data-component="ErrorCode"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorIllustration - -Reusable error illustration component. - -- Mount: `data-component="ErrorIllustration"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorPage - -Reusable error page component. - -- Mount: `data-component="ErrorPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EstimatedCostSummary - -Reusable estimated cost summary component. - -- Mount: `data-component="EstimatedCostSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExpandableText - -Reusable expandable text component. - -- Mount: `data-component="ExpandableText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EyebrowText - -Reusable eyebrow text component. - -- Mount: `data-component="EyebrowText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FactorCard - -Reusable factor card component. - -- Mount: `data-component="FactorCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FallbackRouteBuilder - -Reusable fallback route builder component. - -- Mount: `data-component="FallbackRouteBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FaviconUpload - -Reusable favicon upload component. - -- Mount: `data-component="FaviconUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureCard - -Reusable feature card component. - -- Mount: `data-component="FeatureCard"` -- Props: `class: string = ""`, `icon: string = "icon-[lucide--sparkles]"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""` -- Slots: None -- Events: None - -### FeatureChecklist - -Reusable feature checklist component. - -- Mount: `data-component="FeatureChecklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeaturedBlogCard - -Reusable featured blog card component. - -- Mount: `data-component="FeaturedBlogCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureIconCard - -Reusable feature icon card component. - -- Mount: `data-component="FeatureIconCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureTabs - -Reusable feature tabs component. - -- Mount: `data-component="FeatureTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileSizeLabel - -Reusable file size label component. - -- Mount: `data-component="FileSizeLabel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileUpload - -Reusable file upload component. - -- Mount: `data-component="FileUpload"` -- Props: `class: string = ""`, `id: string = "file"`, `name: string = "file"`, `label: string = "Upload file"`, `accept: string = ""`, `multiple: boolean = false`, `help: string = "Drag and drop or browse"` -- Slots: None -- Events: None - -### FooterLanguageSwitcher - -Reusable footer language switcher component. - -- Mount: `data-component="FooterLanguageSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ForbiddenPage - -Reusable forbidden page component. - -- Mount: `data-component="ForbiddenPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ForgotPasswordForm - -Reusable forgot password form component. - -- Mount: `data-component="ForgotPasswordForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Form - -Reusable form component. - -- Mount: `data-component="Form"` -- Props: `action: string = ""`, `method: string = "post"`, `name: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormErrorSummary - -Reusable form error summary component. - -- Mount: `data-component="FormErrorSummary"` -- Props: `class: string = ""`, `title: string = "Please fix the following"`, `visible: boolean = true` -- Slots: `default` -- Events: None - -### FormHelpText - -Reusable form help text component. - -- Mount: `data-component="FormHelpText"` -- Props: `id: string = ""`, `text: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormLabel - -Reusable form label component. - -- Mount: `data-component="FormLabel"` -- Props: `for: string = ""`, `label: string = "Label"`, `required: boolean = false`, `optional: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### GlassCard - -Reusable glass card component. - -- Mount: `data-component="GlassCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GlobalSearch - -Reusable global search component. - -- Mount: `data-component="GlobalSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideCard - -Reusable guide card component. - -- Mount: `data-component="GuideCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideChecklist - -Reusable guide checklist component. - -- Mount: `data-component="GuideChecklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideStep - -Reusable guide step component. - -- Mount: `data-component="GuideStep"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroGradientText - -Reusable hero gradient text component. - -- Mount: `data-component="HeroGradientText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroProductPreview - -Reusable hero product preview component. - -- Mount: `data-component="HeroProductPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroTrustText - -Reusable hero trust text component. - -- Mount: `data-component="HeroTrustText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HighlightText - -Reusable highlight text component. - -- Mount: `data-component="HighlightText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HolidayCalendar - -Reusable holiday calendar component. - -- Mount: `data-component="HolidayCalendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HumanApprovalStep - -Reusable human approval step component. - -- Mount: `data-component="HumanApprovalStep"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Icon - -Reusable icon component. - -- Mount: `data-component="Icon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Illustration - -Reusable illustration component. - -- Mount: `data-component="Illustration"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageCompressionPreview - -Reusable image compression preview component. - -- Mount: `data-component="ImageCompressionPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageUpload - -Reusable image upload component. - -- Mount: `data-component="ImageUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentCard - -Reusable incident card component. - -- Mount: `data-component="IncidentCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InfoCard - -Reusable info card component. - -- Mount: `data-component="InfoCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InlineCode - -Reusable inline code component. - -- Mount: `data-component="InlineCode"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IntegrationCard - -Reusable integration card component. - -- Mount: `data-component="IntegrationCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--plug-zap]"`, `class: string = ""` -- Slots: `default` -- Events: None - -### InvoiceLineItem - -Reusable invoice line item component. - -- Mount: `data-component="InvoiceLineItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InvoiceSummary - -Reusable invoice summary component. - -- Mount: `data-component="InvoiceSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JobCard - -Reusable job card component. - -- Mount: `data-component="JobCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JsonViewer - -Reusable json viewer component. - -- Mount: `data-component="JsonViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### KycDocumentUpload - -Reusable kyc document upload component. - -- Mount: `data-component="KycDocumentUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LanguageSwitcher - -Reusable language switcher component. - -- Mount: `data-component="LanguageSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LeadText - -Reusable lead text component. - -- Mount: `data-component="LeadText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalContactBlock - -Reusable legal contact block component. - -- Mount: `data-component="LegalContactBlock"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalSummary - -Reusable legal summary component. - -- Mount: `data-component="LegalSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Logo - -Reusable logo component. - -- Mount: `data-component="Logo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LogoUpload - -Reusable logo upload component. - -- Mount: `data-component="LogoUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceCard - -Reusable maintenance card component. - -- Mount: `data-component="MaintenanceCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenancePage - -Reusable maintenance page component. - -- Mount: `data-component="MaintenancePage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageComposer - -Reusable message composer component. - -- Mount: `data-component="MessageComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageComposerPreview - -Reusable message composer preview component. - -- Mount: `data-component="MessageComposerPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessagePreview - -Reusable message preview component. - -- Mount: `data-component="MessagePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageVolumeSlider - -Reusable message volume slider component. - -- Mount: `data-component="MessageVolumeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MetricCard - -Reusable metric card component. - -- Mount: `data-component="MetricCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MetricText - -Reusable metric text component. - -- Mount: `data-component="MetricText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileTableCard - -Reusable mobile table card component. - -- Mount: `data-component="MobileTableCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MultiFileUpload - -Reusable multi file upload component. - -- Mount: `data-component="MultiFileUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MutedText - -Reusable muted text component. - -- Mount: `data-component="MutedText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NavigationItem - -Reusable navigation item component. - -- Mount: `data-component="NavigationItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewsletterForm - -Reusable newsletter form component. - -- Mount: `data-component="NewsletterForm"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Stay up to date"`, `description: string = ""`, `placeholder: string = "Enter your email"`, `buttonLabel: string = "Subscribe"`, `action: string = "/newsletter/subscribe"`, `method: string = "post"`, `emailName: string = "email"`, `privacyLabel: string = ""`, `privacyHref: string = "/privacy"`, `successMessage: string = "You are subscribed."`, `errorMessage: string = "Something went wrong. Please try again."`, `iconClass: string = "icon-[lucide--mail]"`, `centered: boolean = false`, `compact: boolean = false`, `showIcon: boolean = true`, `showPrivacy: boolean = true`, `fullWidth: boolean = false` -- Slots: None -- Events: `submit`, `input` - -### NotFoundPage - -Reusable not found page component. - -- Mount: `data-component="NotFoundPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NotificationCard - -Reusable notification card component. - -- Mount: `data-component="NotificationCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OfficeCard - -Reusable office card component. - -- Mount: `data-component="OfficeCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OfflinePage - -Reusable offline page component. - -- Mount: `data-component="OfflinePage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OneTimeSecretDisplay - -Reusable one time secret display component. - -- Mount: `data-component="OneTimeSecretDisplay"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OpacitySlider - -Reusable opacity slider component. - -- Mount: `data-component="OpacitySlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OtpVerificationForm - -Reusable otp verification form component. - -- Mount: `data-component="OtpVerificationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OutlinedCard - -Reusable outlined card component. - -- Mount: `data-component="OutlinedCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PartnerApplicationForm - -Reusable partner application form component. - -- Mount: `data-component="PartnerApplicationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PartnerProgramCard - -Reusable partner program card component. - -- Mount: `data-component="PartnerProgramCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PaymentMethodCard - -Reusable payment method card component. - -- Mount: `data-component="PaymentMethodCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PdfPreview - -Reusable pdf preview component. - -- Mount: `data-component="PdfPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlatformPillarCard - -Reusable platform pillar card component. - -- Mount: `data-component="PlatformPillarCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PressReleaseCard - -Reusable press release card component. - -- Mount: `data-component="PressReleaseCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PriceRangeSlider - -Reusable price range slider component. - -- Mount: `data-component="PriceRangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PriceText - -Reusable price text component. - -- Mount: `data-component="PriceText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingCard - -Reusable pricing card component. - -- Mount: `data-component="PricingCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingContactForm - -Reusable pricing contact form component. - -- Mount: `data-component="PricingContactForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingPlanCard - -Reusable pricing plan card component. - -- Mount: `data-component="PricingPlanCard"` -- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `badgeLabel: string = "Most popular"`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"` -- Slots: `default` -- Events: None - -### ProductCard - -Reusable product card component. - -- Mount: `data-component="ProductCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### ProductIcon - -Reusable product icon component. - -- Mount: `data-component="ProductIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductLogo - -Reusable product logo component. - -- Mount: `data-component="ProductLogo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductMiniCard - -Reusable product mini card component. - -- Mount: `data-component="ProductMiniCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductNavigationCard - -Reusable product navigation card component. - -- Mount: `data-component="ProductNavigationCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProgressSlider - -Reusable progress slider component. - -- Mount: `data-component="ProgressSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProjectCard - -Reusable project card component. - -- Mount: `data-component="ProjectCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProjectSwitcher - -Reusable project switcher component. - -- Mount: `data-component="ProjectSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PublicHeaderLogo - -Reusable public header logo component. - -- Mount: `data-component="PublicHeaderLogo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PushComposer - -Reusable push composer component. - -- Mount: `data-component="PushComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QrCode - -Reusable qr code component. - -- Mount: `data-component="QrCode"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuantityStepper - -Reusable quantity stepper component. - -- Mount: `data-component="QuantityStepper"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuoteText - -Reusable quote text component. - -- Mount: `data-component="QuoteText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RangeSlider - -Reusable range slider component. - -- Mount: `data-component="RangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RateLimitPage - -Reusable rate limit page component. - -- Mount: `data-component="RateLimitPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RatingSlider - -Reusable rating slider component. - -- Mount: `data-component="RatingSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecoveryCodeForm - -Reusable recovery code form component. - -- Mount: `data-component="RecoveryCodeForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecurrenceRuleBuilder - -Reusable recurrence rule builder component. - -- Mount: `data-component="RecurrenceRuleBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ReportCard - -Reusable report card component. - -- Mount: `data-component="ReportCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RequestResponseViewer - -Reusable request response viewer component. - -- Mount: `data-component="RequestResponseViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RequestViewer - -Reusable request viewer component. - -- Mount: `data-component="RequestViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResetPasswordForm - -Reusable reset password form component. - -- Mount: `data-component="ResetPasswordForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceCard - -Reusable resource card component. - -- Mount: `data-component="ResourceCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceDownloadCard - -Reusable resource download card component. - -- Mount: `data-component="ResourceDownloadCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceSearch - -Reusable resource search component. - -- Mount: `data-component="ResourceSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResponseViewer - -Reusable response viewer component. - -- Mount: `data-component="ResponseViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SDKCard - -Reusable s d k card component. - -- Mount: `data-component="SDKCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SDKLanguageTabs - -Reusable s d k language tabs component. - -- Mount: `data-component="SDKLanguageTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchCategoryTabs - -Reusable search category tabs component. - -- Mount: `data-component="SearchCategoryTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchResultItem - -Reusable search result item component. - -- Mount: `data-component="SearchResultItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecretDisplay - -Reusable secret display component. - -- Mount: `data-component="SecretDisplay"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityContactCard - -Reusable security contact card component. - -- Mount: `data-component="SecurityContactCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityFeatureCard - -Reusable security feature card component. - -- Mount: `data-component="SecurityFeatureCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityReportForm - -Reusable security report form component. - -- Mount: `data-component="SecurityReportForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServerErrorPage - -Reusable server error page component. - -- Mount: `data-component="ServerErrorPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SessionCard - -Reusable session card component. - -- Mount: `data-component="SessionCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SetupChecklist - -Reusable setup checklist component. - -- Mount: `data-component="SetupChecklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SignInForm - -Reusable sign in form component. - -- Mount: `data-component="SignInForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SignUpForm - -Reusable sign up form component. - -- Mount: `data-component="SignUpForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SiteSearch - -Reusable site search component. - -- Mount: `data-component="SiteSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Slider - -Reusable slider component. - -- Mount: `data-component="Slider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmallText - -Reusable small text component. - -- Mount: `data-component="SmallText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmsComposer - -Reusable sms composer component. - -- Mount: `data-component="SmsComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatCard - -Reusable stat card component. - -- Mount: `data-component="StatCard"` -- Props: `class: string = ""`, `label: string = "Metric"`, `value: string = "0"`, `change: string = ""`, `trend: string = "neutral"` -- Slots: None -- Events: None - -### StatusSubscribeForm - -Reusable status subscribe form component. - -- Mount: `data-component="StatusSubscribeForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Stepper - -Reusable stepper component. - -- Mount: `data-component="Stepper"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SuccessCard - -Reusable success card component. - -- Mount: `data-component="SuccessCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SupportRequestForm - -Reusable support request form component. - -- Mount: `data-component="SupportRequestForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Tabs - -Reusable tabs component. - -- Mount: `data-component="Tabs"` -- Props: `class: string = ""`, `active: string = "first"` -- Slots: `first`, `second` -- Events: `click` - -### TeamMemberCard - -Reusable team member card component. - -- Mount: `data-component="TeamMemberCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TemplateCard - -Reusable template card component. - -- Mount: `data-component="TemplateCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TerminalBlock - -Reusable terminal block component. - -- Mount: `data-component="TerminalBlock"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TestimonialCard - -Reusable testimonial card component. - -- Mount: `data-component="TestimonialCard"` -- Props: `class: string = ""`, `quote: string = "Great product."`, `name: string = "Customer"`, `role: string = ""`, `company: string = ""`, `avatar: string = ""` -- Slots: None -- Events: None - -### TestimonialCarousel - -Reusable testimonial carousel component. - -- Mount: `data-component="TestimonialCarousel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ThemeSwitcher - -Reusable theme switcher component. - -- Mount: `data-component="ThemeSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimelineItem - -Reusable timeline item component. - -- Mount: `data-component="TimelineItem"` -- Props: `class: string = ""`, `title: string = "Event"`, `date: string = ""`, `description: string = ""`, `status: string = "default"` -- Slots: None -- Events: None - -### ToastIcon - -Reusable toast icon component. - -- Mount: `data-component="ToastIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Tooltip - -Reusable tooltip component. - -- Mount: `data-component="Tooltip"` -- Props: `class: string = ""`, `text: string = "Helpful information"`, `position: string = "top"` -- Slots: `default` -- Events: None - -### TotpVerificationForm - -Reusable totp verification form component. - -- Mount: `data-component="TotpVerificationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TranslatedText - -Reusable translated text component. - -- Mount: `data-component="TranslatedText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TruncatedText - -Reusable truncated text component. - -- Mount: `data-component="TruncatedText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UnifiedTimelinePreview - -Reusable unified timeline preview component. - -- Mount: `data-component="UnifiedTimelinePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UploadItem - -Reusable upload item component. - -- Mount: `data-component="UploadItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UploadPreview - -Reusable upload preview component. - -- Mount: `data-component="UploadPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UserCard - -Reusable user card component. - -- Mount: `data-component="UserCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ValueCard - -Reusable value card component. - -- Mount: `data-component="ValueCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VerticalTabs - -Reusable vertical tabs component. - -- Mount: `data-component="VerticalTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VideoCard - -Reusable video card component. - -- Mount: `data-component="VideoCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VideoUpload - -Reusable video upload component. - -- Mount: `data-component="VideoUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VoiceScriptComposer - -Reusable voice script composer component. - -- Mount: `data-component="VoiceScriptComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VolumeSlider - -Reusable volume slider component. - -- Mount: `data-component="VolumeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WarningCard - -Reusable warning card component. - -- Mount: `data-component="WarningCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebhookEventCard - -Reusable webhook event card component. - -- Mount: `data-component="WebhookEventCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebhookPayloadViewer - -Reusable webhook payload viewer component. - -- Mount: `data-component="WebhookPayloadViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebinarCard - -Reusable webinar card component. - -- Mount: `data-component="WebinarCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebinarRegistrationForm - -Reusable webinar registration form component. - -- Mount: `data-component="WebinarRegistrationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WhatsAppComposer - -Reusable whats app composer component. - -- Mount: `data-component="WhatsAppComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Wizard - -Reusable wizard component. - -- Mount: `data-component="Wizard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkflowCanvasPreview - -Reusable workflow canvas preview component. - -- Mount: `data-component="WorkflowCanvasPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkspaceCard - -Reusable workspace card component. - -- Mount: `data-component="WorkspaceCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkspaceSwitcher - -Reusable workspace switcher component. - -- Mount: `data-component="WorkspaceSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ZoomSlider - -Reusable zoom slider component. - -- Mount: `data-component="ZoomSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -## Core - -### alert - -Reusable alert component. - -- Mount: `data-component="alert"` -- Props: `class: string = ""`, `title: string = "Notice"`, `description: string = ""`, `variant: string = "info"`, `dismissible: boolean = false` -- Slots: `default` -- Events: `click` - -### AnnouncementBar - -Reusable announcement bar component. - -- Mount: `data-component="AnnouncementBar"` -- Props: `class: string = ""`, `badge: string = "New"`, `message: string = "WrNexus Organizations is now available."`, `description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."`, `href: string = "/organizations"`, `actionLabel: string = "Explore organizations"`, `ariaLabel: string = "Announcement"`, `badgeIcon: string = "icon-[lucide--sparkles]"`, `actionIcon: string = "icon-[lucide--arrow-right]"`, `dismissLabel: string = "Dismiss announcement"`, `showBadge: boolean = true`, `showDescription: boolean = true`, `showAction: boolean = true`, `dismissible: boolean = true` -- Slots: None -- Events: `click` - -### AspectRatio - -Reusable aspect ratio component. - -- Mount: `data-component="AspectRatio"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### BackToTop - -Reusable back to top component. - -- Mount: `data-component="BackToTop"` -- Props: `class: string = ""`, `label: string = "Back to top"`, `assistiveLabel: string = "Return to the top of the page"`, `threshold: number = 500` -- Slots: None -- Events: `click` - -### Breadcrumbs - -Reusable breadcrumbs component. - -- Mount: `data-component="Breadcrumbs"` -- Props: `class: string = ""`, `items: string = []`, `centered: boolean = false`, `compact: boolean = false`, `showHome: boolean = true`, `homeLabel: string = "Home"`, `homeHref: string = "/"` -- Slots: None -- Events: None - -### card - -Reusable card component. - -- Mount: `data-component="card"` -- Props: `variant: string = "default"`, `padding: string = "md"`, `interactive: boolean = false`, `className: string = ""` -- Slots: `default` -- Events: None - -### Checkbox - -Reusable checkbox component. - -- Mount: `data-component="Checkbox"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `description: string = ""`, `checked: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: None - -### Chip - -Reusable chip component. - -- Mount: `data-component="Chip"` -- Props: `label: string = "Chip"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Cluster - -Reusable cluster component. - -- Mount: `data-component="Cluster"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### Combobox - -Reusable combobox component. - -- Mount: `data-component="Combobox"` -- Props: `id: string = "combobox"`, `name: string = ""`, `label: string = "Choose an option"`, `placeholder: string = "Search options"`, `options: string = []`, `required: boolean = false`, `disabled: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### ContactSalesBanner - -Reusable contact sales banner component. - -- Mount: `data-component="ContactSalesBanner"` -- Props: `class: string = ""`, `eyebrow: string = "Enterprise identity"`, `title: string = "Ready to secure your next application?"`, `description: string = ""`, `primaryLabel: string = "Contact sales"`, `primaryHref: string = "/contact"`, `secondaryLabel: string = "Start free"`, `secondaryHref: string = "/sign-up"`, `iconClass: string = "icon-[lucide--messages-square]"`, `centered: boolean = false`, `compact: boolean = false`, `points: string = []`, `trustPoints: string = []` -- Slots: None -- Events: None - -### Container - -Reusable container component. - -- Mount: `data-component="Container"` -- Props: `size: string = "default"`, `className: string = ""` -- Slots: `default` -- Events: None - -### CookieConsent - -Reusable cookie consent component. - -- Mount: `data-component="CookieConsent"` -- Props: `class: string = ""` -- Slots: None -- Events: `click`, `change` - -### DevelopersMegaMenu - -Reusable developers mega menu component. - -- Mount: `data-component="DevelopersMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### disclosure - -Reusable disclosure component. - -- Mount: `data-component="disclosure"` -- Props: `summary: string = "Details"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DisplayHeading - -Reusable display heading component. - -- Mount: `data-component="DisplayHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Divider - -Reusable divider component. - -- Mount: `data-component="Divider"` -- Props: `className: string = ""` -- Slots: `default` -- Events: None - -### Drawer - -Reusable drawer component. - -- Mount: `data-component="Drawer"` -- Props: `class: string = ""`, `title: string = "Panel"`, `open: boolean = false`, `side: string = "right"` -- Slots: `default` -- Events: `click` - -### FAQ - -Reusable faq component. - -- Mount: `data-component="FAQ"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Frequently asked questions"`, `description: string = ""`, `items: string = []`, `centered: boolean = true`, `allowMultiple: boolean = false`, `defaultOpenIndex: number = 0` -- Slots: None -- Events: None - -### FAQAccordion - -Reusable faqaccordion component. - -- Mount: `data-component="FAQAccordion"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Frequently asked questions"`, `description: string = ""`, `items: string = []`, `centered: boolean = true`, `compact: boolean = false`, `allowMultiple: boolean = false`, `defaultOpenIndex: number = 0`, `showContact: boolean = false`, `contactText: string = "Still have questions?"`, `contactLabel: string = "Contact support"`, `contactHref: string = "/support"` -- Slots: None -- Events: `click` - -### file-upload - -Reusable file-upload component. - -- Mount: `data-component="file-upload"` -- Props: `store: string = "public"`, `endpoint: string = "/api/upload"`, `accept: string = ""`, `multiple: boolean = false`, `max: number = 0`, `label: string = "Drag files here or click to browse"`, `class: string = ""` -- Slots: None -- Events: None - -### FilterBar - -Reusable filter bar component. - -- Mount: `data-component="FilterBar"` -- Props: `label: string = "Filters"`, `clearLabel: string = "Clear filters"`, `showClear: boolean = true`, `class: string = ""` -- Slots: `default` -- Events: None - -### Flex - -Reusable flex component. - -- Mount: `data-component="Flex"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### FormError - -Reusable form error component. - -- Mount: `data-component="FormError"` -- Props: `id: string = ""`, `message: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FullBleed - -Reusable full bleed component. - -- Mount: `data-component="FullBleed"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### hstack - -Reusable hstack component. - -- Mount: `data-component="hstack"` -- Props: `gap: string = "4"`, `align: string = "center"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Inline - -Reusable inline component. - -- Mount: `data-component="Inline"` -- Props: `gap: string = "4"`, `className: string = ""` -- Slots: `default` -- Events: None - -### input - -Reusable input component. - -- Mount: `data-component="input"` -- Props: `type: string = "text"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### LegalTableOfContents - -Reusable legal table of contents component. - -- Mount: `data-component="LegalTableOfContents"` -- Props: `title: string = "On this page"`, `items: string = []`, `class: string = ""` -- Slots: None -- Events: None - -### Link - -Reusable link component. - -- Mount: `data-component="Link"` -- Props: `href: string = "#"`, `label: string = "Link"`, `external: boolean = false`, `className: string = ""` -- Slots: None -- Events: None - -### LogoCloud - -Reusable logo cloud component. - -- Mount: `data-component="LogoCloud"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Trusted by teams building modern products"`, `description: string = ""`, `logos: string = []`, `centered: boolean = true`, `compact: boolean = false`, `variant: string = "strip"`, `grayscale: boolean = true`, `showNames: boolean = false`, `maxItems: number = 8` -- Slots: None -- Events: None - -### Modal - -Reusable modal component. - -- Mount: `data-component="Modal"` -- Props: `class: string = ""`, `title: string = "Dialog"`, `description: string = ""`, `open: boolean = false`, `size: string = "md"`, `closeLabel: string = "Close"` -- Slots: `default` -- Events: `click` - -### MultiSelect - -Reusable multi select component. - -- Mount: `data-component="MultiSelect"` -- Props: `id: string = "multi-select"`, `name: string = ""`, `label: string = "Choose options"`, `options: string = []`, `required: boolean = false`, `disabled: boolean = false`, `size: number = 5`, `class: string = ""` -- Slots: None -- Events: None - -### NarrowContainer - -Reusable narrow container component. - -- Mount: `data-component="NarrowContainer"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### NotificationDot - -Reusable notification dot component. - -- Mount: `data-component="NotificationDot"` -- Props: `label: string = "Notification"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageHeader - -Reusable page header component. - -- Mount: `data-component="PageHeader"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `icon: string = "sparkles"`, `centered: boolean = false`, `compact: boolean = false`, `showBreadcrumbs: boolean = false`, `breadcrumbParent: string = ""`, `breadcrumbParentHref: string = ""`, `breadcrumbCurrent: string = ""`, `highlights: string = []` -- Slots: None -- Events: None - -### PageHeading - -Reusable page heading component. - -- Mount: `data-component="PageHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageShell - -Reusable page shell component. - -- Mount: `data-component="PageShell"` -- Props: `className: string = ""` -- Slots: `default` -- Events: None - -### Pagination - -Reusable pagination component. - -- Mount: `data-component="Pagination"` -- Props: `class: string = ""`, `currentPage: number = 1`, `totalPages: number = 1`, `previousHref: string = ""`, `nextHref: string = ""`, `pages: string = []`, `showNumbers: boolean = true`, `showSummary: boolean = true`, `totalItems: number = 0`, `pageSize: number = 10`, `compact: boolean = false`, `centered: boolean = false` -- Slots: None -- Events: None - -### Pill - -Reusable pill component. - -- Mount: `data-component="Pill"` -- Props: `label: string = "Pill"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductMegaMenu - -Reusable product mega menu component. - -- Mount: `data-component="ProductMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### progress - -Reusable progress component. - -- Mount: `data-component="progress"` -- Props: `value: number = 0`, `max: number = 100`, `class: string = ""` -- Slots: None -- Events: None - -### ProgressBar - -Reusable progress bar component. - -- Mount: `data-component="ProgressBar"` -- Props: `class: string = ""`, `value: number = 0`, `max: number = 100`, `label: string = "Progress"`, `showValue: boolean = true` -- Slots: None -- Events: None - -### PublicFooter - -Reusable public footer component. - -- Mount: `data-component="PublicFooter"` -- Props: `class: string = ""`, `homeHref: string = "/"`, `brandName: string = "WrNexus"`, `brandTagline: string = "Identity Cloud"`, `brandAriaLabel: string = "WrNexus home"`, `brandIcon: string = "icon-[lucide--blocks]"`, `brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications."`, `statusLabel: string = "All systems operational"`, `statusHref: string = "/status"`, `newsletterEyebrow: string = "WrNexus updates"`, `newsletterTitle: string = "Identity insights delivered to your inbox"`, `newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources."`, `newsletterAction: string = "/api/newsletter/subscribe"`, `newsletterButtonLabel: string = "Subscribe"`, `newsletterPlaceholder: string = "Enter your work email"`, `newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription."`, `newsletterPrivacyLabel: string = "privacy policy"`, `newsletterPrivacyHref: string = "/privacy"`, `newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our"`, `newsletterFinePrintSuffix: string = "."`, `newsletterEmailLabel: string = "Work email address"`, `newsletterEmailName: string = "email"`, `copyrightText: string = "© 2026 WrNexus. All rights reserved."`, `attributionText: string = "Built by WorkRoot Workspace."`, `showNewsletter: boolean = true`, `showSocialLinks: boolean = true`, `showThemeToggle: boolean = true`, `showStatus: boolean = true`, `showCookiePreferences: boolean = true`, `cookiePreferencesLabel: string = "Cookie preferences"`, `themeLabel: string = "Theme"`, `themeToggleLabel: string = "Toggle color theme"`, `legalTitle: string = "Legal"`, `socialLinks: PublicFooterLink[] = []`, `navigationColumns: PublicFooterColumn[] = []`, `legalLinks: PublicFooterLink[] = []`, `navigationAriaLabel: string = "Footer navigation"` -- Slots: `navigation` -- Events: `submit` - -### PublicMobileNavigation - -Reusable public mobile navigation component. - -- Mount: `data-component="PublicMobileNavigation"` -- Props: `class: string = ""` -- Slots: None -- Events: `click` - -### PublicSearch - -Reusable public search component. - -- Mount: `data-component="PublicSearch"` -- Props: `class: string = ""`, `query: string = ""`, `placeholder: string = "Search..."`, `label: string = "Search"`, `action: string = ""`, `method: string = "get"`, `name: string = "q"`, `buttonLabel: string = ""`, `clearLabel: string = "Clear search"`, `size: string = "default"`, `centered: boolean = false`, `fullWidth: boolean = false`, `showShortcut: boolean = false`, `shortcutLabel: string = "⌘ K"`, `suggestions: string = []` -- Slots: None -- Events: `input`, `focus`, `blur`, `click` - -### Radio - -Reusable radio component. - -- Mount: `data-component="Radio"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = "choice"`, `value: string = ""`, `label: string = "Option"`, `description: string = ""`, `checked: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: None - -### ScrollArea - -Reusable scroll area component. - -- Mount: `data-component="ScrollArea"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SDKTabs - -Reusable sdktabs component. - -- Mount: `data-component="SDKTabs"` -- Props: `label: string = "SDK languages"`, `tabs: string = []`, `defaultIndex: number = 0`, `class: string = ""` -- Slots: None -- Events: `click` - -### SectionHeading - -Reusable section heading component. - -- Mount: `data-component="SectionHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SegmentedButtonGroup - -Reusable segmented button group component. - -- Mount: `data-component="SegmentedButtonGroup"` -- Props: `label: string = "Options"`, `items: string = []`, `active: string = ""`, `size: string = "md"`, `fullWidth: boolean = false`, `class: string = ""` -- Slots: None -- Events: `click` - -### Select - -Reusable select component. - -- Mount: `data-component="Select"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false` -- Slots: `default` -- Events: None - -### SocialShare - -Reusable social share component. - -- Mount: `data-component="SocialShare"` -- Props: `class: string = ""`, `title: string = "Share this page"`, `description: string = ""`, `url: string = ""`, `shareText: string = ""`, `centered: boolean = false`, `compact: boolean = false`, `showTitle: boolean = true`, `showCopy: boolean = true`, `networks: string = []` -- Slots: None -- Events: `click` - -### spacer - -Reusable spacer component. - -- Mount: `data-component="spacer"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### Spinner - -Reusable spinner component. - -- Mount: `data-component="Spinner"` -- Props: `class: string = ""`, `label: string = "Loading"`, `size: string = "md"` -- Slots: None -- Events: None - -### Stack - -Reusable stack component. - -- Mount: `data-component="Stack"` -- Props: `gap: string = "4"`, `className: string = ""` -- Slots: `default` -- Events: None - -### StatusBanner - -Reusable status banner component. - -- Mount: `data-component="StatusBanner"` -- Props: `class: string = ""`, `type: string = "info"`, `title: string = ""`, `description: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `dismissible: boolean = true`, `compact: boolean = false`, `details: string = []` -- Slots: None -- Events: `click` - -### Sticky - -Reusable sticky component. - -- Mount: `data-component="Sticky"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SubsectionHeading - -Reusable subsection heading component. - -- Mount: `data-component="SubsectionHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Surface - -Reusable surface component. - -- Mount: `data-component="Surface"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### Switch - -Reusable switch component. - -- Mount: `data-component="Switch"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `description: string = ""`, `checked: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: `click` - -### tag - -Reusable tag component. - -- Mount: `data-component="tag"` -- Props: `label: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Textarea - -Reusable textarea component. - -- Mount: `data-component="Textarea"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Message"`, `value: string = ""`, `placeholder: string = ""`, `rows: number = 5`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: None - -### theme-toggle - -Reusable theme-toggle component. - -- Mount: `data-component="theme-toggle"` -- Props: `label: string = "Toggle theme"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Toast - -Reusable toast component. - -- Mount: `data-component="Toast"` -- Props: `class: string = ""`, `title: string = "Saved"`, `description: string = ""`, `variant: string = "success"`, `duration: number = 5000` -- Slots: None -- Events: `click` - -### ToastHost - -Reusable toast host component. - -- Mount: `data-component="ToastHost"` -- Props: `class: string = ""` -- Slots: None -- Events: `click` - -### Typography - -Reusable typography component. - -- Mount: `data-component="Typography"` -- Props: `as: string = "p"`, `variant: string = "body"`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VisuallyHidden - -Reusable visually hidden component. - -- Mount: `data-component="VisuallyHidden"` -- Props: `className: string = ""` -- Slots: `default` -- Events: None - -### Well - -Reusable well component. - -- Mount: `data-component="Well"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### WideContainer - -Reusable wide container component. - -- Mount: `data-component="WideContainer"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -## Data - -### ActiveFilterList - -Reusable active filter list component. - -- Mount: `data-component="ActiveFilterList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ActivityList - -Reusable activity list component. - -- Mount: `data-component="ActivityList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiHeaderTable - -Reusable api header table component. - -- Mount: `data-component="ApiHeaderTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiParameterTable - -Reusable api parameter table component. - -- Mount: `data-component="ApiParameterTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiSchemaTable - -Reusable api schema table component. - -- Mount: `data-component="ApiSchemaTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuditTable - -Reusable audit table component. - -- Mount: `data-component="AuditTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### AutoGrid - -Reusable auto grid component. - -- Mount: `data-component="AutoGrid"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### BlogGrid - -Reusable blog grid component. - -- Mount: `data-component="BlogGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlogList - -Reusable blog list component. - -- Mount: `data-component="BlogList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CalendarGrid - -Reusable calendar grid component. - -- Mount: `data-component="CalendarGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CapabilityGrid - -Reusable capability grid component. - -- Mount: `data-component="CapabilityGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CareerBenefitsGrid - -Reusable career benefits grid component. - -- Mount: `data-component="CareerBenefitsGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelComparisonTable - -Reusable channel comparison table component. - -- Mount: `data-component="ChannelComparisonTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelRateTable - -Reusable channel rate table component. - -- Mount: `data-component="ChannelRateTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorGrid - -Reusable color grid component. - -- Mount: `data-component="ColorGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComparisonTable - -Reusable comparison table component. - -- Mount: `data-component="ComparisonTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComplianceBadgeList - -Reusable compliance badge list component. - -- Mount: `data-component="ComplianceBadgeList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConversationList - -Reusable conversation list component. - -- Mount: `data-component="ConversationList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieCategoryList - -Reusable cookie category list component. - -- Mount: `data-component="CookieCategoryList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieDetailsTable - -Reusable cookie details table component. - -- Mount: `data-component="CookieDetailsTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieTable - -Reusable cookie table component. - -- Mount: `data-component="CookieTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### DataRetentionTable - -Reusable data retention table component. - -- Mount: `data-component="DataRetentionTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### DataTable - -Reusable data table component. - -- Mount: `data-component="DataTable"` -- Props: `caption: string = "Data table"`, `columns: string = []`, `rows: string = []`, `emptyMessage: string = "No data available."`, `striped: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### DefinitionList - -Reusable definition list component. - -- Mount: `data-component="DefinitionList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### DescriptionList - -Reusable description list component. - -- Mount: `data-component="DescriptionList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### EventTable - -Reusable event table component. - -- Mount: `data-component="EventTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureComparisonTable - -Reusable feature comparison table component. - -- Mount: `data-component="FeatureComparisonTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureGrid - -Reusable feature grid component. - -- Mount: `data-component="FeatureGrid"` -- Props: `columns: number = 3`, `className: string = ""` -- Slots: `default` -- Events: None - -### FeatureList - -Reusable feature list component. - -- Mount: `data-component="FeatureList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileList - -Reusable file list component. - -- Mount: `data-component="FileList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FilterableTable - -Reusable filterable table component. - -- Mount: `data-component="FilterableTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormGrid - -Reusable form grid component. - -- Mount: `data-component="FormGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormRow - -Reusable form row component. - -- Mount: `data-component="FormRow"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### Grid - -Reusable grid component. - -- Mount: `data-component="Grid"` -- Props: `gap: string = "4"`, `className: string = ""` -- Slots: `default` -- Events: None - -### GuideGrid - -Reusable guide grid component. - -- Mount: `data-component="GuideGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentList - -Reusable incident list component. - -- Mount: `data-component="IncidentList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### KeyValueTable - -Reusable key value table component. - -- Mount: `data-component="KeyValueTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LeadershipGrid - -Reusable leadership grid component. - -- Mount: `data-component="LeadershipGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalBulletList - -Reusable legal bullet list component. - -- Mount: `data-component="LegalBulletList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalDefinitionList - -Reusable legal definition list component. - -- Mount: `data-component="LegalDefinitionList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalTable - -Reusable legal table component. - -- Mount: `data-component="LegalTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### List - -Reusable list component. - -- Mount: `data-component="List"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LogTable - -Reusable log table component. - -- Mount: `data-component="LogTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### MemberList - -Reusable member list component. - -- Mount: `data-component="MemberList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### MetricGrid - -Reusable metric grid component. - -- Mount: `data-component="MetricGrid"` -- Props: `label: string = "Platform metrics"`, `metrics: string = []`, `compact: boolean = false`, `columns: number = 4`, `class: string = ""` -- Slots: None -- Events: None - -### NotificationList - -Reusable notification list component. - -- Mount: `data-component="NotificationList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PartnerLogoGrid - -Reusable partner logo grid component. - -- Mount: `data-component="PartnerLogoGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PasswordRequirementList - -Reusable password requirement list component. - -- Mount: `data-component="PasswordRequirementList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlanFeatureList - -Reusable plan feature list component. - -- Mount: `data-component="PlanFeatureList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlanLimitList - -Reusable plan limit list component. - -- Mount: `data-component="PlanLimitList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PolicyVersionTable - -Reusable policy version table component. - -- Mount: `data-component="PolicyVersionTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingComparisonTable - -Reusable pricing comparison table component. - -- Mount: `data-component="PricingComparisonTable"` -- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `featuredPlan: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### PricingGrid - -Reusable pricing grid component. - -- Mount: `data-component="PricingGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingTable - -Reusable pricing table component. - -- Mount: `data-component="PricingTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductFeatureList - -Reusable product feature list component. - -- Mount: `data-component="ProductFeatureList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductGrid - -Reusable product grid component. - -- Mount: `data-component="ProductGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductIntegrationList - -Reusable product integration list component. - -- Mount: `data-component="ProductIntegrationList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductList - -Reusable product list component. - -- Mount: `data-component="ProductList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductUseCaseList - -Reusable product use case list component. - -- Mount: `data-component="ProductUseCaseList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### RateTable - -Reusable rate table component. - -- Mount: `data-component="RateTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionAvailabilityTable - -Reusable region availability table component. - -- Mount: `data-component="RegionAvailabilityTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResponsiveTable - -Reusable responsive table component. - -- Mount: `data-component="ResponsiveTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### RetentionTable - -Reusable retention table component. - -- Mount: `data-component="RetentionTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityPillarGrid - -Reusable security pillar grid component. - -- Mount: `data-component="SecurityPillarGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityPracticeList - -Reusable security practice list component. - -- Mount: `data-component="SecurityPracticeList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceLevelTable - -Reusable service level table component. - -- Mount: `data-component="ServiceLevelTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceStatusList - -Reusable service status list component. - -- Mount: `data-component="ServiceStatusList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceStatusRow - -Reusable service status row component. - -- Mount: `data-component="ServiceStatusRow"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SlaTable - -Reusable sla table component. - -- Mount: `data-component="SlaTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SortableTable - -Reusable sortable table component. - -- Mount: `data-component="SortableTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusTable - -Reusable status table component. - -- Mount: `data-component="StatusTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SubprocessorTable - -Reusable subprocessor table component. - -- Mount: `data-component="SubprocessorTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### Table - -Reusable table component. - -- Mount: `data-component="Table"` -- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`, `striped: boolean = false`, `hoverable: boolean = true`, `compact: boolean = false` -- Slots: `default` -- Events: None - -### TableRow - -Reusable table row component. - -- Mount: `data-component="TableRow"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### TreeTable - -Reusable tree table component. - -- Mount: `data-component="TreeTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### TrustBadgeList - -Reusable trust badge list component. - -- Mount: `data-component="TrustBadgeList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### UsagePricingTable - -Reusable usage pricing table component. - -- Mount: `data-component="UsagePricingTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ValuesGrid - -Reusable values grid component. - -- Mount: `data-component="ValuesGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### VirtualizedTable - -Reusable virtualized table component. - -- Mount: `data-component="VirtualizedTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -## Feedback - -### AccountStatusBanner - -Reusable account status banner component. - -- Mount: `data-component="AccountStatusBanner"` -- Props: `label: string = "AccountStatus"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiAuthenticationNotice - -Reusable api authentication notice component. - -- Mount: `data-component="ApiAuthenticationNotice"` -- Props: `label: string = "ApiAuthentication"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiMethodBadge - -Reusable api method badge component. - -- Mount: `data-component="ApiMethodBadge"` -- Props: `label: string = "ApiMethod"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiRateLimitNotice - -Reusable api rate limit notice component. - -- Mount: `data-component="ApiRateLimitNotice"` -- Props: `label: string = "ApiRateLimit"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiVersionBadge - -Reusable api version badge component. - -- Mount: `data-component="ApiVersionBadge"` -- Props: `label: string = "ApiVersion"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Badge - -Reusable badge component. - -- Mount: `data-component="Badge"` -- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`, `size: string = "md"` -- Slots: `default` -- Events: None - -### Banner - -Reusable banner component. - -- Mount: `data-component="Banner"` -- Props: `class: string = ""`, `text: string = "Announcement"`, `href: string = ""`, `actionLabel: string = "Learn more"`, `variant: string = "brand"` -- Slots: None -- Events: None - -### BetaBadge - -Reusable beta badge component. - -- Mount: `data-component="BetaBadge"` -- Props: `label: string = "Beta"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CardSkeleton - -Reusable card skeleton component. - -- Mount: `data-component="CardSkeleton"` -- Props: `label: string = "Card"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CertificationBadge - -Reusable certification badge component. - -- Mount: `data-component="CertificationBadge"` -- Props: `label: string = "Certification"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelBadge - -Reusable channel badge component. - -- Mount: `data-component="ChannelBadge"` -- Props: `label: string = "Channel"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CharacterCounter - -Reusable character counter component. - -- Mount: `data-component="CharacterCounter"` -- Props: `label: string = "Character"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChartEmptyState - -Reusable chart empty state component. - -- Mount: `data-component="ChartEmptyState"` -- Props: `label: string = "ChartEmpty"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeLanguageBadge - -Reusable code language badge component. - -- Mount: `data-component="CodeLanguageBadge"` -- Props: `label: string = "CodeLanguage"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComingSoonBadge - -Reusable coming soon badge component. - -- Mount: `data-component="ComingSoonBadge"` -- Props: `label: string = "ComingSoon"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComingSoonState - -Reusable coming soon state component. - -- Mount: `data-component="ComingSoonState"` -- Props: `label: string = "ComingSoon"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieBanner - -Reusable cookie banner component. - -- Mount: `data-component="CookieBanner"` -- Props: `class: string = ""`, `title: string = "We use cookies"`, `description: string = "We use essential cookies and optional analytics to improve your experience."`, `privacyHref: string = "/privacy"` -- Slots: None -- Events: `click` - -### Counter - -Reusable counter component. - -- Mount: `data-component="Counter"` -- Props: `label: string = "Status"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeprecatedFeatureAlert - -Reusable deprecated feature alert component. - -- Mount: `data-component="DeprecatedFeatureAlert"` -- Props: `label: string = "DeprecatedFeature"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmptyState - -Reusable empty state component. - -- Mount: `data-component="EmptyState"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Nothing found"`, `description: string = ""`, `iconClass: string = "icon-[lucide--inbox]"`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `compact: boolean = false`, `centered: boolean = true`, `suggestions: string = []` -- Slots: None -- Events: None - -### ErrorState - -Reusable error state component. - -- Mount: `data-component="ErrorState"` -- Props: `class: string = ""`, `type: string = "error"`, `eyebrow: string = ""`, `title: string = "Something went wrong"`, `description: string = ""`, `errorCode: string = ""`, `iconClass: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `retryLabel: string = ""`, `retryAction: string = ""`, `centered: boolean = true`, `compact: boolean = false`, `details: string = []` -- Slots: None -- Events: `click` - -### FeatureUnavailableState - -Reusable feature unavailable state component. - -- Mount: `data-component="FeatureUnavailableState"` -- Props: `label: string = "FeatureUnavailable"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileTypeBadge - -Reusable file type badge component. - -- Mount: `data-component="FileTypeBadge"` -- Props: `label: string = "FileType"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FooterStatusIndicator - -Reusable footer status indicator component. - -- Mount: `data-component="FooterStatusIndicator"` -- Props: `label: string = "FooterStatus"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ForbiddenState - -Reusable forbidden state component. - -- Mount: `data-component="ForbiddenState"` -- Props: `label: string = "Forbidden"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormAlert - -Reusable form alert component. - -- Mount: `data-component="FormAlert"` -- Props: `label: string = "Form"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideDifficultyBadge - -Reusable guide difficulty badge component. - -- Mount: `data-component="GuideDifficultyBadge"` -- Props: `label: string = "GuideDifficulty"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### HealthIndicator - -Reusable health indicator component. - -- Mount: `data-component="HealthIndicator"` -- Props: `label: string = "Health"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentAlert - -Reusable incident alert component. - -- Mount: `data-component="IncidentAlert"` -- Props: `label: string = "Incident"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentBanner - -Reusable incident banner component. - -- Mount: `data-component="IncidentBanner"` -- Props: `label: string = "Incident"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentSeverityBadge - -Reusable incident severity badge component. - -- Mount: `data-component="IncidentSeverityBadge"` -- Props: `label: string = "IncidentSeverity"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IndustryBadge - -Reusable industry badge component. - -- Mount: `data-component="IndustryBadge"` -- Props: `label: string = "Industry"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### InlineAlert - -Reusable inline alert component. - -- Mount: `data-component="InlineAlert"` -- Props: `label: string = "Inline"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalAcceptanceNotice - -Reusable legal acceptance notice component. - -- Mount: `data-component="LegalAcceptanceNotice"` -- Props: `label: string = "LegalAcceptance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalNotice - -Reusable legal notice component. - -- Mount: `data-component="LegalNotice"` -- Props: `label: string = "Legal"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalVersionBadge - -Reusable legal version badge component. - -- Mount: `data-component="LegalVersionBadge"` -- Props: `label: string = "LegalVersion"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceAlert - -Reusable maintenance alert component. - -- Mount: `data-component="MaintenanceAlert"` -- Props: `label: string = "Maintenance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceBanner - -Reusable maintenance banner component. - -- Mount: `data-component="MaintenanceBanner"` -- Props: `label: string = "Maintenance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceState - -Reusable maintenance state component. - -- Mount: `data-component="MaintenanceState"` -- Props: `label: string = "Maintenance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageCharacterCounter - -Reusable message character counter component. - -- Mount: `data-component="MessageCharacterCounter"` -- Props: `label: string = "MessageCharacter"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewBadge - -Reusable new badge component. - -- Mount: `data-component="NewBadge"` -- Props: `label: string = "New"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NoResultsState - -Reusable no results state component. - -- Mount: `data-component="NoResultsState"` -- Props: `label: string = "NoResults"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NotFoundState - -Reusable not found state component. - -- Mount: `data-component="NotFoundState"` -- Props: `label: string = "NotFound"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### OfflineState - -Reusable offline state component. - -- Mount: `data-component="OfflineState"` -- Props: `label: string = "Offline"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### OnlineIndicator - -Reusable online indicator component. - -- Mount: `data-component="OnlineIndicator"` -- Props: `label: string = "Online"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### OptionalIndicator - -Reusable optional indicator component. - -- Mount: `data-component="OptionalIndicator"` -- Props: `label: string = "Optional"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageAlert - -Reusable page alert component. - -- Mount: `data-component="PageAlert"` -- Props: `label: string = "Page"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageSkeleton - -Reusable page skeleton component. - -- Mount: `data-component="PageSkeleton"` -- Props: `label: string = "Page"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PreviewBadge - -Reusable preview badge component. - -- Mount: `data-component="PreviewBadge"` -- Props: `label: string = "Preview"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrivacyNotice - -Reusable privacy notice component. - -- Mount: `data-component="PrivacyNotice"` -- Props: `label: string = "Privacy"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductStatusBadge - -Reusable product status badge component. - -- Mount: `data-component="ProductStatusBadge"` -- Props: `label: string = "Available"`, `status: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### RateLimitedState - -Reusable rate limited state component. - -- Mount: `data-component="RateLimitedState"` -- Props: `label: string = "RateLimited"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionalPrivacyBanner - -Reusable regional privacy banner component. - -- Mount: `data-component="RegionalPrivacyBanner"` -- Props: `label: string = "RegionalPrivacy"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionUnavailableAlert - -Reusable region unavailable alert component. - -- Mount: `data-component="RegionUnavailableAlert"` -- Props: `label: string = "RegionUnavailable"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionUnavailableState - -Reusable region unavailable state component. - -- Mount: `data-component="RegionUnavailableState"` -- Props: `label: string = "RegionUnavailable"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RequiredIndicator - -Reusable required indicator component. - -- Mount: `data-component="RequiredIndicator"` -- Props: `label: string = "Required"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceTypeBadge - -Reusable resource type badge component. - -- Mount: `data-component="ResourceTypeBadge"` -- Props: `label: string = "ResourceType"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchEmptyState - -Reusable search empty state component. - -- Mount: `data-component="SearchEmptyState"` -- Props: `label: string = "SearchEmpty"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchLoadingState - -Reusable search loading state component. - -- Mount: `data-component="SearchLoadingState"` -- Props: `label: string = "SearchLoading"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityAlert - -Reusable security alert component. - -- Mount: `data-component="SecurityAlert"` -- Props: `label: string = "Security"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceStatusBadge - -Reusable service status badge component. - -- Mount: `data-component="ServiceStatusBadge"` -- Props: `label: string = "ServiceStatus"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Skeleton - -Reusable skeleton component. - -- Mount: `data-component="Skeleton"` -- Props: `height: string = "4"`, `rounded: string = "lg"`, `className: string = ""` -- Slots: None -- Events: None - -### SmsSegmentCounter - -Reusable sms segment counter component. - -- Mount: `data-component="SmsSegmentCounter"` -- Props: `label: string = "SmsSegment"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusBadge - -Reusable status badge component. - -- Mount: `data-component="StatusBadge"` -- Props: `class: string = ""`, `status: string = "operational"` -- Slots: None -- Events: None - -### SuccessState - -Reusable success state component. - -- Mount: `data-component="SuccessState"` -- Props: `label: string = "Success"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TableSkeleton - -Reusable table skeleton component. - -- Mount: `data-component="TableSkeleton"` -- Props: `label: string = "Table"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TaxNotice - -Reusable tax notice component. - -- Mount: `data-component="TaxNotice"` -- Props: `label: string = "Tax"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TextSkeleton - -Reusable text skeleton component. - -- Mount: `data-component="TextSkeleton"` -- Props: `label: string = "Text"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TrendIndicator - -Reusable trend indicator component. - -- Mount: `data-component="TrendIndicator"` -- Props: `label: string = "Trend"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### UnavailableRegionState - -Reusable unavailable region state component. - -- Mount: `data-component="UnavailableRegionState"` -- Props: `label: string = "UnavailableRegion"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VerifiedBadge - -Reusable verified badge component. - -- Mount: `data-component="VerifiedBadge"` -- Props: `label: string = "Verified"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -## Forms - -### AddressInput - -Reusable address input component. - -- Mount: `data-component="AddressInput"` -- Props: `label: string = "Address"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AmountInput - -Reusable amount input component. - -- Mount: `data-component="AmountInput"` -- Props: `label: string = "Amount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApartmentInput - -Reusable apartment input component. - -- Mount: `data-component="ApartmentInput"` -- Props: `label: string = "Apartment"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiKeyInput - -Reusable api key input component. - -- Mount: `data-component="ApiKeyInput"` -- Props: `label: string = "ApiKey"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AttachmentPicker - -Reusable attachment picker component. - -- Mount: `data-component="AttachmentPicker"` -- Props: `label: string = "Attachment"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthenticatorCodeInput - -Reusable authenticator code input component. - -- Mount: `data-component="AuthenticatorCodeInput"` -- Props: `label: string = "AuthenticatorCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AvatarGroup - -Reusable avatar group component. - -- Mount: `data-component="AvatarGroup"` -- Props: `label: string = "Avatar"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BillingPeriodToggle - -Reusable billing period toggle component. - -- Mount: `data-component="BillingPeriodToggle"` -- Props: `label: string = "BillingPeriod"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlackoutDatePicker - -Reusable blackout date picker component. - -- Mount: `data-component="BlackoutDatePicker"` -- Props: `label: string = "BlackoutDate"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BorderRadiusPicker - -Reusable border radius picker component. - -- Mount: `data-component="BorderRadiusPicker"` -- Props: `label: string = "BorderRadius"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BrandColorPicker - -Reusable brand color picker component. - -- Mount: `data-component="BrandColorPicker"` -- Props: `label: string = "BrandColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BrandSelector - -Reusable brand selector component. - -- Mount: `data-component="BrandSelector"` -- Props: `label: string = "Brand"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BudgetSelector - -Reusable budget selector component. - -- Mount: `data-component="BudgetSelector"` -- Props: `label: string = "Budget"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BusinessHoursPicker - -Reusable business hours picker component. - -- Mount: `data-component="BusinessHoursPicker"` -- Props: `label: string = "BusinessHours"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ButtonGroup - -Reusable button group component. - -- Mount: `data-component="ButtonGroup"` -- Props: `label: string = "Button"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ButtonSelector - -Reusable button selector component. - -- Mount: `data-component="ButtonSelector"` -- Props: `label: string = "Button"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CallbackUrlInput - -Reusable callback url input component. - -- Mount: `data-component="CallbackUrlInput"` -- Props: `label: string = "CallbackUrl"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaptchaField - -Reusable captcha field component. - -- Mount: `data-component="CaptchaField"` -- Props: `label: string = "Captcha"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CardSelector - -Reusable card selector component. - -- Mount: `data-component="CardSelector"` -- Props: `label: string = "Card"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelSelector - -Reusable channel selector component. - -- Mount: `data-component="ChannelSelector"` -- Props: `label: string = "Channel"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CheckboxGroup - -Reusable checkbox group component. - -- Mount: `data-component="CheckboxGroup"` -- Props: `label: string = "Checkbox"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChipInput - -Reusable chip input component. - -- Mount: `data-component="ChipInput"` -- Props: `label: string = "Chip"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CitySelector - -Reusable city selector component. - -- Mount: `data-component="CitySelector"` -- Props: `label: string = "City"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeInput - -Reusable code input component. - -- Mount: `data-component="CodeInput"` -- Props: `label: string = "Code"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorHexInput - -Reusable color hex input component. - -- Mount: `data-component="ColorHexInput"` -- Props: `label: string = "ColorHex"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorPicker - -Reusable color picker component. - -- Mount: `data-component="ColorPicker"` -- Props: `label: string = "Color"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorSelector - -Reusable color selector component. - -- Mount: `data-component="ColorSelector"` -- Props: `label: string = "Color"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CommandSearchInput - -Reusable command search input component. - -- Mount: `data-component="CommandSearchInput"` -- Props: `label: string = "CommandSearch"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanyNameInput - -Reusable company name input component. - -- Mount: `data-component="CompanyNameInput"` -- Props: `label: string = "CompanyName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanySizeSelector - -Reusable company size selector component. - -- Mount: `data-component="CompanySizeSelector"` -- Props: `label: string = "CompanySize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComparisonDateRangePicker - -Reusable comparison date range picker component. - -- Mount: `data-component="ComparisonDateRangePicker"` -- Props: `label: string = "ComparisonDateRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConfirmPasswordInput - -Reusable confirm password input component. - -- Mount: `data-component="ConfirmPasswordInput"` -- Props: `label: string = "ConfirmPassword"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieCategoryToggle - -Reusable cookie category toggle component. - -- Mount: `data-component="CookieCategoryToggle"` -- Props: `label: string = "CookieCategory"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CoordinatesInput - -Reusable coordinates input component. - -- Mount: `data-component="CoordinatesInput"` -- Props: `label: string = "Coordinates"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CoordinatesPicker - -Reusable coordinates picker component. - -- Mount: `data-component="CoordinatesPicker"` -- Props: `label: string = "Coordinates"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CopySecretField - -Reusable copy secret field component. - -- Mount: `data-component="CopySecretField"` -- Props: `label: string = "CopySecret"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CountryCallingCodeInput - -Reusable country calling code input component. - -- Mount: `data-component="CountryCallingCodeInput"` -- Props: `label: string = "CountryCallingCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CountryCallingCodeSelector - -Reusable country calling code selector component. - -- Mount: `data-component="CountryCallingCodeSelector"` -- Props: `label: string = "CountryCallingCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CountrySelector - -Reusable country selector component. - -- Mount: `data-component="CountrySelector"` -- Props: `label: string = "Country"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CouponInput - -Reusable coupon input component. - -- Mount: `data-component="CouponInput"` -- Props: `label: string = "Coupon"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CreditAmountInput - -Reusable credit amount input component. - -- Mount: `data-component="CreditAmountInput"` -- Props: `label: string = "CreditAmount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CronInput - -Reusable cron input component. - -- Mount: `data-component="CronInput"` -- Props: `label: string = "Cron"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CurrencyInput - -Reusable currency input component. - -- Mount: `data-component="CurrencyInput"` -- Props: `label: string = "Currency"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CurrencySelector - -Reusable currency selector component. - -- Mount: `data-component="CurrencySelector"` -- Props: `label: string = "Currency"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CurrentPasswordInput - -Reusable current password input component. - -- Mount: `data-component="CurrentPasswordInput"` -- Props: `label: string = "CurrentPassword"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DateInput - -Reusable date input component. - -- Mount: `data-component="DateInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Date"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` -- Slots: None -- Events: None - -### DatePicker - -Reusable date picker component. - -- Mount: `data-component="DatePicker"` -- Props: `class: string = ""`, `id: string = "date"`, `name: string = "date"`, `label: string = "Date"`, `value: string = ""`, `min: string = ""`, `max: string = ""`, `required: boolean = false` -- Slots: None -- Events: None - -### DateRangePicker - -Reusable date range picker component. - -- Mount: `data-component="DateRangePicker"` -- Props: `class: string = ""`, `label: string = "Date range"`, `startName: string = "startDate"`, `endName: string = "endDate"` -- Slots: None -- Events: None - -### DateTimeInput - -Reusable date time input component. - -- Mount: `data-component="DateTimeInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "DateTime"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` -- Slots: None -- Events: None - -### DateTimePicker - -Reusable date time picker component. - -- Mount: `data-component="DateTimePicker"` -- Props: `id: string = "datetime-picker"`, `name: string = "datetime"`, `label: string = "Date and time"`, `value: string = ""`, `min: string = ""`, `max: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### DateTimeRangePicker - -Reusable date time range picker component. - -- Mount: `data-component="DateTimeRangePicker"` -- Props: `label: string = "DateTimeRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DecimalInput - -Reusable decimal input component. - -- Mount: `data-component="DecimalInput"` -- Props: `label: string = "Decimal"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DepartmentInput - -Reusable department input component. - -- Mount: `data-component="DepartmentInput"` -- Props: `label: string = "Department"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DiscountInput - -Reusable discount input component. - -- Mount: `data-component="DiscountInput"` -- Props: `label: string = "Discount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DisplayNameInput - -Reusable display name input component. - -- Mount: `data-component="DisplayNameInput"` -- Props: `label: string = "DisplayName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DomainInput - -Reusable domain input component. - -- Mount: `data-component="DomainInput"` -- Props: `label: string = "Domain"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DurationInput - -Reusable duration input component. - -- Mount: `data-component="DurationInput"` -- Props: `label: string = "Duration"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DurationPicker - -Reusable duration picker component. - -- Mount: `data-component="DurationPicker"` -- Props: `label: string = "Duration"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmailBodyEditor - -Reusable email body editor component. - -- Mount: `data-component="EmailBodyEditor"` -- Props: `label: string = "EmailBody"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmailInput - -Reusable email input component. - -- Mount: `data-component="EmailInput"` -- Props: `class: string = ""`, `id: string = "email"`, `name: string = "email"`, `label: string = "Email"`, `value: string = ""`, `placeholder: string = "you@company.com"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = "email"` -- Slots: None -- Events: None - -### EmojiPicker - -Reusable emoji picker component. - -- Mount: `data-component="EmojiPicker"` -- Props: `label: string = "Emoji"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnvironmentSelector - -Reusable environment selector component. - -- Mount: `data-component="EnvironmentSelector"` -- Props: `label: string = "Environment"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExpiryDateTimePicker - -Reusable expiry date time picker component. - -- Mount: `data-component="ExpiryDateTimePicker"` -- Props: `label: string = "ExpiryDateTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FaxInput - -Reusable fax input component. - -- Mount: `data-component="FaxInput"` -- Props: `label: string = "Fax"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileInput - -Reusable file input component. - -- Mount: `data-component="FileInput"` -- Props: `label: string = "File"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileSizeInput - -Reusable file size input component. - -- Mount: `data-component="FileSizeInput"` -- Props: `label: string = "FileSize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FilterSearchInput - -Reusable filter search input component. - -- Mount: `data-component="FilterSearchInput"` -- Props: `label: string = "FilterSearch"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FirstNameInput - -Reusable first name input component. - -- Mount: `data-component="FirstNameInput"` -- Props: `label: string = "FirstName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FontPicker - -Reusable font picker component. - -- Mount: `data-component="FontPicker"` -- Props: `label: string = "Font"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FontSizePicker - -Reusable font size picker component. - -- Mount: `data-component="FontSizePicker"` -- Props: `label: string = "FontSize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FontWeightPicker - -Reusable font weight picker component. - -- Mount: `data-component="FontWeightPicker"` -- Props: `label: string = "FontWeight"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormField - -Reusable form field component. - -- Mount: `data-component="FormField"` -- Props: `class: string = ""`, `label: string = "Field"`, `help: string = ""`, `error: string = ""`, `required: boolean = false` -- Slots: `default` -- Events: None - -### FormGroup - -Reusable form group component. - -- Mount: `data-component="FormGroup"` -- Props: `label: string = "Form"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GeofenceEditor - -Reusable geofence editor component. - -- Mount: `data-component="GeofenceEditor"` -- Props: `label: string = "Geofence"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GradientPicker - -Reusable gradient picker component. - -- Mount: `data-component="GradientPicker"` -- Props: `label: string = "Gradient"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GradientStopEditor - -Reusable gradient stop editor component. - -- Mount: `data-component="GradientStopEditor"` -- Props: `label: string = "GradientStop"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HexColorInput - -Reusable hex color input component. - -- Mount: `data-component="HexColorInput"` -- Props: `label: string = "HexColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HiddenField - -Reusable hidden field component. - -- Mount: `data-component="HiddenField"` -- Props: `label: string = "Hidden"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HostnameInput - -Reusable hostname input component. - -- Mount: `data-component="HostnameInput"` -- Props: `label: string = "Hostname"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HourPicker - -Reusable hour picker component. - -- Mount: `data-component="HourPicker"` -- Props: `label: string = "Hour"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HslColorInput - -Reusable hsl color input component. - -- Mount: `data-component="HslColorInput"` -- Props: `label: string = "HslColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HtmlEditor - -Reusable html editor component. - -- Mount: `data-component="HtmlEditor"` -- Props: `label: string = "Html"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IconPicker - -Reusable icon picker component. - -- Mount: `data-component="IconPicker"` -- Props: `label: string = "Icon"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IconSelector - -Reusable icon selector component. - -- Mount: `data-component="IconSelector"` -- Props: `label: string = "Icon"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IdentifierInput - -Reusable identifier input component. - -- Mount: `data-component="IdentifierInput"` -- Props: `label: string = "Identifier"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageEditor - -Reusable image editor component. - -- Mount: `data-component="ImageEditor"` -- Props: `label: string = "Image"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageSelector - -Reusable image selector component. - -- Mount: `data-component="ImageSelector"` -- Props: `label: string = "Image"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IndustrySelector - -Reusable industry selector component. - -- Mount: `data-component="IndustrySelector"` -- Props: `label: string = "Industry"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InputGroup - -Reusable input group component. - -- Mount: `data-component="InputGroup"` -- Props: `label: string = "Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IntegerInput - -Reusable integer input component. - -- Mount: `data-component="IntegerInput"` -- Props: `label: string = "Integer"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IpAddressInput - -Reusable ip address input component. - -- Mount: `data-component="IpAddressInput"` -- Props: `label: string = "IpAddress"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JobTitleInput - -Reusable job title input component. - -- Mount: `data-component="JobTitleInput"` -- Props: `label: string = "JobTitle"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JsonInput - -Reusable json input component. - -- Mount: `data-component="JsonInput"` -- Props: `label: string = "Json"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LanguageSelector - -Reusable language selector component. - -- Mount: `data-component="LanguageSelector"` -- Props: `label: string = "Language"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LastNameInput - -Reusable last name input component. - -- Mount: `data-component="LastNameInput"` -- Props: `label: string = "LastName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LatitudeInput - -Reusable latitude input component. - -- Mount: `data-component="LatitudeInput"` -- Props: `label: string = "Latitude"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalLanguageSelector - -Reusable legal language selector component. - -- Mount: `data-component="LegalLanguageSelector"` -- Props: `label: string = "LegalLanguage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalRegionSelector - -Reusable legal region selector component. - -- Mount: `data-component="LegalRegionSelector"` -- Props: `label: string = "LegalRegion"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LetterSpacingPicker - -Reusable letter spacing picker component. - -- Mount: `data-component="LetterSpacingPicker"` -- Props: `label: string = "LetterSpacing"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LicenseKeyInput - -Reusable license key input component. - -- Mount: `data-component="LicenseKeyInput"` -- Props: `label: string = "LicenseKey"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LineHeightPicker - -Reusable line height picker component. - -- Mount: `data-component="LineHeightPicker"` -- Props: `label: string = "LineHeight"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LocaleSelector - -Reusable locale selector component. - -- Mount: `data-component="LocaleSelector"` -- Props: `label: string = "Locale"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LocationPicker - -Reusable location picker component. - -- Mount: `data-component="LocationPicker"` -- Props: `label: string = "Location"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LongitudeInput - -Reusable longitude input component. - -- Mount: `data-component="LongitudeInput"` -- Props: `label: string = "Longitude"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceWindowPicker - -Reusable maintenance window picker component. - -- Mount: `data-component="MaintenanceWindowPicker"` -- Props: `label: string = "MaintenanceWindow"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MapPicker - -Reusable map picker component. - -- Mount: `data-component="MapPicker"` -- Props: `label: string = "Map"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MarkdownEditor - -Reusable markdown editor component. - -- Mount: `data-component="MarkdownEditor"` -- Props: `label: string = "Markdown"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaskedSecretField - -Reusable masked secret field component. - -- Mount: `data-component="MaskedSecretField"` -- Props: `label: string = "MaskedSecret"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MentionInput - -Reusable mention input component. - -- Mount: `data-component="MentionInput"` -- Props: `label: string = "Mention"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageLimitInput - -Reusable message limit input component. - -- Mount: `data-component="MessageLimitInput"` -- Props: `label: string = "MessageLimit"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MinutePicker - -Reusable minute picker component. - -- Mount: `data-component="MinutePicker"` -- Props: `label: string = "Minute"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileInput - -Reusable mobile input component. - -- Mount: `data-component="MobileInput"` -- Props: `label: string = "Mobile"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MonthlyVolumeSelector - -Reusable monthly volume selector component. - -- Mount: `data-component="MonthlyVolumeSelector"` -- Props: `label: string = "MonthlyVolume"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MonthPicker - -Reusable month picker component. - -- Mount: `data-component="MonthPicker"` -- Props: `label: string = "Month"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MonthYearPicker - -Reusable month year picker component. - -- Mount: `data-component="MonthYearPicker"` -- Props: `label: string = "MonthYear"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MultipleEmailInput - -Reusable multiple email input component. - -- Mount: `data-component="MultipleEmailInput"` -- Props: `label: string = "MultipleEmail"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NameInput - -Reusable name input component. - -- Mount: `data-component="NameInput"` -- Props: `label: string = "Name"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewPasswordInput - -Reusable new password input component. - -- Mount: `data-component="NewPasswordInput"` -- Props: `label: string = "NewPassword"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NumberInput - -Reusable number input component. - -- Mount: `data-component="NumberInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Number"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="AdvancedSelect"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: string = []`, `options: string = []`, `groups: string = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""` - Slots: None -- Events: None - -### OrganizationSelector - -Reusable organization selector component. - -- Mount: `data-component="OrganizationSelector"` -- Props: `label: string = "Organization"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None +- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` -### OtpInput +### ComboBox -Reusable otp input component. +Editable autocomplete combobox with local and remote suggestions. -- Mount: `data-component="OtpInput"` -- Props: `class: string = ""`, `name: string = "otp"`, `length: number = 6`, `label: string = "Verification code"` +- Mount: `data-component="ComboBox"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `groups: string = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""` - Slots: None -- Events: None +- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` -### PasswordInput +### CopyMarkup -Reusable password input component. +Theme-aware, responsive copy markup component. -- Mount: `data-component="PasswordInput"` -- Props: `class: string = ""`, `id: string = "password"`, `name: string = "password"`, `label: string = "Password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = "current-password"`, `revealable: boolean = true` +- Mount: `data-component="CopyMarkup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `click` - -### PasswordVisibilityToggle - -Reusable password visibility toggle component. - -- Mount: `data-component="PasswordVisibilityToggle"` -- Props: `label: string = "PasswordVisibility"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PathInput - -Reusable path input component. - -- Mount: `data-component="PathInput"` -- Props: `label: string = "Path"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PercentageInput - -Reusable percentage input component. - -- Mount: `data-component="PercentageInput"` -- Props: `label: string = "Percentage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PermissionSelector - -Reusable permission selector component. - -- Mount: `data-component="PermissionSelector"` -- Props: `label: string = "Permission"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` - Events: None -### PhoneInput +### InputNumber -Reusable phone input component. +Theme-aware, responsive input number component. -- Mount: `data-component="PhoneInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Phone"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="InputNumber"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input Number"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "number"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None ### PinInput -Reusable pin input component. +Secure multi-cell PIN and verification-code input with regex and paste support. - Mount: `data-component="PinInput"` -- Props: `label: string = "Pin"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Verification code"`, `name: string = "pin"`, `value: string = ""`, `length: number = 4`, `pattern: string = "[0-9]"`, `type: string = "text"`, `inputMode: string = "numeric"`, `placeholder: string = "○"`, `autocomplete: string = "one-time-code"`, `masked: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `autoFocus: boolean = false`, `autoSubmit: boolean = false`, `allowPaste: boolean = true`, `clearable: boolean = true`, `clearLabel: string = "Clear code"`, `separator: string = ""`, `groupSize: number = 0`, `helpText: string = ""`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` +- Slots: None +- Events: `input`, `change`, `complete`, `paste`, `clear`, `error` -### PlainTextEditor +### SearchBox -Reusable plain text editor component. +Theme-aware, responsive search box component. -- Mount: `data-component="PlainTextEditor"` -- Props: `label: string = "PlainText"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlanSelector - -Reusable plan selector component. - -- Mount: `data-component="PlanSelector"` -- Props: `label: string = "Plan"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PortInput - -Reusable port input component. - -- Mount: `data-component="PortInput"` -- Props: `label: string = "Port"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PortNumberInput - -Reusable port number input component. - -- Mount: `data-component="PortNumberInput"` -- Props: `label: string = "PortNumber"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PositiveNumberInput - -Reusable positive number input component. - -- Mount: `data-component="PositiveNumberInput"` -- Props: `label: string = "PositiveNumber"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PostalCodeInput - -Reusable postal code input component. - -- Mount: `data-component="PostalCodeInput"` -- Props: `label: string = "PostalCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PresetDateRangePicker - -Reusable preset date range picker component. - -- Mount: `data-component="PresetDateRangePicker"` -- Props: `label: string = "PresetDateRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PriceInput - -Reusable price input component. - -- Mount: `data-component="PriceInput"` -- Props: `label: string = "Price"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingFeatureGroup - -Reusable pricing feature group component. - -- Mount: `data-component="PricingFeatureGroup"` -- Props: `label: string = "PricingFeature"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingToggle - -Reusable pricing toggle component. - -- Mount: `data-component="PricingToggle"` -- Props: `label: string = "Pricing"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrioritySelector - -Reusable priority selector component. - -- Mount: `data-component="PrioritySelector"` -- Props: `label: string = "Priority"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductSelector - -Reusable product selector component. - -- Mount: `data-component="ProductSelector"` -- Props: `label: string = "Product"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProjectSelector - -Reusable project selector component. - -- Mount: `data-component="ProjectSelector"` -- Props: `label: string = "Project"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PromoCodeInput - -Reusable promo code input component. - -- Mount: `data-component="PromoCodeInput"` -- Props: `label: string = "PromoCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProviderSelector - -Reusable provider selector component. - -- Mount: `data-component="ProviderSelector"` -- Props: `label: string = "Provider"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PublishDateTimePicker - -Reusable publish date time picker component. - -- Mount: `data-component="PublishDateTimePicker"` -- Props: `label: string = "PublishDateTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PushNotificationEditor - -Reusable push notification editor component. - -- Mount: `data-component="PushNotificationEditor"` -- Props: `label: string = "PushNotification"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuantityInput - -Reusable quantity input component. - -- Mount: `data-component="QuantityInput"` -- Props: `label: string = "Quantity"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuietHoursPicker - -Reusable quiet hours picker component. - -- Mount: `data-component="QuietHoursPicker"` -- Props: `label: string = "Quiet hours"`, `startName: string = "quietStart"`, `endName: string = "quietEnd"`, `start: string = "22:00"`, `end: string = "08:00"`, `timezone: string = "UTC"`, `disabled: boolean = false`, `class: string = ""` +- Mount: `data-component="SearchBox"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None -### RadioGroup +### StrongPassword -Reusable radio group component. +Theme-aware, responsive strong password component. -- Mount: `data-component="RadioGroup"` -- Props: `class: string = ""`, `label: string = "Choose one"`, `name: string = "choice"` -- Slots: `default` -- Events: None +- Mount: `data-component="StrongPassword"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` +- Slots: None +- Events: `input`, `change`, `strength` -### RangeInput +### ToggleCount -Reusable range input component. +Theme-aware, responsive toggle count component. -- Mount: `data-component="RangeInput"` -- Props: `label: string = "Range"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RateLimitInput - -Reusable rate limit input component. - -- Mount: `data-component="RateLimitInput"` -- Props: `label: string = "RateLimit"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecipientSelector - -Reusable recipient selector component. - -- Mount: `data-component="RecipientSelector"` -- Props: `label: string = "Recipient"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecoveryCodeInput - -Reusable recovery code input component. - -- Mount: `data-component="RecoveryCodeInput"` -- Props: `label: string = "RecoveryCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecurringSchedulePicker - -Reusable recurring schedule picker component. - -- Mount: `data-component="RecurringSchedulePicker"` -- Props: `id: string = "recurring-schedule"`, `name: string = "recurrence"`, `label: string = "Repeat"`, `value: string = "none"`, `disabled: boolean = false`, `class: string = ""` +- Mount: `data-component="ToggleCount"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Toggle Count"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None -### RedirectUriInput +### TogglePassword -Reusable redirect uri input component. +Accessible password field with optional show and hide controls. -- Mount: `data-component="RedirectUriInput"` -- Props: `label: string = "RedirectUri"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="TogglePassword"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: string = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""` +- Slots: None +- Events: `input`, `change`, `toggle` + +## Base + +### Accordion + +Theme-aware, responsive accordion component. + +- Mount: `data-component="Accordion"` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""` - Slots: `default` - Events: None -### ReferenceInput +### Alert -Reusable reference input component. +Theme-aware, responsive alert component. -- Mount: `data-component="ReferenceInput"` -- Props: `label: string = "Reference"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Alert"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RegexInput +### Avatar -Reusable regex input component. +Theme-aware, responsive avatar component. -- Mount: `data-component="RegexInput"` -- Props: `label: string = "Regex"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Avatar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RegionSelector +### AvatarGroup -Reusable region selector component. +Theme-aware, responsive avatar group component. -- Mount: `data-component="RegionSelector"` -- Props: `label: string = "Region"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="AvatarGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RetryCountInput +### Badge -Reusable retry count input component. +Theme-aware, responsive badge component. -- Mount: `data-component="RetryCountInput"` -- Props: `label: string = "RetryCount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Badge"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Badge"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RgbColorInput +### Blockquote -Reusable rgb color input component. +Theme-aware, responsive blockquote component. -- Mount: `data-component="RgbColorInput"` -- Props: `label: string = "RgbColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Blockquote"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Blockquote"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RichTextEditor +### Button -Reusable rich text editor component. +Theme-aware, responsive button component. -- Mount: `data-component="RichTextEditor"` -- Props: `label: string = "RichText"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Button"` +- Props: `label: string = "Button"`, `loadingLabel: string = "Loading…"`, `description: string = ""`, `as: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `type: string = "button"`, `variant: string = "default"`, `color: string = "primary"`, `size: string = "default"`, `disabled: boolean = false`, `loading: boolean = false`, `pill: boolean = false`, `fullWidth: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `ariaLabel: string = ""`, `ariaPressed: string = ""`, `ariaExpanded: string = ""`, `ariaControls: string = ""`, `title: string = ""`, `autofocus: boolean = false`, `controlClass: string = ""`, `class: string = ""` - Slots: `default` - Events: None -### RichTextInput +### ButtonGroup -Reusable rich text input component. +Theme-aware, responsive button group component. -- Mount: `data-component="RichTextInput"` -- Props: `label: string = "RichText"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="ButtonGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Button Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RoleSelector +### Card -Reusable role selector component. +Theme-aware, responsive card component. -- Mount: `data-component="RoleSelector"` -- Props: `label: string = "Role"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Card"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Card"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RollingDateRangePicker +### Carousel -Reusable rolling date range picker component. +Theme-aware, responsive carousel component. -- Mount: `data-component="RollingDateRangePicker"` -- Props: `label: string = "RollingDateRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Carousel"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Carousel"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SavedFilterSelector +### ChatBubble -Reusable saved filter selector component. +Theme-aware, responsive chat bubble component. -- Mount: `data-component="SavedFilterSelector"` -- Props: `label: string = "SavedFilter"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="ChatBubble"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chat Bubble"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### ScheduledDateTimePicker +### Collapse -Reusable scheduled date time picker component. +Theme-aware, responsive collapse component. -- Mount: `data-component="ScheduledDateTimePicker"` -- Props: `label: string = "ScheduledDateTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Collapse"` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""` - Slots: `default` - Events: None -### ScheduleMessagePicker +### DatePicker -Reusable schedule message picker component. +Theme-aware, responsive date picker component. -- Mount: `data-component="ScheduleMessagePicker"` -- Props: `label: string = "ScheduleMessage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SchedulePicker - -Reusable schedule picker component. - -- Mount: `data-component="SchedulePicker"` -- Props: `class: string = ""`, `label: string = "Schedule"` +- Mount: `data-component="DatePicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None -### SdkLanguageSelector +### DeviceFrame -Reusable sdk language selector component. +Theme-aware, responsive device frame component. -- Mount: `data-component="SdkLanguageSelector"` -- Props: `label: string = "SdkLanguage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="DeviceFrame"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SearchInput +### FileUploadProgress -Reusable search input component. +Theme-aware, responsive file upload progress component. -- Mount: `data-component="SearchInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Search"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="FileUploadProgress"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""` - Slots: None - Events: None -### SecondPicker +### LegendIndicator -Reusable second picker component. +Theme-aware, responsive legend indicator component. -- Mount: `data-component="SecondPicker"` -- Props: `label: string = "Second"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="LegendIndicator"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SecretInput +### List -Reusable secret input component. +Theme-aware, responsive list component. -- Mount: `data-component="SecretInput"` -- Props: `label: string = "Secret"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="List"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SenderIdInput +### ListGroup -Reusable sender id input component. +Theme-aware, responsive list group component. -- Mount: `data-component="SenderIdInput"` -- Props: `label: string = "SenderId"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="ListGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SeveritySelector +### Marquee -Reusable severity selector component. +Theme-aware, responsive marquee component. -- Mount: `data-component="SeveritySelector"` -- Props: `label: string = "Severity"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Marquee"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### ShadowPicker +### Progress -Reusable shadow picker component. +Theme-aware, responsive progress component. -- Mount: `data-component="ShadowPicker"` -- Props: `label: string = "Shadow"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SlugInput - -Reusable slug input component. - -- Mount: `data-component="SlugInput"` -- Props: `label: string = "Slug"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmsMessageEditor - -Reusable sms message editor component. - -- Mount: `data-component="SmsMessageEditor"` -- Props: `label: string = "SmsMessage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StateSelector - -Reusable state selector component. - -- Mount: `data-component="StateSelector"` -- Props: `label: string = "State"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusSelector - -Reusable status selector component. - -- Mount: `data-component="StatusSelector"` -- Props: `label: string = "Status"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StepperInput - -Reusable stepper input component. - -- Mount: `data-component="StepperInput"` -- Props: `label: string = "Stepper"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StickerPicker - -Reusable sticker picker component. - -- Mount: `data-component="StickerPicker"` -- Props: `label: string = "Sticker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StreetAddressInput - -Reusable street address input component. - -- Mount: `data-component="StreetAddressInput"` -- Props: `label: string = "StreetAddress"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SubdomainInput - -Reusable subdomain input component. - -- Mount: `data-component="SubdomainInput"` -- Props: `label: string = "Subdomain"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SubjectInput - -Reusable subject input component. - -- Mount: `data-component="SubjectInput"` -- Props: `label: string = "Subject"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TagInput - -Reusable tag input component. - -- Mount: `data-component="TagInput"` -- Props: `label: string = "Tag"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TaxRateInput - -Reusable tax rate input component. - -- Mount: `data-component="TaxRateInput"` -- Props: `label: string = "TaxRate"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TeamSizeSelector - -Reusable team size selector component. - -- Mount: `data-component="TeamSizeSelector"` -- Props: `label: string = "TeamSize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TemplateSelector - -Reusable template selector component. - -- Mount: `data-component="TemplateSelector"` -- Props: `label: string = "Template"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TemplateVariableInput - -Reusable template variable input component. - -- Mount: `data-component="TemplateVariableInput"` -- Props: `label: string = "TemplateVariable"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TextInput - -Reusable text input component. - -- Mount: `data-component="TextInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Text"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="Progress"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""` - Slots: None - Events: None -### ThemeColorPicker +### Rating -Reusable theme color picker component. +Theme-aware, responsive rating component. -- Mount: `data-component="ThemeColorPicker"` -- Props: `label: string = "ThemeColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Rating"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### TimeInput +### Skeleton -Reusable time input component. +Theme-aware, responsive skeleton component. -- Mount: `data-component="TimeInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Time"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="Skeleton"` +- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None - Events: None -### TimeoutInput +### Spinner -Reusable timeout input component. +Theme-aware, responsive spinner component. -- Mount: `data-component="TimeoutInput"` -- Props: `label: string = "Timeout"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimePicker - -Reusable time picker component. - -- Mount: `data-component="TimePicker"` -- Props: `id: string = "time-picker"`, `name: string = "time"`, `label: string = "Time"`, `value: string = ""`, `min: string = ""`, `max: string = ""`, `step: number = 60`, `required: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Mount: `data-component="Spinner"` +- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None - Events: None -### TimeRangePicker +### StyledIcon -Reusable time range picker component. +Theme-aware, responsive styled icon component. -- Mount: `data-component="TimeRangePicker"` -- Props: `label: string = "TimeRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimezoneAwareTimePicker - -Reusable timezone aware time picker component. - -- Mount: `data-component="TimezoneAwareTimePicker"` -- Props: `label: string = "TimezoneAwareTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimezoneSelector - -Reusable timezone selector component. - -- Mount: `data-component="TimezoneSelector"` -- Props: `class: string = ""`, `id: string = "timezone"`, `name: string = "timezone"`, `label: string = "Timezone"` -- Slots: None -- Events: None - -### Toggle - -Reusable toggle component. - -- Mount: `data-component="Toggle"` -- Props: `label: string = ""`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ToggleGroup - -Reusable toggle group component. - -- Mount: `data-component="ToggleGroup"` -- Props: `label: string = "Toggle"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TokenInput - -Reusable token input component. - -- Mount: `data-component="TokenInput"` -- Props: `label: string = "Token"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UrlInput - -Reusable url input component. - -- Mount: `data-component="UrlInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Url"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` -- Slots: None -- Events: None - -### UseCaseSelector - -Reusable use case selector component. - -- Mount: `data-component="UseCaseSelector"` -- Props: `label: string = "UseCase"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UsernameInput - -Reusable username input component. - -- Mount: `data-component="UsernameInput"` -- Props: `label: string = "Username"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VerificationCodeInput - -Reusable verification code input component. - -- Mount: `data-component="VerificationCodeInput"` -- Props: `label: string = "VerificationCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VersionSelector - -Reusable version selector component. - -- Mount: `data-component="VersionSelector"` -- Props: `label: string = "Version"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VoiceScriptEditor - -Reusable voice script editor component. - -- Mount: `data-component="VoiceScriptEditor"` -- Props: `label: string = "VoiceScript"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VolumeInput - -Reusable volume input component. - -- Mount: `data-component="VolumeInput"` -- Props: `label: string = "Volume"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebhookUrlInput - -Reusable webhook url input component. - -- Mount: `data-component="WebhookUrlInput"` -- Props: `label: string = "WebhookUrl"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WhatsAppNumberInput - -Reusable whats app number input component. - -- Mount: `data-component="WhatsAppNumberInput"` -- Props: `label: string = "WhatsAppNumber"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WhatsAppTemplateEditor - -Reusable whats app template editor component. - -- Mount: `data-component="WhatsAppTemplateEditor"` -- Props: `label: string = "WhatsAppTemplate"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkspaceSelector - -Reusable workspace selector component. - -- Mount: `data-component="WorkspaceSelector"` -- Props: `label: string = "Workspace"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### YearPicker - -Reusable year picker component. - -- Mount: `data-component="YearPicker"` -- Props: `label: string = "Year"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -## Layout - -### AnchorNavigation - -Reusable anchor navigation component. - -- Mount: `data-component="AnchorNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AppHeader - -Reusable app header component. - -- Mount: `data-component="AppHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArchitectureSection - -Reusable architecture section component. - -- Mount: `data-component="ArchitectureSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleHero - -Reusable article hero component. - -- Mount: `data-component="ArticleHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleLayout - -Reusable article layout component. - -- Mount: `data-component="ArticleLayout"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticlePageShell - -Reusable article page shell component. - -- Mount: `data-component="ArticlePageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### BottomNavigation - -Reusable bottom navigation component. - -- Mount: `data-component="BottomNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### BrowserFrame - -Reusable browser frame component. - -- Mount: `data-component="BrowserFrame"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CalendarHeader - -Reusable calendar header component. - -- Mount: `data-component="CalendarHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CalendarNavigation - -Reusable calendar navigation component. - -- Mount: `data-component="CalendarNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaseStudyHero - -Reusable case study hero component. - -- Mount: `data-component="CaseStudyHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CenteredHero - -Reusable centered hero component. - -- Mount: `data-component="CenteredHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CenteredSectionHeader - -Reusable centered section header component. - -- Mount: `data-component="CenteredSectionHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChallengeSection - -Reusable challenge section component. - -- Mount: `data-component="ChallengeSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeHeader - -Reusable code header component. - -- Mount: `data-component="CodeHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanyHero - -Reusable company hero component. - -- Mount: `data-component="CompanyHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanyPageShell - -Reusable company page shell component. - -- Mount: `data-component="CompanyPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactHero - -Reusable contact hero component. - -- Mount: `data-component="ContactHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactPageShell - -Reusable contact page shell component. - -- Mount: `data-component="ContactPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CTASection - -Reusable c t a section component. - -- Mount: `data-component="CTASection"` -- Props: `class: string = ""`, `eyebrow: string = "Ready?"`, `title: string = "Start building today"`, `description: string = ""`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `secondaryLabel: string = "Contact sales"`, `secondaryHref: string = "#"` -- Slots: None -- Events: None - -### DesktopNavigation - -Reusable desktop navigation component. - -- Mount: `data-component="DesktopNavigation"` -- Props: `label: string = "Primary navigation"`, `items: string = []`, `class: string = ""` -- Slots: None -- Events: None - -### DeveloperHero - -Reusable developer hero component. - -- Mount: `data-component="DeveloperHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeveloperPageShell - -Reusable developer page shell component. - -- Mount: `data-component="DeveloperPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DropdownNavigation - -Reusable dropdown navigation component. - -- Mount: `data-component="DropdownNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnterpriseHero - -Reusable enterprise hero component. - -- Mount: `data-component="EnterpriseHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorHero - -Reusable error hero component. - -- Mount: `data-component="ErrorHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorPageShell - -Reusable error page shell component. - -- Mount: `data-component="ErrorPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureDetailsPanel - -Reusable feature details panel component. - -- Mount: `data-component="FeatureDetailsPanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormSection - -Reusable form section component. - -- Mount: `data-component="FormSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Header - -Reusable header component. - -- Mount: `data-component="Header"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Hero - -Reusable hero component. - -- Mount: `data-component="Hero"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Build faster with WRNexusJS"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `secondaryLabel: string = "Learn more"`, `secondaryHref: string = "#"`, `align: string = "center"` -- Slots: `default` -- Events: None - -### HeroCodePanel - -Reusable hero code panel component. - -- Mount: `data-component="HeroCodePanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### InsetPanel - -Reusable inset panel component. - -- Mount: `data-component="InsetPanel"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### LegalDocumentHeader - -Reusable legal document header component. - -- Mount: `data-component="LegalDocumentHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalDocumentLayout - -Reusable legal document layout component. - -- Mount: `data-component="LegalDocumentLayout"` -- Props: `class: string = ""`, `title: string = "Legal document"`, `effectiveDate: string = ""`, `updatedDate: string = ""` -- Slots: `toc`, `default` -- Events: None - -### LegalHero - -Reusable legal hero component. - -- Mount: `data-component="LegalHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalPageShell - -Reusable legal page shell component. - -- Mount: `data-component="LegalPageShell"` -- Props: `class: string = ""` -- Slots: `navigation`, `default` -- Events: None - -### LegalSection - -Reusable legal section component. - -- Mount: `data-component="LegalSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MarketingPageShell - -Reusable marketing page shell component. - -- Mount: `data-component="MarketingPageShell"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### MarketingSectionHeader - -Reusable marketing section header component. - -- Mount: `data-component="MarketingSectionHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MissionSection - -Reusable mission section component. - -- Mount: `data-component="MissionSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileDeviceFrame - -Reusable mobile device frame component. - -- Mount: `data-component="MobileDeviceFrame"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileNavigation - -Reusable mobile navigation component. - -- Mount: `data-component="MobileNavigation"` -- Props: `label: string = "Menu"`, `closeLabel: string = "Close menu"`, `items: string = []`, `class: string = ""` -- Slots: None -- Events: `click` - -### Navigation - -Reusable navigation component. - -- Mount: `data-component="Navigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Panel - -Reusable panel component. - -- Mount: `data-component="Panel"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### PreviousNextNavigation - -Reusable previous next navigation component. - -- Mount: `data-component="PreviousNextNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingHero - -Reusable pricing hero component. - -- Mount: `data-component="PricingHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductCategorySection - -Reusable product category section component. - -- Mount: `data-component="ProductCategorySection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductHero - -Reusable product hero component. - -- Mount: `data-component="ProductHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductPageShell - -Reusable product page shell component. - -- Mount: `data-component="ProductPageShell"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### PublicHeader - -Reusable public header component. - -- Mount: `data-component="PublicHeader"` -- Props: `class: string = ""`, `homeHref: string = "/"`, `brandName: string = "WrNexus"`, `brandTagline: string = "Identity Cloud"`, `brandAriaLabel: string = "WrNexus home"`, `brandIcon: string = "icon-[lucide--blocks]"`, `pricingLabel: string = "Pricing"`, `pricingHref: string = "/pricing"`, `statusLabel: string = "All systems operational"`, `statusHref: string = "/status"`, `signInLabel: string = "Sign in"`, `signInHref: string = "/sign-in"`, `primaryLabel: string = "Start free"`, `primaryHref: string = "/sign-up"`, `showStatus: boolean = true`, `showThemeToggle: boolean = true`, `showSignIn: boolean = true`, `showPrimaryAction: boolean = true`, `productLabel: string = "Product"`, `solutionsLabel: string = "Solutions"`, `developersLabel: string = "Developers"`, `resourcesLabel: string = "Resources"`, `navigationAriaLabel: string = "Main navigation"`, `themeToggleLabel: string = "Toggle color theme"`, `mobileMenuOpenLabel: string = "Open navigation menu"`, `mobileMenuCloseLabel: string = "Close navigation menu"`, `navigationItems: PublicHeaderNavigationItem[] = []`, `actionItems: PublicHeaderActionItem[] = []`, `showNavigation: boolean = true`, `showMobileThemeToggle: boolean = true` -- Slots: `navigation`, `actions` -- Events: `click` - -### PublicPageShell - -Reusable public page shell component. - -- Mount: `data-component="PublicPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResizablePanel - -Reusable resizable panel component. - -- Mount: `data-component="ResizablePanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourcePageShell - -Reusable resource page shell component. - -- Mount: `data-component="ResourcePageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResultsSection - -Reusable results section component. - -- Mount: `data-component="ResultsSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ScreenshotFrame - -Reusable screenshot frame component. - -- Mount: `data-component="ScreenshotFrame"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Section - -Reusable section component. - -- Mount: `data-component="Section"` -- Props: `id: string = ""`, `size: string = "default"`, `surface: string = "default"`, `className: string = ""` -- Slots: `default` -- Events: None - -### SectionHeader - -Reusable section header component. - -- Mount: `data-component="SectionHeader"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Section title"`, `description: string = ""`, `align: string = "left"` -- Slots: `default` -- Events: None - -### SecurityHero - -Reusable security hero component. - -- Mount: `data-component="SecurityHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SidebarLayout - -Reusable sidebar layout component. - -- Mount: `data-component="SidebarLayout"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SidePanel - -Reusable side panel component. - -- Mount: `data-component="SidePanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionHero - -Reusable solution hero component. - -- Mount: `data-component="SolutionHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionPageShell - -Reusable solution page shell component. - -- Mount: `data-component="SolutionPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionSection - -Reusable solution section component. - -- Mount: `data-component="SolutionSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitHero - -Reusable split hero component. - -- Mount: `data-component="SplitHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitLayout - -Reusable split layout component. - -- Mount: `data-component="SplitLayout"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SplitSectionHeader - -Reusable split section header component. - -- Mount: `data-component="SplitSectionHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusPageShell - -Reusable status page shell component. - -- Mount: `data-component="StatusPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StepNavigation - -Reusable step navigation component. - -- Mount: `data-component="StepNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StickyLayout - -Reusable sticky layout component. - -- Mount: `data-component="StickyLayout"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### TableHeader - -Reusable table header component. - -- Mount: `data-component="TableHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VisionSection - -Reusable vision section component. - -- Mount: `data-component="VisionSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### WizardHeader - -Reusable wizard header component. - -- Mount: `data-component="WizardHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### WizardNavigation - -Reusable wizard navigation component. - -- Mount: `data-component="WizardNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -## Overlays - -### AccessibleDialog - -Reusable accessible dialog component. - -- Mount: `data-component="AccessibleDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleMenu - -Reusable accessible menu component. - -- Mount: `data-component="AccessibleMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccountMenu - -Reusable account menu component. - -- Mount: `data-component="AccountMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ActionMenu - -Reusable action menu component. - -- Mount: `data-component="ActionMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AlertDialog - -Reusable alert dialog component. - -- Mount: `data-component="AlertDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiKeyCreateDialog - -Reusable api key create dialog component. - -- Mount: `data-component="ApiKeyCreateDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CommandMenu - -Reusable command menu component. - -- Mount: `data-component="CommandMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConfirmationDialog - -Reusable confirmation dialog component. - -- Mount: `data-component="ConfirmationDialog"` -- Props: `title: string = "Confirm action"`, `description: string = "Are you sure you want to continue?"`, `confirmLabel: string = "Confirm"`, `cancelLabel: string = "Cancel"`, `danger: boolean = false`, `open: boolean = false`, `class: string = ""` -- Slots: `confirm` -- Events: `click` - -### ContextMenu - -Reusable context menu component. - -- Mount: `data-component="ContextMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookiePreferencesDialog - -Reusable cookie preferences dialog component. - -- Mount: `data-component="CookiePreferencesDialog"` -- Props: `title: string = "Cookie preferences"`, `description: string = "Choose which optional cookies you allow. Essential cookies are always enabled."`, `saveLabel: string = "Save preferences"`, `acceptLabel: string = "Accept all"`, `rejectLabel: string = "Reject optional"`, `open: boolean = false`, `class: string = ""` -- Slots: None -- Events: `change`, `click` - -### DeleteConfirmationDialog - -Reusable delete confirmation dialog component. - -- Mount: `data-component="DeleteConfirmationDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DevelopersMenu - -Reusable developers menu component. - -- Mount: `data-component="DevelopersMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DropdownMenu - -Reusable dropdown menu component. - -- Mount: `data-component="DropdownMenu"` -- Props: `class: string = ""`, `label: string = "Menu"` -- Slots: `default` -- Events: `click` - -### FilterMenu - -Reusable filter menu component. - -- Mount: `data-component="FilterMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormDialog - -Reusable form dialog component. - -- Mount: `data-component="FormDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FullscreenDialog - -Reusable fullscreen dialog component. - -- Mount: `data-component="FullscreenDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImagePreviewDialog - -Reusable image preview dialog component. - -- Mount: `data-component="ImagePreviewDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Lightbox - -Reusable lightbox component. - -- Mount: `data-component="Lightbox"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LogoutDialog - -Reusable logout dialog component. - -- Mount: `data-component="LogoutDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MegaMenu - -Reusable mega menu component. - -- Mount: `data-component="MegaMenu"` -- Props: `label: string = "Explore"`, `sections: string = []`, `class: string = ""` -- Slots: None -- Events: `click` - -### NavigationMegaMenu - -Reusable navigation mega menu component. - -- Mount: `data-component="NavigationMegaMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Popover - -Reusable popover component. - -- Mount: `data-component="Popover"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductsMegaMenu - -Reusable products mega menu component. - -- Mount: `data-component="ProductsMegaMenu"` -- Props: `label: string = "Products"`, `sections: string = []`, `class: string = ""` -- Slots: None -- Events: None - -### PromptDialog - -Reusable prompt dialog component. - -- Mount: `data-component="PromptDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourcesMegaMenu - -Reusable resources mega menu component. - -- Mount: `data-component="ResourcesMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### SearchDialog - -Reusable search dialog component. - -- Mount: `data-component="SearchDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecretRevealDialog - -Reusable secret reveal dialog component. - -- Mount: `data-component="SecretRevealDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SessionExpiredDialog - -Reusable session expired dialog component. - -- Mount: `data-component="SessionExpiredDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionsMegaMenu - -Reusable solutions mega menu component. - -- Mount: `data-component="SolutionsMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### StepUpAuthenticationDialog - -Reusable step up authentication dialog component. - -- Mount: `data-component="StepUpAuthenticationDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TestMessageDialog - -Reusable test message dialog component. - -- Mount: `data-component="TestMessageDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### UnsavedChangesDialog - -Reusable unsaved changes dialog component. - -- Mount: `data-component="UnsavedChangesDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VideoPreviewDialog - -Reusable video preview dialog component. - -- Mount: `data-component="VideoPreviewDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -## Visualization - -### AreaChart - -Reusable area chart component. - -- Mount: `data-component="AreaChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### BarChart - -Reusable bar chart component. - -- Mount: `data-component="BarChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CampaignProgress - -Reusable campaign progress component. - -- Mount: `data-component="CampaignProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelComparisonChart - -Reusable channel comparison chart component. - -- Mount: `data-component="ChannelComparisonChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelFallbackDiagram - -Reusable channel fallback diagram component. - -- Mount: `data-component="ChannelFallbackDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelFlow - -Reusable channel flow component. - -- Mount: `data-component="ChannelFlow"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### ChecklistProgress - -Reusable checklist progress component. - -- Mount: `data-component="ChecklistProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CircularProgress - -Reusable circular progress component. - -- Mount: `data-component="CircularProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CohortChart - -Reusable cohort chart component. - -- Mount: `data-component="CohortChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompletionMeter - -Reusable completion meter component. - -- Mount: `data-component="CompletionMeter"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConversionChart - -Reusable conversion chart component. - -- Mount: `data-component="ConversionChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CostBreakdownChart - -Reusable cost breakdown chart component. - -- Mount: `data-component="CostBreakdownChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeliveryStatusChart - -Reusable delivery status chart component. - -- Mount: `data-component="DeliveryStatusChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeliveryStatusTimeline - -Reusable delivery status timeline component. - -- Mount: `data-component="DeliveryStatusTimeline"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DonutChart - -Reusable donut chart component. - -- Mount: `data-component="DonutChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### EncryptionDiagram - -Reusable encryption diagram component. - -- Mount: `data-component="EncryptionDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExportProgress - -Reusable export progress component. - -- Mount: `data-component="ExportProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FallbackRouteDiagram - -Reusable fallback route diagram component. - -- Mount: `data-component="FallbackRouteDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureTimeline - -Reusable feature timeline component. - -- Mount: `data-component="FeatureTimeline"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormProgress - -Reusable form progress component. - -- Mount: `data-component="FormProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FunnelChart - -Reusable funnel chart component. - -- Mount: `data-component="FunnelChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### GeoChart - -Reusable geo chart component. - -- Mount: `data-component="GeoChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImportProgress - -Reusable import progress component. - -- Mount: `data-component="ImportProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentResponseFlow - -Reusable incident response flow component. - -- Mount: `data-component="IncidentResponseFlow"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentTimeline - -Reusable incident timeline component. - -- Mount: `data-component="IncidentTimeline"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### JobProgress - -Reusable job progress component. - -- Mount: `data-component="JobProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LatencyMetric - -Reusable latency metric component. - -- Mount: `data-component="LatencyMetric"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LineChart - -Reusable line chart component. - -- Mount: `data-component="LineChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### Metric - -Reusable metric component. - -- Mount: `data-component="Metric"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### OnboardingProgress - -Reusable onboarding progress component. - -- Mount: `data-component="OnboardingProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PasswordStrengthMeter - -Reusable password strength meter component. - -- Mount: `data-component="PasswordStrengthMeter"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PieChart - -Reusable pie chart component. - -- Mount: `data-component="PieChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductArchitectureDiagram - -Reusable product architecture diagram component. - -- Mount: `data-component="ProductArchitectureDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProgressChart - -Reusable progress chart component. - -- Mount: `data-component="ProgressChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProgressRing - -Reusable progress ring component. - -- Mount: `data-component="ProgressRing"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### RevenueChart - -Reusable revenue chart component. - -- Mount: `data-component="RevenueChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmartRouteDiagram - -Reusable smart route diagram component. - -- Mount: `data-component="SmartRouteDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### TenantIsolationDiagram - -Reusable tenant isolation diagram component. - -- Mount: `data-component="TenantIsolationDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="StyledIcon"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None ### Timeline -Reusable timeline component. +Theme-aware, responsive timeline component. - Mount: `data-component="Timeline"` -- Props: `class: string = ""`, `title: string = "Timeline"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### TimelineChart +### Toast -Reusable timeline chart component. +Theme-aware, responsive toast component. -- Mount: `data-component="TimelineChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Toast"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### ToastProgress +### TreeView -Reusable toast progress component. +Theme-aware, responsive tree view component. -- Mount: `data-component="ToastProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="TreeView"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### UploadProgress +## Forms -Reusable upload progress component. +### Checkbox -- Mount: `data-component="UploadProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +Theme-aware, responsive checkbox component. + +- Mount: `data-component="Checkbox"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Checkbox"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### ColorPicker + +Theme-aware, responsive color picker component. + +- Mount: `data-component="ColorPicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Color Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "color"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### FileInput + +Theme-aware, responsive file input component. + +- Mount: `data-component="FileInput"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "File Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "file"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Input + +Theme-aware, responsive input component. + +- Mount: `data-component="Input"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### InputGroup + +Theme-aware, responsive input group component. + +- Mount: `data-component="InputGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input Group"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Radio + +Theme-aware, responsive radio component. + +- Mount: `data-component="Radio"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Radio"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### RangeSlider + +Theme-aware, responsive range slider component. + +- Mount: `data-component="RangeSlider"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Range Slider"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "range"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Select + +Theme-aware, responsive select component. + +- Mount: `data-component="Select"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Select"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `placeholder: string = "Select an option"`, `multiple: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Switch + +Theme-aware, responsive switch component. + +- Mount: `data-component="Switch"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Switch"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Textarea + +Theme-aware, responsive textarea component. + +- Mount: `data-component="Textarea"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Textarea"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `rows: number = 5`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### TimePicker + +Theme-aware, responsive time picker component. + +- Mount: `data-component="TimePicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Time Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "time"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +## Integrations + +### AdvancedDatePicker + +Theme-aware, responsive advanced date picker component. + +- Mount: `data-component="AdvancedDatePicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### UptimeChart +### AdvancedRangeSlider -Reusable uptime chart component. +Theme-aware, responsive advanced range slider component. -- Mount: `data-component="UptimeChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="AdvancedRangeSlider"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### UptimeMetric +### Chart -Reusable uptime metric component. +Theme-aware, responsive chart component. -- Mount: `data-component="UptimeMetric"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Chart"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### WebhookFlowDiagram +### Clipboard -Reusable webhook flow diagram component. +Theme-aware, responsive clipboard component. -- Mount: `data-component="WebhookFlowDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Clipboard"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### WorkflowProgress +### Confetti -Reusable workflow progress component. +Theme-aware, responsive confetti component. -- Mount: `data-component="WorkflowProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Confetti"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### DataMap + +Theme-aware, responsive data map component. + +- Mount: `data-component="DataMap"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### DataTable + +Theme-aware, responsive data table component. + +- Mount: `data-component="DataTable"` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` +- Slots: `default` +- Events: None + +### DragAndDrop + +Theme-aware, responsive drag and drop component. + +- Mount: `data-component="DragAndDrop"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### FileUpload + +Theme-aware, responsive file upload component. + +- Mount: `data-component="FileUpload"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Map + +Theme-aware, responsive map component. + +- Mount: `data-component="Map"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### ToastNotifications + +Theme-aware, responsive toast notifications component. + +- Mount: `data-component="ToastNotifications"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### WysiwygEditor + +Theme-aware, responsive wysiwyg editor component. + +- Mount: `data-component="WysiwygEditor"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Layout + +### Columns + +Theme-aware, responsive columns component. + +- Mount: `data-component="Columns"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Container + +Theme-aware, responsive container component. + +- Mount: `data-component="Container"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### CustomScrollbar + +Theme-aware, responsive custom scrollbar component. + +- Mount: `data-component="CustomScrollbar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Divider + +Theme-aware, responsive divider component. + +- Mount: `data-component="Divider"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: None +- Events: None + +### Grid + +Theme-aware, responsive grid component. + +- Mount: `data-component="Grid"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Image + +Theme-aware, responsive image component. + +- Mount: `data-component="Image"` +- Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""` +- Slots: `default` +- Events: None + +### Kbd + +Theme-aware, responsive kbd component. + +- Mount: `data-component="Kbd"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "⌘ K"`, `class: string = ""` +- Slots: `default` +- Events: None + +### LayoutSplitter + +Theme-aware, responsive layout splitter component. + +- Mount: `data-component="LayoutSplitter"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Link + +Theme-aware, responsive link component. + +- Mount: `data-component="Link"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""` +- Slots: `default` +- Events: None + +### Typography + +Theme-aware, responsive typography component. + +- Mount: `data-component="Typography"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Navigation + +### Breadcrumb + +Theme-aware, responsive breadcrumb component. + +- Mount: `data-component="Breadcrumb"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### MegaMenu + +Theme-aware, responsive mega menu component. + +- Mount: `data-component="MegaMenu"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Nav + +Theme-aware, responsive nav component. + +- Mount: `data-component="Nav"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Navbar + +Theme-aware, responsive navbar component. + +- Mount: `data-component="Navbar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Navbar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Pagination + +Theme-aware, responsive pagination component. + +- Mount: `data-component="Pagination"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Scrollspy + +Theme-aware, responsive scrollspy component. + +- Mount: `data-component="Scrollspy"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Sidebar + +Theme-aware, responsive sidebar component. + +- Mount: `data-component="Sidebar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Stepper + +Theme-aware, responsive stepper component. + +- Mount: `data-component="Stepper"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Tabs + +Theme-aware, responsive tabs component. + +- Mount: `data-component="Tabs"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Overlays + +### ContextMenu + +Theme-aware, responsive context menu component. + +- Mount: `data-component="ContextMenu"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Context Menu"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Drawer + +Theme-aware, responsive drawer component. + +- Mount: `data-component="Drawer"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drawer"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Dropdown + +Theme-aware, responsive dropdown component. + +- Mount: `data-component="Dropdown"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Dropdown"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Modal + +Theme-aware, responsive modal component. + +- Mount: `data-component="Modal"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Modal"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Popover + +Theme-aware, responsive popover component. + +- Mount: `data-component="Popover"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Popover"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Tooltip + +Theme-aware, responsive tooltip component. + +- Mount: `data-component="Tooltip"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tooltip"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Tables + +### Table + +Theme-aware, responsive table component. + +- Mount: `data-component="Table"` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` - Slots: `default` - Events: None diff --git a/.publish/ui/component-catalog.json b/.publish/ui/component-catalog.json index ce5051a0..a0744d62 100644 --- a/.publish/ui/component-catalog.json +++ b/.publish/ui/component-catalog.json @@ -1,4178 +1,434 @@ { - "sourceDocuments": [ - "WRNexus Essential Component Inventory v1.0", - "WRNexus Public SaaS Component System Checklist v1.0" - ], + "sourceDocuments": ["Screenshot-directed WRNexus UI catalog reset"], "components": [ { - "name": "AcceptAllCookiesButton", - "category": "actions", - "purpose": "Reusable accept all cookies button component." - }, - { - "name": "AccessibleAccordion", - "category": "content", - "purpose": "Reusable accessible accordion component." - }, - { - "name": "AccessibleCarousel", - "category": "content", - "purpose": "Reusable accessible carousel component." - }, - { - "name": "AccessibleChartSummary", - "category": "content", - "purpose": "Reusable accessible chart summary component." - }, - { - "name": "AccessibleDialog", - "category": "overlays", - "purpose": "Reusable accessible dialog component." - }, - { - "name": "AccessibleErrorSummary", - "category": "content", - "purpose": "Reusable accessible error summary component." - }, - { - "name": "AccessibleIcon", - "category": "content", - "purpose": "Reusable accessible icon component." - }, - { - "name": "AccessibleMenu", - "category": "overlays", - "purpose": "Reusable accessible menu component." - }, - { - "name": "AccessibleTabs", - "category": "content", - "purpose": "Reusable accessible tabs component." - }, - { - "name": "AccessibleTooltip", - "category": "content", - "purpose": "Reusable accessible tooltip component." - }, - { - "name": "Accordion", - "category": "content", - "purpose": "Reusable accordion component." - }, - { - "name": "AccountMenu", - "category": "overlays", - "purpose": "Reusable account menu component." - }, - { - "name": "AccountStatusBanner", - "category": "feedback", - "purpose": "Reusable account status banner component." - }, - { - "name": "ActionMenu", - "category": "overlays", - "purpose": "Reusable action menu component." - }, - { - "name": "ActiveFilterList", - "category": "data", - "purpose": "Reusable active filter list component." - }, - { - "name": "ActivityList", - "category": "data", - "purpose": "Reusable activity list component." - }, - { - "name": "AddOnCard", - "category": "content", - "purpose": "Reusable add on card component." - }, - { - "name": "AddressInput", - "category": "forms", - "purpose": "Reusable address input component." - }, - { - "name": "AddressPreview", - "category": "content", - "purpose": "Reusable address preview component." - }, - { - "name": "AdvancedFilterBuilder", - "category": "content", - "purpose": "Reusable advanced filter builder component." - }, - { - "name": "Alert", - "category": "feedback", - "purpose": "Reusable alert component." - }, - { - "name": "AlertDialog", - "category": "overlays", - "purpose": "Reusable alert dialog component." - }, - { - "name": "AmountInput", - "category": "forms", - "purpose": "Reusable amount input component." - }, - { - "name": "AnalyticsDashboardPreview", - "category": "content", - "purpose": "Reusable analytics dashboard preview component." - }, - { - "name": "AnchorNavigation", + "name": "Container", "category": "layout", - "purpose": "Reusable anchor navigation component." + "purpose": "Theme-aware, responsive container component." }, { - "name": "ApartmentInput", - "category": "forms", - "purpose": "Reusable apartment input component." - }, - { - "name": "ApiAuthenticationNotice", - "category": "feedback", - "purpose": "Reusable api authentication notice component." - }, - { - "name": "ApiEndpointCard", - "category": "content", - "purpose": "Reusable api endpoint card component." - }, - { - "name": "ApiErrorExample", - "category": "content", - "purpose": "Reusable api error example component." - }, - { - "name": "ApiHeaderTable", - "category": "data", - "purpose": "Reusable api header table component." - }, - { - "name": "ApiKeyCreateDialog", - "category": "overlays", - "purpose": "Reusable api key create dialog component." - }, - { - "name": "ApiKeyDisplay", - "category": "content", - "purpose": "Reusable api key display component." - }, - { - "name": "ApiKeyInput", - "category": "forms", - "purpose": "Reusable api key input component." - }, - { - "name": "ApiMethodBadge", - "category": "feedback", - "purpose": "Reusable api method badge component." - }, - { - "name": "ApiParameterTable", - "category": "data", - "purpose": "Reusable api parameter table component." - }, - { - "name": "ApiRateLimitNotice", - "category": "feedback", - "purpose": "Reusable api rate limit notice component." - }, - { - "name": "ApiRequestExample", - "category": "content", - "purpose": "Reusable api request example component." - }, - { - "name": "ApiResponseExample", - "category": "content", - "purpose": "Reusable api response example component." - }, - { - "name": "ApiSchemaTable", - "category": "data", - "purpose": "Reusable api schema table component." - }, - { - "name": "ApiSchemaViewer", - "category": "content", - "purpose": "Reusable api schema viewer component." - }, - { - "name": "ApiVersionBadge", - "category": "feedback", - "purpose": "Reusable api version badge component." - }, - { - "name": "AppHeader", + "name": "Columns", "category": "layout", - "purpose": "Reusable app header component." - }, - { - "name": "ArchitectureSection", - "category": "layout", - "purpose": "Reusable architecture section component." - }, - { - "name": "AreaChart", - "category": "visualization", - "purpose": "Reusable area chart component." - }, - { - "name": "ArticleHero", - "category": "layout", - "purpose": "Reusable article hero component." - }, - { - "name": "ArticleLayout", - "category": "layout", - "purpose": "Reusable article layout component." - }, - { - "name": "ArticleNewsletterCTA", - "category": "actions", - "purpose": "Reusable article newsletter c t a component." - }, - { - "name": "ArticlePageShell", - "category": "layout", - "purpose": "Reusable article page shell component." - }, - { - "name": "ArticleShareActions", - "category": "actions", - "purpose": "Reusable article share actions component." - }, - { - "name": "AssetCard", - "category": "content", - "purpose": "Reusable asset card component." - }, - { - "name": "AttachmentPicker", - "category": "forms", - "purpose": "Reusable attachment picker component." - }, - { - "name": "AttachmentUpload", - "category": "content", - "purpose": "Reusable attachment upload component." - }, - { - "name": "AudioUpload", - "category": "content", - "purpose": "Reusable audio upload component." - }, - { - "name": "AuditLogPreview", - "category": "content", - "purpose": "Reusable audit log preview component." - }, - { - "name": "AuditTable", - "category": "data", - "purpose": "Reusable audit table component." - }, - { - "name": "AuthenticatorCodeInput", - "category": "forms", - "purpose": "Reusable authenticator code input component." - }, - { - "name": "AuthorAvatar", - "category": "content", - "purpose": "Reusable author avatar component." - }, - { - "name": "AuthorCard", - "category": "content", - "purpose": "Reusable author card component." - }, - { - "name": "AuthorizedApplicationCard", - "category": "content", - "purpose": "Reusable authorized application card component." - }, - { - "name": "AutoGrid", - "category": "data", - "purpose": "Reusable auto grid component." - }, - { - "name": "AutomationExampleCard", - "category": "content", - "purpose": "Reusable automation example card component." - }, - { - "name": "AvailabilityCalendar", - "category": "content", - "purpose": "Reusable availability calendar component." - }, - { - "name": "Avatar", - "category": "content", - "purpose": "Reusable avatar component." - }, - { - "name": "AvatarGroup", - "category": "forms", - "purpose": "Reusable avatar group component." - }, - { - "name": "AvatarUpload", - "category": "content", - "purpose": "Reusable avatar upload component." - }, - { - "name": "BackButton", - "category": "actions", - "purpose": "Reusable back button component." - }, - { - "name": "Badge", - "category": "feedback", - "purpose": "Reusable badge component." - }, - { - "name": "BankTransferDetails", - "category": "content", - "purpose": "Reusable bank transfer details component." - }, - { - "name": "Banner", - "category": "feedback", - "purpose": "Reusable banner component." - }, - { - "name": "BarChart", - "category": "visualization", - "purpose": "Reusable bar chart component." - }, - { - "name": "BetaBadge", - "category": "feedback", - "purpose": "Reusable beta badge component." - }, - { - "name": "BillingAddressForm", - "category": "content", - "purpose": "Reusable billing address form component." - }, - { - "name": "BillingExample", - "category": "content", - "purpose": "Reusable billing example component." - }, - { - "name": "BillingPeriodToggle", - "category": "forms", - "purpose": "Reusable billing period toggle component." - }, - { - "name": "BlackoutDatePicker", - "category": "forms", - "purpose": "Reusable blackout date picker component." - }, - { - "name": "BlogCard", - "category": "content", - "purpose": "Reusable blog card component." - }, - { - "name": "BlogGrid", - "category": "data", - "purpose": "Reusable blog grid component." - }, - { - "name": "BlogList", - "category": "data", - "purpose": "Reusable blog list component." - }, - { - "name": "BlogSearch", - "category": "content", - "purpose": "Reusable blog search component." - }, - { - "name": "BodyText", - "category": "content", - "purpose": "Reusable body text component." - }, - { - "name": "BorderRadiusPicker", - "category": "forms", - "purpose": "Reusable border radius picker component." - }, - { - "name": "BottomNavigation", - "category": "layout", - "purpose": "Reusable bottom navigation component." - }, - { - "name": "BrandColorPicker", - "category": "forms", - "purpose": "Reusable brand color picker component." - }, - { - "name": "BrandSelector", - "category": "forms", - "purpose": "Reusable brand selector component." - }, - { - "name": "BrowserFrame", - "category": "layout", - "purpose": "Reusable browser frame component." - }, - { - "name": "BudgetRangeSlider", - "category": "content", - "purpose": "Reusable budget range slider component." - }, - { - "name": "BudgetSelector", - "category": "forms", - "purpose": "Reusable budget selector component." - }, - { - "name": "BusinessHoursPicker", - "category": "forms", - "purpose": "Reusable business hours picker component." - }, - { - "name": "Button", - "category": "actions", - "purpose": "Reusable button component." - }, - { - "name": "ButtonGroup", - "category": "forms", - "purpose": "Reusable button group component." - }, - { - "name": "ButtonSelector", - "category": "forms", - "purpose": "Reusable button selector component." - }, - { - "name": "CTASection", - "category": "layout", - "purpose": "Reusable c t a section component." - }, - { - "name": "Calendar", - "category": "content", - "purpose": "Reusable calendar component." - }, - { - "name": "CalendarGrid", - "category": "data", - "purpose": "Reusable calendar grid component." - }, - { - "name": "CalendarHeader", - "category": "layout", - "purpose": "Reusable calendar header component." - }, - { - "name": "CalendarNavigation", - "category": "layout", - "purpose": "Reusable calendar navigation component." - }, - { - "name": "CallbackUrlInput", - "category": "forms", - "purpose": "Reusable callback url input component." - }, - { - "name": "CampaignCard", - "category": "content", - "purpose": "Reusable campaign card component." - }, - { - "name": "CampaignPerformancePreview", - "category": "content", - "purpose": "Reusable campaign performance preview component." - }, - { - "name": "CampaignProgress", - "category": "visualization", - "purpose": "Reusable campaign progress component." - }, - { - "name": "CapabilityGrid", - "category": "data", - "purpose": "Reusable capability grid component." - }, - { - "name": "CaptchaField", - "category": "forms", - "purpose": "Reusable captcha field component." - }, - { - "name": "Card", - "category": "content", - "purpose": "Reusable card component." - }, - { - "name": "CardPaymentForm", - "category": "content", - "purpose": "Reusable card payment form component." - }, - { - "name": "CardSelector", - "category": "forms", - "purpose": "Reusable card selector component." - }, - { - "name": "CardSkeleton", - "category": "feedback", - "purpose": "Reusable card skeleton component." - }, - { - "name": "CareerApplicationForm", - "category": "content", - "purpose": "Reusable career application form component." - }, - { - "name": "CareerBenefitsGrid", - "category": "data", - "purpose": "Reusable career benefits grid component." - }, - { - "name": "Carousel", - "category": "content", - "purpose": "Reusable carousel component." - }, - { - "name": "CaseStudyCard", - "category": "content", - "purpose": "Reusable case study card component." - }, - { - "name": "CaseStudyHero", - "category": "layout", - "purpose": "Reusable case study hero component." - }, - { - "name": "CaseStudyPreview", - "category": "content", - "purpose": "Reusable case study preview component." - }, - { - "name": "CenteredCTA", - "category": "actions", - "purpose": "Reusable centered c t a component." - }, - { - "name": "CenteredHero", - "category": "layout", - "purpose": "Reusable centered hero component." - }, - { - "name": "CenteredSectionHeader", - "category": "layout", - "purpose": "Reusable centered section header component." - }, - { - "name": "CertificateUpload", - "category": "content", - "purpose": "Reusable certificate upload component." - }, - { - "name": "CertificationBadge", - "category": "feedback", - "purpose": "Reusable certification badge component." - }, - { - "name": "ChallengeSection", - "category": "layout", - "purpose": "Reusable challenge section component." - }, - { - "name": "ChannelBadge", - "category": "feedback", - "purpose": "Reusable channel badge component." - }, - { - "name": "ChannelCard", - "category": "content", - "purpose": "Reusable channel card component." - }, - { - "name": "ChannelComparisonChart", - "category": "visualization", - "purpose": "Reusable channel comparison chart component." - }, - { - "name": "ChannelComparisonTable", - "category": "data", - "purpose": "Reusable channel comparison table component." - }, - { - "name": "ChannelFallbackDiagram", - "category": "visualization", - "purpose": "Reusable channel fallback diagram component." - }, - { - "name": "ChannelFlow", - "category": "visualization", - "purpose": "Reusable channel flow component." - }, - { - "name": "ChannelIcon", - "category": "content", - "purpose": "Reusable channel icon component." - }, - { - "name": "ChannelRateTable", - "category": "data", - "purpose": "Reusable channel rate table component." - }, - { - "name": "ChannelSelector", - "category": "forms", - "purpose": "Reusable channel selector component." - }, - { - "name": "CharacterCounter", - "category": "feedback", - "purpose": "Reusable character counter component." - }, - { - "name": "ChartEmptyState", - "category": "feedback", - "purpose": "Reusable chart empty state component." - }, - { - "name": "ChartTooltip", - "category": "content", - "purpose": "Reusable chart tooltip component." - }, - { - "name": "CheckboxGroup", - "category": "forms", - "purpose": "Reusable checkbox group component." - }, - { - "name": "Checklist", - "category": "content", - "purpose": "Reusable checklist component." - }, - { - "name": "ChecklistProgress", - "category": "visualization", - "purpose": "Reusable checklist progress component." - }, - { - "name": "ChipInput", - "category": "forms", - "purpose": "Reusable chip input component." - }, - { - "name": "CircularProgress", - "category": "visualization", - "purpose": "Reusable circular progress component." - }, - { - "name": "CitySelector", - "category": "forms", - "purpose": "Reusable city selector component." - }, - { - "name": "ClearFiltersButton", - "category": "actions", - "purpose": "Reusable clear filters button component." - }, - { - "name": "ClickableCard", - "category": "content", - "purpose": "Reusable clickable card component." - }, - { - "name": "CloseButton", - "category": "actions", - "purpose": "Reusable close button component." - }, - { - "name": "Code", - "category": "content", - "purpose": "Reusable code component." - }, - { - "name": "CodeBlock", - "category": "content", - "purpose": "Reusable code block component." - }, - { - "name": "CodeCopyButton", - "category": "actions", - "purpose": "Reusable code copy button component." - }, - { - "name": "CodeHeader", - "category": "layout", - "purpose": "Reusable code header component." - }, - { - "name": "CodeInput", - "category": "forms", - "purpose": "Reusable code input component." - }, - { - "name": "CodeLanguageBadge", - "category": "feedback", - "purpose": "Reusable code language badge component." - }, - { - "name": "CodeTabs", - "category": "content", - "purpose": "Reusable code tabs component." - }, - { - "name": "CodeText", - "category": "content", - "purpose": "Reusable code text component." - }, - { - "name": "CohortChart", - "category": "visualization", - "purpose": "Reusable cohort chart component." - }, - { - "name": "ColorGrid", - "category": "data", - "purpose": "Reusable color grid component." - }, - { - "name": "ColorHexInput", - "category": "forms", - "purpose": "Reusable color hex input component." - }, - { - "name": "ColorPicker", - "category": "forms", - "purpose": "Reusable color picker component." - }, - { - "name": "ColorSelector", - "category": "forms", - "purpose": "Reusable color selector component." - }, - { - "name": "ColorSwatch", - "category": "content", - "purpose": "Reusable color swatch component." - }, - { - "name": "ComingSoonBadge", - "category": "feedback", - "purpose": "Reusable coming soon badge component." - }, - { - "name": "ComingSoonState", - "category": "feedback", - "purpose": "Reusable coming soon state component." - }, - { - "name": "CommandBlock", - "category": "content", - "purpose": "Reusable command block component." - }, - { - "name": "CommandMenu", - "category": "overlays", - "purpose": "Reusable command menu component." - }, - { - "name": "CommandSearchInput", - "category": "forms", - "purpose": "Reusable command search input component." - }, - { - "name": "CompanyHero", - "category": "layout", - "purpose": "Reusable company hero component." - }, - { - "name": "CompanyNameInput", - "category": "forms", - "purpose": "Reusable company name input component." - }, - { - "name": "CompanyPageShell", - "category": "layout", - "purpose": "Reusable company page shell component." - }, - { - "name": "CompanySizeSelector", - "category": "forms", - "purpose": "Reusable company size selector component." - }, - { - "name": "ComparisonDateRangePicker", - "category": "forms", - "purpose": "Reusable comparison date range picker component." - }, - { - "name": "ComparisonTable", - "category": "data", - "purpose": "Reusable comparison table component." - }, - { - "name": "CompletionMeter", - "category": "visualization", - "purpose": "Reusable completion meter component." - }, - { - "name": "ComplianceBadgeList", - "category": "data", - "purpose": "Reusable compliance badge list component." - }, - { - "name": "ComplianceProgramCard", - "category": "content", - "purpose": "Reusable compliance program card component." - }, - { - "name": "ConfirmPasswordInput", - "category": "forms", - "purpose": "Reusable confirm password input component." - }, - { - "name": "ConfirmationDialog", - "category": "overlays", - "purpose": "Reusable confirmation dialog component." - }, - { - "name": "ConnectedAccountCard", - "category": "content", - "purpose": "Reusable connected account card component." - }, - { - "name": "ConnectionCard", - "category": "content", - "purpose": "Reusable connection card component." - }, - { - "name": "ConsentTimelinePreview", - "category": "content", - "purpose": "Reusable consent timeline preview component." - }, - { - "name": "ContactCTA", - "category": "actions", - "purpose": "Reusable contact c t a component." - }, - { - "name": "ContactCard", - "category": "content", - "purpose": "Reusable contact card component." - }, - { - "name": "ContactForm", - "category": "content", - "purpose": "Reusable contact form component." - }, - { - "name": "ContactHero", - "category": "layout", - "purpose": "Reusable contact hero component." - }, - { - "name": "ContactPageShell", - "category": "layout", - "purpose": "Reusable contact page shell component." - }, - { - "name": "ContactSalesButton", - "category": "actions", - "purpose": "Reusable contact sales button component." - }, - { - "name": "ContactSalesForm", - "category": "content", - "purpose": "Reusable contact sales form component." - }, - { - "name": "ContextMenu", - "category": "overlays", - "purpose": "Reusable context menu component." - }, - { - "name": "ContextSwitcher", - "category": "content", - "purpose": "Reusable context switcher component." - }, - { - "name": "ConversationList", - "category": "data", - "purpose": "Reusable conversation list component." - }, - { - "name": "ConversationPreview", - "category": "content", - "purpose": "Reusable conversation preview component." - }, - { - "name": "ConversionChart", - "category": "visualization", - "purpose": "Reusable conversion chart component." - }, - { - "name": "CookieBanner", - "category": "feedback", - "purpose": "Reusable cookie banner component." - }, - { - "name": "CookieCategoryList", - "category": "data", - "purpose": "Reusable cookie category list component." - }, - { - "name": "CookieCategoryToggle", - "category": "forms", - "purpose": "Reusable cookie category toggle component." - }, - { - "name": "CookieDetailsTable", - "category": "data", - "purpose": "Reusable cookie details table component." - }, - { - "name": "CookiePreferencesDialog", - "category": "overlays", - "purpose": "Reusable cookie preferences dialog component." - }, - { - "name": "CookieTable", - "category": "data", - "purpose": "Reusable cookie table component." - }, - { - "name": "CoordinatesInput", - "category": "forms", - "purpose": "Reusable coordinates input component." - }, - { - "name": "CoordinatesPicker", - "category": "forms", - "purpose": "Reusable coordinates picker component." - }, - { - "name": "CopyButton", - "category": "actions", - "purpose": "Reusable copy button component." - }, - { - "name": "CopyCodeButton", - "category": "actions", - "purpose": "Reusable copy code button component." - }, - { - "name": "CopySecretField", - "category": "forms", - "purpose": "Reusable copy secret field component." - }, - { - "name": "CostBreakdownChart", - "category": "visualization", - "purpose": "Reusable cost breakdown chart component." - }, - { - "name": "CostSummary", - "category": "content", - "purpose": "Reusable cost summary component." - }, - { - "name": "Counter", - "category": "feedback", - "purpose": "Reusable counter component." - }, - { - "name": "CountryCallingCodeInput", - "category": "forms", - "purpose": "Reusable country calling code input component." - }, - { - "name": "CountryCallingCodeSelector", - "category": "forms", - "purpose": "Reusable country calling code selector component." - }, - { - "name": "CountrySelector", - "category": "forms", - "purpose": "Reusable country selector component." - }, - { - "name": "CouponInput", - "category": "forms", - "purpose": "Reusable coupon input component." - }, - { - "name": "CreditAmountInput", - "category": "forms", - "purpose": "Reusable credit amount input component." - }, - { - "name": "CronBuilder", - "category": "content", - "purpose": "Reusable cron builder component." - }, - { - "name": "CronInput", - "category": "forms", - "purpose": "Reusable cron input component." - }, - { - "name": "CsvUpload", - "category": "content", - "purpose": "Reusable csv upload component." - }, - { - "name": "CurrencyInput", - "category": "forms", - "purpose": "Reusable currency input component." - }, - { - "name": "CurrencySelector", - "category": "forms", - "purpose": "Reusable currency selector component." - }, - { - "name": "CurrentPasswordInput", - "category": "forms", - "purpose": "Reusable current password input component." - }, - { - "name": "CustomerLogo", - "category": "content", - "purpose": "Reusable customer logo component." - }, - { - "name": "CustomerStoryCard", - "category": "content", - "purpose": "Reusable customer story card component." - }, - { - "name": "DangerButton", - "category": "actions", - "purpose": "Reusable danger button component." - }, - { - "name": "DataProtectionCard", - "category": "content", - "purpose": "Reusable data protection card component." - }, - { - "name": "DataRetentionTable", - "category": "data", - "purpose": "Reusable data retention table component." - }, - { - "name": "DataTable", - "category": "data", - "purpose": "Reusable data table component." - }, - { - "name": "DateInput", - "category": "forms", - "purpose": "Reusable date input component." - }, - { - "name": "DatePicker", - "category": "forms", - "purpose": "Reusable date picker component." - }, - { - "name": "DateRangeCalendar", - "category": "content", - "purpose": "Reusable date range calendar component." - }, - { - "name": "DateRangePicker", - "category": "forms", - "purpose": "Reusable date range picker component." - }, - { - "name": "DateRangeSlider", - "category": "content", - "purpose": "Reusable date range slider component." - }, - { - "name": "DateTimeInput", - "category": "forms", - "purpose": "Reusable date time input component." - }, - { - "name": "DateTimePicker", - "category": "forms", - "purpose": "Reusable date time picker component." - }, - { - "name": "DateTimeRangePicker", - "category": "forms", - "purpose": "Reusable date time range picker component." - }, - { - "name": "DecimalInput", - "category": "forms", - "purpose": "Reusable decimal input component." - }, - { - "name": "DefinitionList", - "category": "data", - "purpose": "Reusable definition list component." - }, - { - "name": "DeleteConfirmationDialog", - "category": "overlays", - "purpose": "Reusable delete confirmation dialog component." - }, - { - "name": "DeliveryPreview", - "category": "content", - "purpose": "Reusable delivery preview component." - }, - { - "name": "DeliveryStatusChart", - "category": "visualization", - "purpose": "Reusable delivery status chart component." - }, - { - "name": "DeliveryStatusTimeline", - "category": "visualization", - "purpose": "Reusable delivery status timeline component." - }, - { - "name": "DemoRequestForm", - "category": "content", - "purpose": "Reusable demo request form component." - }, - { - "name": "DepartmentInput", - "category": "forms", - "purpose": "Reusable department input component." - }, - { - "name": "DeprecatedFeatureAlert", - "category": "feedback", - "purpose": "Reusable deprecated feature alert component." - }, - { - "name": "DescriptionList", - "category": "data", - "purpose": "Reusable description list component." - }, - { - "name": "DesktopNavigation", - "category": "layout", - "purpose": "Reusable desktop navigation component." - }, - { - "name": "DeveloperCTA", - "category": "actions", - "purpose": "Reusable developer c t a component." - }, - { - "name": "DeveloperHero", - "category": "layout", - "purpose": "Reusable developer hero component." - }, - { - "name": "DeveloperPageShell", - "category": "layout", - "purpose": "Reusable developer page shell component." - }, - { - "name": "DeveloperSearch", - "category": "content", - "purpose": "Reusable developer search component." - }, - { - "name": "DevelopersMenu", - "category": "overlays", - "purpose": "Reusable developers menu component." - }, - { - "name": "DeviceCard", - "category": "content", - "purpose": "Reusable device card component." - }, - { - "name": "DiscountInput", - "category": "forms", - "purpose": "Reusable discount input component." - }, - { - "name": "DisplayNameInput", - "category": "forms", - "purpose": "Reusable display name input component." - }, - { - "name": "DoNotSellLink", - "category": "actions", - "purpose": "Reusable do not sell link component." - }, - { - "name": "DocumentPreview", - "category": "content", - "purpose": "Reusable document preview component." - }, - { - "name": "DocumentUpload", - "category": "content", - "purpose": "Reusable document upload component." - }, - { - "name": "DomainInput", - "category": "forms", - "purpose": "Reusable domain input component." - }, - { - "name": "DonutChart", - "category": "visualization", - "purpose": "Reusable donut chart component." - }, - { - "name": "DownloadAction", - "category": "actions", - "purpose": "Reusable download action component." - }, - { - "name": "DownloadButton", - "category": "actions", - "purpose": "Reusable download button component." - }, - { - "name": "DownloadGateForm", - "category": "content", - "purpose": "Reusable download gate form component." - }, - { - "name": "DownloadPolicyButton", - "category": "actions", - "purpose": "Reusable download policy button component." - }, - { - "name": "DownloadResourceForm", - "category": "content", - "purpose": "Reusable download resource form component." - }, - { - "name": "DropdownMenu", - "category": "overlays", - "purpose": "Reusable dropdown menu component." - }, - { - "name": "DropdownNavigation", - "category": "layout", - "purpose": "Reusable dropdown navigation component." - }, - { - "name": "DurationInput", - "category": "forms", - "purpose": "Reusable duration input component." - }, - { - "name": "DurationPicker", - "category": "forms", - "purpose": "Reusable duration picker component." - }, - { - "name": "DurationSlider", - "category": "content", - "purpose": "Reusable duration slider component." - }, - { - "name": "ElevatedCard", - "category": "content", - "purpose": "Reusable elevated card component." - }, - { - "name": "EmailBodyEditor", - "category": "forms", - "purpose": "Reusable email body editor component." - }, - { - "name": "EmailComposer", - "category": "content", - "purpose": "Reusable email composer component." - }, - { - "name": "EmailInput", - "category": "forms", - "purpose": "Reusable email input component." - }, - { - "name": "EmojiPicker", - "category": "forms", - "purpose": "Reusable emoji picker component." - }, - { - "name": "EmptyState", - "category": "feedback", - "purpose": "Reusable empty state component." - }, - { - "name": "EncryptionDiagram", - "category": "visualization", - "purpose": "Reusable encryption diagram component." - }, - { - "name": "EnterpriseCTA", - "category": "actions", - "purpose": "Reusable enterprise c t a component." - }, - { - "name": "EnterpriseHero", - "category": "layout", - "purpose": "Reusable enterprise hero component." - }, - { - "name": "EnterprisePricingCard", - "category": "content", - "purpose": "Reusable enterprise pricing card component." - }, - { - "name": "EnvironmentSelector", - "category": "forms", - "purpose": "Reusable environment selector component." - }, - { - "name": "EnvironmentSwitcher", - "category": "content", - "purpose": "Reusable environment switcher component." - }, - { - "name": "ErrorActions", - "category": "actions", - "purpose": "Reusable error actions component." - }, - { - "name": "ErrorCard", - "category": "content", - "purpose": "Reusable error card component." - }, - { - "name": "ErrorCode", - "category": "content", - "purpose": "Reusable error code component." - }, - { - "name": "ErrorHero", - "category": "layout", - "purpose": "Reusable error hero component." - }, - { - "name": "ErrorIllustration", - "category": "content", - "purpose": "Reusable error illustration component." - }, - { - "name": "ErrorPage", - "category": "content", - "purpose": "Reusable error page component." - }, - { - "name": "ErrorPageShell", - "category": "layout", - "purpose": "Reusable error page shell component." - }, - { - "name": "ErrorState", - "category": "feedback", - "purpose": "Reusable error state component." - }, - { - "name": "ErrorSupportLink", - "category": "actions", - "purpose": "Reusable error support link component." - }, - { - "name": "EstimatedCostSummary", - "category": "content", - "purpose": "Reusable estimated cost summary component." - }, - { - "name": "EventTable", - "category": "data", - "purpose": "Reusable event table component." - }, - { - "name": "ExpandableText", - "category": "content", - "purpose": "Reusable expandable text component." - }, - { - "name": "ExpiryDateTimePicker", - "category": "forms", - "purpose": "Reusable expiry date time picker component." - }, - { - "name": "ExportProgress", - "category": "visualization", - "purpose": "Reusable export progress component." - }, - { - "name": "ExternalLink", - "category": "actions", - "purpose": "Reusable external link component." - }, - { - "name": "EyebrowText", - "category": "content", - "purpose": "Reusable eyebrow text component." - }, - { - "name": "FactorCard", - "category": "content", - "purpose": "Reusable factor card component." - }, - { - "name": "FallbackRouteBuilder", - "category": "content", - "purpose": "Reusable fallback route builder component." - }, - { - "name": "FallbackRouteDiagram", - "category": "visualization", - "purpose": "Reusable fallback route diagram component." - }, - { - "name": "FaviconUpload", - "category": "content", - "purpose": "Reusable favicon upload component." - }, - { - "name": "FaxInput", - "category": "forms", - "purpose": "Reusable fax input component." - }, - { - "name": "FeatureCard", - "category": "content", - "purpose": "Reusable feature card component." - }, - { - "name": "FeatureChecklist", - "category": "content", - "purpose": "Reusable feature checklist component." - }, - { - "name": "FeatureComparisonTable", - "category": "data", - "purpose": "Reusable feature comparison table component." - }, - { - "name": "FeatureDetailsPanel", - "category": "layout", - "purpose": "Reusable feature details panel component." - }, - { - "name": "FeatureGrid", - "category": "data", - "purpose": "Reusable feature grid component." - }, - { - "name": "FeatureIconCard", - "category": "content", - "purpose": "Reusable feature icon card component." - }, - { - "name": "FeatureList", - "category": "data", - "purpose": "Reusable feature list component." - }, - { - "name": "FeatureTabs", - "category": "content", - "purpose": "Reusable feature tabs component." - }, - { - "name": "FeatureTimeline", - "category": "visualization", - "purpose": "Reusable feature timeline component." - }, - { - "name": "FeatureUnavailableState", - "category": "feedback", - "purpose": "Reusable feature unavailable state component." - }, - { - "name": "FeaturedBlogCard", - "category": "content", - "purpose": "Reusable featured blog card component." - }, - { - "name": "FieldActions", - "category": "actions", - "purpose": "Reusable field actions component." - }, - { - "name": "FileInput", - "category": "forms", - "purpose": "Reusable file input component." - }, - { - "name": "FileList", - "category": "data", - "purpose": "Reusable file list component." - }, - { - "name": "FileSizeInput", - "category": "forms", - "purpose": "Reusable file size input component." - }, - { - "name": "FileSizeLabel", - "category": "content", - "purpose": "Reusable file size label component." - }, - { - "name": "FileTypeBadge", - "category": "feedback", - "purpose": "Reusable file type badge component." - }, - { - "name": "FileUpload", - "category": "content", - "purpose": "Reusable file upload component." - }, - { - "name": "FilterMenu", - "category": "overlays", - "purpose": "Reusable filter menu component." - }, - { - "name": "FilterSearchInput", - "category": "forms", - "purpose": "Reusable filter search input component." - }, - { - "name": "FilterableTable", - "category": "data", - "purpose": "Reusable filterable table component." - }, - { - "name": "FinalCTA", - "category": "actions", - "purpose": "Reusable final c t a component." - }, - { - "name": "FirstNameInput", - "category": "forms", - "purpose": "Reusable first name input component." - }, - { - "name": "FontPicker", - "category": "forms", - "purpose": "Reusable font picker component." - }, - { - "name": "FontSizePicker", - "category": "forms", - "purpose": "Reusable font size picker component." - }, - { - "name": "FontWeightPicker", - "category": "forms", - "purpose": "Reusable font weight picker component." - }, - { - "name": "FooterLanguageSwitcher", - "category": "content", - "purpose": "Reusable footer language switcher component." - }, - { - "name": "FooterStatusIndicator", - "category": "feedback", - "purpose": "Reusable footer status indicator component." - }, - { - "name": "ForbiddenPage", - "category": "content", - "purpose": "Reusable forbidden page component." - }, - { - "name": "ForbiddenState", - "category": "feedback", - "purpose": "Reusable forbidden state component." - }, - { - "name": "ForgotPasswordForm", - "category": "content", - "purpose": "Reusable forgot password form component." - }, - { - "name": "Form", - "category": "content", - "purpose": "Reusable form component." - }, - { - "name": "FormActions", - "category": "actions", - "purpose": "Reusable form actions component." - }, - { - "name": "FormAlert", - "category": "feedback", - "purpose": "Reusable form alert component." - }, - { - "name": "FormDialog", - "category": "overlays", - "purpose": "Reusable form dialog component." - }, - { - "name": "FormErrorSummary", - "category": "content", - "purpose": "Reusable form error summary component." - }, - { - "name": "FormField", - "category": "forms", - "purpose": "Reusable form field component." - }, - { - "name": "FormGrid", - "category": "data", - "purpose": "Reusable form grid component." - }, - { - "name": "FormGroup", - "category": "forms", - "purpose": "Reusable form group component." - }, - { - "name": "FormHelpText", - "category": "content", - "purpose": "Reusable form help text component." - }, - { - "name": "FormLabel", - "category": "content", - "purpose": "Reusable form label component." - }, - { - "name": "FormProgress", - "category": "visualization", - "purpose": "Reusable form progress component." - }, - { - "name": "FormRow", - "category": "data", - "purpose": "Reusable form row component." - }, - { - "name": "FormSection", - "category": "layout", - "purpose": "Reusable form section component." - }, - { - "name": "FullscreenDialog", - "category": "overlays", - "purpose": "Reusable fullscreen dialog component." - }, - { - "name": "FunnelChart", - "category": "visualization", - "purpose": "Reusable funnel chart component." - }, - { - "name": "GeoChart", - "category": "visualization", - "purpose": "Reusable geo chart component." - }, - { - "name": "GeofenceEditor", - "category": "forms", - "purpose": "Reusable geofence editor component." - }, - { - "name": "GhostButton", - "category": "actions", - "purpose": "Reusable ghost button component." - }, - { - "name": "GlassCard", - "category": "content", - "purpose": "Reusable glass card component." - }, - { - "name": "GlobalSearch", - "category": "content", - "purpose": "Reusable global search component." - }, - { - "name": "GradientCTA", - "category": "actions", - "purpose": "Reusable gradient c t a component." - }, - { - "name": "GradientPicker", - "category": "forms", - "purpose": "Reusable gradient picker component." - }, - { - "name": "GradientStopEditor", - "category": "forms", - "purpose": "Reusable gradient stop editor component." + "purpose": "Theme-aware, responsive columns component." }, { "name": "Grid", - "category": "data", - "purpose": "Reusable grid component." - }, - { - "name": "GuideCard", - "category": "content", - "purpose": "Reusable guide card component." - }, - { - "name": "GuideChecklist", - "category": "content", - "purpose": "Reusable guide checklist component." - }, - { - "name": "GuideDifficultyBadge", - "category": "feedback", - "purpose": "Reusable guide difficulty badge component." - }, - { - "name": "GuideGrid", - "category": "data", - "purpose": "Reusable guide grid component." - }, - { - "name": "GuideStep", - "category": "content", - "purpose": "Reusable guide step component." - }, - { - "name": "Header", "category": "layout", - "purpose": "Reusable header component." + "purpose": "Theme-aware, responsive grid component." }, { - "name": "HeaderActions", - "category": "actions", - "purpose": "Reusable header actions component." - }, - { - "name": "HealthIndicator", - "category": "feedback", - "purpose": "Reusable health indicator component." - }, - { - "name": "Hero", + "name": "LayoutSplitter", "category": "layout", - "purpose": "Reusable hero component." + "purpose": "Theme-aware, responsive layout splitter component." }, { - "name": "HeroActions", - "category": "actions", - "purpose": "Reusable hero actions component." - }, - { - "name": "HeroCodePanel", + "name": "Typography", "category": "layout", - "purpose": "Reusable hero code panel component." + "purpose": "Theme-aware, responsive typography component." }, { - "name": "HeroGradientText", - "category": "content", - "purpose": "Reusable hero gradient text component." + "name": "Image", + "category": "layout", + "purpose": "Theme-aware, responsive image component." }, { - "name": "HeroPrimaryAction", - "category": "actions", - "purpose": "Reusable hero primary action component." + "name": "Link", + "category": "layout", + "purpose": "Theme-aware, responsive link component." }, { - "name": "HeroProductPreview", - "category": "content", - "purpose": "Reusable hero product preview component." + "name": "Divider", + "category": "layout", + "purpose": "Theme-aware, responsive divider component." }, { - "name": "HeroSecondaryAction", - "category": "actions", - "purpose": "Reusable hero secondary action component." + "name": "Kbd", + "category": "layout", + "purpose": "Theme-aware, responsive kbd component." }, { - "name": "HeroTrustText", - "category": "content", - "purpose": "Reusable hero trust text component." + "name": "CustomScrollbar", + "category": "layout", + "purpose": "Theme-aware, responsive custom scrollbar component." }, { - "name": "HexColorInput", + "name": "Accordion", + "category": "base", + "purpose": "Theme-aware, responsive accordion component." + }, + { + "name": "Alert", + "category": "base", + "purpose": "Theme-aware, responsive alert component." + }, + { + "name": "Avatar", + "category": "base", + "purpose": "Theme-aware, responsive avatar component." + }, + { + "name": "AvatarGroup", + "category": "base", + "purpose": "Theme-aware, responsive avatar group component." + }, + { + "name": "Badge", + "category": "base", + "purpose": "Theme-aware, responsive badge component." + }, + { + "name": "Blockquote", + "category": "base", + "purpose": "Theme-aware, responsive blockquote component." + }, + { + "name": "Button", + "category": "base", + "purpose": "Theme-aware, responsive button component." + }, + { + "name": "ButtonGroup", + "category": "base", + "purpose": "Theme-aware, responsive button group component." + }, + { + "name": "Card", + "category": "base", + "purpose": "Theme-aware, responsive card component." + }, + { + "name": "ChatBubble", + "category": "base", + "purpose": "Theme-aware, responsive chat bubble component." + }, + { + "name": "Carousel", + "category": "base", + "purpose": "Theme-aware, responsive carousel component." + }, + { + "name": "Collapse", + "category": "base", + "purpose": "Theme-aware, responsive collapse component." + }, + { + "name": "DatePicker", + "category": "base", + "purpose": "Theme-aware, responsive date picker component." + }, + { + "name": "DeviceFrame", + "category": "base", + "purpose": "Theme-aware, responsive device frame component." + }, + { + "name": "List", + "category": "base", + "purpose": "Theme-aware, responsive list component." + }, + { + "name": "ListGroup", + "category": "base", + "purpose": "Theme-aware, responsive list group component." + }, + { + "name": "LegendIndicator", + "category": "base", + "purpose": "Theme-aware, responsive legend indicator component." + }, + { + "name": "Progress", + "category": "base", + "purpose": "Theme-aware, responsive progress component." + }, + { + "name": "FileUploadProgress", + "category": "base", + "purpose": "Theme-aware, responsive file upload progress component." + }, + { + "name": "Rating", + "category": "base", + "purpose": "Theme-aware, responsive rating component." + }, + { + "name": "Skeleton", + "category": "base", + "purpose": "Theme-aware, responsive skeleton component." + }, + { + "name": "Spinner", + "category": "base", + "purpose": "Theme-aware, responsive spinner component." + }, + { + "name": "StyledIcon", + "category": "base", + "purpose": "Theme-aware, responsive styled icon component." + }, + { + "name": "Toast", + "category": "base", + "purpose": "Theme-aware, responsive toast component." + }, + { + "name": "Timeline", + "category": "base", + "purpose": "Theme-aware, responsive timeline component." + }, + { + "name": "TreeView", + "category": "base", + "purpose": "Theme-aware, responsive tree view component." + }, + { + "name": "Marquee", + "category": "base", + "purpose": "Theme-aware, responsive marquee component." + }, + { + "name": "Navbar", + "category": "navigation", + "purpose": "Theme-aware, responsive navbar component." + }, + { + "name": "MegaMenu", + "category": "navigation", + "purpose": "Theme-aware, responsive mega menu component." + }, + { + "name": "Nav", + "category": "navigation", + "purpose": "Theme-aware, responsive nav component." + }, + { + "name": "Tabs", + "category": "navigation", + "purpose": "Theme-aware, responsive tabs component." + }, + { + "name": "Sidebar", + "category": "navigation", + "purpose": "Theme-aware, responsive sidebar component." + }, + { + "name": "Scrollspy", + "category": "navigation", + "purpose": "Theme-aware, responsive scrollspy component." + }, + { + "name": "Breadcrumb", + "category": "navigation", + "purpose": "Theme-aware, responsive breadcrumb component." + }, + { + "name": "Pagination", + "category": "navigation", + "purpose": "Theme-aware, responsive pagination component." + }, + { + "name": "Stepper", + "category": "navigation", + "purpose": "Theme-aware, responsive stepper component." + }, + { + "name": "Input", "category": "forms", - "purpose": "Reusable hex color input component." - }, - { - "name": "HiddenField", - "category": "forms", - "purpose": "Reusable hidden field component." - }, - { - "name": "HighlightText", - "category": "content", - "purpose": "Reusable highlight text component." - }, - { - "name": "HolidayCalendar", - "category": "content", - "purpose": "Reusable holiday calendar component." - }, - { - "name": "HostnameInput", - "category": "forms", - "purpose": "Reusable hostname input component." - }, - { - "name": "HourPicker", - "category": "forms", - "purpose": "Reusable hour picker component." - }, - { - "name": "HslColorInput", - "category": "forms", - "purpose": "Reusable hsl color input component." - }, - { - "name": "HtmlEditor", - "category": "forms", - "purpose": "Reusable html editor component." - }, - { - "name": "HumanApprovalStep", - "category": "content", - "purpose": "Reusable human approval step component." - }, - { - "name": "Icon", - "category": "content", - "purpose": "Reusable icon component." - }, - { - "name": "IconButton", - "category": "actions", - "purpose": "Reusable icon button component." - }, - { - "name": "IconPicker", - "category": "forms", - "purpose": "Reusable icon picker component." - }, - { - "name": "IconSelector", - "category": "forms", - "purpose": "Reusable icon selector component." - }, - { - "name": "IdentifierInput", - "category": "forms", - "purpose": "Reusable identifier input component." - }, - { - "name": "Illustration", - "category": "content", - "purpose": "Reusable illustration component." - }, - { - "name": "ImageCompressionPreview", - "category": "content", - "purpose": "Reusable image compression preview component." - }, - { - "name": "ImageEditor", - "category": "forms", - "purpose": "Reusable image editor component." - }, - { - "name": "ImagePreviewDialog", - "category": "overlays", - "purpose": "Reusable image preview dialog component." - }, - { - "name": "ImageSelector", - "category": "forms", - "purpose": "Reusable image selector component." - }, - { - "name": "ImageUpload", - "category": "content", - "purpose": "Reusable image upload component." - }, - { - "name": "ImportProgress", - "category": "visualization", - "purpose": "Reusable import progress component." - }, - { - "name": "IncidentAlert", - "category": "feedback", - "purpose": "Reusable incident alert component." - }, - { - "name": "IncidentBanner", - "category": "feedback", - "purpose": "Reusable incident banner component." - }, - { - "name": "IncidentCard", - "category": "content", - "purpose": "Reusable incident card component." - }, - { - "name": "IncidentList", - "category": "data", - "purpose": "Reusable incident list component." - }, - { - "name": "IncidentResponseFlow", - "category": "visualization", - "purpose": "Reusable incident response flow component." - }, - { - "name": "IncidentSeverityBadge", - "category": "feedback", - "purpose": "Reusable incident severity badge component." - }, - { - "name": "IncidentTimeline", - "category": "visualization", - "purpose": "Reusable incident timeline component." - }, - { - "name": "IndustryBadge", - "category": "feedback", - "purpose": "Reusable industry badge component." - }, - { - "name": "IndustrySelector", - "category": "forms", - "purpose": "Reusable industry selector component." - }, - { - "name": "InfoCard", - "category": "content", - "purpose": "Reusable info card component." - }, - { - "name": "InlineAlert", - "category": "feedback", - "purpose": "Reusable inline alert component." - }, - { - "name": "InlineCode", - "category": "content", - "purpose": "Reusable inline code component." + "purpose": "Theme-aware, responsive input component." }, { "name": "InputGroup", "category": "forms", - "purpose": "Reusable input group component." + "purpose": "Theme-aware, responsive input group component." }, { - "name": "InsetPanel", - "category": "layout", - "purpose": "Reusable inset panel component." - }, - { - "name": "IntegerInput", + "name": "Textarea", "category": "forms", - "purpose": "Reusable integer input component." + "purpose": "Theme-aware, responsive textarea component." }, { - "name": "IntegrationCard", - "category": "content", - "purpose": "Reusable integration card component." - }, - { - "name": "InvoiceLineItem", - "category": "content", - "purpose": "Reusable invoice line item component." - }, - { - "name": "InvoiceSummary", - "category": "content", - "purpose": "Reusable invoice summary component." - }, - { - "name": "IpAddressInput", + "name": "FileInput", "category": "forms", - "purpose": "Reusable ip address input component." + "purpose": "Theme-aware, responsive file input component." }, { - "name": "JobCard", - "category": "content", - "purpose": "Reusable job card component." - }, - { - "name": "JobProgress", - "category": "visualization", - "purpose": "Reusable job progress component." - }, - { - "name": "JobTitleInput", + "name": "Checkbox", "category": "forms", - "purpose": "Reusable job title input component." + "purpose": "Theme-aware, responsive checkbox component." }, { - "name": "JsonInput", + "name": "Radio", "category": "forms", - "purpose": "Reusable json input component." + "purpose": "Theme-aware, responsive radio component." }, { - "name": "JsonViewer", - "category": "content", - "purpose": "Reusable json viewer component." - }, - { - "name": "KeyValueTable", - "category": "data", - "purpose": "Reusable key value table component." - }, - { - "name": "KycDocumentUpload", - "category": "content", - "purpose": "Reusable kyc document upload component." - }, - { - "name": "LanguageSelector", + "name": "Switch", "category": "forms", - "purpose": "Reusable language selector component." + "purpose": "Theme-aware, responsive switch component." }, { - "name": "LanguageSwitcher", - "category": "content", - "purpose": "Reusable language switcher component." - }, - { - "name": "LastNameInput", + "name": "Select", "category": "forms", - "purpose": "Reusable last name input component." - }, - { - "name": "LatencyMetric", - "category": "visualization", - "purpose": "Reusable latency metric component." - }, - { - "name": "LatitudeInput", - "category": "forms", - "purpose": "Reusable latitude input component." - }, - { - "name": "LeadText", - "category": "content", - "purpose": "Reusable lead text component." - }, - { - "name": "LeadershipGrid", - "category": "data", - "purpose": "Reusable leadership grid component." - }, - { - "name": "LegalAcceptanceNotice", - "category": "feedback", - "purpose": "Reusable legal acceptance notice component." - }, - { - "name": "LegalBulletList", - "category": "data", - "purpose": "Reusable legal bullet list component." - }, - { - "name": "LegalContactBlock", - "category": "content", - "purpose": "Reusable legal contact block component." - }, - { - "name": "LegalDefinitionList", - "category": "data", - "purpose": "Reusable legal definition list component." - }, - { - "name": "LegalDocumentHeader", - "category": "layout", - "purpose": "Reusable legal document header component." - }, - { - "name": "LegalDocumentLayout", - "category": "layout", - "purpose": "Reusable legal document layout component." - }, - { - "name": "LegalHero", - "category": "layout", - "purpose": "Reusable legal hero component." - }, - { - "name": "LegalLanguageSelector", - "category": "forms", - "purpose": "Reusable legal language selector component." - }, - { - "name": "LegalNotice", - "category": "feedback", - "purpose": "Reusable legal notice component." - }, - { - "name": "LegalPageShell", - "category": "layout", - "purpose": "Reusable legal page shell component." - }, - { - "name": "LegalPrintButton", - "category": "actions", - "purpose": "Reusable legal print button component." - }, - { - "name": "LegalRegionSelector", - "category": "forms", - "purpose": "Reusable legal region selector component." - }, - { - "name": "LegalSection", - "category": "layout", - "purpose": "Reusable legal section component." - }, - { - "name": "LegalSummary", - "category": "content", - "purpose": "Reusable legal summary component." - }, - { - "name": "LegalTable", - "category": "data", - "purpose": "Reusable legal table component." - }, - { - "name": "LegalVersionBadge", - "category": "feedback", - "purpose": "Reusable legal version badge component." - }, - { - "name": "LetterSpacingPicker", - "category": "forms", - "purpose": "Reusable letter spacing picker component." - }, - { - "name": "LicenseKeyInput", - "category": "forms", - "purpose": "Reusable license key input component." - }, - { - "name": "Lightbox", - "category": "overlays", - "purpose": "Reusable lightbox component." - }, - { - "name": "LineChart", - "category": "visualization", - "purpose": "Reusable line chart component." - }, - { - "name": "LineHeightPicker", - "category": "forms", - "purpose": "Reusable line height picker component." - }, - { - "name": "LinkButton", - "category": "actions", - "purpose": "Reusable link button component." - }, - { - "name": "List", - "category": "data", - "purpose": "Reusable list component." - }, - { - "name": "LoadingButton", - "category": "actions", - "purpose": "Reusable loading button component." - }, - { - "name": "LocaleSelector", - "category": "forms", - "purpose": "Reusable locale selector component." - }, - { - "name": "LocalizedRouteLink", - "category": "actions", - "purpose": "Reusable localized route link component." - }, - { - "name": "LocationPicker", - "category": "forms", - "purpose": "Reusable location picker component." - }, - { - "name": "LogTable", - "category": "data", - "purpose": "Reusable log table component." - }, - { - "name": "Logo", - "category": "content", - "purpose": "Reusable logo component." - }, - { - "name": "LogoUpload", - "category": "content", - "purpose": "Reusable logo upload component." - }, - { - "name": "LogoutDialog", - "category": "overlays", - "purpose": "Reusable logout dialog component." - }, - { - "name": "LongitudeInput", - "category": "forms", - "purpose": "Reusable longitude input component." - }, - { - "name": "MaintenanceAlert", - "category": "feedback", - "purpose": "Reusable maintenance alert component." - }, - { - "name": "MaintenanceBanner", - "category": "feedback", - "purpose": "Reusable maintenance banner component." - }, - { - "name": "MaintenanceCard", - "category": "content", - "purpose": "Reusable maintenance card component." - }, - { - "name": "MaintenancePage", - "category": "content", - "purpose": "Reusable maintenance page component." - }, - { - "name": "MaintenanceState", - "category": "feedback", - "purpose": "Reusable maintenance state component." - }, - { - "name": "MaintenanceWindowPicker", - "category": "forms", - "purpose": "Reusable maintenance window picker component." - }, - { - "name": "MapPicker", - "category": "forms", - "purpose": "Reusable map picker component." - }, - { - "name": "MarkdownEditor", - "category": "forms", - "purpose": "Reusable markdown editor component." - }, - { - "name": "MarketingPageShell", - "category": "layout", - "purpose": "Reusable marketing page shell component." - }, - { - "name": "MarketingSectionHeader", - "category": "layout", - "purpose": "Reusable marketing section header component." - }, - { - "name": "MaskedSecretField", - "category": "forms", - "purpose": "Reusable masked secret field component." - }, - { - "name": "MegaMenu", - "category": "overlays", - "purpose": "Reusable mega menu component." - }, - { - "name": "MemberList", - "category": "data", - "purpose": "Reusable member list component." - }, - { - "name": "MentionInput", - "category": "forms", - "purpose": "Reusable mention input component." - }, - { - "name": "MessageCharacterCounter", - "category": "feedback", - "purpose": "Reusable message character counter component." - }, - { - "name": "MessageComposer", - "category": "content", - "purpose": "Reusable message composer component." - }, - { - "name": "MessageComposerPreview", - "category": "content", - "purpose": "Reusable message composer preview component." - }, - { - "name": "MessageLimitInput", - "category": "forms", - "purpose": "Reusable message limit input component." - }, - { - "name": "MessagePreview", - "category": "content", - "purpose": "Reusable message preview component." - }, - { - "name": "MessageVolumeSlider", - "category": "content", - "purpose": "Reusable message volume slider component." - }, - { - "name": "Metric", - "category": "visualization", - "purpose": "Reusable metric component." - }, - { - "name": "MetricCard", - "category": "content", - "purpose": "Reusable metric card component." - }, - { - "name": "MetricGrid", - "category": "data", - "purpose": "Reusable metric grid component." - }, - { - "name": "MetricText", - "category": "content", - "purpose": "Reusable metric text component." - }, - { - "name": "MinutePicker", - "category": "forms", - "purpose": "Reusable minute picker component." - }, - { - "name": "MissionSection", - "category": "layout", - "purpose": "Reusable mission section component." - }, - { - "name": "MobileDeviceFrame", - "category": "layout", - "purpose": "Reusable mobile device frame component." - }, - { - "name": "MobileInput", - "category": "forms", - "purpose": "Reusable mobile input component." - }, - { - "name": "MobileMenuButton", - "category": "actions", - "purpose": "Reusable mobile menu button component." - }, - { - "name": "MobileNavigation", - "category": "layout", - "purpose": "Reusable mobile navigation component." - }, - { - "name": "MobileTableCard", - "category": "content", - "purpose": "Reusable mobile table card component." - }, - { - "name": "MonthPicker", - "category": "forms", - "purpose": "Reusable month picker component." - }, - { - "name": "MonthYearPicker", - "category": "forms", - "purpose": "Reusable month year picker component." - }, - { - "name": "MonthlyVolumeSelector", - "category": "forms", - "purpose": "Reusable monthly volume selector component." - }, - { - "name": "MultiFileUpload", - "category": "content", - "purpose": "Reusable multi file upload component." - }, - { - "name": "MultipleEmailInput", - "category": "forms", - "purpose": "Reusable multiple email input component." - }, - { - "name": "MutedText", - "category": "content", - "purpose": "Reusable muted text component." - }, - { - "name": "NameInput", - "category": "forms", - "purpose": "Reusable name input component." - }, - { - "name": "Navigation", - "category": "layout", - "purpose": "Reusable navigation component." - }, - { - "name": "NavigationItem", - "category": "content", - "purpose": "Reusable navigation item component." - }, - { - "name": "NavigationMegaMenu", - "category": "overlays", - "purpose": "Reusable navigation mega menu component." - }, - { - "name": "NewBadge", - "category": "feedback", - "purpose": "Reusable new badge component." - }, - { - "name": "NewPasswordInput", - "category": "forms", - "purpose": "Reusable new password input component." - }, - { - "name": "NewsletterCTA", - "category": "actions", - "purpose": "Reusable newsletter c t a component." - }, - { - "name": "NewsletterForm", - "category": "content", - "purpose": "Reusable newsletter form component." - }, - { - "name": "NoResultsState", - "category": "feedback", - "purpose": "Reusable no results state component." - }, - { - "name": "NotFoundPage", - "category": "content", - "purpose": "Reusable not found page component." - }, - { - "name": "NotFoundState", - "category": "feedback", - "purpose": "Reusable not found state component." - }, - { - "name": "NotificationCard", - "category": "content", - "purpose": "Reusable notification card component." - }, - { - "name": "NotificationList", - "category": "data", - "purpose": "Reusable notification list component." - }, - { - "name": "NumberInput", - "category": "forms", - "purpose": "Reusable number input component." - }, - { - "name": "OfficeCard", - "category": "content", - "purpose": "Reusable office card component." - }, - { - "name": "OfflinePage", - "category": "content", - "purpose": "Reusable offline page component." - }, - { - "name": "OfflineState", - "category": "feedback", - "purpose": "Reusable offline state component." - }, - { - "name": "OnboardingProgress", - "category": "visualization", - "purpose": "Reusable onboarding progress component." - }, - { - "name": "OneTimeSecretDisplay", - "category": "content", - "purpose": "Reusable one time secret display component." - }, - { - "name": "OnlineIndicator", - "category": "feedback", - "purpose": "Reusable online indicator component." - }, - { - "name": "OpacitySlider", - "category": "content", - "purpose": "Reusable opacity slider component." - }, - { - "name": "OpenAPICTA", - "category": "actions", - "purpose": "Reusable open a p i c t a component." - }, - { - "name": "OptionalIndicator", - "category": "feedback", - "purpose": "Reusable optional indicator component." - }, - { - "name": "OrganizationSelector", - "category": "forms", - "purpose": "Reusable organization selector component." - }, - { - "name": "OtpInput", - "category": "forms", - "purpose": "Reusable otp input component." - }, - { - "name": "OtpVerificationForm", - "category": "content", - "purpose": "Reusable otp verification form component." - }, - { - "name": "OutlinedCard", - "category": "content", - "purpose": "Reusable outlined card component." - }, - { - "name": "PageAlert", - "category": "feedback", - "purpose": "Reusable page alert component." - }, - { - "name": "PageSkeleton", - "category": "feedback", - "purpose": "Reusable page skeleton component." - }, - { - "name": "Panel", - "category": "layout", - "purpose": "Reusable panel component." - }, - { - "name": "PartnerApplicationForm", - "category": "content", - "purpose": "Reusable partner application form component." - }, - { - "name": "PartnerLogoGrid", - "category": "data", - "purpose": "Reusable partner logo grid component." - }, - { - "name": "PartnerProgramCard", - "category": "content", - "purpose": "Reusable partner program card component." - }, - { - "name": "PasskeyButton", - "category": "actions", - "purpose": "Reusable passkey button component." - }, - { - "name": "PasswordInput", - "category": "forms", - "purpose": "Reusable password input component." - }, - { - "name": "PasswordRequirementList", - "category": "data", - "purpose": "Reusable password requirement list component." - }, - { - "name": "PasswordStrengthMeter", - "category": "visualization", - "purpose": "Reusable password strength meter component." - }, - { - "name": "PasswordVisibilityToggle", - "category": "forms", - "purpose": "Reusable password visibility toggle component." - }, - { - "name": "PathInput", - "category": "forms", - "purpose": "Reusable path input component." - }, - { - "name": "PaymentMethodCard", - "category": "content", - "purpose": "Reusable payment method card component." - }, - { - "name": "PdfPreview", - "category": "content", - "purpose": "Reusable pdf preview component." - }, - { - "name": "PercentageInput", - "category": "forms", - "purpose": "Reusable percentage input component." - }, - { - "name": "PermissionSelector", - "category": "forms", - "purpose": "Reusable permission selector component." - }, - { - "name": "PhoneInput", - "category": "forms", - "purpose": "Reusable phone input component." - }, - { - "name": "PieChart", - "category": "visualization", - "purpose": "Reusable pie chart component." - }, - { - "name": "PinInput", - "category": "forms", - "purpose": "Reusable pin input component." - }, - { - "name": "PlainTextEditor", - "category": "forms", - "purpose": "Reusable plain text editor component." - }, - { - "name": "PlanCTA", - "category": "actions", - "purpose": "Reusable plan c t a component." - }, - { - "name": "PlanFeatureList", - "category": "data", - "purpose": "Reusable plan feature list component." - }, - { - "name": "PlanLimitList", - "category": "data", - "purpose": "Reusable plan limit list component." - }, - { - "name": "PlanSelector", - "category": "forms", - "purpose": "Reusable plan selector component." - }, - { - "name": "PlatformPillarCard", - "category": "content", - "purpose": "Reusable platform pillar card component." - }, - { - "name": "PolicyVersionTable", - "category": "data", - "purpose": "Reusable policy version table component." - }, - { - "name": "Popover", - "category": "overlays", - "purpose": "Reusable popover component." - }, - { - "name": "PortInput", - "category": "forms", - "purpose": "Reusable port input component." - }, - { - "name": "PortNumberInput", - "category": "forms", - "purpose": "Reusable port number input component." - }, - { - "name": "PositiveNumberInput", - "category": "forms", - "purpose": "Reusable positive number input component." - }, - { - "name": "PostalCodeInput", - "category": "forms", - "purpose": "Reusable postal code input component." - }, - { - "name": "PostmanCTA", - "category": "actions", - "purpose": "Reusable postman c t a component." - }, - { - "name": "PresetDateRangePicker", - "category": "forms", - "purpose": "Reusable preset date range picker component." - }, - { - "name": "PressReleaseCard", - "category": "content", - "purpose": "Reusable press release card component." - }, - { - "name": "PreviewBadge", - "category": "feedback", - "purpose": "Reusable preview badge component." - }, - { - "name": "PreviousNextNavigation", - "category": "layout", - "purpose": "Reusable previous next navigation component." - }, - { - "name": "PriceInput", - "category": "forms", - "purpose": "Reusable price input component." - }, - { - "name": "PriceRangeSlider", - "category": "content", - "purpose": "Reusable price range slider component." - }, - { - "name": "PriceText", - "category": "content", - "purpose": "Reusable price text component." - }, - { - "name": "PricingCard", - "category": "content", - "purpose": "Reusable pricing card component." - }, - { - "name": "PricingComparisonTable", - "category": "data", - "purpose": "Reusable pricing comparison table component." - }, - { - "name": "PricingContactForm", - "category": "content", - "purpose": "Reusable pricing contact form component." - }, - { - "name": "PricingFeatureGroup", - "category": "forms", - "purpose": "Reusable pricing feature group component." - }, - { - "name": "PricingGrid", - "category": "data", - "purpose": "Reusable pricing grid component." - }, - { - "name": "PricingHero", - "category": "layout", - "purpose": "Reusable pricing hero component." - }, - { - "name": "PricingPlanCard", - "category": "content", - "purpose": "Reusable pricing plan card component." - }, - { - "name": "PricingTable", - "category": "data", - "purpose": "Reusable pricing table component." - }, - { - "name": "PricingToggle", - "category": "forms", - "purpose": "Reusable pricing toggle component." - }, - { - "name": "PrimaryButton", - "category": "actions", - "purpose": "Reusable primary button component." - }, - { - "name": "PrintAction", - "category": "actions", - "purpose": "Reusable print action component." - }, - { - "name": "PrintPolicyButton", - "category": "actions", - "purpose": "Reusable print policy button component." - }, - { - "name": "PrioritySelector", - "category": "forms", - "purpose": "Reusable priority selector component." - }, - { - "name": "PrivacyNotice", - "category": "feedback", - "purpose": "Reusable privacy notice component." - }, - { - "name": "ProductArchitectureDiagram", - "category": "visualization", - "purpose": "Reusable product architecture diagram component." - }, - { - "name": "ProductCTA", - "category": "actions", - "purpose": "Reusable product c t a component." - }, - { - "name": "ProductCard", - "category": "content", - "purpose": "Reusable product card component." - }, - { - "name": "ProductCategorySection", - "category": "layout", - "purpose": "Reusable product category section component." - }, - { - "name": "ProductFeatureList", - "category": "data", - "purpose": "Reusable product feature list component." - }, - { - "name": "ProductGrid", - "category": "data", - "purpose": "Reusable product grid component." - }, - { - "name": "ProductHero", - "category": "layout", - "purpose": "Reusable product hero component." - }, - { - "name": "ProductIcon", - "category": "content", - "purpose": "Reusable product icon component." - }, - { - "name": "ProductIntegrationList", - "category": "data", - "purpose": "Reusable product integration list component." - }, - { - "name": "ProductList", - "category": "data", - "purpose": "Reusable product list component." - }, - { - "name": "ProductLogo", - "category": "content", - "purpose": "Reusable product logo component." - }, - { - "name": "ProductMiniCard", - "category": "content", - "purpose": "Reusable product mini card component." - }, - { - "name": "ProductNavigationCard", - "category": "content", - "purpose": "Reusable product navigation card component." - }, - { - "name": "ProductPageShell", - "category": "layout", - "purpose": "Reusable product page shell component." - }, - { - "name": "ProductSelector", - "category": "forms", - "purpose": "Reusable product selector component." - }, - { - "name": "ProductStatusBadge", - "category": "feedback", - "purpose": "Reusable product status badge component." - }, - { - "name": "ProductUseCaseList", - "category": "data", - "purpose": "Reusable product use case list component." - }, - { - "name": "ProductsMegaMenu", - "category": "overlays", - "purpose": "Reusable products mega menu component." - }, - { - "name": "ProgressChart", - "category": "visualization", - "purpose": "Reusable progress chart component." - }, - { - "name": "ProgressRing", - "category": "visualization", - "purpose": "Reusable progress ring component." - }, - { - "name": "ProgressSlider", - "category": "content", - "purpose": "Reusable progress slider component." - }, - { - "name": "ProjectCard", - "category": "content", - "purpose": "Reusable project card component." - }, - { - "name": "ProjectSelector", - "category": "forms", - "purpose": "Reusable project selector component." - }, - { - "name": "ProjectSwitcher", - "category": "content", - "purpose": "Reusable project switcher component." - }, - { - "name": "PromoCodeInput", - "category": "forms", - "purpose": "Reusable promo code input component." - }, - { - "name": "PromptDialog", - "category": "overlays", - "purpose": "Reusable prompt dialog component." - }, - { - "name": "ProviderSelector", - "category": "forms", - "purpose": "Reusable provider selector component." - }, - { - "name": "PublicHeader", - "category": "layout", - "purpose": "Reusable public header component." - }, - { - "name": "PublicHeaderLogo", - "category": "content", - "purpose": "Reusable public header logo component." - }, - { - "name": "PublicPageShell", - "category": "layout", - "purpose": "Reusable public page shell component." - }, - { - "name": "PublishDateTimePicker", - "category": "forms", - "purpose": "Reusable publish date time picker component." - }, - { - "name": "PushComposer", - "category": "content", - "purpose": "Reusable push composer component." - }, - { - "name": "PushNotificationEditor", - "category": "forms", - "purpose": "Reusable push notification editor component." - }, - { - "name": "QrCode", - "category": "content", - "purpose": "Reusable qr code component." - }, - { - "name": "QuantityInput", - "category": "forms", - "purpose": "Reusable quantity input component." - }, - { - "name": "QuantityStepper", - "category": "content", - "purpose": "Reusable quantity stepper component." - }, - { - "name": "QuietHoursPicker", - "category": "forms", - "purpose": "Reusable quiet hours picker component." - }, - { - "name": "QuoteText", - "category": "content", - "purpose": "Reusable quote text component." - }, - { - "name": "RadioGroup", - "category": "forms", - "purpose": "Reusable radio group component." - }, - { - "name": "RangeInput", - "category": "forms", - "purpose": "Reusable range input component." + "purpose": "Theme-aware, responsive select component." }, { "name": "RangeSlider", - "category": "content", - "purpose": "Reusable range slider component." - }, - { - "name": "RateLimitInput", "category": "forms", - "purpose": "Reusable rate limit input component." + "purpose": "Theme-aware, responsive range slider component." }, { - "name": "RateLimitPage", - "category": "content", - "purpose": "Reusable rate limit page component." - }, - { - "name": "RateLimitedState", - "category": "feedback", - "purpose": "Reusable rate limited state component." - }, - { - "name": "RateTable", - "category": "data", - "purpose": "Reusable rate table component." - }, - { - "name": "RatingSlider", - "category": "content", - "purpose": "Reusable rating slider component." - }, - { - "name": "RecipientSelector", + "name": "ColorPicker", "category": "forms", - "purpose": "Reusable recipient selector component." - }, - { - "name": "RecoveryCodeForm", - "category": "content", - "purpose": "Reusable recovery code form component." - }, - { - "name": "RecoveryCodeInput", - "category": "forms", - "purpose": "Reusable recovery code input component." - }, - { - "name": "RecurrenceRuleBuilder", - "category": "content", - "purpose": "Reusable recurrence rule builder component." - }, - { - "name": "RecurringSchedulePicker", - "category": "forms", - "purpose": "Reusable recurring schedule picker component." - }, - { - "name": "RedirectUriInput", - "category": "forms", - "purpose": "Reusable redirect uri input component." - }, - { - "name": "ReferenceInput", - "category": "forms", - "purpose": "Reusable reference input component." - }, - { - "name": "RegexInput", - "category": "forms", - "purpose": "Reusable regex input component." - }, - { - "name": "RegionAvailabilityTable", - "category": "data", - "purpose": "Reusable region availability table component." - }, - { - "name": "RegionSelector", - "category": "forms", - "purpose": "Reusable region selector component." - }, - { - "name": "RegionUnavailableAlert", - "category": "feedback", - "purpose": "Reusable region unavailable alert component." - }, - { - "name": "RegionUnavailableState", - "category": "feedback", - "purpose": "Reusable region unavailable state component." - }, - { - "name": "RegionalPrivacyBanner", - "category": "feedback", - "purpose": "Reusable regional privacy banner component." - }, - { - "name": "RejectOptionalCookiesButton", - "category": "actions", - "purpose": "Reusable reject optional cookies button component." - }, - { - "name": "ReopenCookieSettingsButton", - "category": "actions", - "purpose": "Reusable reopen cookie settings button component." - }, - { - "name": "ReportCard", - "category": "content", - "purpose": "Reusable report card component." - }, - { - "name": "RequestResponseViewer", - "category": "content", - "purpose": "Reusable request response viewer component." - }, - { - "name": "RequestViewer", - "category": "content", - "purpose": "Reusable request viewer component." - }, - { - "name": "RequiredIndicator", - "category": "feedback", - "purpose": "Reusable required indicator component." - }, - { - "name": "ResetPasswordForm", - "category": "content", - "purpose": "Reusable reset password form component." - }, - { - "name": "ResizablePanel", - "category": "layout", - "purpose": "Reusable resizable panel component." - }, - { - "name": "ResourceCard", - "category": "content", - "purpose": "Reusable resource card component." - }, - { - "name": "ResourceDownloadCard", - "category": "content", - "purpose": "Reusable resource download card component." - }, - { - "name": "ResourcePageShell", - "category": "layout", - "purpose": "Reusable resource page shell component." - }, - { - "name": "ResourceSearch", - "category": "content", - "purpose": "Reusable resource search component." - }, - { - "name": "ResourceTypeBadge", - "category": "feedback", - "purpose": "Reusable resource type badge component." - }, - { - "name": "ResourcesMegaMenu", - "category": "overlays", - "purpose": "Reusable resources mega menu component." - }, - { - "name": "ResponseViewer", - "category": "content", - "purpose": "Reusable response viewer component." - }, - { - "name": "ResponsibleDisclosureCTA", - "category": "actions", - "purpose": "Reusable responsible disclosure c t a component." - }, - { - "name": "ResponsiveTable", - "category": "data", - "purpose": "Reusable responsive table component." - }, - { - "name": "ResultsSection", - "category": "layout", - "purpose": "Reusable results section component." - }, - { - "name": "RetentionTable", - "category": "data", - "purpose": "Reusable retention table component." - }, - { - "name": "RetryCountInput", - "category": "forms", - "purpose": "Reusable retry count input component." - }, - { - "name": "RevenueChart", - "category": "visualization", - "purpose": "Reusable revenue chart component." - }, - { - "name": "RgbColorInput", - "category": "forms", - "purpose": "Reusable rgb color input component." - }, - { - "name": "RichTextEditor", - "category": "forms", - "purpose": "Reusable rich text editor component." - }, - { - "name": "RichTextInput", - "category": "forms", - "purpose": "Reusable rich text input component." - }, - { - "name": "RoleSelector", - "category": "forms", - "purpose": "Reusable role selector component." - }, - { - "name": "RollingDateRangePicker", - "category": "forms", - "purpose": "Reusable rolling date range picker component." - }, - { - "name": "SDKCard", - "category": "content", - "purpose": "Reusable s d k card component." - }, - { - "name": "SDKLanguageTabs", - "category": "content", - "purpose": "Reusable s d k language tabs component." - }, - { - "name": "SaveCookiePreferencesButton", - "category": "actions", - "purpose": "Reusable save cookie preferences button component." - }, - { - "name": "SavedFilterSelector", - "category": "forms", - "purpose": "Reusable saved filter selector component." - }, - { - "name": "ScheduleMessagePicker", - "category": "forms", - "purpose": "Reusable schedule message picker component." - }, - { - "name": "SchedulePicker", - "category": "forms", - "purpose": "Reusable schedule picker component." - }, - { - "name": "ScheduledDateTimePicker", - "category": "forms", - "purpose": "Reusable scheduled date time picker component." - }, - { - "name": "ScreenshotFrame", - "category": "layout", - "purpose": "Reusable screenshot frame component." - }, - { - "name": "SdkLanguageSelector", - "category": "forms", - "purpose": "Reusable sdk language selector component." - }, - { - "name": "SearchButton", - "category": "actions", - "purpose": "Reusable search button component." - }, - { - "name": "SearchCategoryTabs", - "category": "content", - "purpose": "Reusable search category tabs component." - }, - { - "name": "SearchDialog", - "category": "overlays", - "purpose": "Reusable search dialog component." - }, - { - "name": "SearchEmptyState", - "category": "feedback", - "purpose": "Reusable search empty state component." - }, - { - "name": "SearchInput", - "category": "forms", - "purpose": "Reusable search input component." - }, - { - "name": "SearchLoadingState", - "category": "feedback", - "purpose": "Reusable search loading state component." - }, - { - "name": "SearchResultItem", - "category": "content", - "purpose": "Reusable search result item component." - }, - { - "name": "SecondPicker", - "category": "forms", - "purpose": "Reusable second picker component." - }, - { - "name": "SecondaryButton", - "category": "actions", - "purpose": "Reusable secondary button component." - }, - { - "name": "SecretDisplay", - "category": "content", - "purpose": "Reusable secret display component." - }, - { - "name": "SecretInput", - "category": "forms", - "purpose": "Reusable secret input component." - }, - { - "name": "SecretRevealDialog", - "category": "overlays", - "purpose": "Reusable secret reveal dialog component." - }, - { - "name": "Section", - "category": "layout", - "purpose": "Reusable section component." - }, - { - "name": "SectionActions", - "category": "actions", - "purpose": "Reusable section actions component." - }, - { - "name": "SectionHeader", - "category": "layout", - "purpose": "Reusable section header component." - }, - { - "name": "SecurityAlert", - "category": "feedback", - "purpose": "Reusable security alert component." - }, - { - "name": "SecurityContactCard", - "category": "content", - "purpose": "Reusable security contact card component." - }, - { - "name": "SecurityFeatureCard", - "category": "content", - "purpose": "Reusable security feature card component." - }, - { - "name": "SecurityHero", - "category": "layout", - "purpose": "Reusable security hero component." - }, - { - "name": "SecurityPillarGrid", - "category": "data", - "purpose": "Reusable security pillar grid component." - }, - { - "name": "SecurityPracticeList", - "category": "data", - "purpose": "Reusable security practice list component." - }, - { - "name": "SecurityReportForm", - "category": "content", - "purpose": "Reusable security report form component." - }, - { - "name": "SenderIdInput", - "category": "forms", - "purpose": "Reusable sender id input component." - }, - { - "name": "ServerErrorPage", - "category": "content", - "purpose": "Reusable server error page component." - }, - { - "name": "ServiceLevelTable", - "category": "data", - "purpose": "Reusable service level table component." - }, - { - "name": "ServiceStatusBadge", - "category": "feedback", - "purpose": "Reusable service status badge component." - }, - { - "name": "ServiceStatusList", - "category": "data", - "purpose": "Reusable service status list component." - }, - { - "name": "ServiceStatusRow", - "category": "data", - "purpose": "Reusable service status row component." - }, - { - "name": "SessionCard", - "category": "content", - "purpose": "Reusable session card component." - }, - { - "name": "SessionExpiredDialog", - "category": "overlays", - "purpose": "Reusable session expired dialog component." - }, - { - "name": "SetupChecklist", - "category": "content", - "purpose": "Reusable setup checklist component." - }, - { - "name": "SeveritySelector", - "category": "forms", - "purpose": "Reusable severity selector component." - }, - { - "name": "ShadowPicker", - "category": "forms", - "purpose": "Reusable shadow picker component." - }, - { - "name": "ShareAction", - "category": "actions", - "purpose": "Reusable share action component." - }, - { - "name": "ShareButton", - "category": "actions", - "purpose": "Reusable share button component." - }, - { - "name": "SidePanel", - "category": "layout", - "purpose": "Reusable side panel component." - }, - { - "name": "SidebarLayout", - "category": "layout", - "purpose": "Reusable sidebar layout component." - }, - { - "name": "SignInForm", - "category": "content", - "purpose": "Reusable sign in form component." - }, - { - "name": "SignInLink", - "category": "actions", - "purpose": "Reusable sign in link component." - }, - { - "name": "SignUpForm", - "category": "content", - "purpose": "Reusable sign up form component." - }, - { - "name": "SiteSearch", - "category": "content", - "purpose": "Reusable site search component." - }, - { - "name": "Skeleton", - "category": "feedback", - "purpose": "Reusable skeleton component." - }, - { - "name": "SkipLink", - "category": "actions", - "purpose": "Reusable skip link component." - }, - { - "name": "SlaTable", - "category": "data", - "purpose": "Reusable sla table component." - }, - { - "name": "Slider", - "category": "content", - "purpose": "Reusable slider component." - }, - { - "name": "SlugInput", - "category": "forms", - "purpose": "Reusable slug input component." - }, - { - "name": "SmallText", - "category": "content", - "purpose": "Reusable small text component." - }, - { - "name": "SmartRouteDiagram", - "category": "visualization", - "purpose": "Reusable smart route diagram component." - }, - { - "name": "SmsComposer", - "category": "content", - "purpose": "Reusable sms composer component." - }, - { - "name": "SmsMessageEditor", - "category": "forms", - "purpose": "Reusable sms message editor component." - }, - { - "name": "SmsSegmentCounter", - "category": "feedback", - "purpose": "Reusable sms segment counter component." - }, - { - "name": "SolutionHero", - "category": "layout", - "purpose": "Reusable solution hero component." - }, - { - "name": "SolutionPageShell", - "category": "layout", - "purpose": "Reusable solution page shell component." - }, - { - "name": "SolutionSection", - "category": "layout", - "purpose": "Reusable solution section component." - }, - { - "name": "SolutionsMegaMenu", - "category": "overlays", - "purpose": "Reusable solutions mega menu component." - }, - { - "name": "SortableTable", - "category": "data", - "purpose": "Reusable sortable table component." - }, - { - "name": "SplitButton", - "category": "actions", - "purpose": "Reusable split button component." - }, - { - "name": "SplitCTA", - "category": "actions", - "purpose": "Reusable split c t a component." - }, - { - "name": "SplitHero", - "category": "layout", - "purpose": "Reusable split hero component." - }, - { - "name": "SplitLayout", - "category": "layout", - "purpose": "Reusable split layout component." - }, - { - "name": "SplitSectionHeader", - "category": "layout", - "purpose": "Reusable split section header component." - }, - { - "name": "StartFreeButton", - "category": "actions", - "purpose": "Reusable start free button component." - }, - { - "name": "StatCard", - "category": "content", - "purpose": "Reusable stat card component." - }, - { - "name": "StateSelector", - "category": "forms", - "purpose": "Reusable state selector component." - }, - { - "name": "StatusBadge", - "category": "feedback", - "purpose": "Reusable status badge component." - }, - { - "name": "StatusPageShell", - "category": "layout", - "purpose": "Reusable status page shell component." - }, - { - "name": "StatusSelector", - "category": "forms", - "purpose": "Reusable status selector component." - }, - { - "name": "StatusSubscribeForm", - "category": "content", - "purpose": "Reusable status subscribe form component." - }, - { - "name": "StatusTable", - "category": "data", - "purpose": "Reusable status table component." - }, - { - "name": "StepNavigation", - "category": "layout", - "purpose": "Reusable step navigation component." - }, - { - "name": "StepUpAuthenticationDialog", - "category": "overlays", - "purpose": "Reusable step up authentication dialog component." - }, - { - "name": "Stepper", - "category": "content", - "purpose": "Reusable stepper component." - }, - { - "name": "StepperInput", - "category": "forms", - "purpose": "Reusable stepper input component." - }, - { - "name": "StickerPicker", - "category": "forms", - "purpose": "Reusable sticker picker component." - }, - { - "name": "StickyLayout", - "category": "layout", - "purpose": "Reusable sticky layout component." - }, - { - "name": "StreetAddressInput", - "category": "forms", - "purpose": "Reusable street address input component." - }, - { - "name": "SubdomainInput", - "category": "forms", - "purpose": "Reusable subdomain input component." - }, - { - "name": "SubjectInput", - "category": "forms", - "purpose": "Reusable subject input component." - }, - { - "name": "SubprocessorTable", - "category": "data", - "purpose": "Reusable subprocessor table component." - }, - { - "name": "SuccessCard", - "category": "content", - "purpose": "Reusable success card component." - }, - { - "name": "SuccessState", - "category": "feedback", - "purpose": "Reusable success state component." - }, - { - "name": "SupportRequestForm", - "category": "content", - "purpose": "Reusable support request form component." - }, - { - "name": "Table", - "category": "data", - "purpose": "Reusable table component." - }, - { - "name": "TableHeader", - "category": "layout", - "purpose": "Reusable table header component." - }, - { - "name": "TableRow", - "category": "data", - "purpose": "Reusable table row component." - }, - { - "name": "TableSkeleton", - "category": "feedback", - "purpose": "Reusable table skeleton component." - }, - { - "name": "Tabs", - "category": "content", - "purpose": "Reusable tabs component." - }, - { - "name": "TagInput", - "category": "forms", - "purpose": "Reusable tag input component." - }, - { - "name": "TaxNotice", - "category": "feedback", - "purpose": "Reusable tax notice component." - }, - { - "name": "TaxRateInput", - "category": "forms", - "purpose": "Reusable tax rate input component." - }, - { - "name": "TeamMemberCard", - "category": "content", - "purpose": "Reusable team member card component." - }, - { - "name": "TeamSizeSelector", - "category": "forms", - "purpose": "Reusable team size selector component." - }, - { - "name": "TemplateCard", - "category": "content", - "purpose": "Reusable template card component." - }, - { - "name": "TemplateSelector", - "category": "forms", - "purpose": "Reusable template selector component." - }, - { - "name": "TemplateVariableInput", - "category": "forms", - "purpose": "Reusable template variable input component." - }, - { - "name": "TenantIsolationDiagram", - "category": "visualization", - "purpose": "Reusable tenant isolation diagram component." - }, - { - "name": "TerminalBlock", - "category": "content", - "purpose": "Reusable terminal block component." - }, - { - "name": "TertiaryButton", - "category": "actions", - "purpose": "Reusable tertiary button component." - }, - { - "name": "TestMessageDialog", - "category": "overlays", - "purpose": "Reusable test message dialog component." - }, - { - "name": "TestimonialCard", - "category": "content", - "purpose": "Reusable testimonial card component." - }, - { - "name": "TestimonialCarousel", - "category": "content", - "purpose": "Reusable testimonial carousel component." - }, - { - "name": "TextInput", - "category": "forms", - "purpose": "Reusable text input component." - }, - { - "name": "TextLink", - "category": "actions", - "purpose": "Reusable text link component." - }, - { - "name": "TextSkeleton", - "category": "feedback", - "purpose": "Reusable text skeleton component." - }, - { - "name": "ThemeColorPicker", - "category": "forms", - "purpose": "Reusable theme color picker component." - }, - { - "name": "ThemeSwitcher", - "category": "content", - "purpose": "Reusable theme switcher component." - }, - { - "name": "TimeInput", - "category": "forms", - "purpose": "Reusable time input component." + "purpose": "Theme-aware, responsive color picker component." }, { "name": "TimePicker", "category": "forms", - "purpose": "Reusable time picker component." + "purpose": "Theme-aware, responsive time picker component." }, { - "name": "TimeRangePicker", - "category": "forms", - "purpose": "Reusable time range picker component." + "name": "AdvancedSelect", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive advanced select component.", + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"] }, { - "name": "Timeline", - "category": "visualization", - "purpose": "Reusable timeline component." + "name": "ComboBox", + "category": "advanced-forms", + "purpose": "Editable autocomplete combobox with local and remote suggestions.", + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"] }, { - "name": "TimelineChart", - "category": "visualization", - "purpose": "Reusable timeline chart component." + "name": "SearchBox", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive search box component." }, { - "name": "TimelineItem", - "category": "content", - "purpose": "Reusable timeline item component." + "name": "InputNumber", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive input number component." }, { - "name": "TimeoutInput", - "category": "forms", - "purpose": "Reusable timeout input component." + "name": "StrongPassword", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive strong password component." }, { - "name": "TimezoneAwareTimePicker", - "category": "forms", - "purpose": "Reusable timezone aware time picker component." + "name": "TogglePassword", + "category": "advanced-forms", + "purpose": "Accessible password field with optional show and hide controls.", + "events": ["input", "change", "toggle"] }, { - "name": "TimezoneSelector", - "category": "forms", - "purpose": "Reusable timezone selector component." + "name": "ToggleCount", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive toggle count component." }, { - "name": "ToastAction", - "category": "actions", - "purpose": "Reusable toast action component." + "name": "CopyMarkup", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive copy markup component." }, { - "name": "ToastIcon", - "category": "content", - "purpose": "Reusable toast icon component." + "name": "PinInput", + "category": "advanced-forms", + "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.", + "events": ["input", "change", "complete", "paste", "clear", "error"] }, { - "name": "ToastProgress", - "category": "visualization", - "purpose": "Reusable toast progress component." + "name": "Dropdown", + "category": "overlays", + "purpose": "Theme-aware, responsive dropdown component." }, { - "name": "Toggle", - "category": "forms", - "purpose": "Reusable toggle component." + "name": "ContextMenu", + "category": "overlays", + "purpose": "Theme-aware, responsive context menu component." }, { - "name": "ToggleGroup", - "category": "forms", - "purpose": "Reusable toggle group component." + "name": "Modal", + "category": "overlays", + "purpose": "Theme-aware, responsive modal component." }, { - "name": "TokenInput", - "category": "forms", - "purpose": "Reusable token input component." + "name": "Drawer", + "category": "overlays", + "purpose": "Theme-aware, responsive drawer component." + }, + { + "name": "Popover", + "category": "overlays", + "purpose": "Theme-aware, responsive popover component." }, { "name": "Tooltip", - "category": "content", - "purpose": "Reusable tooltip component." - }, - { - "name": "TotpVerificationForm", - "category": "content", - "purpose": "Reusable totp verification form component." - }, - { - "name": "TranslatedText", - "category": "content", - "purpose": "Reusable translated text component." - }, - { - "name": "TreeTable", - "category": "data", - "purpose": "Reusable tree table component." - }, - { - "name": "TrendIndicator", - "category": "feedback", - "purpose": "Reusable trend indicator component." - }, - { - "name": "TruncatedText", - "category": "content", - "purpose": "Reusable truncated text component." - }, - { - "name": "TrustBadgeList", - "category": "data", - "purpose": "Reusable trust badge list component." - }, - { - "name": "UnavailableRegionState", - "category": "feedback", - "purpose": "Reusable unavailable region state component." - }, - { - "name": "UnifiedTimelinePreview", - "category": "content", - "purpose": "Reusable unified timeline preview component." - }, - { - "name": "UnsavedChangesDialog", "category": "overlays", - "purpose": "Reusable unsaved changes dialog component." + "purpose": "Theme-aware, responsive tooltip component." }, { - "name": "UploadItem", - "category": "content", - "purpose": "Reusable upload item component." + "name": "Table", + "category": "tables", + "purpose": "Theme-aware, responsive table component." }, { - "name": "UploadPreview", - "category": "content", - "purpose": "Reusable upload preview component." + "name": "AdvancedRangeSlider", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced range slider component." }, { - "name": "UploadProgress", - "category": "visualization", - "purpose": "Reusable upload progress component." + "name": "AdvancedDatePicker", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced date picker component." }, { - "name": "UptimeChart", - "category": "visualization", - "purpose": "Reusable uptime chart component." + "name": "Chart", + "category": "integrations", + "purpose": "Theme-aware, responsive chart component." }, { - "name": "UptimeMetric", - "category": "visualization", - "purpose": "Reusable uptime metric component." + "name": "Clipboard", + "category": "integrations", + "purpose": "Theme-aware, responsive clipboard component." }, { - "name": "UrlInput", - "category": "forms", - "purpose": "Reusable url input component." + "name": "Confetti", + "category": "integrations", + "purpose": "Theme-aware, responsive confetti component." }, { - "name": "UsagePricingTable", - "category": "data", - "purpose": "Reusable usage pricing table component." + "name": "DataMap", + "category": "integrations", + "purpose": "Theme-aware, responsive data map component." }, { - "name": "UseCaseSelector", - "category": "forms", - "purpose": "Reusable use case selector component." + "name": "DataTable", + "category": "integrations", + "purpose": "Theme-aware, responsive data table component." }, { - "name": "UserCard", - "category": "content", - "purpose": "Reusable user card component." + "name": "DragAndDrop", + "category": "integrations", + "purpose": "Theme-aware, responsive drag and drop component." }, { - "name": "UsernameInput", - "category": "forms", - "purpose": "Reusable username input component." + "name": "FileUpload", + "category": "integrations", + "purpose": "Theme-aware, responsive file upload component." }, { - "name": "ValueCard", - "category": "content", - "purpose": "Reusable value card component." + "name": "Map", + "category": "integrations", + "purpose": "Theme-aware, responsive map component." }, { - "name": "ValuesGrid", - "category": "data", - "purpose": "Reusable values grid component." + "name": "ToastNotifications", + "category": "integrations", + "purpose": "Theme-aware, responsive toast notifications component." }, { - "name": "VerificationCodeInput", - "category": "forms", - "purpose": "Reusable verification code input component." - }, - { - "name": "VerifiedBadge", - "category": "feedback", - "purpose": "Reusable verified badge component." - }, - { - "name": "VersionSelector", - "category": "forms", - "purpose": "Reusable version selector component." - }, - { - "name": "VerticalTabs", - "category": "content", - "purpose": "Reusable vertical tabs component." - }, - { - "name": "VideoCard", - "category": "content", - "purpose": "Reusable video card component." - }, - { - "name": "VideoPreviewDialog", - "category": "overlays", - "purpose": "Reusable video preview dialog component." - }, - { - "name": "VideoUpload", - "category": "content", - "purpose": "Reusable video upload component." - }, - { - "name": "VirtualizedTable", - "category": "data", - "purpose": "Reusable virtualized table component." - }, - { - "name": "VisionSection", - "category": "layout", - "purpose": "Reusable vision section component." - }, - { - "name": "VoiceScriptComposer", - "category": "content", - "purpose": "Reusable voice script composer component." - }, - { - "name": "VoiceScriptEditor", - "category": "forms", - "purpose": "Reusable voice script editor component." - }, - { - "name": "VolumeInput", - "category": "forms", - "purpose": "Reusable volume input component." - }, - { - "name": "VolumeSlider", - "category": "content", - "purpose": "Reusable volume slider component." - }, - { - "name": "WarningCard", - "category": "content", - "purpose": "Reusable warning card component." - }, - { - "name": "WebhookEventCard", - "category": "content", - "purpose": "Reusable webhook event card component." - }, - { - "name": "WebhookFlowDiagram", - "category": "visualization", - "purpose": "Reusable webhook flow diagram component." - }, - { - "name": "WebhookPayloadViewer", - "category": "content", - "purpose": "Reusable webhook payload viewer component." - }, - { - "name": "WebhookUrlInput", - "category": "forms", - "purpose": "Reusable webhook url input component." - }, - { - "name": "WebinarCard", - "category": "content", - "purpose": "Reusable webinar card component." - }, - { - "name": "WebinarRegistrationForm", - "category": "content", - "purpose": "Reusable webinar registration form component." - }, - { - "name": "WhatsAppComposer", - "category": "content", - "purpose": "Reusable whats app composer component." - }, - { - "name": "WhatsAppNumberInput", - "category": "forms", - "purpose": "Reusable whats app number input component." - }, - { - "name": "WhatsAppTemplateEditor", - "category": "forms", - "purpose": "Reusable whats app template editor component." - }, - { - "name": "Wizard", - "category": "content", - "purpose": "Reusable wizard component." - }, - { - "name": "WizardHeader", - "category": "layout", - "purpose": "Reusable wizard header component." - }, - { - "name": "WizardNavigation", - "category": "layout", - "purpose": "Reusable wizard navigation component." - }, - { - "name": "WorkflowCanvasPreview", - "category": "content", - "purpose": "Reusable workflow canvas preview component." - }, - { - "name": "WorkflowProgress", - "category": "visualization", - "purpose": "Reusable workflow progress component." - }, - { - "name": "WorkspaceCard", - "category": "content", - "purpose": "Reusable workspace card component." - }, - { - "name": "WorkspaceSelector", - "category": "forms", - "purpose": "Reusable workspace selector component." - }, - { - "name": "WorkspaceSwitcher", - "category": "content", - "purpose": "Reusable workspace switcher component." - }, - { - "name": "YearPicker", - "category": "forms", - "purpose": "Reusable year picker component." - }, - { - "name": "ZoomSlider", - "category": "content", - "purpose": "Reusable zoom slider component." + "name": "WysiwygEditor", + "category": "integrations", + "purpose": "Theme-aware, responsive wysiwyg editor component." } ] } diff --git a/.publish/ui/component-migrations.json b/.publish/ui/component-migrations.json new file mode 100644 index 00000000..58fb01f2 --- /dev/null +++ b/.publish/ui/component-migrations.json @@ -0,0 +1,5 @@ +{ + "generatedFrom": "full component catalog reset", + "removedCount": 0, + "replacements": {} +} diff --git a/.publish/ui/component-reference.json b/.publish/ui/component-reference.json index df0ae73b..86bbad7c 100644 --- a/.publish/ui/component-reference.json +++ b/.publish/ui/component-reference.json @@ -1,39 +1,33 @@ { "generatedFrom": "packages/ui/components/*.wrn", - "count": 902, + "count": 85, "components": [ { - "name": "AcceptAllCookiesButton", - "mount": "AcceptAllCookiesButton", - "category": "actions", - "purpose": "Reusable accept all cookies button component.", + "name": "Accordion", + "mount": "Accordion", + "category": "base", + "purpose": "Theme-aware, responsive accordion component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"default\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "multiple", "type": "boolean", "required": false, "default": "false" @@ -47,543 +41,31 @@ ], "slots": ["default"], "events": [], - "source": "components/AcceptAllCookiesButton.wrn" - }, - { - "name": "AccessibleAccordion", - "mount": "AccessibleAccordion", - "category": "content", - "purpose": "Reusable accessible accordion component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleAccordion.wrn" - }, - { - "name": "AccessibleCarousel", - "mount": "AccessibleCarousel", - "category": "content", - "purpose": "Reusable accessible carousel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleCarousel.wrn" - }, - { - "name": "AccessibleChartSummary", - "mount": "AccessibleChartSummary", - "category": "content", - "purpose": "Reusable accessible chart summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleChartSummary.wrn" - }, - { - "name": "AccessibleDialog", - "mount": "AccessibleDialog", - "category": "overlays", - "purpose": "Reusable accessible dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleDialog.wrn" - }, - { - "name": "AccessibleErrorSummary", - "mount": "AccessibleErrorSummary", - "category": "content", - "purpose": "Reusable accessible error summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleErrorSummary.wrn" - }, - { - "name": "AccessibleIcon", - "mount": "AccessibleIcon", - "category": "content", - "purpose": "Reusable accessible icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleIcon.wrn" - }, - { - "name": "AccessibleMenu", - "mount": "AccessibleMenu", - "category": "overlays", - "purpose": "Reusable accessible menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleMenu.wrn" - }, - { - "name": "AccessibleTabs", - "mount": "AccessibleTabs", - "category": "content", - "purpose": "Reusable accessible tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleTabs.wrn" - }, - { - "name": "AccessibleTooltip", - "mount": "AccessibleTooltip", - "category": "content", - "purpose": "Reusable accessible tooltip component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleTooltip.wrn" - }, - { - "name": "Accordion", - "mount": "Accordion", - "category": "content", - "purpose": "Reusable accordion component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Question\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": ["default"], - "events": ["click"], "source": "components/Accordion.wrn" }, { - "name": "AccountMenu", - "mount": "AccountMenu", - "category": "overlays", - "purpose": "Reusable account menu component.", + "name": "AdvancedDatePicker", + "mount": "AdvancedDatePicker", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced date picker component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Advanced Date Picker\"" }, { "name": "description", @@ -592,57 +74,10 @@ "default": "\"\"" }, { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", + "name": "items", "type": "string", "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccountMenu.wrn" - }, - { - "name": "AccountStatusBanner", - "mount": "AccountStatusBanner", - "category": "feedback", - "purpose": "Reusable account status banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"AccountStatus\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -659,19 +94,31 @@ ], "slots": ["default"], "events": [], - "source": "components/AccountStatusBanner.wrn" + "source": "components/AdvancedDatePicker.wrn" }, { - "name": "ActionMenu", - "mount": "ActionMenu", - "category": "overlays", - "purpose": "Reusable action menu component.", + "name": "AdvancedRangeSlider", + "mount": "AdvancedRangeSlider", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced range slider component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Advanced Range Slider\"" }, { "name": "description", @@ -680,16 +127,16 @@ "default": "\"\"" }, { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", + "name": "items", "type": "string", "required": false, - "default": "\"Close\"" + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" }, { "name": "class", @@ -700,160 +147,31 @@ ], "slots": ["default"], "events": [], - "source": "components/ActionMenu.wrn" + "source": "components/AdvancedRangeSlider.wrn" }, { - "name": "ActiveFilterList", - "mount": "ActiveFilterList", - "category": "data", - "purpose": "Reusable active filter list component.", + "name": "AdvancedSelect", + "mount": "AdvancedSelect", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive advanced select component.", "props": [ { - "name": "title", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "description", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ActiveFilterList.wrn" - }, - { - "name": "ActivityList", - "mount": "ActivityList", - "category": "data", - "purpose": "Reusable activity list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ActivityList.wrn" - }, - { - "name": "AddOnCard", - "mount": "AddOnCard", - "category": "content", - "purpose": "Reusable add on card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AddOnCard.wrn" - }, - { - "name": "AddressInput", - "mount": "AddressInput", - "category": "forms", - "purpose": "Reusable address input component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Address\"" + "default": "\"Advanced Select\"" }, { "name": "name", @@ -867,20 +185,74 @@ "required": false, "default": "\"\"" }, + { + "name": "values", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "options", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "groups", + "type": "string", + "required": false, + "default": "[]" + }, { "name": "placeholder", "type": "string", "required": false, + "default": "\"Select an option\"" + }, + { + "name": "placeholderIcon", + "type": "string", + "required": false, "default": "\"\"" }, { - "name": "type", + "name": "searchPlaceholder", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"Search options…\"" }, { - "name": "required", + "name": "multiple", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "searchable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "defaultOpen", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "clearable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "allowEmpty", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "tags", "type": "boolean", "required": false, "default": "false" @@ -891,271 +263,6 @@ "required": false, "default": "false" }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AddressInput.wrn" - }, - { - "name": "AddressPreview", - "mount": "AddressPreview", - "category": "content", - "purpose": "Reusable address preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AddressPreview.wrn" - }, - { - "name": "AdvancedFilterBuilder", - "mount": "AdvancedFilterBuilder", - "category": "content", - "purpose": "Reusable advanced filter builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AdvancedFilterBuilder.wrn" - }, - { - "name": "alert", - "mount": "alert", - "category": "core", - "purpose": "Reusable alert component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Notice\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"info\"" - }, - { - "name": "dismissible", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/alert.wrn" - }, - { - "name": "AlertDialog", - "mount": "AlertDialog", - "category": "overlays", - "purpose": "Reusable alert dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AlertDialog.wrn" - }, - { - "name": "AmountInput", - "mount": "AmountInput", - "category": "forms", - "purpose": "Reusable amount input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Amount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, { "name": "required", "type": "boolean", @@ -1163,1203 +270,19 @@ "default": "false" }, { - "name": "disabled", + "name": "invalid", "type": "boolean", "required": false, "default": "false" }, { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AmountInput.wrn" - }, - { - "name": "AnalyticsDashboardPreview", - "mount": "AnalyticsDashboardPreview", - "category": "content", - "purpose": "Reusable analytics dashboard preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AnalyticsDashboardPreview.wrn" - }, - { - "name": "AnchorNavigation", - "mount": "AnchorNavigation", - "category": "layout", - "purpose": "Reusable anchor navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AnchorNavigation.wrn" - }, - { - "name": "AnnouncementBar", - "mount": "AnnouncementBar", - "category": "core", - "purpose": "Reusable announcement bar component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "badge", - "type": "string", - "required": false, - "default": "\"New\"" - }, - { - "name": "message", - "type": "string", - "required": false, - "default": "\"WrNexus Organizations is now available.\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"/organizations\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Explore organizations\"" - }, - { - "name": "ariaLabel", - "type": "string", - "required": false, - "default": "\"Announcement\"" - }, - { - "name": "badgeIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--sparkles]\"" - }, - { - "name": "actionIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--arrow-right]\"" - }, - { - "name": "dismissLabel", - "type": "string", - "required": false, - "default": "\"Dismiss announcement\"" - }, - { - "name": "showBadge", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showDescription", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showAction", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "dismissible", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": [], - "events": ["click"], - "source": "components/AnnouncementBar.wrn" - }, - { - "name": "ApartmentInput", - "mount": "ApartmentInput", - "category": "forms", - "purpose": "Reusable apartment input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Apartment\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApartmentInput.wrn" - }, - { - "name": "ApiAuthenticationNotice", - "mount": "ApiAuthenticationNotice", - "category": "feedback", - "purpose": "Reusable api authentication notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiAuthentication\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiAuthenticationNotice.wrn" - }, - { - "name": "ApiEndpointCard", - "mount": "ApiEndpointCard", - "category": "content", - "purpose": "Reusable api endpoint card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"GET\"" - }, - { - "name": "path", - "type": "string", - "required": false, - "default": "\"/api/example\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"View endpoint\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiEndpointCard.wrn" - }, - { - "name": "ApiErrorExample", - "mount": "ApiErrorExample", - "category": "content", - "purpose": "Reusable api error example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiErrorExample.wrn" - }, - { - "name": "ApiHeaderTable", - "mount": "ApiHeaderTable", - "category": "data", - "purpose": "Reusable api header table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiHeaderTable.wrn" - }, - { - "name": "ApiKeyCreateDialog", - "mount": "ApiKeyCreateDialog", - "category": "overlays", - "purpose": "Reusable api key create dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiKeyCreateDialog.wrn" - }, - { - "name": "ApiKeyDisplay", - "mount": "ApiKeyDisplay", - "category": "content", - "purpose": "Reusable api key display component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiKeyDisplay.wrn" - }, - { - "name": "ApiKeyInput", - "mount": "ApiKeyInput", - "category": "forms", - "purpose": "Reusable api key input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiKey\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiKeyInput.wrn" - }, - { - "name": "ApiMethodBadge", - "mount": "ApiMethodBadge", - "category": "feedback", - "purpose": "Reusable api method badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiMethod\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiMethodBadge.wrn" - }, - { - "name": "ApiParameterTable", - "mount": "ApiParameterTable", - "category": "data", - "purpose": "Reusable api parameter table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiParameterTable.wrn" - }, - { - "name": "ApiRateLimitNotice", - "mount": "ApiRateLimitNotice", - "category": "feedback", - "purpose": "Reusable api rate limit notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiRateLimit\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiRateLimitNotice.wrn" - }, - { - "name": "ApiRequestExample", - "mount": "ApiRequestExample", - "category": "content", - "purpose": "Reusable api request example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiRequestExample.wrn" - }, - { - "name": "ApiResponseExample", - "mount": "ApiResponseExample", - "category": "content", - "purpose": "Reusable api response example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiResponseExample.wrn" - }, - { - "name": "ApiSchemaTable", - "mount": "ApiSchemaTable", - "category": "data", - "purpose": "Reusable api schema table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiSchemaTable.wrn" - }, - { - "name": "ApiSchemaViewer", - "mount": "ApiSchemaViewer", - "category": "content", - "purpose": "Reusable api schema viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiSchemaViewer.wrn" - }, - { - "name": "ApiVersionBadge", - "mount": "ApiVersionBadge", - "category": "feedback", - "purpose": "Reusable api version badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiVersion\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiVersionBadge.wrn" - }, - { - "name": "AppHeader", - "mount": "AppHeader", - "category": "layout", - "purpose": "Reusable app header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AppHeader.wrn" - }, - { - "name": "ArchitectureSection", - "mount": "ArchitectureSection", - "category": "layout", - "purpose": "Reusable architecture section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArchitectureSection.wrn" - }, - { - "name": "AreaChart", - "mount": "AreaChart", - "category": "visualization", - "purpose": "Reusable area chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", + "name": "validationMessage", "type": "string", "required": false, "default": "\"\"" }, { - "name": "summary", + "name": "helpText", "type": "string", "required": false, "default": "\"\"" @@ -2371,350 +294,166 @@ "default": "false" }, { - "name": "class", + "name": "loadingLabel", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AreaChart.wrn" - }, - { - "name": "ArticleHero", - "mount": "ArticleHero", - "category": "layout", - "purpose": "Reusable article hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"Loading options…\"" }, { - "name": "title", + "name": "emptyLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"No options found\"" }, { - "name": "description", + "name": "selectedOptionsLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Selected options\"" }, { - "name": "align", + "name": "clearLabel", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"Clear selection\"" }, { - "name": "class", + "name": "createLabel", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleHero.wrn" - }, - { - "name": "ArticleLayout", - "mount": "ArticleLayout", - "category": "layout", - "purpose": "Reusable article layout component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"Create\"" }, { - "name": "title", + "name": "loadMoreLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Load more\"" }, { - "name": "description", + "name": "searchMode", "type": "string", "required": false, - "default": "\"\"" + "default": "\"contains\"" }, { - "name": "align", + "name": "searchFields", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"label,description\"" }, { - "name": "class", - "type": "string", + "name": "minSearchLength", + "type": "number", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleLayout.wrn" - }, - { - "name": "ArticleNewsletterCTA", - "mount": "ArticleNewsletterCTA", - "category": "actions", - "purpose": "Reusable article newsletter c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" + "default": "0" }, { - "name": "href", - "type": "string", + "name": "searchResultLimit", + "type": "number", "required": false, - "default": "\"\"" + "default": "0" }, { - "name": "type", - "type": "string", + "name": "maxSelections", + "type": "number", "required": false, - "default": "\"button\"" + "default": "0" }, { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", + "name": "showCounter", "type": "boolean", "required": false, "default": "false" }, { - "name": "class", + "name": "counterTemplate", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleNewsletterCTA.wrn" - }, - { - "name": "ArticlePageShell", - "mount": "ArticlePageShell", - "category": "layout", - "purpose": "Reusable article page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"{selected} selected\"" }, { - "name": "title", + "name": "optionTemplate", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "description", + "name": "selectedTemplate", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "align", - "type": "string", + "name": "closeOnSelect", + "type": "boolean", "required": false, - "default": "\"start\"" + "default": "true" }, { - "name": "class", - "type": "string", + "name": "scrollToSelected", + "type": "boolean", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticlePageShell.wrn" - }, - { - "name": "ArticleShareActions", - "mount": "ArticleShareActions", - "category": "actions", - "purpose": "Reusable article share actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" + "default": "true" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", + "name": "fixed", "type": "boolean", "required": false, "default": "false" }, { - "name": "class", + "name": "placement", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleShareActions.wrn" - }, - { - "name": "AspectRatio", - "mount": "AspectRatio", - "category": "core", - "purpose": "Reusable aspect ratio component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AspectRatio.wrn" - }, - { - "name": "AssetCard", - "mount": "AssetCard", - "category": "content", - "purpose": "Reusable asset card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"bottom\"" }, { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AssetCard.wrn" - }, - { - "name": "AttachmentPicker", - "mount": "AttachmentPicker", - "category": "forms", - "purpose": "Reusable attachment picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Attachment\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", + "name": "remote", "type": "boolean", "required": false, "default": "false" }, { - "name": "disabled", + "name": "remoteUrl", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "remoteQueryParam", + "type": "string", + "required": false, + "default": "\"q\"" + }, + { + "name": "remoteDebounce", + "type": "number", + "required": false, + "default": "250" + }, + { + "name": "remoteAutoLoad", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "infinite", "type": "boolean", "required": false, "default": "false" }, { - "name": "readonly", + "name": "hasMore", "type": "boolean", "required": false, "default": "false" }, { - "name": "help", - "type": "string", + "name": "page", + "type": "number", "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "1" }, { "name": "class", @@ -2723,723 +462,157 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/AttachmentPicker.wrn" + "slots": [], + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "source": "components/AdvancedSelect.wrn" }, { - "name": "AttachmentUpload", - "mount": "AttachmentUpload", - "category": "content", - "purpose": "Reusable attachment upload component.", + "name": "Alert", + "mount": "Alert", + "category": "base", + "purpose": "Theme-aware, responsive alert component.", "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AttachmentUpload.wrn" - }, - { - "name": "AudioUpload", - "mount": "AudioUpload", - "category": "content", - "purpose": "Reusable audio upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AudioUpload.wrn" - }, - { - "name": "AuditLogPreview", - "mount": "AuditLogPreview", - "category": "content", - "purpose": "Reusable audit log preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuditLogPreview.wrn" - }, - { - "name": "AuditTable", - "mount": "AuditTable", - "category": "data", - "purpose": "Reusable audit table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuditTable.wrn" - }, - { - "name": "AuthenticatorCodeInput", - "mount": "AuthenticatorCodeInput", - "category": "forms", - "purpose": "Reusable authenticator code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"AuthenticatorCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthenticatorCodeInput.wrn" - }, - { - "name": "AuthorAvatar", - "mount": "AuthorAvatar", - "category": "content", - "purpose": "Reusable author avatar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthorAvatar.wrn" - }, - { - "name": "AuthorCard", - "mount": "AuthorCard", - "category": "content", - "purpose": "Reusable author card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthorCard.wrn" - }, - { - "name": "AuthorizedApplicationCard", - "mount": "AuthorizedApplicationCard", - "category": "content", - "purpose": "Reusable authorized application card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthorizedApplicationCard.wrn" - }, - { - "name": "AutoGrid", - "mount": "AutoGrid", - "category": "data", - "purpose": "Reusable auto grid component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AutoGrid.wrn" - }, - { - "name": "AutomationExampleCard", - "mount": "AutomationExampleCard", - "category": "content", - "purpose": "Reusable automation example card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AutomationExampleCard.wrn" - }, - { - "name": "AvailabilityCalendar", - "mount": "AvailabilityCalendar", - "category": "content", - "purpose": "Reusable availability calendar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AvailabilityCalendar.wrn" - }, - { - "name": "Avatar", - "mount": "Avatar", - "category": "content", - "purpose": "Reusable avatar component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "src", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "initials", - "type": "string", - "required": false, - "default": "\"WR\"" - }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Alert\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], - "slots": [], + "slots": ["default"], + "events": [], + "source": "components/Alert.wrn" + }, + { + "name": "Avatar", + "mount": "Avatar", + "category": "base", + "purpose": "Theme-aware, responsive avatar component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Avatar\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], "events": [], "source": "components/Avatar.wrn" }, { "name": "AvatarGroup", "mount": "AvatarGroup", - "category": "forms", - "purpose": "Reusable avatar group component.", + "category": "base", + "purpose": "Theme-aware, responsive avatar group component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Avatar\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Avatar Group\"" + }, + { + "name": "description", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "placeholder", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -3452,187 +625,29 @@ "events": [], "source": "components/AvatarGroup.wrn" }, - { - "name": "AvatarUpload", - "mount": "AvatarUpload", - "category": "content", - "purpose": "Reusable avatar upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AvatarUpload.wrn" - }, - { - "name": "BackButton", - "mount": "BackButton", - "category": "actions", - "purpose": "Reusable back button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BackButton.wrn" - }, - { - "name": "BackToTop", - "mount": "BackToTop", - "category": "core", - "purpose": "Reusable back to top component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Back to top\"" - }, - { - "name": "assistiveLabel", - "type": "string", - "required": false, - "default": "\"Return to the top of the page\"" - }, - { - "name": "threshold", - "type": "number", - "required": false, - "default": "500" - } - ], - "slots": [], - "events": ["click"], - "source": "components/BackToTop.wrn" - }, { "name": "Badge", "mount": "Badge", - "category": "feedback", - "purpose": "Reusable badge component.", + "category": "base", + "purpose": "Theme-aware, responsive badge component.", "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"neutral\"" - }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Badge.wrn" - }, - { - "name": "BankTransferDetails", - "mount": "BankTransferDetails", - "category": "content", - "purpose": "Reusable bank transfer details component.", - "props": [ + "default": "\"default\"" + }, { - "name": "eyebrow", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Badge\"" }, { "name": "description", @@ -3641,139 +656,10 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BankTransferDetails.wrn" - }, - { - "name": "Banner", - "mount": "Banner", - "category": "feedback", - "purpose": "Reusable banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "text", - "type": "string", - "required": false, - "default": "\"Announcement\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"brand\"" - } - ], - "slots": [], - "events": [], - "source": "components/Banner.wrn" - }, - { - "name": "BarChart", - "mount": "BarChart", - "category": "visualization", - "purpose": "Reusable bar chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BarChart.wrn" - }, - { - "name": "BetaBadge", - "mount": "BetaBadge", - "category": "feedback", - "purpose": "Reusable beta badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Beta\"" + "default": "[]" }, { "name": "variant", @@ -3790,25 +676,31 @@ ], "slots": ["default"], "events": [], - "source": "components/BetaBadge.wrn" + "source": "components/Badge.wrn" }, { - "name": "BillingAddressForm", - "mount": "BillingAddressForm", - "category": "content", - "purpose": "Reusable billing address form component.", + "name": "Blockquote", + "mount": "Blockquote", + "category": "base", + "purpose": "Theme-aware, responsive blockquote component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Blockquote\"" }, { "name": "description", @@ -3816,767 +708,6 @@ "required": false, "default": "\"\"" }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BillingAddressForm.wrn" - }, - { - "name": "BillingExample", - "mount": "BillingExample", - "category": "content", - "purpose": "Reusable billing example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BillingExample.wrn" - }, - { - "name": "BillingPeriodToggle", - "mount": "BillingPeriodToggle", - "category": "forms", - "purpose": "Reusable billing period toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BillingPeriod\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BillingPeriodToggle.wrn" - }, - { - "name": "BlackoutDatePicker", - "mount": "BlackoutDatePicker", - "category": "forms", - "purpose": "Reusable blackout date picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BlackoutDate\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlackoutDatePicker.wrn" - }, - { - "name": "BlogCard", - "mount": "BlogCard", - "category": "content", - "purpose": "Reusable blog card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogCard.wrn" - }, - { - "name": "BlogGrid", - "mount": "BlogGrid", - "category": "data", - "purpose": "Reusable blog grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogGrid.wrn" - }, - { - "name": "BlogList", - "mount": "BlogList", - "category": "data", - "purpose": "Reusable blog list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogList.wrn" - }, - { - "name": "BlogSearch", - "mount": "BlogSearch", - "category": "content", - "purpose": "Reusable blog search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogSearch.wrn" - }, - { - "name": "BodyText", - "mount": "BodyText", - "category": "content", - "purpose": "Reusable body text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BodyText.wrn" - }, - { - "name": "BorderRadiusPicker", - "mount": "BorderRadiusPicker", - "category": "forms", - "purpose": "Reusable border radius picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BorderRadius\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BorderRadiusPicker.wrn" - }, - { - "name": "BottomNavigation", - "mount": "BottomNavigation", - "category": "layout", - "purpose": "Reusable bottom navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BottomNavigation.wrn" - }, - { - "name": "BrandColorPicker", - "mount": "BrandColorPicker", - "category": "forms", - "purpose": "Reusable brand color picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BrandColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BrandColorPicker.wrn" - }, - { - "name": "BrandSelector", - "mount": "BrandSelector", - "category": "forms", - "purpose": "Reusable brand selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Brand\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BrandSelector.wrn" - }, - { - "name": "Breadcrumbs", - "mount": "Breadcrumbs", - "category": "core", - "purpose": "Reusable breadcrumbs component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "items", "type": "string", @@ -4584,69 +715,10 @@ "default": "[]" }, { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showHome", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "homeLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Home\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - } - ], - "slots": [], - "events": [], - "source": "components/Breadcrumbs.wrn" - }, - { - "name": "BrowserFrame", - "mount": "BrowserFrame", - "category": "layout", - "purpose": "Reusable browser frame component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" + "default": "\"default\"" }, { "name": "class", @@ -4657,25 +729,78 @@ ], "slots": ["default"], "events": [], - "source": "components/BrowserFrame.wrn" + "source": "components/Blockquote.wrn" }, { - "name": "BudgetRangeSlider", - "mount": "BudgetRangeSlider", - "category": "content", - "purpose": "Reusable budget range slider component.", + "name": "Breadcrumb", + "mount": "Breadcrumb", + "category": "navigation", + "purpose": "Theme-aware, responsive breadcrumb component.", "props": [ { - "name": "eyebrow", + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Breadcrumb\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "title", + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Breadcrumb.wrn" + }, + { + "name": "Button", + "mount": "Button", + "category": "base", + "purpose": "Theme-aware, responsive button component.", + "props": [ + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Button\"" + }, + { + "name": "loadingLabel", + "type": "string", + "required": false, + "default": "\"Loading…\"" }, { "name": "description", @@ -4683,6 +808,12 @@ "required": false, "default": "\"\"" }, + { + "name": "as", + "type": "string", + "required": false, + "default": "\"\"" + }, { "name": "href", "type": "string", @@ -4690,200 +821,17 @@ "default": "\"\"" }, { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", + "name": "target", "type": "string", "required": false, "default": "\"\"" }, { - "name": "alt", + "name": "rel", "type": "string", "required": false, "default": "\"\"" }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BudgetRangeSlider.wrn" - }, - { - "name": "BudgetSelector", - "mount": "BudgetSelector", - "category": "forms", - "purpose": "Reusable budget selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Budget\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BudgetSelector.wrn" - }, - { - "name": "BusinessHoursPicker", - "mount": "BusinessHoursPicker", - "category": "forms", - "purpose": "Reusable business hours picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BusinessHours\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BusinessHoursPicker.wrn" - }, - { - "name": "Button", - "mount": "Button", - "category": "actions", - "purpose": "Reusable button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Button\"" - }, { "name": "type", "type": "string", @@ -4894,13 +842,19 @@ "name": "variant", "type": "string", "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, "default": "\"primary\"" }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" }, { "name": "disabled", @@ -4914,6 +868,18 @@ "required": false, "default": "false" }, + { + "name": "pill", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "fullWidth", + "type": "boolean", + "required": false, + "default": "false" + }, { "name": "icon", "type": "string", @@ -4927,13 +893,49 @@ "default": "\"start\"" }, { - "name": "fullWidth", + "name": "ariaLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "ariaPressed", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "ariaExpanded", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "ariaControls", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "autofocus", "type": "boolean", "required": false, "default": "false" }, { - "name": "className", + "name": "controlClass", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" @@ -4946,68 +948,44 @@ { "name": "ButtonGroup", "mount": "ButtonGroup", - "category": "forms", - "purpose": "Reusable button group component.", + "category": "base", + "purpose": "Theme-aware, responsive button group component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Button\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Button Group\"" + }, + { + "name": "description", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "placeholder", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -5021,658 +999,28 @@ "source": "components/ButtonGroup.wrn" }, { - "name": "ButtonSelector", - "mount": "ButtonSelector", - "category": "forms", - "purpose": "Reusable button selector component.", + "name": "Card", + "mount": "Card", + "category": "base", + "purpose": "Theme-aware, responsive card component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Button\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ButtonSelector.wrn" - }, - { - "name": "Calendar", - "mount": "Calendar", - "category": "content", - "purpose": "Reusable calendar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Calendar.wrn" - }, - { - "name": "CalendarGrid", - "mount": "CalendarGrid", - "category": "data", - "purpose": "Reusable calendar grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CalendarGrid.wrn" - }, - { - "name": "CalendarHeader", - "mount": "CalendarHeader", - "category": "layout", - "purpose": "Reusable calendar header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CalendarHeader.wrn" - }, - { - "name": "CalendarNavigation", - "mount": "CalendarNavigation", - "category": "layout", - "purpose": "Reusable calendar navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CalendarNavigation.wrn" - }, - { - "name": "CallbackUrlInput", - "mount": "CallbackUrlInput", - "category": "forms", - "purpose": "Reusable callback url input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CallbackUrl\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CallbackUrlInput.wrn" - }, - { - "name": "CampaignCard", - "mount": "CampaignCard", - "category": "content", - "purpose": "Reusable campaign card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--send]\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CampaignCard.wrn" - }, - { - "name": "CampaignPerformancePreview", - "mount": "CampaignPerformancePreview", - "category": "content", - "purpose": "Reusable campaign performance preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CampaignPerformancePreview.wrn" - }, - { - "name": "CampaignProgress", - "mount": "CampaignProgress", - "category": "visualization", - "purpose": "Reusable campaign progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CampaignProgress.wrn" - }, - { - "name": "CapabilityGrid", - "mount": "CapabilityGrid", - "category": "data", - "purpose": "Reusable capability grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CapabilityGrid.wrn" - }, - { - "name": "CaptchaField", - "mount": "CaptchaField", - "category": "forms", - "purpose": "Reusable captcha field component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Captcha\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaptchaField.wrn" - }, - { - "name": "card", - "mount": "card", - "category": "core", - "purpose": "Reusable card component.", - "props": [ - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "padding", + "name": "color", "type": "string", "required": false, - "default": "\"md\"" - }, - { - "name": "interactive", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/card.wrn" - }, - { - "name": "CardPaymentForm", - "mount": "CardPaymentForm", - "category": "content", - "purpose": "Reusable card payment form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Card\"" }, { "name": "description", @@ -5681,146 +1029,10 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CardPaymentForm.wrn" - }, - { - "name": "CardSelector", - "mount": "CardSelector", - "category": "forms", - "purpose": "Reusable card selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Card\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CardSelector.wrn" - }, - { - "name": "CardSkeleton", - "mount": "CardSkeleton", - "category": "feedback", - "purpose": "Reusable card skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Card\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -5837,125 +1049,31 @@ ], "slots": ["default"], "events": [], - "source": "components/CardSkeleton.wrn" - }, - { - "name": "CareerApplicationForm", - "mount": "CareerApplicationForm", - "category": "content", - "purpose": "Reusable career application form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CareerApplicationForm.wrn" - }, - { - "name": "CareerBenefitsGrid", - "mount": "CareerBenefitsGrid", - "category": "data", - "purpose": "Reusable career benefits grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CareerBenefitsGrid.wrn" + "source": "components/Card.wrn" }, { "name": "Carousel", "mount": "Carousel", - "category": "content", - "purpose": "Reusable carousel component.", + "category": "base", + "purpose": "Theme-aware, responsive carousel component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Carousel\"" }, { "name": "description", @@ -5964,28 +1082,16 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "actionLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -5999,228 +1105,28 @@ "source": "components/Carousel.wrn" }, { - "name": "CaseStudyCard", - "mount": "CaseStudyCard", - "category": "content", - "purpose": "Reusable case study card component.", + "name": "Chart", + "mount": "Chart", + "category": "integrations", + "purpose": "Theme-aware, responsive chart component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaseStudyCard.wrn" - }, - { - "name": "CaseStudyHero", - "mount": "CaseStudyHero", - "category": "layout", - "purpose": "Reusable case study hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaseStudyHero.wrn" - }, - { - "name": "CaseStudyPreview", - "mount": "CaseStudyPreview", - "category": "content", - "purpose": "Reusable case study preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaseStudyPreview.wrn" - }, - { - "name": "CenteredCTA", - "mount": "CenteredCTA", - "category": "actions", - "purpose": "Reusable centered c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CenteredCTA.wrn" - }, - { - "name": "CenteredHero", - "mount": "CenteredHero", - "category": "layout", - "purpose": "Reusable centered hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Chart\"" }, { "name": "description", @@ -6229,151 +1135,10 @@ "default": "\"\"" }, { - "name": "align", + "name": "items", "type": "string", "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CenteredHero.wrn" - }, - { - "name": "CenteredSectionHeader", - "mount": "CenteredSectionHeader", - "category": "layout", - "purpose": "Reusable centered section header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CenteredSectionHeader.wrn" - }, - { - "name": "CertificateUpload", - "mount": "CertificateUpload", - "category": "content", - "purpose": "Reusable certificate upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CertificateUpload.wrn" - }, - { - "name": "CertificationBadge", - "mount": "CertificationBadge", - "category": "feedback", - "purpose": "Reusable certification badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Certification\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -6390,25 +1155,31 @@ ], "slots": ["default"], "events": [], - "source": "components/CertificationBadge.wrn" + "source": "components/Chart.wrn" }, { - "name": "ChallengeSection", - "mount": "ChallengeSection", - "category": "layout", - "purpose": "Reusable challenge section component.", + "name": "ChatBubble", + "mount": "ChatBubble", + "category": "base", + "purpose": "Theme-aware, responsive chat bubble component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Chat Bubble\"" }, { "name": "description", @@ -6417,51 +1188,10 @@ "default": "\"\"" }, { - "name": "align", + "name": "items", "type": "string", "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChallengeSection.wrn" - }, - { - "name": "ChannelBadge", - "mount": "ChannelBadge", - "category": "feedback", - "purpose": "Reusable channel badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Channel\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -6478,560 +1208,25 @@ ], "slots": ["default"], "events": [], - "source": "components/ChannelBadge.wrn" - }, - { - "name": "ChannelCard", - "mount": "ChannelCard", - "category": "content", - "purpose": "Reusable channel card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelCard.wrn" - }, - { - "name": "ChannelComparisonChart", - "mount": "ChannelComparisonChart", - "category": "visualization", - "purpose": "Reusable channel comparison chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelComparisonChart.wrn" - }, - { - "name": "ChannelComparisonTable", - "mount": "ChannelComparisonTable", - "category": "data", - "purpose": "Reusable channel comparison table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelComparisonTable.wrn" - }, - { - "name": "ChannelFallbackDiagram", - "mount": "ChannelFallbackDiagram", - "category": "visualization", - "purpose": "Reusable channel fallback diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelFallbackDiagram.wrn" - }, - { - "name": "ChannelFlow", - "mount": "ChannelFlow", - "category": "visualization", - "purpose": "Reusable channel flow component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ChannelFlow.wrn" - }, - { - "name": "ChannelIcon", - "mount": "ChannelIcon", - "category": "content", - "purpose": "Reusable channel icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelIcon.wrn" - }, - { - "name": "ChannelRateTable", - "mount": "ChannelRateTable", - "category": "data", - "purpose": "Reusable channel rate table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelRateTable.wrn" - }, - { - "name": "ChannelSelector", - "mount": "ChannelSelector", - "category": "forms", - "purpose": "Reusable channel selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Channel\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelSelector.wrn" - }, - { - "name": "CharacterCounter", - "mount": "CharacterCounter", - "category": "feedback", - "purpose": "Reusable character counter component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Character\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CharacterCounter.wrn" - }, - { - "name": "ChartEmptyState", - "mount": "ChartEmptyState", - "category": "feedback", - "purpose": "Reusable chart empty state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ChartEmpty\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChartEmptyState.wrn" - }, - { - "name": "ChartTooltip", - "mount": "ChartTooltip", - "category": "content", - "purpose": "Reusable chart tooltip component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChartTooltip.wrn" + "source": "components/ChatBubble.wrn" }, { "name": "Checkbox", "mount": "Checkbox", - "category": "core", - "purpose": "Reusable checkbox component.", + "category": "forms", + "purpose": "Theme-aware, responsive checkbox component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "label", @@ -7040,11 +1235,17 @@ "default": "\"Checkbox\"" }, { - "name": "description", + "name": "name", "type": "string", "required": false, "default": "\"\"" }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"on\"" + }, { "name": "checked", "type": "boolean", @@ -7056,6 +1257,12 @@ "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], @@ -7063,2807 +1270,10 @@ "source": "components/Checkbox.wrn" }, { - "name": "CheckboxGroup", - "mount": "CheckboxGroup", - "category": "forms", - "purpose": "Reusable checkbox group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Checkbox\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CheckboxGroup.wrn" - }, - { - "name": "Checklist", - "mount": "Checklist", - "category": "content", - "purpose": "Reusable checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Checklist.wrn" - }, - { - "name": "ChecklistProgress", - "mount": "ChecklistProgress", - "category": "visualization", - "purpose": "Reusable checklist progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChecklistProgress.wrn" - }, - { - "name": "Chip", - "mount": "Chip", - "category": "core", - "purpose": "Reusable chip component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Chip\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Chip.wrn" - }, - { - "name": "ChipInput", - "mount": "ChipInput", - "category": "forms", - "purpose": "Reusable chip input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Chip\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChipInput.wrn" - }, - { - "name": "CircularProgress", - "mount": "CircularProgress", - "category": "visualization", - "purpose": "Reusable circular progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CircularProgress.wrn" - }, - { - "name": "CitySelector", - "mount": "CitySelector", - "category": "forms", - "purpose": "Reusable city selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"City\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CitySelector.wrn" - }, - { - "name": "ClearFiltersButton", - "mount": "ClearFiltersButton", - "category": "actions", - "purpose": "Reusable clear filters button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ClearFiltersButton.wrn" - }, - { - "name": "ClickableCard", - "mount": "ClickableCard", - "category": "content", - "purpose": "Reusable clickable card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ClickableCard.wrn" - }, - { - "name": "CloseButton", - "mount": "CloseButton", - "category": "actions", - "purpose": "Reusable close button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CloseButton.wrn" - }, - { - "name": "Cluster", - "mount": "Cluster", - "category": "core", - "purpose": "Reusable cluster component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Cluster.wrn" - }, - { - "name": "Code", - "mount": "Code", - "category": "content", - "purpose": "Reusable code component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Code.wrn" - }, - { - "name": "CodeBlock", - "mount": "CodeBlock", - "category": "content", - "purpose": "Reusable code block component.", - "props": [ - { - "name": "language", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "code", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "copyable", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/CodeBlock.wrn" - }, - { - "name": "CodeCopyButton", - "mount": "CodeCopyButton", - "category": "actions", - "purpose": "Reusable code copy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeCopyButton.wrn" - }, - { - "name": "CodeHeader", - "mount": "CodeHeader", - "category": "layout", - "purpose": "Reusable code header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeHeader.wrn" - }, - { - "name": "CodeInput", - "mount": "CodeInput", - "category": "forms", - "purpose": "Reusable code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Code\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeInput.wrn" - }, - { - "name": "CodeLanguageBadge", - "mount": "CodeLanguageBadge", - "category": "feedback", - "purpose": "Reusable code language badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CodeLanguage\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeLanguageBadge.wrn" - }, - { - "name": "CodeTabs", - "mount": "CodeTabs", - "category": "content", - "purpose": "Reusable code tabs component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeTabs.wrn" - }, - { - "name": "CodeText", - "mount": "CodeText", - "category": "content", - "purpose": "Reusable code text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeText.wrn" - }, - { - "name": "CohortChart", - "mount": "CohortChart", - "category": "visualization", - "purpose": "Reusable cohort chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CohortChart.wrn" - }, - { - "name": "ColorGrid", - "mount": "ColorGrid", - "category": "data", - "purpose": "Reusable color grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorGrid.wrn" - }, - { - "name": "ColorHexInput", - "mount": "ColorHexInput", - "category": "forms", - "purpose": "Reusable color hex input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ColorHex\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorHexInput.wrn" - }, - { - "name": "ColorPicker", - "mount": "ColorPicker", - "category": "forms", - "purpose": "Reusable color picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Color\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorPicker.wrn" - }, - { - "name": "ColorSelector", - "mount": "ColorSelector", - "category": "forms", - "purpose": "Reusable color selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Color\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorSelector.wrn" - }, - { - "name": "ColorSwatch", - "mount": "ColorSwatch", - "category": "content", - "purpose": "Reusable color swatch component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorSwatch.wrn" - }, - { - "name": "Combobox", - "mount": "Combobox", - "category": "core", - "purpose": "Reusable combobox component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"combobox\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Choose an option\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Search options\"" - }, - { - "name": "options", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/Combobox.wrn" - }, - { - "name": "ComingSoonBadge", - "mount": "ComingSoonBadge", - "category": "feedback", - "purpose": "Reusable coming soon badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ComingSoon\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComingSoonBadge.wrn" - }, - { - "name": "ComingSoonState", - "mount": "ComingSoonState", - "category": "feedback", - "purpose": "Reusable coming soon state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ComingSoon\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComingSoonState.wrn" - }, - { - "name": "CommandBlock", - "mount": "CommandBlock", - "category": "content", - "purpose": "Reusable command block component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CommandBlock.wrn" - }, - { - "name": "CommandMenu", - "mount": "CommandMenu", - "category": "overlays", - "purpose": "Reusable command menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CommandMenu.wrn" - }, - { - "name": "CommandSearchInput", - "mount": "CommandSearchInput", - "category": "forms", - "purpose": "Reusable command search input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CommandSearch\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CommandSearchInput.wrn" - }, - { - "name": "CompanyHero", - "mount": "CompanyHero", - "category": "layout", - "purpose": "Reusable company hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanyHero.wrn" - }, - { - "name": "CompanyNameInput", - "mount": "CompanyNameInput", - "category": "forms", - "purpose": "Reusable company name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CompanyName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanyNameInput.wrn" - }, - { - "name": "CompanyPageShell", - "mount": "CompanyPageShell", - "category": "layout", - "purpose": "Reusable company page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanyPageShell.wrn" - }, - { - "name": "CompanySizeSelector", - "mount": "CompanySizeSelector", - "category": "forms", - "purpose": "Reusable company size selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CompanySize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanySizeSelector.wrn" - }, - { - "name": "ComparisonDateRangePicker", - "mount": "ComparisonDateRangePicker", - "category": "forms", - "purpose": "Reusable comparison date range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ComparisonDateRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComparisonDateRangePicker.wrn" - }, - { - "name": "ComparisonTable", - "mount": "ComparisonTable", - "category": "data", - "purpose": "Reusable comparison table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComparisonTable.wrn" - }, - { - "name": "CompletionMeter", - "mount": "CompletionMeter", - "category": "visualization", - "purpose": "Reusable completion meter component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompletionMeter.wrn" - }, - { - "name": "ComplianceBadgeList", - "mount": "ComplianceBadgeList", - "category": "data", - "purpose": "Reusable compliance badge list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComplianceBadgeList.wrn" - }, - { - "name": "ComplianceProgramCard", - "mount": "ComplianceProgramCard", - "category": "content", - "purpose": "Reusable compliance program card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComplianceProgramCard.wrn" - }, - { - "name": "ConfirmationDialog", - "mount": "ConfirmationDialog", - "category": "overlays", - "purpose": "Reusable confirmation dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Confirm action\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Are you sure you want to continue?\"" - }, - { - "name": "confirmLabel", - "type": "string", - "required": false, - "default": "\"Confirm\"" - }, - { - "name": "cancelLabel", - "type": "string", - "required": false, - "default": "\"Cancel\"" - }, - { - "name": "danger", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["confirm"], - "events": ["click"], - "source": "components/ConfirmationDialog.wrn" - }, - { - "name": "ConfirmPasswordInput", - "mount": "ConfirmPasswordInput", - "category": "forms", - "purpose": "Reusable confirm password input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ConfirmPassword\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConfirmPasswordInput.wrn" - }, - { - "name": "ConnectedAccountCard", - "mount": "ConnectedAccountCard", - "category": "content", - "purpose": "Reusable connected account card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConnectedAccountCard.wrn" - }, - { - "name": "ConnectionCard", - "mount": "ConnectionCard", - "category": "content", - "purpose": "Reusable connection card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConnectionCard.wrn" - }, - { - "name": "ConsentTimelinePreview", - "mount": "ConsentTimelinePreview", - "category": "content", - "purpose": "Reusable consent timeline preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConsentTimelinePreview.wrn" - }, - { - "name": "ContactCard", - "mount": "ContactCard", - "category": "content", - "purpose": "Reusable contact card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactCard.wrn" - }, - { - "name": "ContactCTA", - "mount": "ContactCTA", - "category": "actions", - "purpose": "Reusable contact c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactCTA.wrn" - }, - { - "name": "ContactForm", - "mount": "ContactForm", - "category": "content", - "purpose": "Reusable contact form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactForm.wrn" - }, - { - "name": "ContactHero", - "mount": "ContactHero", - "category": "layout", - "purpose": "Reusable contact hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactHero.wrn" - }, - { - "name": "ContactPageShell", - "mount": "ContactPageShell", - "category": "layout", - "purpose": "Reusable contact page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactPageShell.wrn" - }, - { - "name": "ContactSalesBanner", - "mount": "ContactSalesBanner", - "category": "core", - "purpose": "Reusable contact sales banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"Enterprise identity\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Ready to secure your next application?\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Contact sales\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"/contact\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"Start free\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"/sign-up\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"icon-[lucide--messages-square]\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "points", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "trustPoints", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": [], - "source": "components/ContactSalesBanner.wrn" - }, - { - "name": "ContactSalesButton", - "mount": "ContactSalesButton", - "category": "actions", - "purpose": "Reusable contact sales button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactSalesButton.wrn" - }, - { - "name": "ContactSalesForm", - "mount": "ContactSalesForm", - "category": "content", - "purpose": "Reusable contact sales form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactSalesForm.wrn" - }, - { - "name": "Container", - "mount": "Container", - "category": "core", - "purpose": "Reusable container component.", + "name": "Clipboard", + "mount": "Clipboard", + "category": "integrations", + "purpose": "Theme-aware, responsive clipboard component.", "props": [ { "name": "size", @@ -9872,7 +1282,571 @@ "default": "\"default\"" }, { - "name": "className", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Clipboard\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Clipboard.wrn" + }, + { + "name": "Collapse", + "mount": "Collapse", + "category": "base", + "purpose": "Theme-aware, responsive collapse component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "multiple", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Collapse.wrn" + }, + { + "name": "ColorPicker", + "mount": "ColorPicker", + "category": "forms", + "purpose": "Theme-aware, responsive color picker component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Color Picker\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"color\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/ColorPicker.wrn" + }, + { + "name": "Columns", + "mount": "Columns", + "category": "layout", + "purpose": "Theme-aware, responsive columns component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, + { + "name": "gap", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Columns.wrn" + }, + { + "name": "ComboBox", + "mount": "ComboBox", + "category": "advanced-forms", + "purpose": "Editable autocomplete combobox with local and remote suggestions.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"ComboBox\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "options", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "groups", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Search or select an option\"" + }, + { + "name": "searchPlaceholder", + "type": "string", + "required": false, + "default": "\"Start typing…\"" + }, + { + "name": "clearable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "allowCustomValue", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "invalid", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "validationMessage", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "helpText", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "loading", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "loadingLabel", + "type": "string", + "required": false, + "default": "\"Loading suggestions…\"" + }, + { + "name": "emptyLabel", + "type": "string", + "required": false, + "default": "\"No matching options\"" + }, + { + "name": "clearLabel", + "type": "string", + "required": false, + "default": "\"Clear value\"" + }, + { + "name": "toggleLabel", + "type": "string", + "required": false, + "default": "\"Toggle suggestions\"" + }, + { + "name": "searchMode", + "type": "string", + "required": false, + "default": "\"contains\"" + }, + { + "name": "searchFields", + "type": "string", + "required": false, + "default": "\"label,description\"" + }, + { + "name": "minSearchLength", + "type": "number", + "required": false, + "default": "0" + }, + { + "name": "searchResultLimit", + "type": "number", + "required": false, + "default": "0" + }, + { + "name": "optionTemplate", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "defaultOpen", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "closeOnSelect", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "fixed", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "autocomplete", + "type": "string", + "required": false, + "default": "\"off\"" + }, + { + "name": "remote", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "remoteUrl", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "remoteQueryParam", + "type": "string", + "required": false, + "default": "\"q\"" + }, + { + "name": "remoteDebounce", + "type": "number", + "required": false, + "default": "250" + }, + { + "name": "remoteAutoLoad", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "infinite", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "hasMore", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "page", + "type": "number", + "required": false, + "default": "1" + }, + { + "name": "loadMoreLabel", + "type": "string", + "required": false, + "default": "\"Load more\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "source": "components/ComboBox.wrn" + }, + { + "name": "Confetti", + "mount": "Confetti", + "category": "integrations", + "purpose": "Theme-aware, responsive confetti component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Confetti\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Confetti.wrn" + }, + { + "name": "Container", + "mount": "Container", + "category": "layout", + "purpose": "Theme-aware, responsive container component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, + { + "name": "gap", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" @@ -9886,13 +1860,25 @@ "name": "ContextMenu", "mount": "ContextMenu", "category": "overlays", - "purpose": "Reusable context menu component.", + "purpose": "Theme-aware, responsive context menu component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Context Menu\"" }, { "name": "description", @@ -9906,6 +1892,12 @@ "required": false, "default": "false" }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, { "name": "closeLabel", "type": "string", @@ -9924,763 +1916,28 @@ "source": "components/ContextMenu.wrn" }, { - "name": "ContextSwitcher", - "mount": "ContextSwitcher", - "category": "content", - "purpose": "Reusable context switcher component.", + "name": "CopyMarkup", + "mount": "CopyMarkup", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive copy markup component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContextSwitcher.wrn" - }, - { - "name": "ConversationList", - "mount": "ConversationList", - "category": "data", - "purpose": "Reusable conversation list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConversationList.wrn" - }, - { - "name": "ConversationPreview", - "mount": "ConversationPreview", - "category": "content", - "purpose": "Reusable conversation preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConversationPreview.wrn" - }, - { - "name": "ConversionChart", - "mount": "ConversionChart", - "category": "visualization", - "purpose": "Reusable conversion chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConversionChart.wrn" - }, - { - "name": "CookieBanner", - "mount": "CookieBanner", - "category": "feedback", - "purpose": "Reusable cookie banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"We use cookies\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"We use essential cookies and optional analytics to improve your experience.\"" - }, - { - "name": "privacyHref", - "type": "string", - "required": false, - "default": "\"/privacy\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/CookieBanner.wrn" - }, - { - "name": "CookieCategoryList", - "mount": "CookieCategoryList", - "category": "data", - "purpose": "Reusable cookie category list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieCategoryList.wrn" - }, - { - "name": "CookieCategoryToggle", - "mount": "CookieCategoryToggle", - "category": "forms", - "purpose": "Reusable cookie category toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CookieCategory\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieCategoryToggle.wrn" - }, - { - "name": "CookieConsent", - "mount": "CookieConsent", - "category": "core", - "purpose": "Reusable cookie consent component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click", "change"], - "source": "components/CookieConsent.wrn" - }, - { - "name": "CookieDetailsTable", - "mount": "CookieDetailsTable", - "category": "data", - "purpose": "Reusable cookie details table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieDetailsTable.wrn" - }, - { - "name": "CookiePreferencesDialog", - "mount": "CookiePreferencesDialog", - "category": "overlays", - "purpose": "Reusable cookie preferences dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Cookie preferences\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Choose which optional cookies you allow. Essential cookies are always enabled.\"" - }, - { - "name": "saveLabel", - "type": "string", - "required": false, - "default": "\"Save preferences\"" - }, - { - "name": "acceptLabel", - "type": "string", - "required": false, - "default": "\"Accept all\"" - }, - { - "name": "rejectLabel", - "type": "string", - "required": false, - "default": "\"Reject optional\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["change", "click"], - "source": "components/CookiePreferencesDialog.wrn" - }, - { - "name": "CookieTable", - "mount": "CookieTable", - "category": "data", - "purpose": "Reusable cookie table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieTable.wrn" - }, - { - "name": "CoordinatesInput", - "mount": "CoordinatesInput", - "category": "forms", - "purpose": "Reusable coordinates input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Coordinates\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CoordinatesInput.wrn" - }, - { - "name": "CoordinatesPicker", - "mount": "CoordinatesPicker", - "category": "forms", - "purpose": "Reusable coordinates picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Coordinates\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CoordinatesPicker.wrn" - }, - { - "name": "CopyButton", - "mount": "CopyButton", - "category": "actions", - "purpose": "Reusable copy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CopyButton.wrn" - }, - { - "name": "CopyCodeButton", - "mount": "CopyCodeButton", - "category": "actions", - "purpose": "Reusable copy code button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CopyCodeButton.wrn" - }, - { - "name": "CopySecretField", - "mount": "CopySecretField", - "category": "forms", - "purpose": "Reusable copy secret field component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"CopySecret\"" + "default": "\"Copy Markup\"" }, { "name": "name", @@ -10707,10 +1964,22 @@ "default": "\"text\"" }, { - "name": "required", - "type": "boolean", + "name": "min", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "disabled", @@ -10719,66 +1988,7 @@ "default": "false" }, { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CopySecretField.wrn" - }, - { - "name": "CostBreakdownChart", - "mount": "CostBreakdownChart", - "category": "visualization", - "purpose": "Reusable cost breakdown chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -10790,57 +2000,45 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], - "source": "components/CostBreakdownChart.wrn" + "source": "components/CopyMarkup.wrn" }, { - "name": "CostSummary", - "mount": "CostSummary", - "category": "content", - "purpose": "Reusable cost summary component.", + "name": "CustomScrollbar", + "mount": "CustomScrollbar", + "category": "layout", + "purpose": "Theme-aware, responsive custom scrollbar component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { - "name": "description", - "type": "string", + "name": "columns", + "type": "number", "required": false, - "default": "\"\"" + "default": "2" }, { - "name": "href", + "name": "gap", "type": "string", "required": false, - "default": "\"\"" + "default": "\"md\"" }, { - "name": "actionLabel", + "name": "maxWidth", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"xl\"" }, { "name": "class", @@ -10851,19 +2049,43 @@ ], "slots": ["default"], "events": [], - "source": "components/CostSummary.wrn" + "source": "components/CustomScrollbar.wrn" }, { - "name": "Counter", - "mount": "Counter", - "category": "feedback", - "purpose": "Reusable counter component.", + "name": "DataMap", + "mount": "DataMap", + "category": "integrations", + "purpose": "Theme-aware, responsive data map component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Status\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Data Map\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" }, { "name": "variant", @@ -10880,1142 +2102,31 @@ ], "slots": ["default"], "events": [], - "source": "components/Counter.wrn" - }, - { - "name": "CountryCallingCodeInput", - "mount": "CountryCallingCodeInput", - "category": "forms", - "purpose": "Reusable country calling code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CountryCallingCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CountryCallingCodeInput.wrn" - }, - { - "name": "CountryCallingCodeSelector", - "mount": "CountryCallingCodeSelector", - "category": "forms", - "purpose": "Reusable country calling code selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CountryCallingCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CountryCallingCodeSelector.wrn" - }, - { - "name": "CountrySelector", - "mount": "CountrySelector", - "category": "forms", - "purpose": "Reusable country selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Country\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CountrySelector.wrn" - }, - { - "name": "CouponInput", - "mount": "CouponInput", - "category": "forms", - "purpose": "Reusable coupon input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Coupon\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CouponInput.wrn" - }, - { - "name": "CreditAmountInput", - "mount": "CreditAmountInput", - "category": "forms", - "purpose": "Reusable credit amount input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CreditAmount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CreditAmountInput.wrn" - }, - { - "name": "CronBuilder", - "mount": "CronBuilder", - "category": "content", - "purpose": "Reusable cron builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CronBuilder.wrn" - }, - { - "name": "CronInput", - "mount": "CronInput", - "category": "forms", - "purpose": "Reusable cron input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Cron\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CronInput.wrn" - }, - { - "name": "CsvUpload", - "mount": "CsvUpload", - "category": "content", - "purpose": "Reusable csv upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CsvUpload.wrn" - }, - { - "name": "CTASection", - "mount": "CTASection", - "category": "layout", - "purpose": "Reusable c t a section component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"Ready?\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Start building today\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Get started\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"Contact sales\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - } - ], - "slots": [], - "events": [], - "source": "components/CTASection.wrn" - }, - { - "name": "CurrencyInput", - "mount": "CurrencyInput", - "category": "forms", - "purpose": "Reusable currency input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Currency\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CurrencyInput.wrn" - }, - { - "name": "CurrencySelector", - "mount": "CurrencySelector", - "category": "forms", - "purpose": "Reusable currency selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Currency\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CurrencySelector.wrn" - }, - { - "name": "CurrentPasswordInput", - "mount": "CurrentPasswordInput", - "category": "forms", - "purpose": "Reusable current password input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CurrentPassword\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CurrentPasswordInput.wrn" - }, - { - "name": "CustomerLogo", - "mount": "CustomerLogo", - "category": "content", - "purpose": "Reusable customer logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CustomerLogo.wrn" - }, - { - "name": "CustomerStoryCard", - "mount": "CustomerStoryCard", - "category": "content", - "purpose": "Reusable customer story card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CustomerStoryCard.wrn" - }, - { - "name": "DangerButton", - "mount": "DangerButton", - "category": "actions", - "purpose": "Reusable danger button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DangerButton.wrn" - }, - { - "name": "DataProtectionCard", - "mount": "DataProtectionCard", - "category": "content", - "purpose": "Reusable data protection card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DataProtectionCard.wrn" - }, - { - "name": "DataRetentionTable", - "mount": "DataRetentionTable", - "category": "data", - "purpose": "Reusable data retention table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DataRetentionTable.wrn" + "source": "components/DataMap.wrn" }, { "name": "DataTable", "mount": "DataTable", - "category": "data", - "purpose": "Reusable data table component.", + "category": "integrations", + "purpose": "Theme-aware, responsive data table component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "caption", "type": "string", "required": false, - "default": "\"Data table\"" + "default": "\"Data Table\"" }, { "name": "columns", @@ -12029,17 +2140,11 @@ "required": false, "default": "[]" }, - { - "name": "emptyMessage", - "type": "string", - "required": false, - "default": "\"No data available.\"" - }, { "name": "striped", "type": "boolean", "required": false, - "default": "false" + "default": "true" }, { "name": "class", @@ -12048,27 +2153,33 @@ "default": "\"\"" } ], - "slots": [], + "slots": ["default"], "events": [], "source": "components/DataTable.wrn" }, { - "name": "DateInput", - "mount": "DateInput", - "category": "forms", - "purpose": "Reusable date input component.", + "name": "DatePicker", + "mount": "DatePicker", + "category": "base", + "purpose": "Theme-aware, responsive date picker component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Date Picker\"" }, { "name": "name", @@ -12076,12 +2187,6 @@ "required": false, "default": "\"\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Date\"" - }, { "name": "value", "type": "string", @@ -12095,82 +2200,11 @@ "default": "\"\"" }, { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DateInput.wrn" - }, - { - "name": "DatePicker", - "mount": "DatePicker", - "category": "forms", - "purpose": "Reusable date picker component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", + "name": "type", "type": "string", "required": false, "default": "\"date\"" }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"date\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Date\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "min", "type": "string", @@ -12183,11 +2217,29 @@ "required": false, "default": "\"\"" }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, { "name": "required", "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], @@ -12195,22 +2247,28 @@ "source": "components/DatePicker.wrn" }, { - "name": "DateRangeCalendar", - "mount": "DateRangeCalendar", - "category": "content", - "purpose": "Reusable date range calendar component.", + "name": "DeviceFrame", + "mount": "DeviceFrame", + "category": "base", + "purpose": "Theme-aware, responsive device frame component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Device Frame\"" }, { "name": "description", @@ -12219,28 +2277,16 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "actionLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -12251,60 +2297,72 @@ ], "slots": ["default"], "events": [], - "source": "components/DateRangeCalendar.wrn" + "source": "components/DeviceFrame.wrn" }, { - "name": "DateRangePicker", - "mount": "DateRangePicker", - "category": "forms", - "purpose": "Reusable date range picker component.", + "name": "Divider", + "mount": "Divider", + "category": "layout", + "purpose": "Theme-aware, responsive divider component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "label", "type": "string", "required": false, - "default": "\"Date range\"" + "default": "\"\"" }, { - "name": "startName", + "name": "orientation", "type": "string", "required": false, - "default": "\"startDate\"" + "default": "\"horizontal\"" }, { - "name": "endName", + "name": "class", "type": "string", "required": false, - "default": "\"endDate\"" + "default": "\"\"" } ], "slots": [], "events": [], - "source": "components/DateRangePicker.wrn" + "source": "components/Divider.wrn" }, { - "name": "DateRangeSlider", - "mount": "DateRangeSlider", - "category": "content", - "purpose": "Reusable date range slider component.", + "name": "DragAndDrop", + "mount": "DragAndDrop", + "category": "integrations", + "purpose": "Theme-aware, responsive drag and drop component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Drag And Drop\"" }, { "name": "description", @@ -12313,28 +2371,16 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "actionLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -12345,25 +2391,149 @@ ], "slots": ["default"], "events": [], - "source": "components/DateRangeSlider.wrn" + "source": "components/DragAndDrop.wrn" }, { - "name": "DateTimeInput", - "mount": "DateTimeInput", - "category": "forms", - "purpose": "Reusable date time input component.", + "name": "Drawer", + "mount": "Drawer", + "category": "overlays", + "purpose": "Theme-aware, responsive drawer component.", "props": [ { - "name": "class", + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Drawer\"" + }, + { + "name": "description", "type": "string", "required": false, "default": "\"\"" }, { - "name": "id", + "name": "open", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "closeLabel", + "type": "string", + "required": false, + "default": "\"Close\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Drawer.wrn" + }, + { + "name": "Dropdown", + "mount": "Dropdown", + "category": "overlays", + "purpose": "Theme-aware, responsive dropdown component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Dropdown\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "open", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "closeLabel", + "type": "string", + "required": false, + "default": "\"Close\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Dropdown.wrn" + }, + { + "name": "FileInput", + "mount": "FileInput", + "category": "forms", + "purpose": "Theme-aware, responsive file input component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"File Input\"" }, { "name": "name", @@ -12371,12 +2541,6 @@ "required": false, "default": "\"\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"DateTime\"" - }, { "name": "value", "type": "string", @@ -12390,75 +2554,10 @@ "default": "\"\"" }, { - "name": "help", + "name": "type", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DateTimeInput.wrn" - }, - { - "name": "DateTimePicker", - "mount": "DateTimePicker", - "category": "forms", - "purpose": "Reusable date time picker component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"datetime-picker\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"datetime\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Date and time\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"file\"" }, { "name": "min", @@ -12473,13 +2572,19 @@ "default": "\"\"" }, { - "name": "required", + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", "type": "boolean", "required": false, "default": "false" }, { - "name": "disabled", + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -12493,173 +2598,31 @@ ], "slots": [], "events": [], - "source": "components/DateTimePicker.wrn" + "source": "components/FileInput.wrn" }, { - "name": "DateTimeRangePicker", - "mount": "DateTimeRangePicker", - "category": "forms", - "purpose": "Reusable date time range picker component.", + "name": "FileUpload", + "mount": "FileUpload", + "category": "integrations", + "purpose": "Theme-aware, responsive file upload component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"DateTimeRange\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DateTimeRangePicker.wrn" - }, - { - "name": "DecimalInput", - "mount": "DecimalInput", - "category": "forms", - "purpose": "Reusable decimal input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Decimal\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DecimalInput.wrn" - }, - { - "name": "DefinitionList", - "mount": "DefinitionList", - "category": "data", - "purpose": "Reusable definition list component.", - "props": [ { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"File Upload\"" }, { "name": "description", @@ -12668,387 +2631,10 @@ "default": "\"\"" }, { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", + "name": "items", "type": "string", "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DefinitionList.wrn" - }, - { - "name": "DeleteConfirmationDialog", - "mount": "DeleteConfirmationDialog", - "category": "overlays", - "purpose": "Reusable delete confirmation dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeleteConfirmationDialog.wrn" - }, - { - "name": "DeliveryPreview", - "mount": "DeliveryPreview", - "category": "content", - "purpose": "Reusable delivery preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeliveryPreview.wrn" - }, - { - "name": "DeliveryStatusChart", - "mount": "DeliveryStatusChart", - "category": "visualization", - "purpose": "Reusable delivery status chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeliveryStatusChart.wrn" - }, - { - "name": "DeliveryStatusTimeline", - "mount": "DeliveryStatusTimeline", - "category": "visualization", - "purpose": "Reusable delivery status timeline component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeliveryStatusTimeline.wrn" - }, - { - "name": "DemoRequestForm", - "mount": "DemoRequestForm", - "category": "content", - "purpose": "Reusable demo request form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DemoRequestForm.wrn" - }, - { - "name": "DepartmentInput", - "mount": "DepartmentInput", - "category": "forms", - "purpose": "Reusable department input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Department\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DepartmentInput.wrn" - }, - { - "name": "DeprecatedFeatureAlert", - "mount": "DeprecatedFeatureAlert", - "category": "feedback", - "purpose": "Reusable deprecated feature alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"DeprecatedFeature\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -13065,4533 +2651,46 @@ ], "slots": ["default"], "events": [], - "source": "components/DeprecatedFeatureAlert.wrn" + "source": "components/FileUpload.wrn" }, { - "name": "DescriptionList", - "mount": "DescriptionList", - "category": "data", - "purpose": "Reusable description list component.", + "name": "FileUploadProgress", + "mount": "FileUploadProgress", + "category": "base", + "purpose": "Theme-aware, responsive file upload progress component.", "props": [ { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DescriptionList.wrn" - }, - { - "name": "DesktopNavigation", - "mount": "DesktopNavigation", - "category": "layout", - "purpose": "Reusable desktop navigation component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Primary navigation\"" - }, - { - "name": "items", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DesktopNavigation.wrn" - }, - { - "name": "DeveloperCTA", - "mount": "DeveloperCTA", - "category": "actions", - "purpose": "Reusable developer c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperCTA.wrn" - }, - { - "name": "DeveloperHero", - "mount": "DeveloperHero", - "category": "layout", - "purpose": "Reusable developer hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperHero.wrn" - }, - { - "name": "DeveloperPageShell", - "mount": "DeveloperPageShell", - "category": "layout", - "purpose": "Reusable developer page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperPageShell.wrn" - }, - { - "name": "DeveloperSearch", - "mount": "DeveloperSearch", - "category": "content", - "purpose": "Reusable developer search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperSearch.wrn" - }, - { - "name": "DevelopersMegaMenu", - "mount": "DevelopersMegaMenu", - "category": "core", - "purpose": "Reusable developers mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DevelopersMegaMenu.wrn" - }, - { - "name": "DevelopersMenu", - "mount": "DevelopersMenu", - "category": "overlays", - "purpose": "Reusable developers menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DevelopersMenu.wrn" - }, - { - "name": "DeviceCard", - "mount": "DeviceCard", - "category": "content", - "purpose": "Reusable device card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeviceCard.wrn" - }, - { - "name": "disclosure", - "mount": "disclosure", - "category": "core", - "purpose": "Reusable disclosure component.", - "props": [ - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"Details\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/disclosure.wrn" - }, - { - "name": "DiscountInput", - "mount": "DiscountInput", - "category": "forms", - "purpose": "Reusable discount input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Discount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DiscountInput.wrn" - }, - { - "name": "DisplayHeading", - "mount": "DisplayHeading", - "category": "core", - "purpose": "Reusable display heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DisplayHeading.wrn" - }, - { - "name": "DisplayNameInput", - "mount": "DisplayNameInput", - "category": "forms", - "purpose": "Reusable display name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"DisplayName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DisplayNameInput.wrn" - }, - { - "name": "Divider", - "mount": "Divider", - "category": "core", - "purpose": "Reusable divider component.", - "props": [ - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Divider.wrn" - }, - { - "name": "DocumentPreview", - "mount": "DocumentPreview", - "category": "content", - "purpose": "Reusable document preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DocumentPreview.wrn" - }, - { - "name": "DocumentUpload", - "mount": "DocumentUpload", - "category": "content", - "purpose": "Reusable document upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DocumentUpload.wrn" - }, - { - "name": "DomainInput", - "mount": "DomainInput", - "category": "forms", - "purpose": "Reusable domain input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Domain\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DomainInput.wrn" - }, - { - "name": "DoNotSellLink", - "mount": "DoNotSellLink", - "category": "actions", - "purpose": "Reusable do not sell link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DoNotSellLink.wrn" - }, - { - "name": "DonutChart", - "mount": "DonutChart", - "category": "visualization", - "purpose": "Reusable donut chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DonutChart.wrn" - }, - { - "name": "DownloadAction", - "mount": "DownloadAction", - "category": "actions", - "purpose": "Reusable download action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadAction.wrn" - }, - { - "name": "DownloadButton", - "mount": "DownloadButton", - "category": "actions", - "purpose": "Reusable download button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadButton.wrn" - }, - { - "name": "DownloadGateForm", - "mount": "DownloadGateForm", - "category": "content", - "purpose": "Reusable download gate form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadGateForm.wrn" - }, - { - "name": "DownloadPolicyButton", - "mount": "DownloadPolicyButton", - "category": "actions", - "purpose": "Reusable download policy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadPolicyButton.wrn" - }, - { - "name": "DownloadResourceForm", - "mount": "DownloadResourceForm", - "category": "content", - "purpose": "Reusable download resource form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadResourceForm.wrn" - }, - { - "name": "Drawer", - "mount": "Drawer", - "category": "core", - "purpose": "Reusable drawer component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Panel\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "side", - "type": "string", - "required": false, - "default": "\"right\"" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/Drawer.wrn" - }, - { - "name": "DropdownMenu", - "mount": "DropdownMenu", - "category": "overlays", - "purpose": "Reusable dropdown menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Menu\"" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/DropdownMenu.wrn" - }, - { - "name": "DropdownNavigation", - "mount": "DropdownNavigation", - "category": "layout", - "purpose": "Reusable dropdown navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DropdownNavigation.wrn" - }, - { - "name": "DurationInput", - "mount": "DurationInput", - "category": "forms", - "purpose": "Reusable duration input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Duration\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DurationInput.wrn" - }, - { - "name": "DurationPicker", - "mount": "DurationPicker", - "category": "forms", - "purpose": "Reusable duration picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Duration\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DurationPicker.wrn" - }, - { - "name": "DurationSlider", - "mount": "DurationSlider", - "category": "content", - "purpose": "Reusable duration slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DurationSlider.wrn" - }, - { - "name": "ElevatedCard", - "mount": "ElevatedCard", - "category": "content", - "purpose": "Reusable elevated card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ElevatedCard.wrn" - }, - { - "name": "EmailBodyEditor", - "mount": "EmailBodyEditor", - "category": "forms", - "purpose": "Reusable email body editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"EmailBody\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EmailBodyEditor.wrn" - }, - { - "name": "EmailComposer", - "mount": "EmailComposer", - "category": "content", - "purpose": "Reusable email composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EmailComposer.wrn" - }, - { - "name": "EmailInput", - "mount": "EmailInput", - "category": "forms", - "purpose": "Reusable email input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Email\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"you@company.com\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"email\"" - } - ], - "slots": [], - "events": [], - "source": "components/EmailInput.wrn" - }, - { - "name": "EmojiPicker", - "mount": "EmojiPicker", - "category": "forms", - "purpose": "Reusable emoji picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Emoji\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EmojiPicker.wrn" - }, - { - "name": "EmptyState", - "mount": "EmptyState", - "category": "feedback", - "purpose": "Reusable empty state component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Nothing found\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"icon-[lucide--inbox]\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "suggestions", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": [], - "source": "components/EmptyState.wrn" - }, - { - "name": "EncryptionDiagram", - "mount": "EncryptionDiagram", - "category": "visualization", - "purpose": "Reusable encryption diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EncryptionDiagram.wrn" - }, - { - "name": "EnterpriseCTA", - "mount": "EnterpriseCTA", - "category": "actions", - "purpose": "Reusable enterprise c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnterpriseCTA.wrn" - }, - { - "name": "EnterpriseHero", - "mount": "EnterpriseHero", - "category": "layout", - "purpose": "Reusable enterprise hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnterpriseHero.wrn" - }, - { - "name": "EnterprisePricingCard", - "mount": "EnterprisePricingCard", - "category": "content", - "purpose": "Reusable enterprise pricing card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnterprisePricingCard.wrn" - }, - { - "name": "EnvironmentSelector", - "mount": "EnvironmentSelector", - "category": "forms", - "purpose": "Reusable environment selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Environment\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnvironmentSelector.wrn" - }, - { - "name": "EnvironmentSwitcher", - "mount": "EnvironmentSwitcher", - "category": "content", - "purpose": "Reusable environment switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnvironmentSwitcher.wrn" - }, - { - "name": "ErrorActions", - "mount": "ErrorActions", - "category": "actions", - "purpose": "Reusable error actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorActions.wrn" - }, - { - "name": "ErrorCard", - "mount": "ErrorCard", - "category": "content", - "purpose": "Reusable error card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorCard.wrn" - }, - { - "name": "ErrorCode", - "mount": "ErrorCode", - "category": "content", - "purpose": "Reusable error code component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorCode.wrn" - }, - { - "name": "ErrorHero", - "mount": "ErrorHero", - "category": "layout", - "purpose": "Reusable error hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorHero.wrn" - }, - { - "name": "ErrorIllustration", - "mount": "ErrorIllustration", - "category": "content", - "purpose": "Reusable error illustration component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorIllustration.wrn" - }, - { - "name": "ErrorPage", - "mount": "ErrorPage", - "category": "content", - "purpose": "Reusable error page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorPage.wrn" - }, - { - "name": "ErrorPageShell", - "mount": "ErrorPageShell", - "category": "layout", - "purpose": "Reusable error page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorPageShell.wrn" - }, - { - "name": "ErrorState", - "mount": "ErrorState", - "category": "feedback", - "purpose": "Reusable error state component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"error\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Something went wrong\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "errorCode", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "retryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "retryAction", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "details", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": ["click"], - "source": "components/ErrorState.wrn" - }, - { - "name": "ErrorSupportLink", - "mount": "ErrorSupportLink", - "category": "actions", - "purpose": "Reusable error support link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorSupportLink.wrn" - }, - { - "name": "EstimatedCostSummary", - "mount": "EstimatedCostSummary", - "category": "content", - "purpose": "Reusable estimated cost summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EstimatedCostSummary.wrn" - }, - { - "name": "EventTable", - "mount": "EventTable", - "category": "data", - "purpose": "Reusable event table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EventTable.wrn" - }, - { - "name": "ExpandableText", - "mount": "ExpandableText", - "category": "content", - "purpose": "Reusable expandable text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExpandableText.wrn" - }, - { - "name": "ExpiryDateTimePicker", - "mount": "ExpiryDateTimePicker", - "category": "forms", - "purpose": "Reusable expiry date time picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ExpiryDateTime\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExpiryDateTimePicker.wrn" - }, - { - "name": "ExportProgress", - "mount": "ExportProgress", - "category": "visualization", - "purpose": "Reusable export progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExportProgress.wrn" - }, - { - "name": "ExternalLink", - "mount": "ExternalLink", - "category": "actions", - "purpose": "Reusable external link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExternalLink.wrn" - }, - { - "name": "EyebrowText", - "mount": "EyebrowText", - "category": "content", - "purpose": "Reusable eyebrow text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EyebrowText.wrn" - }, - { - "name": "FactorCard", - "mount": "FactorCard", - "category": "content", - "purpose": "Reusable factor card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FactorCard.wrn" - }, - { - "name": "FallbackRouteBuilder", - "mount": "FallbackRouteBuilder", - "category": "content", - "purpose": "Reusable fallback route builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FallbackRouteBuilder.wrn" - }, - { - "name": "FallbackRouteDiagram", - "mount": "FallbackRouteDiagram", - "category": "visualization", - "purpose": "Reusable fallback route diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FallbackRouteDiagram.wrn" - }, - { - "name": "FAQ", - "mount": "FAQ", - "category": "core", - "purpose": "Reusable faq component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Frequently asked questions\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "items", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "allowMultiple", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "defaultOpenIndex", - "type": "number", - "required": false, - "default": "0" - } - ], - "slots": [], - "events": [], - "source": "components/FAQ.wrn" - }, - { - "name": "FAQAccordion", - "mount": "FAQAccordion", - "category": "core", - "purpose": "Reusable faqaccordion component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Frequently asked questions\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "items", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "allowMultiple", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "defaultOpenIndex", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "showContact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "contactText", - "type": "string", - "required": false, - "default": "\"Still have questions?\"" - }, - { - "name": "contactLabel", - "type": "string", - "required": false, - "default": "\"Contact support\"" - }, - { - "name": "contactHref", - "type": "string", - "required": false, - "default": "\"/support\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/FAQAccordion.wrn" - }, - { - "name": "FaviconUpload", - "mount": "FaviconUpload", - "category": "content", - "purpose": "Reusable favicon upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FaviconUpload.wrn" - }, - { - "name": "FaxInput", - "mount": "FaxInput", - "category": "forms", - "purpose": "Reusable fax input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Fax\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FaxInput.wrn" - }, - { - "name": "FeatureCard", - "mount": "FeatureCard", - "category": "content", - "purpose": "Reusable feature card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--sparkles]\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Feature\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/FeatureCard.wrn" - }, - { - "name": "FeatureChecklist", - "mount": "FeatureChecklist", - "category": "content", - "purpose": "Reusable feature checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureChecklist.wrn" - }, - { - "name": "FeatureComparisonTable", - "mount": "FeatureComparisonTable", - "category": "data", - "purpose": "Reusable feature comparison table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureComparisonTable.wrn" - }, - { - "name": "FeaturedBlogCard", - "mount": "FeaturedBlogCard", - "category": "content", - "purpose": "Reusable featured blog card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeaturedBlogCard.wrn" - }, - { - "name": "FeatureDetailsPanel", - "mount": "FeatureDetailsPanel", - "category": "layout", - "purpose": "Reusable feature details panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureDetailsPanel.wrn" - }, - { - "name": "FeatureGrid", - "mount": "FeatureGrid", - "category": "data", - "purpose": "Reusable feature grid component.", - "props": [ - { - "name": "columns", - "type": "number", - "required": false, - "default": "3" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureGrid.wrn" - }, - { - "name": "FeatureIconCard", - "mount": "FeatureIconCard", - "category": "content", - "purpose": "Reusable feature icon card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureIconCard.wrn" - }, - { - "name": "FeatureList", - "mount": "FeatureList", - "category": "data", - "purpose": "Reusable feature list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureList.wrn" - }, - { - "name": "FeatureTabs", - "mount": "FeatureTabs", - "category": "content", - "purpose": "Reusable feature tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureTabs.wrn" - }, - { - "name": "FeatureTimeline", - "mount": "FeatureTimeline", - "category": "visualization", - "purpose": "Reusable feature timeline component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureTimeline.wrn" - }, - { - "name": "FeatureUnavailableState", - "mount": "FeatureUnavailableState", - "category": "feedback", - "purpose": "Reusable feature unavailable state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FeatureUnavailable\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureUnavailableState.wrn" - }, - { - "name": "FieldActions", - "mount": "FieldActions", - "category": "actions", - "purpose": "Reusable field actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", + "name": "label", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FieldActions.wrn" - }, - { - "name": "file-upload", - "mount": "file-upload", - "category": "core", - "purpose": "Reusable file-upload component.", - "props": [ - { - "name": "store", - "type": "string", - "required": false, - "default": "\"public\"" + "default": "\"Progress\"" }, { - "name": "endpoint", - "type": "string", + "name": "value", + "type": "number", "required": false, - "default": "\"/api/upload\"" - }, - { - "name": "accept", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "multiple", - "type": "boolean", - "required": false, - "default": "false" + "default": "50" }, { "name": "max", "type": "number", "required": false, - "default": "0" + "default": "100" }, { - "name": "label", - "type": "string", - "required": false, - "default": "\"Drag files here or click to browse\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/file-upload.wrn" - }, - { - "name": "FileInput", - "mount": "FileInput", - "category": "forms", - "purpose": "Reusable file input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"File\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileInput.wrn" - }, - { - "name": "FileList", - "mount": "FileList", - "category": "data", - "purpose": "Reusable file list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileList.wrn" - }, - { - "name": "FileSizeInput", - "mount": "FileSizeInput", - "category": "forms", - "purpose": "Reusable file size input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FileSize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileSizeInput.wrn" - }, - { - "name": "FileSizeLabel", - "mount": "FileSizeLabel", - "category": "content", - "purpose": "Reusable file size label component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileSizeLabel.wrn" - }, - { - "name": "FileTypeBadge", - "mount": "FileTypeBadge", - "category": "feedback", - "purpose": "Reusable file type badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FileType\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileTypeBadge.wrn" - }, - { - "name": "FileUpload", - "mount": "FileUpload", - "category": "content", - "purpose": "Reusable file upload component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"file\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"file\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Upload file\"" - }, - { - "name": "accept", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "multiple", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"Drag and drop or browse\"" - } - ], - "slots": [], - "events": [], - "source": "components/FileUpload.wrn" - }, - { - "name": "FilterableTable", - "mount": "FilterableTable", - "category": "data", - "purpose": "Reusable filterable table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FilterableTable.wrn" - }, - { - "name": "FilterBar", - "mount": "FilterBar", - "category": "core", - "purpose": "Reusable filter bar component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Filters\"" - }, - { - "name": "clearLabel", - "type": "string", - "required": false, - "default": "\"Clear filters\"" - }, - { - "name": "showClear", + "name": "showValue", "type": "boolean", "required": false, "default": "true" @@ -17603,1936 +2702,48 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/FilterBar.wrn" - }, - { - "name": "FilterMenu", - "mount": "FilterMenu", - "category": "overlays", - "purpose": "Reusable filter menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FilterMenu.wrn" - }, - { - "name": "FilterSearchInput", - "mount": "FilterSearchInput", - "category": "forms", - "purpose": "Reusable filter search input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FilterSearch\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FilterSearchInput.wrn" - }, - { - "name": "FinalCTA", - "mount": "FinalCTA", - "category": "actions", - "purpose": "Reusable final c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Get started\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FinalCTA.wrn" - }, - { - "name": "FirstNameInput", - "mount": "FirstNameInput", - "category": "forms", - "purpose": "Reusable first name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FirstName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FirstNameInput.wrn" - }, - { - "name": "Flex", - "mount": "Flex", - "category": "core", - "purpose": "Reusable flex component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Flex.wrn" - }, - { - "name": "FontPicker", - "mount": "FontPicker", - "category": "forms", - "purpose": "Reusable font picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Font\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FontPicker.wrn" - }, - { - "name": "FontSizePicker", - "mount": "FontSizePicker", - "category": "forms", - "purpose": "Reusable font size picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FontSize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FontSizePicker.wrn" - }, - { - "name": "FontWeightPicker", - "mount": "FontWeightPicker", - "category": "forms", - "purpose": "Reusable font weight picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FontWeight\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FontWeightPicker.wrn" - }, - { - "name": "FooterLanguageSwitcher", - "mount": "FooterLanguageSwitcher", - "category": "content", - "purpose": "Reusable footer language switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FooterLanguageSwitcher.wrn" - }, - { - "name": "FooterStatusIndicator", - "mount": "FooterStatusIndicator", - "category": "feedback", - "purpose": "Reusable footer status indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FooterStatus\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FooterStatusIndicator.wrn" - }, - { - "name": "ForbiddenPage", - "mount": "ForbiddenPage", - "category": "content", - "purpose": "Reusable forbidden page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ForbiddenPage.wrn" - }, - { - "name": "ForbiddenState", - "mount": "ForbiddenState", - "category": "feedback", - "purpose": "Reusable forbidden state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Forbidden\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ForbiddenState.wrn" - }, - { - "name": "ForgotPasswordForm", - "mount": "ForgotPasswordForm", - "category": "content", - "purpose": "Reusable forgot password form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ForgotPasswordForm.wrn" - }, - { - "name": "Form", - "mount": "Form", - "category": "content", - "purpose": "Reusable form component.", - "props": [ - { - "name": "action", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"post\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Form.wrn" - }, - { - "name": "FormActions", - "mount": "FormActions", - "category": "actions", - "purpose": "Reusable form actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormActions.wrn" - }, - { - "name": "FormAlert", - "mount": "FormAlert", - "category": "feedback", - "purpose": "Reusable form alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Form\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormAlert.wrn" - }, - { - "name": "FormDialog", - "mount": "FormDialog", - "category": "overlays", - "purpose": "Reusable form dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormDialog.wrn" - }, - { - "name": "FormError", - "mount": "FormError", - "category": "core", - "purpose": "Reusable form error component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "message", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormError.wrn" - }, - { - "name": "FormErrorSummary", - "mount": "FormErrorSummary", - "category": "content", - "purpose": "Reusable form error summary component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Please fix the following\"" - }, - { - "name": "visible", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormErrorSummary.wrn" - }, - { - "name": "FormField", - "mount": "FormField", - "category": "forms", - "purpose": "Reusable form field component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Field\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormField.wrn" - }, - { - "name": "FormGrid", - "mount": "FormGrid", - "category": "data", - "purpose": "Reusable form grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormGrid.wrn" - }, - { - "name": "FormGroup", - "mount": "FormGroup", - "category": "forms", - "purpose": "Reusable form group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Form\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormGroup.wrn" - }, - { - "name": "FormHelpText", - "mount": "FormHelpText", - "category": "content", - "purpose": "Reusable form help text component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormHelpText.wrn" - }, - { - "name": "FormLabel", - "mount": "FormLabel", - "category": "content", - "purpose": "Reusable form label component.", - "props": [ - { - "name": "for", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Label\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "optional", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], "slots": [], "events": [], - "source": "components/FormLabel.wrn" - }, - { - "name": "FormProgress", - "mount": "FormProgress", - "category": "visualization", - "purpose": "Reusable form progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormProgress.wrn" - }, - { - "name": "FormRow", - "mount": "FormRow", - "category": "data", - "purpose": "Reusable form row component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormRow.wrn" - }, - { - "name": "FormSection", - "mount": "FormSection", - "category": "layout", - "purpose": "Reusable form section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormSection.wrn" - }, - { - "name": "FullBleed", - "mount": "FullBleed", - "category": "core", - "purpose": "Reusable full bleed component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FullBleed.wrn" - }, - { - "name": "FullscreenDialog", - "mount": "FullscreenDialog", - "category": "overlays", - "purpose": "Reusable fullscreen dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FullscreenDialog.wrn" - }, - { - "name": "FunnelChart", - "mount": "FunnelChart", - "category": "visualization", - "purpose": "Reusable funnel chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FunnelChart.wrn" - }, - { - "name": "GeoChart", - "mount": "GeoChart", - "category": "visualization", - "purpose": "Reusable geo chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GeoChart.wrn" - }, - { - "name": "GeofenceEditor", - "mount": "GeofenceEditor", - "category": "forms", - "purpose": "Reusable geofence editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Geofence\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GeofenceEditor.wrn" - }, - { - "name": "GhostButton", - "mount": "GhostButton", - "category": "actions", - "purpose": "Reusable ghost button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GhostButton.wrn" - }, - { - "name": "GlassCard", - "mount": "GlassCard", - "category": "content", - "purpose": "Reusable glass card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GlassCard.wrn" - }, - { - "name": "GlobalSearch", - "mount": "GlobalSearch", - "category": "content", - "purpose": "Reusable global search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GlobalSearch.wrn" - }, - { - "name": "GradientCTA", - "mount": "GradientCTA", - "category": "actions", - "purpose": "Reusable gradient c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GradientCTA.wrn" - }, - { - "name": "GradientPicker", - "mount": "GradientPicker", - "category": "forms", - "purpose": "Reusable gradient picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Gradient\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GradientPicker.wrn" - }, - { - "name": "GradientStopEditor", - "mount": "GradientStopEditor", - "category": "forms", - "purpose": "Reusable gradient stop editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"GradientStop\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GradientStopEditor.wrn" + "source": "components/FileUploadProgress.wrn" }, { "name": "Grid", "mount": "Grid", - "category": "data", - "purpose": "Reusable grid component.", + "category": "layout", + "purpose": "Theme-aware, responsive grid component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, { "name": "gap", "type": "string", "required": false, - "default": "\"4\"" + "default": "\"md\"" }, { - "name": "className", + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" @@ -19543,584 +2754,25 @@ "source": "components/Grid.wrn" }, { - "name": "GuideCard", - "mount": "GuideCard", - "category": "content", - "purpose": "Reusable guide card component.", + "name": "Image", + "mount": "Image", + "category": "layout", + "purpose": "Theme-aware, responsive image component.", "props": [ { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideCard.wrn" - }, - { - "name": "GuideChecklist", - "mount": "GuideChecklist", - "category": "content", - "purpose": "Reusable guide checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideChecklist.wrn" - }, - { - "name": "GuideDifficultyBadge", - "mount": "GuideDifficultyBadge", - "category": "feedback", - "purpose": "Reusable guide difficulty badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"GuideDifficulty\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideDifficultyBadge.wrn" - }, - { - "name": "GuideGrid", - "mount": "GuideGrid", - "category": "data", - "purpose": "Reusable guide grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideGrid.wrn" - }, - { - "name": "GuideStep", - "mount": "GuideStep", - "category": "content", - "purpose": "Reusable guide step component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideStep.wrn" - }, - { - "name": "Header", - "mount": "Header", - "category": "layout", - "purpose": "Reusable header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Header.wrn" - }, - { - "name": "HeaderActions", - "mount": "HeaderActions", - "category": "actions", - "purpose": "Reusable header actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeaderActions.wrn" - }, - { - "name": "HealthIndicator", - "mount": "HealthIndicator", - "category": "feedback", - "purpose": "Reusable health indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Health\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HealthIndicator.wrn" - }, - { - "name": "Hero", - "mount": "Hero", - "category": "layout", - "purpose": "Reusable hero component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Build faster with WRNexusJS\"" - }, - { - "name": "highlight", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Get started\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"center\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Hero.wrn" - }, - { - "name": "HeroActions", - "mount": "HeroActions", - "category": "actions", - "purpose": "Reusable hero actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroActions.wrn" - }, - { - "name": "HeroCodePanel", - "mount": "HeroCodePanel", - "category": "layout", - "purpose": "Reusable hero code panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroCodePanel.wrn" - }, - { - "name": "HeroGradientText", - "mount": "HeroGradientText", - "category": "content", - "purpose": "Reusable hero gradient text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", + "name": "src", "type": "string", "required": false, "default": "\"\"" @@ -20132,1631 +2784,25 @@ "default": "\"\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroGradientText.wrn" - }, - { - "name": "HeroPrimaryAction", - "mount": "HeroPrimaryAction", - "category": "actions", - "purpose": "Reusable hero primary action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroPrimaryAction.wrn" - }, - { - "name": "HeroProductPreview", - "mount": "HeroProductPreview", - "category": "content", - "purpose": "Reusable hero product preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroProductPreview.wrn" - }, - { - "name": "HeroSecondaryAction", - "mount": "HeroSecondaryAction", - "category": "actions", - "purpose": "Reusable hero secondary action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroSecondaryAction.wrn" - }, - { - "name": "HeroTrustText", - "mount": "HeroTrustText", - "category": "content", - "purpose": "Reusable hero trust text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroTrustText.wrn" - }, - { - "name": "HexColorInput", - "mount": "HexColorInput", - "category": "forms", - "purpose": "Reusable hex color input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"HexColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HexColorInput.wrn" - }, - { - "name": "HiddenField", - "mount": "HiddenField", - "category": "forms", - "purpose": "Reusable hidden field component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Hidden\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HiddenField.wrn" - }, - { - "name": "HighlightText", - "mount": "HighlightText", - "category": "content", - "purpose": "Reusable highlight text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HighlightText.wrn" - }, - { - "name": "HolidayCalendar", - "mount": "HolidayCalendar", - "category": "content", - "purpose": "Reusable holiday calendar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HolidayCalendar.wrn" - }, - { - "name": "HostnameInput", - "mount": "HostnameInput", - "category": "forms", - "purpose": "Reusable hostname input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Hostname\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HostnameInput.wrn" - }, - { - "name": "HourPicker", - "mount": "HourPicker", - "category": "forms", - "purpose": "Reusable hour picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Hour\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HourPicker.wrn" - }, - { - "name": "HslColorInput", - "mount": "HslColorInput", - "category": "forms", - "purpose": "Reusable hsl color input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"HslColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HslColorInput.wrn" - }, - { - "name": "hstack", - "mount": "hstack", - "category": "core", - "purpose": "Reusable hstack component.", - "props": [ - { - "name": "gap", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"center\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/hstack.wrn" - }, - { - "name": "HtmlEditor", - "mount": "HtmlEditor", - "category": "forms", - "purpose": "Reusable html editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Html\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HtmlEditor.wrn" - }, - { - "name": "HumanApprovalStep", - "mount": "HumanApprovalStep", - "category": "content", - "purpose": "Reusable human approval step component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HumanApprovalStep.wrn" - }, - { - "name": "Icon", - "mount": "Icon", - "category": "content", - "purpose": "Reusable icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Icon.wrn" - }, - { - "name": "IconButton", - "mount": "IconButton", - "category": "actions", - "purpose": "Reusable icon button component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"•\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"ghost\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": [], - "events": [], - "source": "components/IconButton.wrn" - }, - { - "name": "IconPicker", - "mount": "IconPicker", - "category": "forms", - "purpose": "Reusable icon picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Icon\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IconPicker.wrn" - }, - { - "name": "IconSelector", - "mount": "IconSelector", - "category": "forms", - "purpose": "Reusable icon selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Icon\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IconSelector.wrn" - }, - { - "name": "IdentifierInput", - "mount": "IdentifierInput", - "category": "forms", - "purpose": "Reusable identifier input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Identifier\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IdentifierInput.wrn" - }, - { - "name": "Illustration", - "mount": "Illustration", - "category": "content", - "purpose": "Reusable illustration component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Illustration.wrn" - }, - { - "name": "ImageCompressionPreview", - "mount": "ImageCompressionPreview", - "category": "content", - "purpose": "Reusable image compression preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageCompressionPreview.wrn" - }, - { - "name": "ImageEditor", - "mount": "ImageEditor", - "category": "forms", - "purpose": "Reusable image editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Image\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageEditor.wrn" - }, - { - "name": "ImagePreviewDialog", - "mount": "ImagePreviewDialog", - "category": "overlays", - "purpose": "Reusable image preview dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImagePreviewDialog.wrn" - }, - { - "name": "ImageSelector", - "mount": "ImageSelector", - "category": "forms", - "purpose": "Reusable image selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Image\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageSelector.wrn" - }, - { - "name": "ImageUpload", - "mount": "ImageUpload", - "category": "content", - "purpose": "Reusable image upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageUpload.wrn" - }, - { - "name": "ImportProgress", - "mount": "ImportProgress", - "category": "visualization", - "purpose": "Reusable import progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", + "name": "width", "type": "string", "required": false, "default": "\"\"" }, { - "name": "summary", + "name": "height", "type": "string", "required": false, "default": "\"\"" }, { "name": "loading", + "type": "string", + "required": false, + "default": "\"lazy\"" + }, + { + "name": "rounded", "type": "boolean", "required": false, "default": "false" @@ -21770,648 +2816,26 @@ ], "slots": ["default"], "events": [], - "source": "components/ImportProgress.wrn" + "source": "components/Image.wrn" }, { - "name": "IncidentAlert", - "mount": "IncidentAlert", - "category": "feedback", - "purpose": "Reusable incident alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Incident\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentAlert.wrn" - }, - { - "name": "IncidentBanner", - "mount": "IncidentBanner", - "category": "feedback", - "purpose": "Reusable incident banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Incident\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentBanner.wrn" - }, - { - "name": "IncidentCard", - "mount": "IncidentCard", - "category": "content", - "purpose": "Reusable incident card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentCard.wrn" - }, - { - "name": "IncidentList", - "mount": "IncidentList", - "category": "data", - "purpose": "Reusable incident list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentList.wrn" - }, - { - "name": "IncidentResponseFlow", - "mount": "IncidentResponseFlow", - "category": "visualization", - "purpose": "Reusable incident response flow component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentResponseFlow.wrn" - }, - { - "name": "IncidentSeverityBadge", - "mount": "IncidentSeverityBadge", - "category": "feedback", - "purpose": "Reusable incident severity badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"IncidentSeverity\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentSeverityBadge.wrn" - }, - { - "name": "IncidentTimeline", - "mount": "IncidentTimeline", - "category": "visualization", - "purpose": "Reusable incident timeline component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentTimeline.wrn" - }, - { - "name": "IndustryBadge", - "mount": "IndustryBadge", - "category": "feedback", - "purpose": "Reusable industry badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Industry\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IndustryBadge.wrn" - }, - { - "name": "IndustrySelector", - "mount": "IndustrySelector", + "name": "Input", + "mount": "Input", "category": "forms", - "purpose": "Reusable industry selector component.", + "purpose": "Theme-aware, responsive input component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Industry\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IndustrySelector.wrn" - }, - { - "name": "InfoCard", - "mount": "InfoCard", - "category": "content", - "purpose": "Reusable info card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InfoCard.wrn" - }, - { - "name": "Inline", - "mount": "Inline", - "category": "core", - "purpose": "Reusable inline component.", - "props": [ - { - "name": "gap", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Inline.wrn" - }, - { - "name": "InlineAlert", - "mount": "InlineAlert", - "category": "feedback", - "purpose": "Reusable inline alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Inline\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InlineAlert.wrn" - }, - { - "name": "InlineCode", - "mount": "InlineCode", - "category": "content", - "purpose": "Reusable inline code component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InlineCode.wrn" - }, - { - "name": "input", - "mount": "input", - "category": "core", - "purpose": "Reusable input component.", - "props": [ - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/input.wrn" - }, - { - "name": "InputGroup", - "mount": "InputGroup", - "category": "forms", - "purpose": "Reusable input group component.", - "props": [ { "name": "label", "type": "string", @@ -22443,10 +2867,22 @@ "default": "\"text\"" }, { - "name": "required", - "type": "boolean", + "name": "min", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "disabled", @@ -22455,23 +2891,11 @@ "default": "false" }, { - "name": "readonly", + "name": "required", "type": "boolean", "required": false, "default": "false" }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "class", "type": "string", @@ -22479,1670 +2903,33 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], - "source": "components/InputGroup.wrn" + "source": "components/Input.wrn" }, { - "name": "InsetPanel", - "mount": "InsetPanel", - "category": "layout", - "purpose": "Reusable inset panel component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InsetPanel.wrn" - }, - { - "name": "IntegerInput", - "mount": "IntegerInput", + "name": "InputGroup", + "mount": "InputGroup", "category": "forms", - "purpose": "Reusable integer input component.", + "purpose": "Theme-aware, responsive input group component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Integer\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IntegerInput.wrn" - }, - { - "name": "IntegrationCard", - "mount": "IntegrationCard", - "category": "content", - "purpose": "Reusable integration card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--plug-zap]\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IntegrationCard.wrn" - }, - { - "name": "InvoiceLineItem", - "mount": "InvoiceLineItem", - "category": "content", - "purpose": "Reusable invoice line item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InvoiceLineItem.wrn" - }, - { - "name": "InvoiceSummary", - "mount": "InvoiceSummary", - "category": "content", - "purpose": "Reusable invoice summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InvoiceSummary.wrn" - }, - { - "name": "IpAddressInput", - "mount": "IpAddressInput", - "category": "forms", - "purpose": "Reusable ip address input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"IpAddress\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IpAddressInput.wrn" - }, - { - "name": "JobCard", - "mount": "JobCard", - "category": "content", - "purpose": "Reusable job card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JobCard.wrn" - }, - { - "name": "JobProgress", - "mount": "JobProgress", - "category": "visualization", - "purpose": "Reusable job progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JobProgress.wrn" - }, - { - "name": "JobTitleInput", - "mount": "JobTitleInput", - "category": "forms", - "purpose": "Reusable job title input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"JobTitle\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JobTitleInput.wrn" - }, - { - "name": "JsonInput", - "mount": "JsonInput", - "category": "forms", - "purpose": "Reusable json input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Json\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JsonInput.wrn" - }, - { - "name": "JsonViewer", - "mount": "JsonViewer", - "category": "content", - "purpose": "Reusable json viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JsonViewer.wrn" - }, - { - "name": "KeyValueTable", - "mount": "KeyValueTable", - "category": "data", - "purpose": "Reusable key value table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/KeyValueTable.wrn" - }, - { - "name": "KycDocumentUpload", - "mount": "KycDocumentUpload", - "category": "content", - "purpose": "Reusable kyc document upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/KycDocumentUpload.wrn" - }, - { - "name": "LanguageSelector", - "mount": "LanguageSelector", - "category": "forms", - "purpose": "Reusable language selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Language\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LanguageSelector.wrn" - }, - { - "name": "LanguageSwitcher", - "mount": "LanguageSwitcher", - "category": "content", - "purpose": "Reusable language switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LanguageSwitcher.wrn" - }, - { - "name": "LastNameInput", - "mount": "LastNameInput", - "category": "forms", - "purpose": "Reusable last name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LastName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LastNameInput.wrn" - }, - { - "name": "LatencyMetric", - "mount": "LatencyMetric", - "category": "visualization", - "purpose": "Reusable latency metric component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LatencyMetric.wrn" - }, - { - "name": "LatitudeInput", - "mount": "LatitudeInput", - "category": "forms", - "purpose": "Reusable latitude input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Latitude\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LatitudeInput.wrn" - }, - { - "name": "LeadershipGrid", - "mount": "LeadershipGrid", - "category": "data", - "purpose": "Reusable leadership grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LeadershipGrid.wrn" - }, - { - "name": "LeadText", - "mount": "LeadText", - "category": "content", - "purpose": "Reusable lead text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LeadText.wrn" - }, - { - "name": "LegalAcceptanceNotice", - "mount": "LegalAcceptanceNotice", - "category": "feedback", - "purpose": "Reusable legal acceptance notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LegalAcceptance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalAcceptanceNotice.wrn" - }, - { - "name": "LegalBulletList", - "mount": "LegalBulletList", - "category": "data", - "purpose": "Reusable legal bullet list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalBulletList.wrn" - }, - { - "name": "LegalContactBlock", - "mount": "LegalContactBlock", - "category": "content", - "purpose": "Reusable legal contact block component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalContactBlock.wrn" - }, - { - "name": "LegalDefinitionList", - "mount": "LegalDefinitionList", - "category": "data", - "purpose": "Reusable legal definition list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalDefinitionList.wrn" - }, - { - "name": "LegalDocumentHeader", - "mount": "LegalDocumentHeader", - "category": "layout", - "purpose": "Reusable legal document header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalDocumentHeader.wrn" - }, - { - "name": "LegalDocumentLayout", - "mount": "LegalDocumentLayout", - "category": "layout", - "purpose": "Reusable legal document layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Legal document\"" - }, - { - "name": "effectiveDate", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "updatedDate", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["toc", "default"], - "events": [], - "source": "components/LegalDocumentLayout.wrn" - }, - { - "name": "LegalHero", - "mount": "LegalHero", - "category": "layout", - "purpose": "Reusable legal hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalHero.wrn" - }, - { - "name": "LegalLanguageSelector", - "mount": "LegalLanguageSelector", - "category": "forms", - "purpose": "Reusable legal language selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LegalLanguage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalLanguageSelector.wrn" - }, - { - "name": "LegalNotice", - "mount": "LegalNotice", - "category": "feedback", - "purpose": "Reusable legal notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Legal\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalNotice.wrn" - }, - { - "name": "LegalPageShell", - "mount": "LegalPageShell", - "category": "layout", - "purpose": "Reusable legal page shell component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["navigation", "default"], - "events": [], - "source": "components/LegalPageShell.wrn" - }, - { - "name": "LegalPrintButton", - "mount": "LegalPrintButton", - "category": "actions", - "purpose": "Reusable legal print button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalPrintButton.wrn" - }, - { - "name": "LegalRegionSelector", - "mount": "LegalRegionSelector", - "category": "forms", - "purpose": "Reusable legal region selector component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"LegalRegion\"" + "default": "\"Input Group\"" }, { "name": "name", @@ -24169,10 +2956,22 @@ "default": "\"text\"" }, { - "name": "required", - "type": "boolean", + "name": "min", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "disabled", @@ -24181,23 +2980,11 @@ "default": "false" }, { - "name": "readonly", + "name": "required", "type": "boolean", "required": false, "default": "false" }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "class", "type": "string", @@ -24205,39 +2992,122 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], - "source": "components/LegalRegionSelector.wrn" + "source": "components/InputGroup.wrn" }, { - "name": "LegalSection", - "mount": "LegalSection", + "name": "InputNumber", + "mount": "InputNumber", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive input number component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Input Number\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"number\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/InputNumber.wrn" + }, + { + "name": "Kbd", + "mount": "Kbd", "category": "layout", - "purpose": "Reusable legal section component.", + "purpose": "Theme-aware, responsive kbd component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { - "name": "description", + "name": "label", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" + "default": "\"⌘ K\"" }, { "name": "class", @@ -24248,55 +3118,43 @@ ], "slots": ["default"], "events": [], - "source": "components/LegalSection.wrn" + "source": "components/Kbd.wrn" }, { - "name": "LegalSummary", - "mount": "LegalSummary", - "category": "content", - "purpose": "Reusable legal summary component.", + "name": "LayoutSplitter", + "mount": "LayoutSplitter", + "category": "layout", + "purpose": "Theme-aware, responsive layout splitter component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { - "name": "description", - "type": "string", + "name": "columns", + "type": "number", "required": false, - "default": "\"\"" + "default": "2" }, { - "name": "href", + "name": "gap", "type": "string", "required": false, - "default": "\"\"" + "default": "\"md\"" }, { - "name": "actionLabel", + "name": "maxWidth", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"xl\"" }, { "name": "class", @@ -24307,19 +3165,31 @@ ], "slots": ["default"], "events": [], - "source": "components/LegalSummary.wrn" + "source": "components/LayoutSplitter.wrn" }, { - "name": "LegalTable", - "mount": "LegalTable", - "category": "data", - "purpose": "Reusable legal table component.", + "name": "LegendIndicator", + "mount": "LegendIndicator", + "category": "base", + "purpose": "Theme-aware, responsive legend indicator component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Legend Indicator\"" }, { "name": "description", @@ -24327,88 +3197,12 @@ "required": false, "default": "\"\"" }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalTable.wrn" - }, - { - "name": "LegalTableOfContents", - "mount": "LegalTableOfContents", - "category": "core", - "purpose": "Reusable legal table of contents component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"On this page\"" - }, { "name": "items", "type": "string", "required": false, "default": "[]" }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/LegalTableOfContents.wrn" - }, - { - "name": "LegalVersionBadge", - "mount": "LegalVersionBadge", - "category": "feedback", - "purpose": "Reusable legal version badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LegalVersion\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "variant", "type": "string", @@ -24424,338 +3218,25 @@ ], "slots": ["default"], "events": [], - "source": "components/LegalVersionBadge.wrn" - }, - { - "name": "LetterSpacingPicker", - "mount": "LetterSpacingPicker", - "category": "forms", - "purpose": "Reusable letter spacing picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LetterSpacing\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LetterSpacingPicker.wrn" - }, - { - "name": "LicenseKeyInput", - "mount": "LicenseKeyInput", - "category": "forms", - "purpose": "Reusable license key input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LicenseKey\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LicenseKeyInput.wrn" - }, - { - "name": "Lightbox", - "mount": "Lightbox", - "category": "overlays", - "purpose": "Reusable lightbox component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Lightbox.wrn" - }, - { - "name": "LineChart", - "mount": "LineChart", - "category": "visualization", - "purpose": "Reusable line chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LineChart.wrn" - }, - { - "name": "LineHeightPicker", - "mount": "LineHeightPicker", - "category": "forms", - "purpose": "Reusable line height picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LineHeight\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LineHeightPicker.wrn" + "source": "components/LegendIndicator.wrn" }, { "name": "Link", "mount": "Link", - "category": "core", - "purpose": "Reusable link component.", + "category": "layout", + "purpose": "Theme-aware, responsive link component.", "props": [ { - "name": "href", + "name": "size", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "label", @@ -24764,42 +3245,25 @@ "default": "\"Link\"" }, { - "name": "external", - "type": "boolean", + "name": "href", + "type": "string", "required": false, - "default": "false" + "default": "\"#\"" }, { - "name": "className", + "name": "target", "type": "string", "required": false, "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/Link.wrn" - }, - { - "name": "LinkButton", - "mount": "LinkButton", - "category": "actions", - "purpose": "Reusable link button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" }, { - "name": "type", + "name": "rel", "type": "string", "required": false, - "default": "\"button\"" + "default": "\"\"" }, { - "name": "disabled", + "name": "external", "type": "boolean", "required": false, "default": "false" @@ -24813,19 +3277,31 @@ ], "slots": ["default"], "events": [], - "source": "components/LinkButton.wrn" + "source": "components/Link.wrn" }, { "name": "List", "mount": "List", - "category": "data", - "purpose": "Reusable list component.", + "category": "base", + "purpose": "Theme-aware, responsive list component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"List\"" }, { "name": "description", @@ -24834,16 +3310,16 @@ "default": "\"\"" }, { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", + "name": "items", "type": "string", "required": false, - "default": "\"No items available.\"" + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" }, { "name": "class", @@ -24857,276 +3333,28 @@ "source": "components/List.wrn" }, { - "name": "LoadingButton", - "mount": "LoadingButton", - "category": "actions", - "purpose": "Reusable loading button component.", + "name": "ListGroup", + "mount": "ListGroup", + "category": "base", + "purpose": "Theme-aware, responsive list group component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Continue\"" + "default": "\"default\"" }, { - "name": "loadingLabel", - "type": "string", - "required": false, - "default": "\"Loading…\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/LoadingButton.wrn" - }, - { - "name": "LocaleSelector", - "mount": "LocaleSelector", - "category": "forms", - "purpose": "Reusable locale selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Locale\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LocaleSelector.wrn" - }, - { - "name": "LocalizedRouteLink", - "mount": "LocalizedRouteLink", - "category": "actions", - "purpose": "Reusable localized route link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LocalizedRouteLink.wrn" - }, - { - "name": "LocationPicker", - "mount": "LocationPicker", - "category": "forms", - "purpose": "Reusable location picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Location\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LocationPicker.wrn" - }, - { - "name": "Logo", - "mount": "Logo", - "category": "content", - "purpose": "Reusable logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"List Group\"" }, { "name": "description", @@ -25134,1945 +3362,6 @@ "required": false, "default": "\"\"" }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Logo.wrn" - }, - { - "name": "LogoCloud", - "mount": "LogoCloud", - "category": "core", - "purpose": "Reusable logo cloud component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Trusted by teams building modern products\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "logos", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"strip\"" - }, - { - "name": "grayscale", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showNames", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "maxItems", - "type": "number", - "required": false, - "default": "8" - } - ], - "slots": [], - "events": [], - "source": "components/LogoCloud.wrn" - }, - { - "name": "LogoUpload", - "mount": "LogoUpload", - "category": "content", - "purpose": "Reusable logo upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LogoUpload.wrn" - }, - { - "name": "LogoutDialog", - "mount": "LogoutDialog", - "category": "overlays", - "purpose": "Reusable logout dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LogoutDialog.wrn" - }, - { - "name": "LogTable", - "mount": "LogTable", - "category": "data", - "purpose": "Reusable log table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LogTable.wrn" - }, - { - "name": "LongitudeInput", - "mount": "LongitudeInput", - "category": "forms", - "purpose": "Reusable longitude input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Longitude\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LongitudeInput.wrn" - }, - { - "name": "MaintenanceAlert", - "mount": "MaintenanceAlert", - "category": "feedback", - "purpose": "Reusable maintenance alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Maintenance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceAlert.wrn" - }, - { - "name": "MaintenanceBanner", - "mount": "MaintenanceBanner", - "category": "feedback", - "purpose": "Reusable maintenance banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Maintenance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceBanner.wrn" - }, - { - "name": "MaintenanceCard", - "mount": "MaintenanceCard", - "category": "content", - "purpose": "Reusable maintenance card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceCard.wrn" - }, - { - "name": "MaintenancePage", - "mount": "MaintenancePage", - "category": "content", - "purpose": "Reusable maintenance page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenancePage.wrn" - }, - { - "name": "MaintenanceState", - "mount": "MaintenanceState", - "category": "feedback", - "purpose": "Reusable maintenance state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Maintenance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceState.wrn" - }, - { - "name": "MaintenanceWindowPicker", - "mount": "MaintenanceWindowPicker", - "category": "forms", - "purpose": "Reusable maintenance window picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MaintenanceWindow\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceWindowPicker.wrn" - }, - { - "name": "MapPicker", - "mount": "MapPicker", - "category": "forms", - "purpose": "Reusable map picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Map\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MapPicker.wrn" - }, - { - "name": "MarkdownEditor", - "mount": "MarkdownEditor", - "category": "forms", - "purpose": "Reusable markdown editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Markdown\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MarkdownEditor.wrn" - }, - { - "name": "MarketingPageShell", - "mount": "MarketingPageShell", - "category": "layout", - "purpose": "Reusable marketing page shell component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MarketingPageShell.wrn" - }, - { - "name": "MarketingSectionHeader", - "mount": "MarketingSectionHeader", - "category": "layout", - "purpose": "Reusable marketing section header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MarketingSectionHeader.wrn" - }, - { - "name": "MaskedSecretField", - "mount": "MaskedSecretField", - "category": "forms", - "purpose": "Reusable masked secret field component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MaskedSecret\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaskedSecretField.wrn" - }, - { - "name": "MegaMenu", - "mount": "MegaMenu", - "category": "overlays", - "purpose": "Reusable mega menu component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Explore\"" - }, - { - "name": "sections", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/MegaMenu.wrn" - }, - { - "name": "MemberList", - "mount": "MemberList", - "category": "data", - "purpose": "Reusable member list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MemberList.wrn" - }, - { - "name": "MentionInput", - "mount": "MentionInput", - "category": "forms", - "purpose": "Reusable mention input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Mention\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MentionInput.wrn" - }, - { - "name": "MessageCharacterCounter", - "mount": "MessageCharacterCounter", - "category": "feedback", - "purpose": "Reusable message character counter component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MessageCharacter\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageCharacterCounter.wrn" - }, - { - "name": "MessageComposer", - "mount": "MessageComposer", - "category": "content", - "purpose": "Reusable message composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageComposer.wrn" - }, - { - "name": "MessageComposerPreview", - "mount": "MessageComposerPreview", - "category": "content", - "purpose": "Reusable message composer preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageComposerPreview.wrn" - }, - { - "name": "MessageLimitInput", - "mount": "MessageLimitInput", - "category": "forms", - "purpose": "Reusable message limit input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MessageLimit\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageLimitInput.wrn" - }, - { - "name": "MessagePreview", - "mount": "MessagePreview", - "category": "content", - "purpose": "Reusable message preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessagePreview.wrn" - }, - { - "name": "MessageVolumeSlider", - "mount": "MessageVolumeSlider", - "category": "content", - "purpose": "Reusable message volume slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageVolumeSlider.wrn" - }, - { - "name": "Metric", - "mount": "Metric", - "category": "visualization", - "purpose": "Reusable metric component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Metric.wrn" - }, - { - "name": "MetricCard", - "mount": "MetricCard", - "category": "content", - "purpose": "Reusable metric card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MetricCard.wrn" - }, - { - "name": "MetricGrid", - "mount": "MetricGrid", - "category": "data", - "purpose": "Reusable metric grid component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Platform metrics\"" - }, - { - "name": "metrics", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "columns", - "type": "number", - "required": false, - "default": "4" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/MetricGrid.wrn" - }, - { - "name": "MetricText", - "mount": "MetricText", - "category": "content", - "purpose": "Reusable metric text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MetricText.wrn" - }, - { - "name": "MinutePicker", - "mount": "MinutePicker", - "category": "forms", - "purpose": "Reusable minute picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Minute\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MinutePicker.wrn" - }, - { - "name": "MissionSection", - "mount": "MissionSection", - "category": "layout", - "purpose": "Reusable mission section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MissionSection.wrn" - }, - { - "name": "MobileDeviceFrame", - "mount": "MobileDeviceFrame", - "category": "layout", - "purpose": "Reusable mobile device frame component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MobileDeviceFrame.wrn" - }, - { - "name": "MobileInput", - "mount": "MobileInput", - "category": "forms", - "purpose": "Reusable mobile input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Mobile\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MobileInput.wrn" - }, - { - "name": "MobileMenuButton", - "mount": "MobileMenuButton", - "category": "actions", - "purpose": "Reusable mobile menu button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MobileMenuButton.wrn" - }, - { - "name": "MobileNavigation", - "mount": "MobileNavigation", - "category": "layout", - "purpose": "Reusable mobile navigation component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Menu\"" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close menu\"" - }, { "name": "items", "type": "string", @@ -27080,63 +3369,10 @@ "default": "[]" }, { - "name": "class", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/MobileNavigation.wrn" - }, - { - "name": "MobileTableCard", - "mount": "MobileTableCard", - "category": "content", - "purpose": "Reusable mobile table card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -27147,303 +3383,31 @@ ], "slots": ["default"], "events": [], - "source": "components/MobileTableCard.wrn" + "source": "components/ListGroup.wrn" }, { - "name": "Modal", - "mount": "Modal", - "category": "core", - "purpose": "Reusable modal component.", + "name": "Map", + "mount": "Map", + "category": "integrations", + "purpose": "Theme-aware, responsive map component.", "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Dialog\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" }, { - "name": "closeLabel", + "name": "color", "type": "string", "required": false, - "default": "\"Close\"" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/Modal.wrn" - }, - { - "name": "MonthlyVolumeSelector", - "mount": "MonthlyVolumeSelector", - "category": "forms", - "purpose": "Reusable monthly volume selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MonthlyVolume\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MonthlyVolumeSelector.wrn" - }, - { - "name": "MonthPicker", - "mount": "MonthPicker", - "category": "forms", - "purpose": "Reusable month picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Month\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MonthPicker.wrn" - }, - { - "name": "MonthYearPicker", - "mount": "MonthYearPicker", - "category": "forms", - "purpose": "Reusable month year picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MonthYear\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MonthYearPicker.wrn" - }, - { - "name": "MultiFileUpload", - "mount": "MultiFileUpload", - "category": "content", - "purpose": "Reusable multi file upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Map\"" }, { "name": "description", @@ -27452,193 +3416,16 @@ "default": "\"\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MultiFileUpload.wrn" - }, - { - "name": "MultipleEmailInput", - "mount": "MultipleEmailInput", - "category": "forms", - "purpose": "Reusable multiple email input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MultipleEmail\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MultipleEmailInput.wrn" - }, - { - "name": "MultiSelect", - "mount": "MultiSelect", - "category": "core", - "purpose": "Reusable multi select component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"multi-select\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Choose options\"" - }, - { - "name": "options", + "name": "items", "type": "string", "required": false, "default": "[]" }, { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "size", - "type": "number", - "required": false, - "default": "5" - }, - { - "name": "class", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/MultiSelect.wrn" - }, - { - "name": "MutedText", - "mount": "MutedText", - "category": "content", - "purpose": "Reusable muted text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" + "default": "\"default\"" }, { "name": "class", @@ -27649,73 +3436,102 @@ ], "slots": ["default"], "events": [], - "source": "components/MutedText.wrn" + "source": "components/Map.wrn" }, { - "name": "NameInput", - "mount": "NameInput", - "category": "forms", - "purpose": "Reusable name input component.", + "name": "Marquee", + "mount": "Marquee", + "category": "base", + "purpose": "Theme-aware, responsive marquee component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Marquee\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Marquee.wrn" + }, + { + "name": "MegaMenu", + "mount": "MegaMenu", + "category": "navigation", + "purpose": "Theme-aware, responsive mega menu component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Name\"" + "default": "\"Mega Menu\"" }, { - "name": "name", + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "orientation", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"horizontal\"" }, { "name": "class", @@ -27726,136 +3542,31 @@ ], "slots": ["default"], "events": [], - "source": "components/NameInput.wrn" + "source": "components/MegaMenu.wrn" }, { - "name": "NarrowContainer", - "mount": "NarrowContainer", - "category": "core", - "purpose": "Reusable narrow container component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NarrowContainer.wrn" - }, - { - "name": "Navigation", - "mount": "Navigation", - "category": "layout", - "purpose": "Reusable navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Navigation.wrn" - }, - { - "name": "NavigationItem", - "mount": "NavigationItem", - "category": "content", - "purpose": "Reusable navigation item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NavigationItem.wrn" - }, - { - "name": "NavigationMegaMenu", - "mount": "NavigationMegaMenu", + "name": "Modal", + "mount": "Modal", "category": "overlays", - "purpose": "Reusable navigation mega menu component.", + "purpose": "Theme-aware, responsive modal component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Modal\"" }, { "name": "description", @@ -27869,6 +3580,12 @@ "required": false, "default": "false" }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, { "name": "closeLabel", "type": "string", @@ -27884,149 +3601,49 @@ ], "slots": ["default"], "events": [], - "source": "components/NavigationMegaMenu.wrn" + "source": "components/Modal.wrn" }, { - "name": "NewBadge", - "mount": "NewBadge", - "category": "feedback", - "purpose": "Reusable new badge component.", + "name": "Nav", + "mount": "Nav", + "category": "navigation", + "purpose": "Theme-aware, responsive nav component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"New\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NewBadge.wrn" - }, - { - "name": "NewPasswordInput", - "mount": "NewPasswordInput", - "category": "forms", - "purpose": "Reusable new password input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"NewPassword\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NewPasswordInput.wrn" - }, - { - "name": "NewsletterCTA", - "mount": "NewsletterCTA", - "category": "actions", - "purpose": "Reusable newsletter c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", + "name": "label", + "type": "string", "required": false, - "default": "false" + "default": "\"Nav\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" }, { "name": "class", @@ -28037,868 +3654,49 @@ ], "slots": ["default"], "events": [], - "source": "components/NewsletterCTA.wrn" + "source": "components/Nav.wrn" }, { - "name": "NewsletterForm", - "mount": "NewsletterForm", - "category": "content", - "purpose": "Reusable newsletter form component.", + "name": "Navbar", + "mount": "Navbar", + "category": "navigation", + "purpose": "Theme-aware, responsive navbar component.", "props": [ { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Stay up to date\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Enter your email\"" - }, - { - "name": "buttonLabel", - "type": "string", - "required": false, - "default": "\"Subscribe\"" - }, - { - "name": "action", - "type": "string", - "required": false, - "default": "\"/newsletter/subscribe\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"post\"" - }, - { - "name": "emailName", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "privacyLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "privacyHref", - "type": "string", - "required": false, - "default": "\"/privacy\"" - }, - { - "name": "successMessage", - "type": "string", - "required": false, - "default": "\"You are subscribed.\"" - }, - { - "name": "errorMessage", - "type": "string", - "required": false, - "default": "\"Something went wrong. Please try again.\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"icon-[lucide--mail]\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showIcon", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showPrivacy", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "fullWidth", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": [], - "events": ["submit", "input"], - "source": "components/NewsletterForm.wrn" - }, - { - "name": "NoResultsState", - "mount": "NoResultsState", - "category": "feedback", - "purpose": "Reusable no results state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"NoResults\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NoResultsState.wrn" - }, - { - "name": "NotFoundPage", - "mount": "NotFoundPage", - "category": "content", - "purpose": "Reusable not found page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotFoundPage.wrn" - }, - { - "name": "NotFoundState", - "mount": "NotFoundState", - "category": "feedback", - "purpose": "Reusable not found state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"NotFound\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotFoundState.wrn" - }, - { - "name": "NotificationCard", - "mount": "NotificationCard", - "category": "content", - "purpose": "Reusable notification card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotificationCard.wrn" - }, - { - "name": "NotificationDot", - "mount": "NotificationDot", - "category": "core", - "purpose": "Reusable notification dot component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Notification\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotificationDot.wrn" - }, - { - "name": "NotificationList", - "mount": "NotificationList", - "category": "data", - "purpose": "Reusable notification list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotificationList.wrn" - }, - { - "name": "NumberInput", - "mount": "NumberInput", - "category": "forms", - "purpose": "Reusable number input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Number\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/NumberInput.wrn" - }, - { - "name": "OfficeCard", - "mount": "OfficeCard", - "category": "content", - "purpose": "Reusable office card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OfficeCard.wrn" - }, - { - "name": "OfflinePage", - "mount": "OfflinePage", - "category": "content", - "purpose": "Reusable offline page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OfflinePage.wrn" - }, - { - "name": "OfflineState", - "mount": "OfflineState", - "category": "feedback", - "purpose": "Reusable offline state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Offline\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OfflineState.wrn" - }, - { - "name": "OnboardingProgress", - "mount": "OnboardingProgress", - "category": "visualization", - "purpose": "Reusable onboarding progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OnboardingProgress.wrn" - }, - { - "name": "OneTimeSecretDisplay", - "mount": "OneTimeSecretDisplay", - "category": "content", - "purpose": "Reusable one time secret display component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OneTimeSecretDisplay.wrn" - }, - { - "name": "OnlineIndicator", - "mount": "OnlineIndicator", - "category": "feedback", - "purpose": "Reusable online indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Online\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OnlineIndicator.wrn" - }, - { - "name": "OpacitySlider", - "mount": "OpacitySlider", - "category": "content", - "purpose": "Reusable opacity slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OpacitySlider.wrn" - }, - { - "name": "OpenAPICTA", - "mount": "OpenAPICTA", - "category": "actions", - "purpose": "Reusable open a p i c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", + "name": "label", + "type": "string", "required": false, - "default": "false" + "default": "\"Navbar\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" }, { "name": "class", @@ -28909,120 +3707,49 @@ ], "slots": ["default"], "events": [], - "source": "components/OpenAPICTA.wrn" + "source": "components/Navbar.wrn" }, { - "name": "OptionalIndicator", - "mount": "OptionalIndicator", - "category": "feedback", - "purpose": "Reusable optional indicator component.", + "name": "Pagination", + "mount": "Pagination", + "category": "navigation", + "purpose": "Theme-aware, responsive pagination component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Optional\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OptionalIndicator.wrn" - }, - { - "name": "OrganizationSelector", - "mount": "OrganizationSelector", - "category": "forms", - "purpose": "Reusable organization selector component.", - "props": [ + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Organization\"" + "default": "\"Pagination\"" }, { - "name": "name", + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "orientation", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"horizontal\"" }, { "name": "class", @@ -29033,160 +3760,37 @@ ], "slots": ["default"], "events": [], - "source": "components/OrganizationSelector.wrn" + "source": "components/Pagination.wrn" }, { - "name": "OtpInput", - "mount": "OtpInput", - "category": "forms", - "purpose": "Reusable otp input component.", + "name": "PinInput", + "mount": "PinInput", + "category": "advanced-forms", + "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", "type": "string", "required": false, - "default": "\"otp\"" - }, - { - "name": "length", - "type": "number", - "required": false, - "default": "6" + "default": "\"primary\"" }, { "name": "label", "type": "string", "required": false, "default": "\"Verification code\"" - } - ], - "slots": [], - "events": [], - "source": "components/OtpInput.wrn" - }, - { - "name": "OtpVerificationForm", - "mount": "OtpVerificationForm", - "category": "content", - "purpose": "Reusable otp verification form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" }, { - "name": "title", + "name": "name", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OtpVerificationForm.wrn" - }, - { - "name": "OutlinedCard", - "mount": "OutlinedCard", - "category": "content", - "purpose": "Reusable outlined card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OutlinedCard.wrn" - }, - { - "name": "PageAlert", - "mount": "PageAlert", - "category": "feedback", - "purpose": "Reusable page alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Page\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"pin\"" }, { "name": "value", @@ -29195,773 +3799,121 @@ "default": "\"\"" }, { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageAlert.wrn" - }, - { - "name": "PageHeader", - "mount": "PageHeader", - "category": "core", - "purpose": "Reusable page header component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"sparkles\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showBreadcrumbs", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "breadcrumbParent", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "breadcrumbParentHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "breadcrumbCurrent", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "highlights", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": [], - "source": "components/PageHeader.wrn" - }, - { - "name": "PageHeading", - "mount": "PageHeading", - "category": "core", - "purpose": "Reusable page heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageHeading.wrn" - }, - { - "name": "PageShell", - "mount": "PageShell", - "category": "core", - "purpose": "Reusable page shell component.", - "props": [ - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageShell.wrn" - }, - { - "name": "PageSkeleton", - "mount": "PageSkeleton", - "category": "feedback", - "purpose": "Reusable page skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Page\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageSkeleton.wrn" - }, - { - "name": "Pagination", - "mount": "Pagination", - "category": "core", - "purpose": "Reusable pagination component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "currentPage", + "name": "length", "type": "number", "required": false, - "default": "1" + "default": "4" }, { - "name": "totalPages", - "type": "number", - "required": false, - "default": "1" - }, - { - "name": "previousHref", + "name": "pattern", "type": "string", "required": false, - "default": "\"\"" + "default": "\"[0-9]\"" }, { - "name": "nextHref", + "name": "type", "type": "string", "required": false, - "default": "\"\"" + "default": "\"text\"" }, { - "name": "pages", + "name": "inputMode", "type": "string", "required": false, - "default": "[]" + "default": "\"numeric\"" }, { - "name": "showNumbers", + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"○\"" + }, + { + "name": "autocomplete", + "type": "string", + "required": false, + "default": "\"one-time-code\"" + }, + { + "name": "masked", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "readonly", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "autoFocus", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "autoSubmit", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "allowPaste", "type": "boolean", "required": false, "default": "true" }, { - "name": "showSummary", + "name": "clearable", "type": "boolean", "required": false, "default": "true" }, { - "name": "totalItems", + "name": "clearLabel", + "type": "string", + "required": false, + "default": "\"Clear code\"" + }, + { + "name": "separator", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "groupSize", "type": "number", "required": false, "default": "0" }, { - "name": "pageSize", - "type": "number", + "name": "helpText", + "type": "string", "required": false, - "default": "10" + "default": "\"\"" }, { - "name": "compact", + "name": "invalid", "type": "boolean", "required": false, "default": "false" }, { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": [], - "events": [], - "source": "components/Pagination.wrn" - }, - { - "name": "Panel", - "mount": "Panel", - "category": "layout", - "purpose": "Reusable panel component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Panel.wrn" - }, - { - "name": "PartnerApplicationForm", - "mount": "PartnerApplicationForm", - "category": "content", - "purpose": "Reusable partner application form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PartnerApplicationForm.wrn" - }, - { - "name": "PartnerLogoGrid", - "mount": "PartnerLogoGrid", - "category": "data", - "purpose": "Reusable partner logo grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PartnerLogoGrid.wrn" - }, - { - "name": "PartnerProgramCard", - "mount": "PartnerProgramCard", - "category": "content", - "purpose": "Reusable partner program card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PartnerProgramCard.wrn" - }, - { - "name": "PasskeyButton", - "mount": "PasskeyButton", - "category": "actions", - "purpose": "Reusable passkey button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Continue with a passkey\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Use fingerprint, face recognition, or device PIN\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/PasskeyButton.wrn" - }, - { - "name": "PasswordInput", - "mount": "PasswordInput", - "category": "forms", - "purpose": "Reusable password input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"password\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"password\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Password\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Enter your password\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"current-password\"" - }, - { - "name": "revealable", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": [], - "events": ["click"], - "source": "components/PasswordInput.wrn" - }, - { - "name": "PasswordRequirementList", - "mount": "PasswordRequirementList", - "category": "data", - "purpose": "Reusable password requirement list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PasswordRequirementList.wrn" - }, - { - "name": "PasswordStrengthMeter", - "mount": "PasswordStrengthMeter", - "category": "visualization", - "purpose": "Reusable password strength meter component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PasswordStrengthMeter.wrn" - }, - { - "name": "PasswordVisibilityToggle", - "mount": "PasswordVisibilityToggle", - "category": "forms", - "purpose": "Reusable password visibility toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PasswordVisibility\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", + "name": "validationMessage", "type": "string", "required": false, "default": "\"\"" @@ -29973,989 +3925,33 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/PasswordVisibilityToggle.wrn" - }, - { - "name": "PathInput", - "mount": "PathInput", - "category": "forms", - "purpose": "Reusable path input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Path\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PathInput.wrn" - }, - { - "name": "PaymentMethodCard", - "mount": "PaymentMethodCard", - "category": "content", - "purpose": "Reusable payment method card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PaymentMethodCard.wrn" - }, - { - "name": "PdfPreview", - "mount": "PdfPreview", - "category": "content", - "purpose": "Reusable pdf preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PdfPreview.wrn" - }, - { - "name": "PercentageInput", - "mount": "PercentageInput", - "category": "forms", - "purpose": "Reusable percentage input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Percentage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PercentageInput.wrn" - }, - { - "name": "PermissionSelector", - "mount": "PermissionSelector", - "category": "forms", - "purpose": "Reusable permission selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Permission\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PermissionSelector.wrn" - }, - { - "name": "PhoneInput", - "mount": "PhoneInput", - "category": "forms", - "purpose": "Reusable phone input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Phone\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], "slots": [], - "events": [], - "source": "components/PhoneInput.wrn" - }, - { - "name": "PieChart", - "mount": "PieChart", - "category": "visualization", - "purpose": "Reusable pie chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PieChart.wrn" - }, - { - "name": "Pill", - "mount": "Pill", - "category": "core", - "purpose": "Reusable pill component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Pill\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Pill.wrn" - }, - { - "name": "PinInput", - "mount": "PinInput", - "category": "forms", - "purpose": "Reusable pin input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Pin\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], + "events": ["input", "change", "complete", "paste", "clear", "error"], "source": "components/PinInput.wrn" }, - { - "name": "PlainTextEditor", - "mount": "PlainTextEditor", - "category": "forms", - "purpose": "Reusable plain text editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PlainText\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlainTextEditor.wrn" - }, - { - "name": "PlanCTA", - "mount": "PlanCTA", - "category": "actions", - "purpose": "Reusable plan c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanCTA.wrn" - }, - { - "name": "PlanFeatureList", - "mount": "PlanFeatureList", - "category": "data", - "purpose": "Reusable plan feature list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanFeatureList.wrn" - }, - { - "name": "PlanLimitList", - "mount": "PlanLimitList", - "category": "data", - "purpose": "Reusable plan limit list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanLimitList.wrn" - }, - { - "name": "PlanSelector", - "mount": "PlanSelector", - "category": "forms", - "purpose": "Reusable plan selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Plan\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanSelector.wrn" - }, - { - "name": "PlatformPillarCard", - "mount": "PlatformPillarCard", - "category": "content", - "purpose": "Reusable platform pillar card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlatformPillarCard.wrn" - }, - { - "name": "PolicyVersionTable", - "mount": "PolicyVersionTable", - "category": "data", - "purpose": "Reusable policy version table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PolicyVersionTable.wrn" - }, { "name": "Popover", "mount": "Popover", "category": "overlays", - "purpose": "Reusable popover component.", + "purpose": "Theme-aware, responsive popover component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Popover\"" }, { "name": "description", @@ -30969,6 +3965,12 @@ "required": false, "default": "false" }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, { "name": "closeLabel", "type": "string", @@ -30987,3402 +3989,47 @@ "source": "components/Popover.wrn" }, { - "name": "PortInput", - "mount": "PortInput", - "category": "forms", - "purpose": "Reusable port input component.", + "name": "Progress", + "mount": "Progress", + "category": "base", + "purpose": "Theme-aware, responsive progress component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Port\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PortInput.wrn" - }, - { - "name": "PortNumberInput", - "mount": "PortNumberInput", - "category": "forms", - "purpose": "Reusable port number input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PortNumber\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PortNumberInput.wrn" - }, - { - "name": "PositiveNumberInput", - "mount": "PositiveNumberInput", - "category": "forms", - "purpose": "Reusable positive number input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PositiveNumber\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PositiveNumberInput.wrn" - }, - { - "name": "PostalCodeInput", - "mount": "PostalCodeInput", - "category": "forms", - "purpose": "Reusable postal code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PostalCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PostalCodeInput.wrn" - }, - { - "name": "PostmanCTA", - "mount": "PostmanCTA", - "category": "actions", - "purpose": "Reusable postman c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PostmanCTA.wrn" - }, - { - "name": "PresetDateRangePicker", - "mount": "PresetDateRangePicker", - "category": "forms", - "purpose": "Reusable preset date range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PresetDateRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PresetDateRangePicker.wrn" - }, - { - "name": "PressReleaseCard", - "mount": "PressReleaseCard", - "category": "content", - "purpose": "Reusable press release card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PressReleaseCard.wrn" - }, - { - "name": "PreviewBadge", - "mount": "PreviewBadge", - "category": "feedback", - "purpose": "Reusable preview badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Preview\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PreviewBadge.wrn" - }, - { - "name": "PreviousNextNavigation", - "mount": "PreviousNextNavigation", - "category": "layout", - "purpose": "Reusable previous next navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PreviousNextNavigation.wrn" - }, - { - "name": "PriceInput", - "mount": "PriceInput", - "category": "forms", - "purpose": "Reusable price input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Price\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PriceInput.wrn" - }, - { - "name": "PriceRangeSlider", - "mount": "PriceRangeSlider", - "category": "content", - "purpose": "Reusable price range slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PriceRangeSlider.wrn" - }, - { - "name": "PriceText", - "mount": "PriceText", - "category": "content", - "purpose": "Reusable price text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PriceText.wrn" - }, - { - "name": "PricingCard", - "mount": "PricingCard", - "category": "content", - "purpose": "Reusable pricing card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingCard.wrn" - }, - { - "name": "PricingComparisonTable", - "mount": "PricingComparisonTable", - "category": "data", - "purpose": "Reusable pricing comparison table component.", - "props": [ - { - "name": "caption", - "type": "string", - "required": false, - "default": "\"Plan comparison\"" - }, - { - "name": "plans", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "features", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "featuredPlan", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/PricingComparisonTable.wrn" - }, - { - "name": "PricingContactForm", - "mount": "PricingContactForm", - "category": "content", - "purpose": "Reusable pricing contact form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingContactForm.wrn" - }, - { - "name": "PricingFeatureGroup", - "mount": "PricingFeatureGroup", - "category": "forms", - "purpose": "Reusable pricing feature group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PricingFeature\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingFeatureGroup.wrn" - }, - { - "name": "PricingGrid", - "mount": "PricingGrid", - "category": "data", - "purpose": "Reusable pricing grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingGrid.wrn" - }, - { - "name": "PricingHero", - "mount": "PricingHero", - "category": "layout", - "purpose": "Reusable pricing hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingHero.wrn" - }, - { - "name": "PricingPlanCard", - "mount": "PricingPlanCard", - "category": "content", - "purpose": "Reusable pricing plan card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"Starter\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "price", - "type": "string", - "required": false, - "default": "\"₹0\"" - }, - { - "name": "period", - "type": "string", - "required": false, - "default": "\"/month\"" - }, - { - "name": "featured", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "badgeLabel", - "type": "string", - "required": false, - "default": "\"Most popular\"" - }, - { - "name": "ctaLabel", - "type": "string", - "required": false, - "default": "\"Choose plan\"" - }, - { - "name": "ctaHref", - "type": "string", - "required": false, - "default": "\"#\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingPlanCard.wrn" - }, - { - "name": "PricingTable", - "mount": "PricingTable", - "category": "data", - "purpose": "Reusable pricing table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingTable.wrn" - }, - { - "name": "PricingToggle", - "mount": "PricingToggle", - "category": "forms", - "purpose": "Reusable pricing toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Pricing\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingToggle.wrn" - }, - { - "name": "PrimaryButton", - "mount": "PrimaryButton", - "category": "actions", - "purpose": "Reusable primary button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrimaryButton.wrn" - }, - { - "name": "PrintAction", - "mount": "PrintAction", - "category": "actions", - "purpose": "Reusable print action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrintAction.wrn" - }, - { - "name": "PrintPolicyButton", - "mount": "PrintPolicyButton", - "category": "actions", - "purpose": "Reusable print policy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrintPolicyButton.wrn" - }, - { - "name": "PrioritySelector", - "mount": "PrioritySelector", - "category": "forms", - "purpose": "Reusable priority selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Priority\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrioritySelector.wrn" - }, - { - "name": "PrivacyNotice", - "mount": "PrivacyNotice", - "category": "feedback", - "purpose": "Reusable privacy notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Privacy\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrivacyNotice.wrn" - }, - { - "name": "ProductArchitectureDiagram", - "mount": "ProductArchitectureDiagram", - "category": "visualization", - "purpose": "Reusable product architecture diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductArchitectureDiagram.wrn" - }, - { - "name": "ProductCard", - "mount": "ProductCard", - "category": "content", - "purpose": "Reusable product card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "status", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductCard.wrn" - }, - { - "name": "ProductCategorySection", - "mount": "ProductCategorySection", - "category": "layout", - "purpose": "Reusable product category section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductCategorySection.wrn" - }, - { - "name": "ProductCTA", - "mount": "ProductCTA", - "category": "actions", - "purpose": "Reusable product c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductCTA.wrn" - }, - { - "name": "ProductFeatureList", - "mount": "ProductFeatureList", - "category": "data", - "purpose": "Reusable product feature list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductFeatureList.wrn" - }, - { - "name": "ProductGrid", - "mount": "ProductGrid", - "category": "data", - "purpose": "Reusable product grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductGrid.wrn" - }, - { - "name": "ProductHero", - "mount": "ProductHero", - "category": "layout", - "purpose": "Reusable product hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductHero.wrn" - }, - { - "name": "ProductIcon", - "mount": "ProductIcon", - "category": "content", - "purpose": "Reusable product icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductIcon.wrn" - }, - { - "name": "ProductIntegrationList", - "mount": "ProductIntegrationList", - "category": "data", - "purpose": "Reusable product integration list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductIntegrationList.wrn" - }, - { - "name": "ProductList", - "mount": "ProductList", - "category": "data", - "purpose": "Reusable product list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductList.wrn" - }, - { - "name": "ProductLogo", - "mount": "ProductLogo", - "category": "content", - "purpose": "Reusable product logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductLogo.wrn" - }, - { - "name": "ProductMegaMenu", - "mount": "ProductMegaMenu", - "category": "core", - "purpose": "Reusable product mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductMegaMenu.wrn" - }, - { - "name": "ProductMiniCard", - "mount": "ProductMiniCard", - "category": "content", - "purpose": "Reusable product mini card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductMiniCard.wrn" - }, - { - "name": "ProductNavigationCard", - "mount": "ProductNavigationCard", - "category": "content", - "purpose": "Reusable product navigation card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductNavigationCard.wrn" - }, - { - "name": "ProductPageShell", - "mount": "ProductPageShell", - "category": "layout", - "purpose": "Reusable product page shell component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductPageShell.wrn" - }, - { - "name": "ProductSelector", - "mount": "ProductSelector", - "category": "forms", - "purpose": "Reusable product selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Product\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductSelector.wrn" - }, - { - "name": "ProductsMegaMenu", - "mount": "ProductsMegaMenu", - "category": "overlays", - "purpose": "Reusable products mega menu component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Products\"" - }, - { - "name": "sections", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductsMegaMenu.wrn" - }, - { - "name": "ProductStatusBadge", - "mount": "ProductStatusBadge", - "category": "feedback", - "purpose": "Reusable product status badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Available\"" - }, - { - "name": "status", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductStatusBadge.wrn" - }, - { - "name": "ProductUseCaseList", - "mount": "ProductUseCaseList", - "category": "data", - "purpose": "Reusable product use case list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductUseCaseList.wrn" - }, - { - "name": "progress", - "mount": "progress", - "category": "core", - "purpose": "Reusable progress component.", - "props": [ - { - "name": "value", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "max", - "type": "number", - "required": false, - "default": "100" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/progress.wrn" - }, - { - "name": "ProgressBar", - "mount": "ProgressBar", - "category": "core", - "purpose": "Reusable progress bar component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "max", - "type": "number", - "required": false, - "default": "100" - }, { "name": "label", "type": "string", "required": false, "default": "\"Progress\"" }, + { + "name": "value", + "type": "number", + "required": false, + "default": "50" + }, + { + "name": "max", + "type": "number", + "required": false, + "default": "100" + }, { "name": "showValue", "type": "boolean", "required": false, "default": "true" - } - ], - "slots": [], - "events": [], - "source": "components/ProgressBar.wrn" - }, - { - "name": "ProgressChart", - "mount": "ProgressChart", - "category": "visualization", - "purpose": "Reusable progress chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProgressChart.wrn" - }, - { - "name": "ProgressRing", - "mount": "ProgressRing", - "category": "visualization", - "purpose": "Reusable progress ring component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProgressRing.wrn" - }, - { - "name": "ProgressSlider", - "mount": "ProgressSlider", - "category": "content", - "purpose": "Reusable progress slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProgressSlider.wrn" - }, - { - "name": "ProjectCard", - "mount": "ProjectCard", - "category": "content", - "purpose": "Reusable project card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProjectCard.wrn" - }, - { - "name": "ProjectSelector", - "mount": "ProjectSelector", - "category": "forms", - "purpose": "Reusable project selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Project\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProjectSelector.wrn" - }, - { - "name": "ProjectSwitcher", - "mount": "ProjectSwitcher", - "category": "content", - "purpose": "Reusable project switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProjectSwitcher.wrn" - }, - { - "name": "PromoCodeInput", - "mount": "PromoCodeInput", - "category": "forms", - "purpose": "Reusable promo code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PromoCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PromoCodeInput.wrn" - }, - { - "name": "PromptDialog", - "mount": "PromptDialog", - "category": "overlays", - "purpose": "Reusable prompt dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PromptDialog.wrn" - }, - { - "name": "ProviderSelector", - "mount": "ProviderSelector", - "category": "forms", - "purpose": "Reusable provider selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Provider\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProviderSelector.wrn" - }, - { - "name": "PublicFooter", - "mount": "PublicFooter", - "category": "core", - "purpose": "Reusable public footer component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - }, - { - "name": "brandName", - "type": "string", - "required": false, - "default": "\"WrNexus\"" - }, - { - "name": "brandTagline", - "type": "string", - "required": false, - "default": "\"Identity Cloud\"" - }, - { - "name": "brandAriaLabel", - "type": "string", - "required": false, - "default": "\"WrNexus home\"" - }, - { - "name": "brandIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--blocks]\"" - }, - { - "name": "brandDescription", - "type": "string", - "required": false, - "default": "\"Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications.\"" - }, - { - "name": "statusLabel", - "type": "string", - "required": false, - "default": "\"All systems operational\"" - }, - { - "name": "statusHref", - "type": "string", - "required": false, - "default": "\"/status\"" - }, - { - "name": "newsletterEyebrow", - "type": "string", - "required": false, - "default": "\"WrNexus updates\"" - }, - { - "name": "newsletterTitle", - "type": "string", - "required": false, - "default": "\"Identity insights delivered to your inbox\"" - }, - { - "name": "newsletterDescription", - "type": "string", - "required": false, - "default": "\"Get product updates, security guidance, implementation strategies, and practical identity architecture resources.\"" - }, - { - "name": "newsletterAction", - "type": "string", - "required": false, - "default": "\"/api/newsletter/subscribe\"" - }, - { - "name": "newsletterButtonLabel", - "type": "string", - "required": false, - "default": "\"Subscribe\"" - }, - { - "name": "newsletterPlaceholder", - "type": "string", - "required": false, - "default": "\"Enter your work email\"" - }, - { - "name": "newsletterSuccessMessage", - "type": "string", - "required": false, - "default": "\"Thanks. Please check your inbox to confirm your subscription.\"" - }, - { - "name": "newsletterPrivacyLabel", - "type": "string", - "required": false, - "default": "\"privacy policy\"" - }, - { - "name": "newsletterPrivacyHref", - "type": "string", - "required": false, - "default": "\"/privacy\"" - }, - { - "name": "newsletterFinePrintPrefix", - "type": "string", - "required": false, - "default": "\"No spam. Unsubscribe at any time. Read our\"" - }, - { - "name": "newsletterFinePrintSuffix", - "type": "string", - "required": false, - "default": "\".\"" - }, - { - "name": "newsletterEmailLabel", - "type": "string", - "required": false, - "default": "\"Work email address\"" - }, - { - "name": "newsletterEmailName", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "copyrightText", - "type": "string", - "required": false, - "default": "\"© 2026 WrNexus. All rights reserved.\"" - }, - { - "name": "attributionText", - "type": "string", - "required": false, - "default": "\"Built by WorkRoot Workspace.\"" - }, - { - "name": "showNewsletter", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showSocialLinks", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showThemeToggle", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showStatus", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showCookiePreferences", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "cookiePreferencesLabel", - "type": "string", - "required": false, - "default": "\"Cookie preferences\"" - }, - { - "name": "themeLabel", - "type": "string", - "required": false, - "default": "\"Theme\"" - }, - { - "name": "themeToggleLabel", - "type": "string", - "required": false, - "default": "\"Toggle color theme\"" - }, - { - "name": "legalTitle", - "type": "string", - "required": false, - "default": "\"Legal\"" - }, - { - "name": "socialLinks", - "type": "PublicFooterLink[]", - "required": false, - "default": "[]" - }, - { - "name": "navigationColumns", - "type": "PublicFooterColumn[]", - "required": false, - "default": "[]" - }, - { - "name": "legalLinks", - "type": "PublicFooterLink[]", - "required": false, - "default": "[]" - }, - { - "name": "navigationAriaLabel", - "type": "string", - "required": false, - "default": "\"Footer navigation\"" - } - ], - "slots": ["navigation"], - "events": ["submit"], - "source": "components/PublicFooter.wrn" - }, - { - "name": "PublicHeader", - "mount": "PublicHeader", - "category": "layout", - "purpose": "Reusable public header component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - }, - { - "name": "brandName", - "type": "string", - "required": false, - "default": "\"WrNexus\"" - }, - { - "name": "brandTagline", - "type": "string", - "required": false, - "default": "\"Identity Cloud\"" - }, - { - "name": "brandAriaLabel", - "type": "string", - "required": false, - "default": "\"WrNexus home\"" - }, - { - "name": "brandIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--blocks]\"" - }, - { - "name": "pricingLabel", - "type": "string", - "required": false, - "default": "\"Pricing\"" - }, - { - "name": "pricingHref", - "type": "string", - "required": false, - "default": "\"/pricing\"" - }, - { - "name": "statusLabel", - "type": "string", - "required": false, - "default": "\"All systems operational\"" - }, - { - "name": "statusHref", - "type": "string", - "required": false, - "default": "\"/status\"" - }, - { - "name": "signInLabel", - "type": "string", - "required": false, - "default": "\"Sign in\"" - }, - { - "name": "signInHref", - "type": "string", - "required": false, - "default": "\"/sign-in\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Start free\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"/sign-up\"" - }, - { - "name": "showStatus", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showThemeToggle", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showSignIn", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showPrimaryAction", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "productLabel", - "type": "string", - "required": false, - "default": "\"Product\"" - }, - { - "name": "solutionsLabel", - "type": "string", - "required": false, - "default": "\"Solutions\"" - }, - { - "name": "developersLabel", - "type": "string", - "required": false, - "default": "\"Developers\"" - }, - { - "name": "resourcesLabel", - "type": "string", - "required": false, - "default": "\"Resources\"" - }, - { - "name": "navigationAriaLabel", - "type": "string", - "required": false, - "default": "\"Main navigation\"" - }, - { - "name": "themeToggleLabel", - "type": "string", - "required": false, - "default": "\"Toggle color theme\"" - }, - { - "name": "mobileMenuOpenLabel", - "type": "string", - "required": false, - "default": "\"Open navigation menu\"" - }, - { - "name": "mobileMenuCloseLabel", - "type": "string", - "required": false, - "default": "\"Close navigation menu\"" - }, - { - "name": "navigationItems", - "type": "PublicHeaderNavigationItem[]", - "required": false, - "default": "[]" - }, - { - "name": "actionItems", - "type": "PublicHeaderActionItem[]", - "required": false, - "default": "[]" - }, - { - "name": "showNavigation", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showMobileThemeToggle", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": ["navigation", "actions"], - "events": ["click"], - "source": "components/PublicHeader.wrn" - }, - { - "name": "PublicHeaderLogo", - "mount": "PublicHeaderLogo", - "category": "content", - "purpose": "Reusable public header logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PublicHeaderLogo.wrn" - }, - { - "name": "PublicMobileNavigation", - "mount": "PublicMobileNavigation", - "category": "core", - "purpose": "Reusable public mobile navigation component.", - "props": [ { "name": "class", "type": "string", @@ -34391,110 +4038,15 @@ } ], "slots": [], - "events": ["click"], - "source": "components/PublicMobileNavigation.wrn" - }, - { - "name": "PublicPageShell", - "mount": "PublicPageShell", - "category": "layout", - "purpose": "Reusable public page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], "events": [], - "source": "components/PublicPageShell.wrn" + "source": "components/Progress.wrn" }, { - "name": "PublicSearch", - "mount": "PublicSearch", - "category": "core", - "purpose": "Reusable public search component.", + "name": "Radio", + "mount": "Radio", + "category": "forms", + "purpose": "Theme-aware, responsive radio component.", "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "query", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Search...\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Search\"" - }, - { - "name": "action", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"get\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"q\"" - }, - { - "name": "buttonLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "clearLabel", - "type": "string", - "required": false, - "default": "\"Clear search\"" - }, { "name": "size", "type": "string", @@ -34502,51 +4054,16 @@ "default": "\"default\"" }, { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "fullWidth", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showShortcut", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "shortcutLabel", + "name": "color", "type": "string", "required": false, - "default": "\"⌘ K\"" + "default": "\"primary\"" }, - { - "name": "suggestions", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": ["input", "focus", "blur", "click"], - "source": "components/PublicSearch.wrn" - }, - { - "name": "PublishDateTimePicker", - "mount": "PublishDateTimePicker", - "category": "forms", - "purpose": "Reusable publish date time picker component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"PublishDateTime\"" + "default": "\"Radio\"" }, { "name": "name", @@ -34558,521 +4075,7 @@ "name": "value", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PublishDateTimePicker.wrn" - }, - { - "name": "PushComposer", - "mount": "PushComposer", - "category": "content", - "purpose": "Reusable push composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PushComposer.wrn" - }, - { - "name": "PushNotificationEditor", - "mount": "PushNotificationEditor", - "category": "forms", - "purpose": "Reusable push notification editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PushNotification\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PushNotificationEditor.wrn" - }, - { - "name": "QrCode", - "mount": "QrCode", - "category": "content", - "purpose": "Reusable qr code component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QrCode.wrn" - }, - { - "name": "QuantityInput", - "mount": "QuantityInput", - "category": "forms", - "purpose": "Reusable quantity input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Quantity\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QuantityInput.wrn" - }, - { - "name": "QuantityStepper", - "mount": "QuantityStepper", - "category": "content", - "purpose": "Reusable quantity stepper component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QuantityStepper.wrn" - }, - { - "name": "QuietHoursPicker", - "mount": "QuietHoursPicker", - "category": "forms", - "purpose": "Reusable quiet hours picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Quiet hours\"" - }, - { - "name": "startName", - "type": "string", - "required": false, - "default": "\"quietStart\"" - }, - { - "name": "endName", - "type": "string", - "required": false, - "default": "\"quietEnd\"" - }, - { - "name": "start", - "type": "string", - "required": false, - "default": "\"22:00\"" - }, - { - "name": "end", - "type": "string", - "required": false, - "default": "\"08:00\"" - }, - { - "name": "timezone", - "type": "string", - "required": false, - "default": "\"UTC\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/QuietHoursPicker.wrn" - }, - { - "name": "QuoteText", - "mount": "QuoteText", - "category": "content", - "purpose": "Reusable quote text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QuoteText.wrn" - }, - { - "name": "Radio", - "mount": "Radio", - "category": "core", - "purpose": "Reusable radio component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"choice\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Option\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"on\"" }, { "name": "checked", @@ -35085,3980 +4088,24 @@ "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], "events": [], "source": "components/Radio.wrn" }, - { - "name": "RadioGroup", - "mount": "RadioGroup", - "category": "forms", - "purpose": "Reusable radio group component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Choose one\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"choice\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RadioGroup.wrn" - }, - { - "name": "RangeInput", - "mount": "RangeInput", - "category": "forms", - "purpose": "Reusable range input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Range\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RangeInput.wrn" - }, { "name": "RangeSlider", "mount": "RangeSlider", - "category": "content", - "purpose": "Reusable range slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RangeSlider.wrn" - }, - { - "name": "RateLimitedState", - "mount": "RateLimitedState", - "category": "feedback", - "purpose": "Reusable rate limited state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RateLimited\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateLimitedState.wrn" - }, - { - "name": "RateLimitInput", - "mount": "RateLimitInput", "category": "forms", - "purpose": "Reusable rate limit input component.", + "purpose": "Theme-aware, responsive range slider component.", "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RateLimit\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateLimitInput.wrn" - }, - { - "name": "RateLimitPage", - "mount": "RateLimitPage", - "category": "content", - "purpose": "Reusable rate limit page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateLimitPage.wrn" - }, - { - "name": "RateTable", - "mount": "RateTable", - "category": "data", - "purpose": "Reusable rate table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateTable.wrn" - }, - { - "name": "RatingSlider", - "mount": "RatingSlider", - "category": "content", - "purpose": "Reusable rating slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RatingSlider.wrn" - }, - { - "name": "RecipientSelector", - "mount": "RecipientSelector", - "category": "forms", - "purpose": "Reusable recipient selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Recipient\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecipientSelector.wrn" - }, - { - "name": "RecoveryCodeForm", - "mount": "RecoveryCodeForm", - "category": "content", - "purpose": "Reusable recovery code form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecoveryCodeForm.wrn" - }, - { - "name": "RecoveryCodeInput", - "mount": "RecoveryCodeInput", - "category": "forms", - "purpose": "Reusable recovery code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RecoveryCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecoveryCodeInput.wrn" - }, - { - "name": "RecurrenceRuleBuilder", - "mount": "RecurrenceRuleBuilder", - "category": "content", - "purpose": "Reusable recurrence rule builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecurrenceRuleBuilder.wrn" - }, - { - "name": "RecurringSchedulePicker", - "mount": "RecurringSchedulePicker", - "category": "forms", - "purpose": "Reusable recurring schedule picker component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"recurring-schedule\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"recurrence\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Repeat\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"none\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/RecurringSchedulePicker.wrn" - }, - { - "name": "RedirectUriInput", - "mount": "RedirectUriInput", - "category": "forms", - "purpose": "Reusable redirect uri input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RedirectUri\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RedirectUriInput.wrn" - }, - { - "name": "ReferenceInput", - "mount": "ReferenceInput", - "category": "forms", - "purpose": "Reusable reference input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Reference\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ReferenceInput.wrn" - }, - { - "name": "RegexInput", - "mount": "RegexInput", - "category": "forms", - "purpose": "Reusable regex input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Regex\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegexInput.wrn" - }, - { - "name": "RegionalPrivacyBanner", - "mount": "RegionalPrivacyBanner", - "category": "feedback", - "purpose": "Reusable regional privacy banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RegionalPrivacy\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionalPrivacyBanner.wrn" - }, - { - "name": "RegionAvailabilityTable", - "mount": "RegionAvailabilityTable", - "category": "data", - "purpose": "Reusable region availability table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionAvailabilityTable.wrn" - }, - { - "name": "RegionSelector", - "mount": "RegionSelector", - "category": "forms", - "purpose": "Reusable region selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Region\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionSelector.wrn" - }, - { - "name": "RegionUnavailableAlert", - "mount": "RegionUnavailableAlert", - "category": "feedback", - "purpose": "Reusable region unavailable alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RegionUnavailable\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionUnavailableAlert.wrn" - }, - { - "name": "RegionUnavailableState", - "mount": "RegionUnavailableState", - "category": "feedback", - "purpose": "Reusable region unavailable state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RegionUnavailable\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionUnavailableState.wrn" - }, - { - "name": "RejectOptionalCookiesButton", - "mount": "RejectOptionalCookiesButton", - "category": "actions", - "purpose": "Reusable reject optional cookies button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RejectOptionalCookiesButton.wrn" - }, - { - "name": "ReopenCookieSettingsButton", - "mount": "ReopenCookieSettingsButton", - "category": "actions", - "purpose": "Reusable reopen cookie settings button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ReopenCookieSettingsButton.wrn" - }, - { - "name": "ReportCard", - "mount": "ReportCard", - "category": "content", - "purpose": "Reusable report card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ReportCard.wrn" - }, - { - "name": "RequestResponseViewer", - "mount": "RequestResponseViewer", - "category": "content", - "purpose": "Reusable request response viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RequestResponseViewer.wrn" - }, - { - "name": "RequestViewer", - "mount": "RequestViewer", - "category": "content", - "purpose": "Reusable request viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RequestViewer.wrn" - }, - { - "name": "RequiredIndicator", - "mount": "RequiredIndicator", - "category": "feedback", - "purpose": "Reusable required indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Required\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RequiredIndicator.wrn" - }, - { - "name": "ResetPasswordForm", - "mount": "ResetPasswordForm", - "category": "content", - "purpose": "Reusable reset password form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResetPasswordForm.wrn" - }, - { - "name": "ResizablePanel", - "mount": "ResizablePanel", - "category": "layout", - "purpose": "Reusable resizable panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResizablePanel.wrn" - }, - { - "name": "ResourceCard", - "mount": "ResourceCard", - "category": "content", - "purpose": "Reusable resource card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceCard.wrn" - }, - { - "name": "ResourceDownloadCard", - "mount": "ResourceDownloadCard", - "category": "content", - "purpose": "Reusable resource download card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceDownloadCard.wrn" - }, - { - "name": "ResourcePageShell", - "mount": "ResourcePageShell", - "category": "layout", - "purpose": "Reusable resource page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourcePageShell.wrn" - }, - { - "name": "ResourceSearch", - "mount": "ResourceSearch", - "category": "content", - "purpose": "Reusable resource search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceSearch.wrn" - }, - { - "name": "ResourcesMegaMenu", - "mount": "ResourcesMegaMenu", - "category": "overlays", - "purpose": "Reusable resources mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ResourcesMegaMenu.wrn" - }, - { - "name": "ResourceTypeBadge", - "mount": "ResourceTypeBadge", - "category": "feedback", - "purpose": "Reusable resource type badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ResourceType\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceTypeBadge.wrn" - }, - { - "name": "ResponseViewer", - "mount": "ResponseViewer", - "category": "content", - "purpose": "Reusable response viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResponseViewer.wrn" - }, - { - "name": "ResponsibleDisclosureCTA", - "mount": "ResponsibleDisclosureCTA", - "category": "actions", - "purpose": "Reusable responsible disclosure c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResponsibleDisclosureCTA.wrn" - }, - { - "name": "ResponsiveTable", - "mount": "ResponsiveTable", - "category": "data", - "purpose": "Reusable responsive table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResponsiveTable.wrn" - }, - { - "name": "ResultsSection", - "mount": "ResultsSection", - "category": "layout", - "purpose": "Reusable results section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResultsSection.wrn" - }, - { - "name": "RetentionTable", - "mount": "RetentionTable", - "category": "data", - "purpose": "Reusable retention table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RetentionTable.wrn" - }, - { - "name": "RetryCountInput", - "mount": "RetryCountInput", - "category": "forms", - "purpose": "Reusable retry count input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RetryCount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RetryCountInput.wrn" - }, - { - "name": "RevenueChart", - "mount": "RevenueChart", - "category": "visualization", - "purpose": "Reusable revenue chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RevenueChart.wrn" - }, - { - "name": "RgbColorInput", - "mount": "RgbColorInput", - "category": "forms", - "purpose": "Reusable rgb color input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RgbColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RgbColorInput.wrn" - }, - { - "name": "RichTextEditor", - "mount": "RichTextEditor", - "category": "forms", - "purpose": "Reusable rich text editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RichText\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RichTextEditor.wrn" - }, - { - "name": "RichTextInput", - "mount": "RichTextInput", - "category": "forms", - "purpose": "Reusable rich text input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RichText\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RichTextInput.wrn" - }, - { - "name": "RoleSelector", - "mount": "RoleSelector", - "category": "forms", - "purpose": "Reusable role selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Role\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RoleSelector.wrn" - }, - { - "name": "RollingDateRangePicker", - "mount": "RollingDateRangePicker", - "category": "forms", - "purpose": "Reusable rolling date range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RollingDateRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RollingDateRangePicker.wrn" - }, - { - "name": "SaveCookiePreferencesButton", - "mount": "SaveCookiePreferencesButton", - "category": "actions", - "purpose": "Reusable save cookie preferences button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SaveCookiePreferencesButton.wrn" - }, - { - "name": "SavedFilterSelector", - "mount": "SavedFilterSelector", - "category": "forms", - "purpose": "Reusable saved filter selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SavedFilter\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SavedFilterSelector.wrn" - }, - { - "name": "ScheduledDateTimePicker", - "mount": "ScheduledDateTimePicker", - "category": "forms", - "purpose": "Reusable scheduled date time picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ScheduledDateTime\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScheduledDateTimePicker.wrn" - }, - { - "name": "ScheduleMessagePicker", - "mount": "ScheduleMessagePicker", - "category": "forms", - "purpose": "Reusable schedule message picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ScheduleMessage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScheduleMessagePicker.wrn" - }, - { - "name": "SchedulePicker", - "mount": "SchedulePicker", - "category": "forms", - "purpose": "Reusable schedule picker component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Schedule\"" - } - ], - "slots": [], - "events": [], - "source": "components/SchedulePicker.wrn" - }, - { - "name": "ScreenshotFrame", - "mount": "ScreenshotFrame", - "category": "layout", - "purpose": "Reusable screenshot frame component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScreenshotFrame.wrn" - }, - { - "name": "ScrollArea", - "mount": "ScrollArea", - "category": "core", - "purpose": "Reusable scroll area component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScrollArea.wrn" - }, - { - "name": "SDKCard", - "mount": "SDKCard", - "category": "content", - "purpose": "Reusable s d k card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SDKCard.wrn" - }, - { - "name": "SdkLanguageSelector", - "mount": "SdkLanguageSelector", - "category": "forms", - "purpose": "Reusable sdk language selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SdkLanguage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SdkLanguageSelector.wrn" - }, - { - "name": "SDKLanguageTabs", - "mount": "SDKLanguageTabs", - "category": "content", - "purpose": "Reusable s d k language tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SDKLanguageTabs.wrn" - }, - { - "name": "SDKTabs", - "mount": "SDKTabs", - "category": "core", - "purpose": "Reusable sdktabs component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SDK languages\"" - }, - { - "name": "tabs", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "defaultIndex", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/SDKTabs.wrn" - }, - { - "name": "SearchButton", - "mount": "SearchButton", - "category": "actions", - "purpose": "Reusable search button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchButton.wrn" - }, - { - "name": "SearchCategoryTabs", - "mount": "SearchCategoryTabs", - "category": "content", - "purpose": "Reusable search category tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchCategoryTabs.wrn" - }, - { - "name": "SearchDialog", - "mount": "SearchDialog", - "category": "overlays", - "purpose": "Reusable search dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchDialog.wrn" - }, - { - "name": "SearchEmptyState", - "mount": "SearchEmptyState", - "category": "feedback", - "purpose": "Reusable search empty state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SearchEmpty\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchEmptyState.wrn" - }, - { - "name": "SearchInput", - "mount": "SearchInput", - "category": "forms", - "purpose": "Reusable search input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Search\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/SearchInput.wrn" - }, - { - "name": "SearchLoadingState", - "mount": "SearchLoadingState", - "category": "feedback", - "purpose": "Reusable search loading state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SearchLoading\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchLoadingState.wrn" - }, - { - "name": "SearchResultItem", - "mount": "SearchResultItem", - "category": "content", - "purpose": "Reusable search result item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchResultItem.wrn" - }, - { - "name": "SecondaryButton", - "mount": "SecondaryButton", - "category": "actions", - "purpose": "Reusable secondary button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecondaryButton.wrn" - }, - { - "name": "SecondPicker", - "mount": "SecondPicker", - "category": "forms", - "purpose": "Reusable second picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Second\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecondPicker.wrn" - }, - { - "name": "SecretDisplay", - "mount": "SecretDisplay", - "category": "content", - "purpose": "Reusable secret display component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecretDisplay.wrn" - }, - { - "name": "SecretInput", - "mount": "SecretInput", - "category": "forms", - "purpose": "Reusable secret input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Secret\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecretInput.wrn" - }, - { - "name": "SecretRevealDialog", - "mount": "SecretRevealDialog", - "category": "overlays", - "purpose": "Reusable secret reveal dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecretRevealDialog.wrn" - }, - { - "name": "Section", - "mount": "Section", - "category": "layout", - "purpose": "Reusable section component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "size", "type": "string", @@ -39066,159 +4113,19 @@ "default": "\"default\"" }, { - "name": "surface", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Section.wrn" - }, - { - "name": "SectionActions", - "mount": "SectionActions", - "category": "actions", - "purpose": "Reusable section actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SectionActions.wrn" - }, - { - "name": "SectionHeader", - "mount": "SectionHeader", - "category": "layout", - "purpose": "Reusable section header component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Section title\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"left\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SectionHeader.wrn" - }, - { - "name": "SectionHeading", - "mount": "SectionHeading", - "category": "core", - "purpose": "Reusable section heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SectionHeading.wrn" - }, - { - "name": "SecurityAlert", - "mount": "SecurityAlert", - "category": "feedback", - "purpose": "Reusable security alert component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Security\"" + "default": "\"Range Slider\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", + "name": "name", "type": "string", "required": false, "default": "\"\"" @@ -39229,6 +4136,95 @@ "required": false, "default": "\"\"" }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"range\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/RangeSlider.wrn" + }, + { + "name": "Rating", + "mount": "Rating", + "category": "base", + "purpose": "Theme-aware, responsive rating component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Rating\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, { "name": "variant", "type": "string", @@ -39244,319 +4240,31 @@ ], "slots": ["default"], "events": [], - "source": "components/SecurityAlert.wrn" + "source": "components/Rating.wrn" }, { - "name": "SecurityContactCard", - "mount": "SecurityContactCard", - "category": "content", - "purpose": "Reusable security contact card component.", + "name": "Scrollspy", + "mount": "Scrollspy", + "category": "navigation", + "purpose": "Theme-aware, responsive scrollspy component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityContactCard.wrn" - }, - { - "name": "SecurityFeatureCard", - "mount": "SecurityFeatureCard", - "category": "content", - "purpose": "Reusable security feature card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityFeatureCard.wrn" - }, - { - "name": "SecurityHero", - "mount": "SecurityHero", - "category": "layout", - "purpose": "Reusable security hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityHero.wrn" - }, - { - "name": "SecurityPillarGrid", - "mount": "SecurityPillarGrid", - "category": "data", - "purpose": "Reusable security pillar grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityPillarGrid.wrn" - }, - { - "name": "SecurityPracticeList", - "mount": "SecurityPracticeList", - "category": "data", - "purpose": "Reusable security practice list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityPracticeList.wrn" - }, - { - "name": "SecurityReportForm", - "mount": "SecurityReportForm", - "category": "content", - "purpose": "Reusable security report form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityReportForm.wrn" - }, - { - "name": "SegmentedButtonGroup", - "mount": "SegmentedButtonGroup", - "category": "core", - "purpose": "Reusable segmented button group component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Options\"" + "default": "\"Scrollspy\"" }, { "name": "items", @@ -39570,14 +4278,97 @@ "required": false, "default": "\"\"" }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Scrollspy.wrn" + }, + { + "name": "SearchBox", + "mount": "SearchBox", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive search box component.", + "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" }, { - "name": "fullWidth", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Search Box\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"search\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -39590,32 +4381,26 @@ } ], "slots": [], - "events": ["click"], - "source": "components/SegmentedButtonGroup.wrn" + "events": [], + "source": "components/SearchBox.wrn" }, { "name": "Select", "mount": "Select", - "category": "core", - "purpose": "Reusable select component.", + "category": "forms", + "purpose": "Theme-aware, responsive select component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "label", @@ -39624,19 +4409,31 @@ "default": "\"Select\"" }, { - "name": "help", + "name": "name", "type": "string", "required": false, "default": "\"\"" }, { - "name": "error", + "name": "value", "type": "string", "required": false, "default": "\"\"" }, { - "name": "required", + "name": "options", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Select an option\"" + }, + { + "name": "multiple", "type": "boolean", "required": false, "default": "false" @@ -39646,701 +4443,59 @@ "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/Select.wrn" }, { - "name": "SenderIdInput", - "mount": "SenderIdInput", - "category": "forms", - "purpose": "Reusable sender id input component.", + "name": "Sidebar", + "mount": "Sidebar", + "category": "navigation", + "purpose": "Theme-aware, responsive sidebar component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"SenderId\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SenderIdInput.wrn" - }, - { - "name": "ServerErrorPage", - "mount": "ServerErrorPage", - "category": "content", - "purpose": "Reusable server error page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServerErrorPage.wrn" - }, - { - "name": "ServiceLevelTable", - "mount": "ServiceLevelTable", - "category": "data", - "purpose": "Reusable service level table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceLevelTable.wrn" - }, - { - "name": "ServiceStatusBadge", - "mount": "ServiceStatusBadge", - "category": "feedback", - "purpose": "Reusable service status badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ServiceStatus\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceStatusBadge.wrn" - }, - { - "name": "ServiceStatusList", - "mount": "ServiceStatusList", - "category": "data", - "purpose": "Reusable service status list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceStatusList.wrn" - }, - { - "name": "ServiceStatusRow", - "mount": "ServiceStatusRow", - "category": "data", - "purpose": "Reusable service status row component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceStatusRow.wrn" - }, - { - "name": "SessionCard", - "mount": "SessionCard", - "category": "content", - "purpose": "Reusable session card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SessionCard.wrn" - }, - { - "name": "SessionExpiredDialog", - "mount": "SessionExpiredDialog", - "category": "overlays", - "purpose": "Reusable session expired dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SessionExpiredDialog.wrn" - }, - { - "name": "SetupChecklist", - "mount": "SetupChecklist", - "category": "content", - "purpose": "Reusable setup checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SetupChecklist.wrn" - }, - { - "name": "SeveritySelector", - "mount": "SeveritySelector", - "category": "forms", - "purpose": "Reusable severity selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Severity\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SeveritySelector.wrn" - }, - { - "name": "ShadowPicker", - "mount": "ShadowPicker", - "category": "forms", - "purpose": "Reusable shadow picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Shadow\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ShadowPicker.wrn" - }, - { - "name": "ShareAction", - "mount": "ShareAction", - "category": "actions", - "purpose": "Reusable share action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ShareAction.wrn" - }, - { - "name": "ShareButton", - "mount": "ShareButton", - "category": "actions", - "purpose": "Reusable share button component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"Sidebar\"" }, { - "name": "type", + "name": "items", "type": "string", "required": false, - "default": "\"button\"" + "default": "[]" }, { - "name": "disabled", - "type": "boolean", + "name": "active", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" }, { "name": "class", @@ -40351,1101 +4506,20 @@ ], "slots": ["default"], "events": [], - "source": "components/ShareButton.wrn" - }, - { - "name": "SidebarLayout", - "mount": "SidebarLayout", - "category": "layout", - "purpose": "Reusable sidebar layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SidebarLayout.wrn" - }, - { - "name": "SidePanel", - "mount": "SidePanel", - "category": "layout", - "purpose": "Reusable side panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SidePanel.wrn" - }, - { - "name": "SignInForm", - "mount": "SignInForm", - "category": "content", - "purpose": "Reusable sign in form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SignInForm.wrn" - }, - { - "name": "SignInLink", - "mount": "SignInLink", - "category": "actions", - "purpose": "Reusable sign in link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Sign in with password\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Use your username or email and password\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"secondary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--lock-keyhole]\"" - }, - { - "name": "tone", - "type": "string", - "required": false, - "default": "\"password\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/SignInLink.wrn" - }, - { - "name": "SignUpForm", - "mount": "SignUpForm", - "category": "content", - "purpose": "Reusable sign up form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SignUpForm.wrn" - }, - { - "name": "SiteSearch", - "mount": "SiteSearch", - "category": "content", - "purpose": "Reusable site search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SiteSearch.wrn" + "source": "components/Sidebar.wrn" }, { "name": "Skeleton", "mount": "Skeleton", - "category": "feedback", - "purpose": "Reusable skeleton component.", + "category": "base", + "purpose": "Theme-aware, responsive skeleton component.", "props": [ { - "name": "height", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "rounded", - "type": "string", - "required": false, - "default": "\"lg\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/Skeleton.wrn" - }, - { - "name": "SkipLink", - "mount": "SkipLink", - "category": "actions", - "purpose": "Reusable skip link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SkipLink.wrn" - }, - { - "name": "SlaTable", - "mount": "SlaTable", - "category": "data", - "purpose": "Reusable sla table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SlaTable.wrn" - }, - { - "name": "Slider", - "mount": "Slider", - "category": "content", - "purpose": "Reusable slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Slider.wrn" - }, - { - "name": "SlugInput", - "mount": "SlugInput", - "category": "forms", - "purpose": "Reusable slug input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Slug\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SlugInput.wrn" - }, - { - "name": "SmallText", - "mount": "SmallText", - "category": "content", - "purpose": "Reusable small text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmallText.wrn" - }, - { - "name": "SmartRouteDiagram", - "mount": "SmartRouteDiagram", - "category": "visualization", - "purpose": "Reusable smart route diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmartRouteDiagram.wrn" - }, - { - "name": "SmsComposer", - "mount": "SmsComposer", - "category": "content", - "purpose": "Reusable sms composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmsComposer.wrn" - }, - { - "name": "SmsMessageEditor", - "mount": "SmsMessageEditor", - "category": "forms", - "purpose": "Reusable sms message editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SmsMessage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmsMessageEditor.wrn" - }, - { - "name": "SmsSegmentCounter", - "mount": "SmsSegmentCounter", - "category": "feedback", - "purpose": "Reusable sms segment counter component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SmsSegment\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmsSegmentCounter.wrn" - }, - { - "name": "SocialShare", - "mount": "SocialShare", - "category": "core", - "purpose": "Reusable social share component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Share this page\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "url", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "shareText", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showTitle", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showCopy", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "networks", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": ["click"], - "source": "components/SocialShare.wrn" - }, - { - "name": "SolutionHero", - "mount": "SolutionHero", - "category": "layout", - "purpose": "Reusable solution hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SolutionHero.wrn" - }, - { - "name": "SolutionPageShell", - "mount": "SolutionPageShell", - "category": "layout", - "purpose": "Reusable solution page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SolutionPageShell.wrn" - }, - { - "name": "SolutionSection", - "mount": "SolutionSection", - "category": "layout", - "purpose": "Reusable solution section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SolutionSection.wrn" - }, - { - "name": "SolutionsMegaMenu", - "mount": "SolutionsMegaMenu", - "category": "overlays", - "purpose": "Reusable solutions mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/SolutionsMegaMenu.wrn" - }, - { - "name": "SortableTable", - "mount": "SortableTable", - "category": "data", - "purpose": "Reusable sortable table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SortableTable.wrn" - }, - { - "name": "spacer", - "mount": "spacer", - "category": "core", - "purpose": "Reusable spacer component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/spacer.wrn" - }, - { - "name": "Spinner", - "mount": "Spinner", - "category": "core", - "purpose": "Reusable spinner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "label", "type": "string", @@ -41457,6 +4531,59 @@ "type": "string", "required": false, "default": "\"md\"" + }, + { + "name": "lines", + "type": "number", + "required": false, + "default": "3" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/Skeleton.wrn" + }, + { + "name": "Spinner", + "mount": "Spinner", + "category": "base", + "purpose": "Theme-aware, responsive spinner component.", + "props": [ + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Loading\"" + }, + { + "name": "size", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "lines", + "type": "number", + "required": false, + "default": "3" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], @@ -41464,780 +4591,46 @@ "source": "components/Spinner.wrn" }, { - "name": "SplitButton", - "mount": "SplitButton", - "category": "actions", - "purpose": "Reusable split button component.", + "name": "Stepper", + "mount": "Stepper", + "category": "navigation", + "purpose": "Theme-aware, responsive stepper component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"default\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitButton.wrn" - }, - { - "name": "SplitCTA", - "mount": "SplitCTA", - "category": "actions", - "purpose": "Reusable split c t a component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"Stepper\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitCTA.wrn" - }, - { - "name": "SplitHero", - "mount": "SplitHero", - "category": "layout", - "purpose": "Reusable split hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitHero.wrn" - }, - { - "name": "SplitLayout", - "mount": "SplitLayout", - "category": "layout", - "purpose": "Reusable split layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitLayout.wrn" - }, - { - "name": "SplitSectionHeader", - "mount": "SplitSectionHeader", - "category": "layout", - "purpose": "Reusable split section header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitSectionHeader.wrn" - }, - { - "name": "Stack", - "mount": "Stack", - "category": "core", - "purpose": "Reusable stack component.", - "props": [ - { - "name": "gap", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Stack.wrn" - }, - { - "name": "StartFreeButton", - "mount": "StartFreeButton", - "category": "actions", - "purpose": "Reusable start free button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StartFreeButton.wrn" - }, - { - "name": "StatCard", - "mount": "StatCard", - "category": "content", - "purpose": "Reusable stat card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Metric\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"0\"" - }, - { - "name": "change", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "trend", - "type": "string", - "required": false, - "default": "\"neutral\"" - } - ], - "slots": [], - "events": [], - "source": "components/StatCard.wrn" - }, - { - "name": "StateSelector", - "mount": "StateSelector", - "category": "forms", - "purpose": "Reusable state selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"State\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StateSelector.wrn" - }, - { - "name": "StatusBadge", - "mount": "StatusBadge", - "category": "feedback", - "purpose": "Reusable status badge component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "status", - "type": "string", - "required": false, - "default": "\"operational\"" - } - ], - "slots": [], - "events": [], - "source": "components/StatusBadge.wrn" - }, - { - "name": "StatusBanner", - "mount": "StatusBanner", - "category": "core", - "purpose": "Reusable status banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"info\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "dismissible", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "details", + "name": "items", "type": "string", "required": false, "default": "[]" - } - ], - "slots": [], - "events": ["click"], - "source": "components/StatusBanner.wrn" - }, - { - "name": "StatusPageShell", - "mount": "StatusPageShell", - "category": "layout", - "purpose": "Reusable status page shell component.", - "props": [ + }, { - "name": "eyebrow", + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "title", + "name": "orientation", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusPageShell.wrn" - }, - { - "name": "StatusSelector", - "mount": "StatusSelector", - "category": "forms", - "purpose": "Reusable status selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Status\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusSelector.wrn" - }, - { - "name": "StatusSubscribeForm", - "mount": "StatusSubscribeForm", - "category": "content", - "purpose": "Reusable status subscribe form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusSubscribeForm.wrn" - }, - { - "name": "StatusTable", - "mount": "StatusTable", - "category": "data", - "purpose": "Reusable status table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusTable.wrn" - }, - { - "name": "StepNavigation", - "mount": "StepNavigation", - "category": "layout", - "purpose": "Reusable step navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StepNavigation.wrn" - }, - { - "name": "Stepper", - "mount": "Stepper", - "category": "content", - "purpose": "Reusable stepper component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"horizontal\"" }, { "name": "class", @@ -42251,22 +4644,34 @@ "source": "components/Stepper.wrn" }, { - "name": "StepperInput", - "mount": "StepperInput", - "category": "forms", - "purpose": "Reusable stepper input component.", + "name": "StrongPassword", + "mount": "StrongPassword", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive strong password component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Stepper\"" + "default": "\"Password\"" }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"password\"" }, { "name": "value", @@ -42278,19 +4683,97 @@ "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Create a strong password\"" }, { - "name": "type", + "name": "autocomplete", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"new-password\"" }, { - "name": "required", + "name": "minLength", + "type": "number", + "required": false, + "default": "8" + }, + { + "name": "specialCharactersSet", + "type": "string", + "required": false, + "default": "\"!@#$%^&*()_+-=[]{}|;:,.<>?\"" + }, + { + "name": "requireLowercase", "type": "boolean", "required": false, - "default": "false" + "default": "true" + }, + { + "name": "requireUppercase", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "requireNumber", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "requireSpecialCharacter", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showRequirements", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "presentation", + "type": "string", + "required": false, + "default": "\"inline\"" + }, + { + "name": "hintText", + "type": "string", + "required": false, + "default": "\"Use a unique password you do not use elsewhere.\"" + }, + { + "name": "emptyLabel", + "type": "string", + "required": false, + "default": "\"Enter a password\"" + }, + { + "name": "weakLabel", + "type": "string", + "required": false, + "default": "\"Weak\"" + }, + { + "name": "fairLabel", + "type": "string", + "required": false, + "default": "\"Fair\"" + }, + { + "name": "goodLabel", + "type": "string", + "required": false, + "default": "\"Good\"" + }, + { + "name": "strongLabel", + "type": "string", + "required": false, + "default": "\"Strong\"" }, { "name": "disabled", @@ -42305,13 +4788,19 @@ "default": "false" }, { - "name": "help", - "type": "string", + "name": "required", + "type": "boolean", "required": false, - "default": "\"\"" + "default": "false" }, { - "name": "error", + "name": "invalid", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "validationMessage", "type": "string", "required": false, "default": "\"\"" @@ -42323,21 +4812,33 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/StepperInput.wrn" + "slots": [], + "events": ["input", "change", "strength"], + "source": "components/StrongPassword.wrn" }, { - "name": "StepUpAuthenticationDialog", - "mount": "StepUpAuthenticationDialog", - "category": "overlays", - "purpose": "Reusable step up authentication dialog component.", + "name": "StyledIcon", + "mount": "StyledIcon", + "category": "base", + "purpose": "Theme-aware, responsive styled icon component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Styled Icon\"" }, { "name": "description", @@ -42346,504 +4847,10 @@ "default": "\"\"" }, { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", + "name": "items", "type": "string", "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StepUpAuthenticationDialog.wrn" - }, - { - "name": "StickerPicker", - "mount": "StickerPicker", - "category": "forms", - "purpose": "Reusable sticker picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Sticker\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StickerPicker.wrn" - }, - { - "name": "Sticky", - "mount": "Sticky", - "category": "core", - "purpose": "Reusable sticky component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Sticky.wrn" - }, - { - "name": "StickyLayout", - "mount": "StickyLayout", - "category": "layout", - "purpose": "Reusable sticky layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StickyLayout.wrn" - }, - { - "name": "StreetAddressInput", - "mount": "StreetAddressInput", - "category": "forms", - "purpose": "Reusable street address input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"StreetAddress\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StreetAddressInput.wrn" - }, - { - "name": "SubdomainInput", - "mount": "SubdomainInput", - "category": "forms", - "purpose": "Reusable subdomain input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Subdomain\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubdomainInput.wrn" - }, - { - "name": "SubjectInput", - "mount": "SubjectInput", - "category": "forms", - "purpose": "Reusable subject input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Subject\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubjectInput.wrn" - }, - { - "name": "SubprocessorTable", - "mount": "SubprocessorTable", - "category": "data", - "purpose": "Reusable subprocessor table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubprocessorTable.wrn" - }, - { - "name": "SubsectionHeading", - "mount": "SubsectionHeading", - "category": "core", - "purpose": "Reusable subsection heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubsectionHeading.wrn" - }, - { - "name": "SuccessCard", - "mount": "SuccessCard", - "category": "content", - "purpose": "Reusable success card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SuccessCard.wrn" - }, - { - "name": "SuccessState", - "mount": "SuccessState", - "category": "feedback", - "purpose": "Reusable success state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Success\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -42860,107 +4867,25 @@ ], "slots": ["default"], "events": [], - "source": "components/SuccessState.wrn" - }, - { - "name": "SupportRequestForm", - "mount": "SupportRequestForm", - "category": "content", - "purpose": "Reusable support request form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SupportRequestForm.wrn" - }, - { - "name": "Surface", - "mount": "Surface", - "category": "core", - "purpose": "Reusable surface component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Surface.wrn" + "source": "components/StyledIcon.wrn" }, { "name": "Switch", "mount": "Switch", - "category": "core", - "purpose": "Reusable switch component.", + "category": "forms", + "purpose": "Theme-aware, responsive switch component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "label", @@ -42969,11 +4894,17 @@ "default": "\"Switch\"" }, { - "name": "description", + "name": "name", "type": "string", "required": false, "default": "\"\"" }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"on\"" + }, { "name": "checked", "type": "boolean", @@ -42985,53 +4916,65 @@ "type": "boolean", "required": false, "default": "false" - } - ], - "slots": [], - "events": ["click"], - "source": "components/Switch.wrn" - }, - { - "name": "Table", - "mount": "Table", - "category": "data", - "purpose": "Reusable table component.", - "props": [ + }, { "name": "class", "type": "string", "required": false, "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/Switch.wrn" + }, + { + "name": "Table", + "mount": "Table", + "category": "tables", + "purpose": "Theme-aware, responsive table component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "caption", "type": "string", "required": false, - "default": "\"Data table\"" + "default": "\"Table\"" }, { - "name": "responsive", - "type": "boolean", + "name": "columns", + "type": "string", "required": false, - "default": "true" + "default": "[]" + }, + { + "name": "rows", + "type": "string", + "required": false, + "default": "[]" }, { "name": "striped", "type": "boolean", "required": false, - "default": "false" - }, - { - "name": "hoverable", - "type": "boolean", - "required": false, "default": "true" }, { - "name": "compact", - "type": "boolean", + "name": "class", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" } ], "slots": ["default"], @@ -43039,1017 +4982,81 @@ "source": "components/Table.wrn" }, { - "name": "TableHeader", - "mount": "TableHeader", - "category": "layout", - "purpose": "Reusable table header component.", + "name": "Tabs", + "mount": "Tabs", + "category": "navigation", + "purpose": "Theme-aware, responsive tabs component.", "props": [ { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TableHeader.wrn" - }, - { - "name": "TableRow", - "mount": "TableRow", - "category": "data", - "purpose": "Reusable table row component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TableRow.wrn" - }, - { - "name": "TableSkeleton", - "mount": "TableSkeleton", - "category": "feedback", - "purpose": "Reusable table skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Table\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TableSkeleton.wrn" - }, - { - "name": "Tabs", - "mount": "Tabs", - "category": "content", - "purpose": "Reusable tabs component.", - "props": [ + "default": "\"primary\"" + }, { - "name": "class", + "name": "label", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Tabs\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" }, { "name": "active", "type": "string", "required": false, - "default": "\"first\"" + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], - "slots": ["first", "second"], - "events": ["click"], + "slots": ["default"], + "events": [], "source": "components/Tabs.wrn" }, - { - "name": "tag", - "mount": "tag", - "category": "core", - "purpose": "Reusable tag component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/tag.wrn" - }, - { - "name": "TagInput", - "mount": "TagInput", - "category": "forms", - "purpose": "Reusable tag input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Tag\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TagInput.wrn" - }, - { - "name": "TaxNotice", - "mount": "TaxNotice", - "category": "feedback", - "purpose": "Reusable tax notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Tax\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TaxNotice.wrn" - }, - { - "name": "TaxRateInput", - "mount": "TaxRateInput", - "category": "forms", - "purpose": "Reusable tax rate input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TaxRate\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TaxRateInput.wrn" - }, - { - "name": "TeamMemberCard", - "mount": "TeamMemberCard", - "category": "content", - "purpose": "Reusable team member card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TeamMemberCard.wrn" - }, - { - "name": "TeamSizeSelector", - "mount": "TeamSizeSelector", - "category": "forms", - "purpose": "Reusable team size selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TeamSize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TeamSizeSelector.wrn" - }, - { - "name": "TemplateCard", - "mount": "TemplateCard", - "category": "content", - "purpose": "Reusable template card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TemplateCard.wrn" - }, - { - "name": "TemplateSelector", - "mount": "TemplateSelector", - "category": "forms", - "purpose": "Reusable template selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Template\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TemplateSelector.wrn" - }, - { - "name": "TemplateVariableInput", - "mount": "TemplateVariableInput", - "category": "forms", - "purpose": "Reusable template variable input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TemplateVariable\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TemplateVariableInput.wrn" - }, - { - "name": "TenantIsolationDiagram", - "mount": "TenantIsolationDiagram", - "category": "visualization", - "purpose": "Reusable tenant isolation diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TenantIsolationDiagram.wrn" - }, - { - "name": "TerminalBlock", - "mount": "TerminalBlock", - "category": "content", - "purpose": "Reusable terminal block component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TerminalBlock.wrn" - }, - { - "name": "TertiaryButton", - "mount": "TertiaryButton", - "category": "actions", - "purpose": "Reusable tertiary button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TertiaryButton.wrn" - }, - { - "name": "TestimonialCard", - "mount": "TestimonialCard", - "category": "content", - "purpose": "Reusable testimonial card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "quote", - "type": "string", - "required": false, - "default": "\"Great product.\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"Customer\"" - }, - { - "name": "role", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "company", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "avatar", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/TestimonialCard.wrn" - }, - { - "name": "TestimonialCarousel", - "mount": "TestimonialCarousel", - "category": "content", - "purpose": "Reusable testimonial carousel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TestimonialCarousel.wrn" - }, - { - "name": "TestMessageDialog", - "mount": "TestMessageDialog", - "category": "overlays", - "purpose": "Reusable test message dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TestMessageDialog.wrn" - }, { "name": "Textarea", "mount": "Textarea", - "category": "core", - "purpose": "Reusable textarea component.", + "category": "forms", + "purpose": "Theme-aware, responsive textarea component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Textarea\"" }, { "name": "name", @@ -44057,12 +5064,6 @@ "required": false, "default": "\"\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Message\"" - }, { "name": "value", "type": "string", @@ -44082,16 +5083,10 @@ "default": "5" }, { - "name": "help", - "type": "string", + "name": "disabled", + "type": "boolean", "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "false" }, { "name": "required", @@ -44100,10 +5095,10 @@ "default": "false" }, { - "name": "disabled", - "type": "boolean", + "name": "class", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" } ], "slots": [], @@ -44111,152 +5106,28 @@ "source": "components/Textarea.wrn" }, { - "name": "TextInput", - "mount": "TextInput", - "category": "forms", - "purpose": "Reusable text input component.", + "name": "Timeline", + "mount": "Timeline", + "category": "base", + "purpose": "Theme-aware, responsive timeline component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Text\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/TextInput.wrn" - }, - { - "name": "TextLink", - "mount": "TextLink", - "category": "actions", - "purpose": "Reusable text link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TextLink.wrn" - }, - { - "name": "TextSkeleton", - "mount": "TextSkeleton", - "category": "feedback", - "purpose": "Reusable text skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Text\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Timeline\"" }, { "name": "description", @@ -44265,10 +5136,10 @@ "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -44285,372 +5156,31 @@ ], "slots": ["default"], "events": [], - "source": "components/TextSkeleton.wrn" - }, - { - "name": "theme-toggle", - "mount": "theme-toggle", - "category": "core", - "purpose": "Reusable theme-toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Toggle theme\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/theme-toggle.wrn" - }, - { - "name": "ThemeColorPicker", - "mount": "ThemeColorPicker", - "category": "forms", - "purpose": "Reusable theme color picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ThemeColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ThemeColorPicker.wrn" - }, - { - "name": "ThemeSwitcher", - "mount": "ThemeSwitcher", - "category": "content", - "purpose": "Reusable theme switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ThemeSwitcher.wrn" - }, - { - "name": "TimeInput", - "mount": "TimeInput", - "category": "forms", - "purpose": "Reusable time input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Time\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/TimeInput.wrn" - }, - { - "name": "Timeline", - "mount": "Timeline", - "category": "visualization", - "purpose": "Reusable timeline component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Timeline\"" - } - ], - "slots": ["default"], - "events": [], "source": "components/Timeline.wrn" }, { - "name": "TimelineChart", - "mount": "TimelineChart", - "category": "visualization", - "purpose": "Reusable timeline chart component.", + "name": "TimePicker", + "mount": "TimePicker", + "category": "forms", + "purpose": "Theme-aware, responsive time picker component.", "props": [ { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimelineChart.wrn" - }, - { - "name": "TimelineItem", - "mount": "TimelineItem", - "category": "content", - "purpose": "Reusable timeline item component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Event\"" - }, - { - "name": "date", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "status", + "name": "size", "type": "string", "required": false, "default": "\"default\"" - } - ], - "slots": [], - "events": [], - "source": "components/TimelineItem.wrn" - }, - { - "name": "TimeoutInput", - "mount": "TimeoutInput", - "category": "forms", - "purpose": "Reusable timeout input component.", - "props": [ + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Timeout\"" + "default": "\"Time Picker\"" }, { "name": "name", @@ -44674,79 +5204,8 @@ "name": "type", "type": "string", "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimeoutInput.wrn" - }, - { - "name": "TimePicker", - "mount": "TimePicker", - "category": "forms", - "purpose": "Reusable time picker component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"time-picker\"" - }, - { - "name": "name", - "type": "string", - "required": false, "default": "\"time\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Time\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "min", "type": "string", @@ -44761,18 +5220,18 @@ }, { "name": "step", - "type": "number", + "type": "string", "required": false, - "default": "60" + "default": "\"\"" }, { - "name": "required", + "name": "disabled", "type": "boolean", "required": false, "default": "false" }, { - "name": "disabled", + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -44788,317 +5247,29 @@ "events": [], "source": "components/TimePicker.wrn" }, - { - "name": "TimeRangePicker", - "mount": "TimeRangePicker", - "category": "forms", - "purpose": "Reusable time range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TimeRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimeRangePicker.wrn" - }, - { - "name": "TimezoneAwareTimePicker", - "mount": "TimezoneAwareTimePicker", - "category": "forms", - "purpose": "Reusable timezone aware time picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TimezoneAwareTime\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimezoneAwareTimePicker.wrn" - }, - { - "name": "TimezoneSelector", - "mount": "TimezoneSelector", - "category": "forms", - "purpose": "Reusable timezone selector component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"timezone\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"timezone\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Timezone\"" - } - ], - "slots": [], - "events": [], - "source": "components/TimezoneSelector.wrn" - }, { "name": "Toast", "mount": "Toast", - "category": "core", - "purpose": "Reusable toast component.", + "category": "base", + "purpose": "Theme-aware, responsive toast component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"Saved\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"success\"" - }, - { - "name": "duration", - "type": "number", - "required": false, - "default": "5000" - } - ], - "slots": [], - "events": ["click"], - "source": "components/Toast.wrn" - }, - { - "name": "ToastAction", - "mount": "ToastAction", - "category": "actions", - "purpose": "Reusable toast action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToastAction.wrn" - }, - { - "name": "ToastHost", - "mount": "ToastHost", - "category": "core", - "purpose": "Reusable toast host component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/ToastHost.wrn" - }, - { - "name": "ToastIcon", - "mount": "ToastIcon", - "category": "content", - "purpose": "Reusable toast icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Toast\"" }, { "name": "description", @@ -45107,535 +5278,10 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToastIcon.wrn" - }, - { - "name": "ToastProgress", - "mount": "ToastProgress", - "category": "visualization", - "purpose": "Reusable toast progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToastProgress.wrn" - }, - { - "name": "Toggle", - "mount": "Toggle", - "category": "forms", - "purpose": "Reusable toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Toggle.wrn" - }, - { - "name": "ToggleGroup", - "mount": "ToggleGroup", - "category": "forms", - "purpose": "Reusable toggle group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Toggle\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToggleGroup.wrn" - }, - { - "name": "TokenInput", - "mount": "TokenInput", - "category": "forms", - "purpose": "Reusable token input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Token\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TokenInput.wrn" - }, - { - "name": "Tooltip", - "mount": "Tooltip", - "category": "content", - "purpose": "Reusable tooltip component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "text", - "type": "string", - "required": false, - "default": "\"Helpful information\"" - }, - { - "name": "position", - "type": "string", - "required": false, - "default": "\"top\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Tooltip.wrn" - }, - { - "name": "TotpVerificationForm", - "mount": "TotpVerificationForm", - "category": "content", - "purpose": "Reusable totp verification form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TotpVerificationForm.wrn" - }, - { - "name": "TranslatedText", - "mount": "TranslatedText", - "category": "content", - "purpose": "Reusable translated text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TranslatedText.wrn" - }, - { - "name": "TreeTable", - "mount": "TreeTable", - "category": "data", - "purpose": "Reusable tree table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TreeTable.wrn" - }, - { - "name": "TrendIndicator", - "mount": "TrendIndicator", - "category": "feedback", - "purpose": "Reusable trend indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Trend\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -45652,25 +5298,31 @@ ], "slots": ["default"], "events": [], - "source": "components/TrendIndicator.wrn" + "source": "components/Toast.wrn" }, { - "name": "TruncatedText", - "mount": "TruncatedText", - "category": "content", - "purpose": "Reusable truncated text component.", + "name": "ToastNotifications", + "mount": "ToastNotifications", + "category": "integrations", + "purpose": "Theme-aware, responsive toast notifications component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Toast Notifications\"" }, { "name": "description", @@ -45679,104 +5331,419 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TruncatedText.wrn" - }, - { - "name": "TrustBadgeList", - "mount": "TrustBadgeList", - "category": "data", - "purpose": "Reusable trust badge list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TrustBadgeList.wrn" - }, - { - "name": "Typography", - "mount": "Typography", - "category": "core", - "purpose": "Reusable typography component.", - "props": [ - { - "name": "as", - "type": "string", - "required": false, - "default": "\"p\"" + "default": "[]" }, { "name": "variant", "type": "string", "required": false, - "default": "\"body\"" + "default": "\"default\"" }, { - "name": "align", + "name": "class", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/ToastNotifications.wrn" + }, + { + "name": "ToggleCount", + "mount": "ToggleCount", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive toggle count component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Toggle Count\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"text\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/ToggleCount.wrn" + }, + { + "name": "TogglePassword", + "mount": "TogglePassword", + "category": "advanced-forms", + "purpose": "Accessible password field with optional show and hide controls.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Password\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"password\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Enter your password\"" + }, + { + "name": "autocomplete", + "type": "string", + "required": false, + "default": "\"current-password\"" + }, + { + "name": "minlength", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "maxlength", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "pattern", + "type": "string", + "required": false, + "default": "\"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}\"" + }, + { + "name": "fields", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "visible", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "toggleable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "toggleMode", + "type": "string", + "required": false, + "default": "\"button\"" + }, + { + "name": "checkboxLabel", + "type": "string", + "required": false, + "default": "\"Show password\"" + }, + { + "name": "showLabel", + "type": "string", + "required": false, + "default": "\"Show password\"" + }, + { + "name": "hideLabel", + "type": "string", + "required": false, + "default": "\"Hide password\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "readonly", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "invalid", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "helpText", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "validationMessage", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["input", "change", "toggle"], + "source": "components/TogglePassword.wrn" + }, + { + "name": "Tooltip", + "mount": "Tooltip", + "category": "overlays", + "purpose": "Theme-aware, responsive tooltip component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Tooltip\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "open", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "closeLabel", + "type": "string", + "required": false, + "default": "\"Close\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Tooltip.wrn" + }, + { + "name": "TreeView", + "mount": "TreeView", + "category": "base", + "purpose": "Theme-aware, responsive tree view component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Tree View\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/TreeView.wrn" + }, + { + "name": "Typography", + "mount": "Typography", + "category": "layout", + "purpose": "Theme-aware, responsive typography component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, + { + "name": "gap", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" }, { "name": "class", @@ -45790,22 +5757,28 @@ "source": "components/Typography.wrn" }, { - "name": "UnavailableRegionState", - "mount": "UnavailableRegionState", - "category": "feedback", - "purpose": "Reusable unavailable region state component.", + "name": "WysiwygEditor", + "mount": "WysiwygEditor", + "category": "integrations", + "purpose": "Theme-aware, responsive wysiwyg editor component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"UnavailableRegion\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Wysiwyg Editor\"" }, { "name": "description", @@ -45814,10 +5787,10 @@ "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -45834,2747 +5807,7 @@ ], "slots": ["default"], "events": [], - "source": "components/UnavailableRegionState.wrn" - }, - { - "name": "UnifiedTimelinePreview", - "mount": "UnifiedTimelinePreview", - "category": "content", - "purpose": "Reusable unified timeline preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UnifiedTimelinePreview.wrn" - }, - { - "name": "UnsavedChangesDialog", - "mount": "UnsavedChangesDialog", - "category": "overlays", - "purpose": "Reusable unsaved changes dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UnsavedChangesDialog.wrn" - }, - { - "name": "UploadItem", - "mount": "UploadItem", - "category": "content", - "purpose": "Reusable upload item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UploadItem.wrn" - }, - { - "name": "UploadPreview", - "mount": "UploadPreview", - "category": "content", - "purpose": "Reusable upload preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UploadPreview.wrn" - }, - { - "name": "UploadProgress", - "mount": "UploadProgress", - "category": "visualization", - "purpose": "Reusable upload progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UploadProgress.wrn" - }, - { - "name": "UptimeChart", - "mount": "UptimeChart", - "category": "visualization", - "purpose": "Reusable uptime chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UptimeChart.wrn" - }, - { - "name": "UptimeMetric", - "mount": "UptimeMetric", - "category": "visualization", - "purpose": "Reusable uptime metric component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UptimeMetric.wrn" - }, - { - "name": "UrlInput", - "mount": "UrlInput", - "category": "forms", - "purpose": "Reusable url input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Url\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/UrlInput.wrn" - }, - { - "name": "UsagePricingTable", - "mount": "UsagePricingTable", - "category": "data", - "purpose": "Reusable usage pricing table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UsagePricingTable.wrn" - }, - { - "name": "UseCaseSelector", - "mount": "UseCaseSelector", - "category": "forms", - "purpose": "Reusable use case selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"UseCase\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UseCaseSelector.wrn" - }, - { - "name": "UserCard", - "mount": "UserCard", - "category": "content", - "purpose": "Reusable user card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UserCard.wrn" - }, - { - "name": "UsernameInput", - "mount": "UsernameInput", - "category": "forms", - "purpose": "Reusable username input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Username\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UsernameInput.wrn" - }, - { - "name": "ValueCard", - "mount": "ValueCard", - "category": "content", - "purpose": "Reusable value card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ValueCard.wrn" - }, - { - "name": "ValuesGrid", - "mount": "ValuesGrid", - "category": "data", - "purpose": "Reusable values grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ValuesGrid.wrn" - }, - { - "name": "VerificationCodeInput", - "mount": "VerificationCodeInput", - "category": "forms", - "purpose": "Reusable verification code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"VerificationCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VerificationCodeInput.wrn" - }, - { - "name": "VerifiedBadge", - "mount": "VerifiedBadge", - "category": "feedback", - "purpose": "Reusable verified badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Verified\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VerifiedBadge.wrn" - }, - { - "name": "VersionSelector", - "mount": "VersionSelector", - "category": "forms", - "purpose": "Reusable version selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Version\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VersionSelector.wrn" - }, - { - "name": "VerticalTabs", - "mount": "VerticalTabs", - "category": "content", - "purpose": "Reusable vertical tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VerticalTabs.wrn" - }, - { - "name": "VideoCard", - "mount": "VideoCard", - "category": "content", - "purpose": "Reusable video card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VideoCard.wrn" - }, - { - "name": "VideoPreviewDialog", - "mount": "VideoPreviewDialog", - "category": "overlays", - "purpose": "Reusable video preview dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VideoPreviewDialog.wrn" - }, - { - "name": "VideoUpload", - "mount": "VideoUpload", - "category": "content", - "purpose": "Reusable video upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VideoUpload.wrn" - }, - { - "name": "VirtualizedTable", - "mount": "VirtualizedTable", - "category": "data", - "purpose": "Reusable virtualized table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VirtualizedTable.wrn" - }, - { - "name": "VisionSection", - "mount": "VisionSection", - "category": "layout", - "purpose": "Reusable vision section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VisionSection.wrn" - }, - { - "name": "VisuallyHidden", - "mount": "VisuallyHidden", - "category": "core", - "purpose": "Reusable visually hidden component.", - "props": [ - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VisuallyHidden.wrn" - }, - { - "name": "VoiceScriptComposer", - "mount": "VoiceScriptComposer", - "category": "content", - "purpose": "Reusable voice script composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VoiceScriptComposer.wrn" - }, - { - "name": "VoiceScriptEditor", - "mount": "VoiceScriptEditor", - "category": "forms", - "purpose": "Reusable voice script editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"VoiceScript\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VoiceScriptEditor.wrn" - }, - { - "name": "VolumeInput", - "mount": "VolumeInput", - "category": "forms", - "purpose": "Reusable volume input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Volume\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VolumeInput.wrn" - }, - { - "name": "VolumeSlider", - "mount": "VolumeSlider", - "category": "content", - "purpose": "Reusable volume slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VolumeSlider.wrn" - }, - { - "name": "WarningCard", - "mount": "WarningCard", - "category": "content", - "purpose": "Reusable warning card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WarningCard.wrn" - }, - { - "name": "WebhookEventCard", - "mount": "WebhookEventCard", - "category": "content", - "purpose": "Reusable webhook event card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookEventCard.wrn" - }, - { - "name": "WebhookFlowDiagram", - "mount": "WebhookFlowDiagram", - "category": "visualization", - "purpose": "Reusable webhook flow diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookFlowDiagram.wrn" - }, - { - "name": "WebhookPayloadViewer", - "mount": "WebhookPayloadViewer", - "category": "content", - "purpose": "Reusable webhook payload viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookPayloadViewer.wrn" - }, - { - "name": "WebhookUrlInput", - "mount": "WebhookUrlInput", - "category": "forms", - "purpose": "Reusable webhook url input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"WebhookUrl\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookUrlInput.wrn" - }, - { - "name": "WebinarCard", - "mount": "WebinarCard", - "category": "content", - "purpose": "Reusable webinar card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebinarCard.wrn" - }, - { - "name": "WebinarRegistrationForm", - "mount": "WebinarRegistrationForm", - "category": "content", - "purpose": "Reusable webinar registration form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebinarRegistrationForm.wrn" - }, - { - "name": "Well", - "mount": "Well", - "category": "core", - "purpose": "Reusable well component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Well.wrn" - }, - { - "name": "WhatsAppComposer", - "mount": "WhatsAppComposer", - "category": "content", - "purpose": "Reusable whats app composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WhatsAppComposer.wrn" - }, - { - "name": "WhatsAppNumberInput", - "mount": "WhatsAppNumberInput", - "category": "forms", - "purpose": "Reusable whats app number input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"WhatsAppNumber\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WhatsAppNumberInput.wrn" - }, - { - "name": "WhatsAppTemplateEditor", - "mount": "WhatsAppTemplateEditor", - "category": "forms", - "purpose": "Reusable whats app template editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"WhatsAppTemplate\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WhatsAppTemplateEditor.wrn" - }, - { - "name": "WideContainer", - "mount": "WideContainer", - "category": "core", - "purpose": "Reusable wide container component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WideContainer.wrn" - }, - { - "name": "Wizard", - "mount": "Wizard", - "category": "content", - "purpose": "Reusable wizard component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Wizard.wrn" - }, - { - "name": "WizardHeader", - "mount": "WizardHeader", - "category": "layout", - "purpose": "Reusable wizard header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WizardHeader.wrn" - }, - { - "name": "WizardNavigation", - "mount": "WizardNavigation", - "category": "layout", - "purpose": "Reusable wizard navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WizardNavigation.wrn" - }, - { - "name": "WorkflowCanvasPreview", - "mount": "WorkflowCanvasPreview", - "category": "content", - "purpose": "Reusable workflow canvas preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkflowCanvasPreview.wrn" - }, - { - "name": "WorkflowProgress", - "mount": "WorkflowProgress", - "category": "visualization", - "purpose": "Reusable workflow progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkflowProgress.wrn" - }, - { - "name": "WorkspaceCard", - "mount": "WorkspaceCard", - "category": "content", - "purpose": "Reusable workspace card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkspaceCard.wrn" - }, - { - "name": "WorkspaceSelector", - "mount": "WorkspaceSelector", - "category": "forms", - "purpose": "Reusable workspace selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Workspace\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkspaceSelector.wrn" - }, - { - "name": "WorkspaceSwitcher", - "mount": "WorkspaceSwitcher", - "category": "content", - "purpose": "Reusable workspace switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkspaceSwitcher.wrn" - }, - { - "name": "YearPicker", - "mount": "YearPicker", - "category": "forms", - "purpose": "Reusable year picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Year\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/YearPicker.wrn" - }, - { - "name": "ZoomSlider", - "mount": "ZoomSlider", - "category": "content", - "purpose": "Reusable zoom slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ZoomSlider.wrn" + "source": "components/WysiwygEditor.wrn" } ] } diff --git a/.publish/ui/components/AcceptAllCookiesButton.wrn b/.publish/ui/components/AcceptAllCookiesButton.wrn deleted file mode 100644 index 3afd8aad..00000000 --- a/.publish/ui/components/AcceptAllCookiesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component AcceptAllCookiesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/AccessibleAccordion.wrn b/.publish/ui/components/AccessibleAccordion.wrn deleted file mode 100644 index ba182b91..00000000 --- a/.publish/ui/components/AccessibleAccordion.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleAccordion { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AccessibleCarousel.wrn b/.publish/ui/components/AccessibleCarousel.wrn deleted file mode 100644 index 301c01ac..00000000 --- a/.publish/ui/components/AccessibleCarousel.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleCarousel { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AccessibleChartSummary.wrn b/.publish/ui/components/AccessibleChartSummary.wrn deleted file mode 100644 index a69b3495..00000000 --- a/.publish/ui/components/AccessibleChartSummary.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component AccessibleChartSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
Chart summary
Delivered
96.8%
Engaged
42.1%
Converted
8.7%
{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
- } -} diff --git a/.publish/ui/components/AccessibleDialog.wrn b/.publish/ui/components/AccessibleDialog.wrn deleted file mode 100644 index e7b931d6..00000000 --- a/.publish/ui/components/AccessibleDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AccessibleDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/AccessibleErrorSummary.wrn b/.publish/ui/components/AccessibleErrorSummary.wrn deleted file mode 100644 index 931e1e14..00000000 --- a/.publish/ui/components/AccessibleErrorSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleErrorSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AccessibleIcon.wrn b/.publish/ui/components/AccessibleIcon.wrn deleted file mode 100644 index 5dd97370..00000000 --- a/.publish/ui/components/AccessibleIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AccessibleMenu.wrn b/.publish/ui/components/AccessibleMenu.wrn deleted file mode 100644 index 27b75e1f..00000000 --- a/.publish/ui/components/AccessibleMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AccessibleMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/AccessibleTabs.wrn b/.publish/ui/components/AccessibleTabs.wrn deleted file mode 100644 index 6c67b8b2..00000000 --- a/.publish/ui/components/AccessibleTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AccessibleTooltip.wrn b/.publish/ui/components/AccessibleTooltip.wrn deleted file mode 100644 index eca4ad23..00000000 --- a/.publish/ui/components/AccessibleTooltip.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleTooltip { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Accordion.wrn b/.publish/ui/components/Accordion.wrn index 739f130c..689c3bb9 100644 --- a/.publish/ui/components/Accordion.wrn +++ b/.publish/ui/components/Accordion.wrn @@ -1,31 +1,15 @@ component Accordion { - props { - class = "" - title = "Question" - open = false - } - - state expanded = open - - view { -
- -
- -
-
- } + props { + size = "default" + color = "primary" + items = [] + multiple = false + class = "" + } + view { +
+ {#each items as item}
{item.label}
{item.content}
{/each} + +
+ } } diff --git a/.publish/ui/components/AccountMenu.wrn b/.publish/ui/components/AccountMenu.wrn deleted file mode 100644 index 4cfc36af..00000000 --- a/.publish/ui/components/AccountMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AccountMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/AccountStatusBanner.wrn b/.publish/ui/components/AccountStatusBanner.wrn deleted file mode 100644 index f14b03d9..00000000 --- a/.publish/ui/components/AccountStatusBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component AccountStatusBanner { - props { - label = "AccountStatus" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ActionMenu.wrn b/.publish/ui/components/ActionMenu.wrn deleted file mode 100644 index 90e5db6a..00000000 --- a/.publish/ui/components/ActionMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ActionMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/ActiveFilterList.wrn b/.publish/ui/components/ActiveFilterList.wrn deleted file mode 100644 index a8f168c7..00000000 --- a/.publish/ui/components/ActiveFilterList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ActiveFilterList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ActivityList.wrn b/.publish/ui/components/ActivityList.wrn deleted file mode 100644 index 79c28be0..00000000 --- a/.publish/ui/components/ActivityList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ActivityList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/AddOnCard.wrn b/.publish/ui/components/AddOnCard.wrn deleted file mode 100644 index 4472c0b4..00000000 --- a/.publish/ui/components/AddOnCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AddOnCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AddressInput.wrn b/.publish/ui/components/AddressInput.wrn deleted file mode 100644 index 6af0c679..00000000 --- a/.publish/ui/components/AddressInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AddressInput { - props { - label = "Address" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/AddressPreview.wrn b/.publish/ui/components/AddressPreview.wrn deleted file mode 100644 index 3d508f3f..00000000 --- a/.publish/ui/components/AddressPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AddressPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AdvancedDatePicker.wrn b/.publish/ui/components/AdvancedDatePicker.wrn new file mode 100644 index 00000000..48954b2a --- /dev/null +++ b/.publish/ui/components/AdvancedDatePicker.wrn @@ -0,0 +1,19 @@ +component AdvancedDatePicker { + props { + size = "default" + color = "primary" + title = "Advanced Date Picker" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/AdvancedFilterBuilder.wrn b/.publish/ui/components/AdvancedFilterBuilder.wrn deleted file mode 100644 index e66322aa..00000000 --- a/.publish/ui/components/AdvancedFilterBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AdvancedFilterBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AdvancedRangeSlider.wrn b/.publish/ui/components/AdvancedRangeSlider.wrn new file mode 100644 index 00000000..963bed7d --- /dev/null +++ b/.publish/ui/components/AdvancedRangeSlider.wrn @@ -0,0 +1,19 @@ +component AdvancedRangeSlider { + props { + size = "default" + color = "primary" + title = "Advanced Range Slider" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/AdvancedSelect.wrn b/.publish/ui/components/AdvancedSelect.wrn new file mode 100644 index 00000000..6bd6fe16 --- /dev/null +++ b/.publish/ui/components/AdvancedSelect.wrn @@ -0,0 +1,456 @@ +component AdvancedSelect { + props { + size = "default" + color = "primary" + label = "Advanced Select" + name = "" + value = "" + values = [] + options = [] + groups = [] + placeholder = "Select an option" + placeholderIcon = "" + searchPlaceholder = "Search options…" + multiple = false + searchable = true + defaultOpen = false + clearable = true + allowEmpty = true + tags = false + disabled = false + required = false + invalid = false + validationMessage = "" + helpText = "" + loading = false + loadingLabel = "Loading options…" + emptyLabel = "No options found" + selectedOptionsLabel = "Selected options" + clearLabel = "Clear selection" + createLabel = "Create" + loadMoreLabel = "Load more" + searchMode = "contains" + searchFields = "label,description" + minSearchLength = 0 + searchResultLimit = 0 + maxSelections = 0 + showCounter = false + counterTemplate = "{selected} selected" + optionTemplate = "default" + selectedTemplate = "default" + closeOnSelect = true + scrollToSelected = true + fixed = false + placement = "bottom" + remote = false + remoteUrl = "" + remoteQueryParam = "q" + remoteDebounce = 250 + remoteAutoLoad = true + infinite = false + hasMore = false + page = 1 + class = "" + @event search = function + @event select = function + @event change = function + @event clear = function + @event open = function + @event close = function + @event load = function + @event error = function + } + + state open = defaultOpen + state query = "" + state activeIndex = -1 + state selectedValue = value + state selectedValues = values + + functions { + function allOptions() { + return [...groups.flatMap((group) => group.options || []), ...options] + } + + function searchableText(option) { + return ((option.label || "") + " " + (option.description || "")).toLowerCase() + } + + function matches(option) { + if (!query || query.length < Number(minSearchLength || 0)) { + return true + } + if (searchMode === "startsWith") { + return searchableText(option).startsWith(query.toLowerCase()) + } + if (searchMode === "exact") { + return searchableText(option) === query.toLowerCase() + } + return searchableText(option).includes(query.toLowerCase()) + } + + function matchingOptions(list) { + return list.filter((option) => matches(option)) + } + + function visibleOptions(list) { + if (searchResultLimit > 0) { + return matchingOptions(list).slice(0, Number(searchResultLimit)) + } + return matchingOptions(list) + } + + function flatVisibleOptions() { + return visibleOptions(allOptions()) + } + + function isSelected(option) { + return ( + multiple + ? selectedValues.includes(option.value) + : selectedValue === option.value + ) + } + + function selectedOptions() { + return allOptions().filter((option) => isSelected(option)) + } + + function selectedCount() { + return multiple ? selectedValues.length : selectedValue ? 1 : 0 + } + + function counterText() { + return ( + maxSelections + ? selectedCount() + " / " + maxSelections + " selected" + : selectedCount() + " selected" + ) + } + + function selectedText() { + return ( + multiple + ? selectedValues.join(", ") + : selectedOptions().length + ? selectedOptions()[0].label + : "" + ) + } + + function triggerText() { + return selectedCount() ? selectedText() : placeholder + } + + function canSelect(option) { + if (option.disabled) { + return false + } + if (!multiple || isSelected(option)) { + return true + } + if (maxSelections <= 0) { + return true + } + return selectedCount() < maxSelections + } + + function chooseSingle(option) { + if (!canSelect(option)) { + return + } + selectedValue = option.value + query = "" + if (closeOnSelect) { + open = false + } + } + + function chooseMultiple(option) { + if (!canSelect(option)) { + return + } + if (isSelected(option)) { + selectedValues = selectedValues.filter((item) => item !== option.value) + } else { + selectedValues = selectedValues.concat([option.value]) + } + query = "" + } + + function chooseOption(option) { + if (multiple) { + chooseMultiple(option) + return + } + chooseSingle(option) + } + + function clearSelection(event) { + event.stopPropagation() + selectedValue = "" + selectedValues = [] + query = "" + open = false + } + + function toggle() { + if (disabled) { + return; + }; + open = !open; + activeIndex = open && flatVisibleOptions().length ? 0 : -1; + } + + function moveActive(direction) { + if (!flatVisibleOptions().length) { + return + } + activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length + } + + function handleKeydown(event) { + if (disabled) { + return + } + if (event.key === "ArrowDown") { + event.preventDefault() + if (!open) { + open = true + } + moveActive(1) + } else if (event.key === "ArrowUp") { + event.preventDefault() + if (!open) { + open = true + } + moveActive(-1) + } else if (event.key === "Enter" || event.key === " ") { + event.preventDefault() + if (!open) { + open = true + } else if (activeIndex >= 0) { + chooseOption(flatVisibleOptions()[activeIndex]) + } + } else if (event.key === "Escape") { + open = false + } else if (event.key === "Home" && open) { + event.preventDefault() + activeIndex = 0 + } else if (event.key === "End" && open) { + event.preventDefault() + activeIndex = flatVisibleOptions().length - 1 + } + } + + function optionIndex(option) { + return flatVisibleOptions().findIndex((item) => item.value === option.value) + } + } + + view { +
+
+ + {counterText()} +
+ +
+ + + +
+ +
+ {#if searchable} + + {/if} + +
Enter at least {minSearchLength} characters.
+
+ + {loadingLabel} +
+
+ {#each groups as group} + {#if visibleOptions(group.options || []).length} +
+
{group.label}
+ {#each group.options || [] as option} + + {/each} +
+ {/if} + {/each} + + {#each options as option} + + {/each} + + {#if !loading && !flatVisibleOptions().length} +
{emptyLabel}
+ {/if} +
+ + {#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())} + + {/if} + +
+ + + + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
+ } +} diff --git a/.publish/ui/components/AlertDialog.wrn b/.publish/ui/components/AlertDialog.wrn deleted file mode 100644 index 83140e77..00000000 --- a/.publish/ui/components/AlertDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AlertDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/AmountInput.wrn b/.publish/ui/components/AmountInput.wrn deleted file mode 100644 index 374d1754..00000000 --- a/.publish/ui/components/AmountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AmountInput { - props { - label = "Amount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/AnalyticsDashboardPreview.wrn b/.publish/ui/components/AnalyticsDashboardPreview.wrn deleted file mode 100644 index a647c5d8..00000000 --- a/.publish/ui/components/AnalyticsDashboardPreview.wrn +++ /dev/null @@ -1,83 +0,0 @@ -component AnalyticsDashboardPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - - view { -
-
-
- {#if image} - {alt} - {:else} - - {/if} -
- -
- {#if eyebrow} -

{eyebrow}

- {/if} - - {#if title} -

{title}

- {/if} - - {#if description} -

{description}

- {/if} - -
- - {#if href} - - {actionLabel} - - {/if} -
-
-
- } -} diff --git a/.publish/ui/components/AnchorNavigation.wrn b/.publish/ui/components/AnchorNavigation.wrn deleted file mode 100644 index 4fb237c4..00000000 --- a/.publish/ui/components/AnchorNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AnchorNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/AnnouncementBar.wrn b/.publish/ui/components/AnnouncementBar.wrn deleted file mode 100644 index e9783d63..00000000 --- a/.publish/ui/components/AnnouncementBar.wrn +++ /dev/null @@ -1,96 +0,0 @@ -component AnnouncementBar { - props { - class: string = "" - badge: string = "New" - message: string = "WrNexus Organizations is now available." - description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO." - href: string = "/organizations" - actionLabel: string = "Explore organizations" - ariaLabel: string = "Announcement" - badgeIcon: string = "icon-[lucide--sparkles]" - actionIcon: string = "icon-[lucide--arrow-right]" - dismissLabel: string = "Dismiss announcement" - showBadge: boolean = true - showDescription: boolean = true - showAction: boolean = true - dismissible: boolean = true - } - - state visible = true - - view { - - } -} diff --git a/.publish/ui/components/ApartmentInput.wrn b/.publish/ui/components/ApartmentInput.wrn deleted file mode 100644 index 86a05abd..00000000 --- a/.publish/ui/components/ApartmentInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ApartmentInput { - props { - label = "Apartment" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ApiAuthenticationNotice.wrn b/.publish/ui/components/ApiAuthenticationNotice.wrn deleted file mode 100644 index 5e1b73a7..00000000 --- a/.publish/ui/components/ApiAuthenticationNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiAuthenticationNotice { - props { - label = "ApiAuthentication" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ApiEndpointCard.wrn b/.publish/ui/components/ApiEndpointCard.wrn deleted file mode 100644 index 922fc352..00000000 --- a/.publish/ui/components/ApiEndpointCard.wrn +++ /dev/null @@ -1,39 +0,0 @@ -component ApiEndpointCard { - props { - class = "" - method = "GET" - path = "/api/example" - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "View endpoint" - } - - view { -
-
- - {method} - - - {title || path} - -
-

- {description} -

-
- -
- {#if href}{actionLabel}{/if} -
- } -} diff --git a/.publish/ui/components/ApiErrorExample.wrn b/.publish/ui/components/ApiErrorExample.wrn deleted file mode 100644 index 1e857232..00000000 --- a/.publish/ui/components/ApiErrorExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiErrorExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ApiHeaderTable.wrn b/.publish/ui/components/ApiHeaderTable.wrn deleted file mode 100644 index 8f9f79b4..00000000 --- a/.publish/ui/components/ApiHeaderTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiHeaderTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ApiKeyCreateDialog.wrn b/.publish/ui/components/ApiKeyCreateDialog.wrn deleted file mode 100644 index ba616096..00000000 --- a/.publish/ui/components/ApiKeyCreateDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiKeyCreateDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/ApiKeyDisplay.wrn b/.publish/ui/components/ApiKeyDisplay.wrn deleted file mode 100644 index 6a142190..00000000 --- a/.publish/ui/components/ApiKeyDisplay.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiKeyDisplay { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ApiKeyInput.wrn b/.publish/ui/components/ApiKeyInput.wrn deleted file mode 100644 index 98cbb1d0..00000000 --- a/.publish/ui/components/ApiKeyInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ApiKeyInput { - props { - label = "ApiKey" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ApiMethodBadge.wrn b/.publish/ui/components/ApiMethodBadge.wrn deleted file mode 100644 index 43ba1a9d..00000000 --- a/.publish/ui/components/ApiMethodBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiMethodBadge { - props { - label = "ApiMethod" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ApiParameterTable.wrn b/.publish/ui/components/ApiParameterTable.wrn deleted file mode 100644 index 768d7a08..00000000 --- a/.publish/ui/components/ApiParameterTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiParameterTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ApiRateLimitNotice.wrn b/.publish/ui/components/ApiRateLimitNotice.wrn deleted file mode 100644 index f098aa1f..00000000 --- a/.publish/ui/components/ApiRateLimitNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiRateLimitNotice { - props { - label = "ApiRateLimit" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ApiRequestExample.wrn b/.publish/ui/components/ApiRequestExample.wrn deleted file mode 100644 index f6eb2323..00000000 --- a/.publish/ui/components/ApiRequestExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiRequestExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ApiResponseExample.wrn b/.publish/ui/components/ApiResponseExample.wrn deleted file mode 100644 index 37341e3d..00000000 --- a/.publish/ui/components/ApiResponseExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiResponseExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ApiSchemaTable.wrn b/.publish/ui/components/ApiSchemaTable.wrn deleted file mode 100644 index bbe81c51..00000000 --- a/.publish/ui/components/ApiSchemaTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiSchemaTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ApiSchemaViewer.wrn b/.publish/ui/components/ApiSchemaViewer.wrn deleted file mode 100644 index dc1bce2c..00000000 --- a/.publish/ui/components/ApiSchemaViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiSchemaViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ApiVersionBadge.wrn b/.publish/ui/components/ApiVersionBadge.wrn deleted file mode 100644 index accd7965..00000000 --- a/.publish/ui/components/ApiVersionBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiVersionBadge { - props { - label = "ApiVersion" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/AppHeader.wrn b/.publish/ui/components/AppHeader.wrn deleted file mode 100644 index 6e2283cf..00000000 --- a/.publish/ui/components/AppHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AppHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ArchitectureSection.wrn b/.publish/ui/components/ArchitectureSection.wrn deleted file mode 100644 index f477e6d3..00000000 --- a/.publish/ui/components/ArchitectureSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArchitectureSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/AreaChart.wrn b/.publish/ui/components/AreaChart.wrn deleted file mode 100644 index bb4b8216..00000000 --- a/.publish/ui/components/AreaChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component AreaChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/ArticleHero.wrn b/.publish/ui/components/ArticleHero.wrn deleted file mode 100644 index b3a11900..00000000 --- a/.publish/ui/components/ArticleHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArticleHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ArticleLayout.wrn b/.publish/ui/components/ArticleLayout.wrn deleted file mode 100644 index 42904a2d..00000000 --- a/.publish/ui/components/ArticleLayout.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArticleLayout { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ArticleNewsletterCTA.wrn b/.publish/ui/components/ArticleNewsletterCTA.wrn deleted file mode 100644 index d2643221..00000000 --- a/.publish/ui/components/ArticleNewsletterCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ArticleNewsletterCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ArticlePageShell.wrn b/.publish/ui/components/ArticlePageShell.wrn deleted file mode 100644 index 5d2b6ece..00000000 --- a/.publish/ui/components/ArticlePageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArticlePageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ArticleShareActions.wrn b/.publish/ui/components/ArticleShareActions.wrn deleted file mode 100644 index e9600199..00000000 --- a/.publish/ui/components/ArticleShareActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ArticleShareActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/AspectRatio.wrn b/.publish/ui/components/AspectRatio.wrn deleted file mode 100644 index d6c2bf73..00000000 --- a/.publish/ui/components/AspectRatio.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component AspectRatio { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/AssetCard.wrn b/.publish/ui/components/AssetCard.wrn deleted file mode 100644 index f38a44ad..00000000 --- a/.publish/ui/components/AssetCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component AssetCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/AttachmentPicker.wrn b/.publish/ui/components/AttachmentPicker.wrn deleted file mode 100644 index 549af51a..00000000 --- a/.publish/ui/components/AttachmentPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AttachmentPicker { - props { - label = "Attachment" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/AttachmentUpload.wrn b/.publish/ui/components/AttachmentUpload.wrn deleted file mode 100644 index 10d4204c..00000000 --- a/.publish/ui/components/AttachmentUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AttachmentUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AudioUpload.wrn b/.publish/ui/components/AudioUpload.wrn deleted file mode 100644 index 06646ec0..00000000 --- a/.publish/ui/components/AudioUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AudioUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AuditLogPreview.wrn b/.publish/ui/components/AuditLogPreview.wrn deleted file mode 100644 index d8c1a820..00000000 --- a/.publish/ui/components/AuditLogPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuditLogPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AuditTable.wrn b/.publish/ui/components/AuditTable.wrn deleted file mode 100644 index 0c09bcd6..00000000 --- a/.publish/ui/components/AuditTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AuditTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/AuthenticatorCodeInput.wrn b/.publish/ui/components/AuthenticatorCodeInput.wrn deleted file mode 100644 index f372c730..00000000 --- a/.publish/ui/components/AuthenticatorCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AuthenticatorCodeInput { - props { - label = "AuthenticatorCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/AuthorAvatar.wrn b/.publish/ui/components/AuthorAvatar.wrn deleted file mode 100644 index c9196a01..00000000 --- a/.publish/ui/components/AuthorAvatar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuthorAvatar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AuthorCard.wrn b/.publish/ui/components/AuthorCard.wrn deleted file mode 100644 index b2e6e57b..00000000 --- a/.publish/ui/components/AuthorCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuthorCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AuthorizedApplicationCard.wrn b/.publish/ui/components/AuthorizedApplicationCard.wrn deleted file mode 100644 index 3662c9df..00000000 --- a/.publish/ui/components/AuthorizedApplicationCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuthorizedApplicationCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AutoGrid.wrn b/.publish/ui/components/AutoGrid.wrn deleted file mode 100644 index 52a18909..00000000 --- a/.publish/ui/components/AutoGrid.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component AutoGrid { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/AutomationExampleCard.wrn b/.publish/ui/components/AutomationExampleCard.wrn deleted file mode 100644 index 6e64cff1..00000000 --- a/.publish/ui/components/AutomationExampleCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AutomationExampleCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AvailabilityCalendar.wrn b/.publish/ui/components/AvailabilityCalendar.wrn deleted file mode 100644 index 5a9ef54a..00000000 --- a/.publish/ui/components/AvailabilityCalendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AvailabilityCalendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/AvatarGroup.wrn b/.publish/ui/components/AvatarGroup.wrn index 0cb3e98a..1930a2c4 100644 --- a/.publish/ui/components/AvatarGroup.wrn +++ b/.publish/ui/components/AvatarGroup.wrn @@ -1,16 +1,19 @@ component AvatarGroup { props { - label = "Avatar" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" + size = "default" + color = "primary" + title = "Avatar Group" + description = "" + items = [] + variant = "default" class = "" } - view { } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } } diff --git a/.publish/ui/components/AvatarUpload.wrn b/.publish/ui/components/AvatarUpload.wrn deleted file mode 100644 index 70f92346..00000000 --- a/.publish/ui/components/AvatarUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AvatarUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/BackButton.wrn b/.publish/ui/components/BackButton.wrn deleted file mode 100644 index 2cf2c0d5..00000000 --- a/.publish/ui/components/BackButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component BackButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/BackToTop.wrn b/.publish/ui/components/BackToTop.wrn deleted file mode 100644 index 4011bd67..00000000 --- a/.publish/ui/components/BackToTop.wrn +++ /dev/null @@ -1,94 +0,0 @@ -component BackToTop { - props { - class = "" - label = "Back to top" - assistiveLabel = "Return to the top of the page" - threshold = 500 - } - - state visible = false - - functions { - function updateBackToTopVisibility() { - visible = window.scrollY > threshold - } - - function scrollToTop() { - window.scrollTo({ - top: 0, - behavior: "smooth" - }) - } - } - - lifecycle { - mount { - updateBackToTopVisibility() - - window.addEventListener( - "scroll", - updateBackToTopVisibility, - { passive: true } - ) - } - - unmount { - window.removeEventListener( - "scroll", - updateBackToTopVisibility - ) - } - } - - watch visible { - console.debug( - "Back-to-top visibility:", - value, - previous - ) - } - - view { -
- - - - -
- - - - -
-
- } -} diff --git a/.publish/ui/components/BankTransferDetails.wrn b/.publish/ui/components/BankTransferDetails.wrn deleted file mode 100644 index 9f4bee22..00000000 --- a/.publish/ui/components/BankTransferDetails.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BankTransferDetails { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Banner.wrn b/.publish/ui/components/Banner.wrn deleted file mode 100644 index 86939b9c..00000000 --- a/.publish/ui/components/Banner.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component Banner { - props { - class = "" - text = "Announcement" - href = "" - actionLabel = "Learn more" - variant = "brand" - } - view { - - } -} diff --git a/.publish/ui/components/BarChart.wrn b/.publish/ui/components/BarChart.wrn deleted file mode 100644 index 3e8d9041..00000000 --- a/.publish/ui/components/BarChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component BarChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/BetaBadge.wrn b/.publish/ui/components/BetaBadge.wrn deleted file mode 100644 index 0491a276..00000000 --- a/.publish/ui/components/BetaBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component BetaBadge { - props { - label = "Beta" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/BillingAddressForm.wrn b/.publish/ui/components/BillingAddressForm.wrn deleted file mode 100644 index 61d86ca6..00000000 --- a/.publish/ui/components/BillingAddressForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BillingAddressForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/BillingExample.wrn b/.publish/ui/components/BillingExample.wrn deleted file mode 100644 index 7d6fb269..00000000 --- a/.publish/ui/components/BillingExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BillingExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/BillingPeriodToggle.wrn b/.publish/ui/components/BillingPeriodToggle.wrn deleted file mode 100644 index a4469365..00000000 --- a/.publish/ui/components/BillingPeriodToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BillingPeriodToggle { - props { - label = "BillingPeriod" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/BlackoutDatePicker.wrn b/.publish/ui/components/BlackoutDatePicker.wrn deleted file mode 100644 index 6096d9fc..00000000 --- a/.publish/ui/components/BlackoutDatePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BlackoutDatePicker { - props { - label = "BlackoutDate" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Blockquote.wrn b/.publish/ui/components/Blockquote.wrn new file mode 100644 index 00000000..693b09a3 --- /dev/null +++ b/.publish/ui/components/Blockquote.wrn @@ -0,0 +1,19 @@ +component Blockquote { + props { + size = "default" + color = "primary" + title = "Blockquote" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/BlogCard.wrn b/.publish/ui/components/BlogCard.wrn deleted file mode 100644 index fb85219a..00000000 --- a/.publish/ui/components/BlogCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BlogCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/BlogGrid.wrn b/.publish/ui/components/BlogGrid.wrn deleted file mode 100644 index 0599f37e..00000000 --- a/.publish/ui/components/BlogGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BlogGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/BlogList.wrn b/.publish/ui/components/BlogList.wrn deleted file mode 100644 index e40af45b..00000000 --- a/.publish/ui/components/BlogList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BlogList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/BlogSearch.wrn b/.publish/ui/components/BlogSearch.wrn deleted file mode 100644 index 1d1c9475..00000000 --- a/.publish/ui/components/BlogSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BlogSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/BodyText.wrn b/.publish/ui/components/BodyText.wrn deleted file mode 100644 index 261064c1..00000000 --- a/.publish/ui/components/BodyText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component BodyText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/BorderRadiusPicker.wrn b/.publish/ui/components/BorderRadiusPicker.wrn deleted file mode 100644 index bef4b4bf..00000000 --- a/.publish/ui/components/BorderRadiusPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BorderRadiusPicker { - props { - label = "BorderRadius" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/BottomNavigation.wrn b/.publish/ui/components/BottomNavigation.wrn deleted file mode 100644 index f273c20a..00000000 --- a/.publish/ui/components/BottomNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BottomNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/BrandColorPicker.wrn b/.publish/ui/components/BrandColorPicker.wrn deleted file mode 100644 index 3ebd75e7..00000000 --- a/.publish/ui/components/BrandColorPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BrandColorPicker { - props { - label = "BrandColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/BrandSelector.wrn b/.publish/ui/components/BrandSelector.wrn deleted file mode 100644 index ecbc5b0a..00000000 --- a/.publish/ui/components/BrandSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BrandSelector { - props { - label = "Brand" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Breadcrumb.wrn b/.publish/ui/components/Breadcrumb.wrn new file mode 100644 index 00000000..41e5654e --- /dev/null +++ b/.publish/ui/components/Breadcrumb.wrn @@ -0,0 +1,17 @@ +component Breadcrumb { + props { + size = "default" + color = "primary" + label = "Breadcrumb" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/Breadcrumbs.wrn b/.publish/ui/components/Breadcrumbs.wrn deleted file mode 100644 index 2f186735..00000000 --- a/.publish/ui/components/Breadcrumbs.wrn +++ /dev/null @@ -1,105 +0,0 @@ -component Breadcrumbs { - props { - class: string = "" - items = [] - centered = false - compact = false - showHome = true - homeLabel = "Home" - homeHref = "/" - } - - view { - - } -} diff --git a/.publish/ui/components/BrowserFrame.wrn b/.publish/ui/components/BrowserFrame.wrn deleted file mode 100644 index 1021c018..00000000 --- a/.publish/ui/components/BrowserFrame.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BrowserFrame { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/BudgetRangeSlider.wrn b/.publish/ui/components/BudgetRangeSlider.wrn deleted file mode 100644 index cd5f3577..00000000 --- a/.publish/ui/components/BudgetRangeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BudgetRangeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/BudgetSelector.wrn b/.publish/ui/components/BudgetSelector.wrn deleted file mode 100644 index 9c92720b..00000000 --- a/.publish/ui/components/BudgetSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BudgetSelector { - props { - label = "Budget" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/BusinessHoursPicker.wrn b/.publish/ui/components/BusinessHoursPicker.wrn deleted file mode 100644 index 3fcb9dd7..00000000 --- a/.publish/ui/components/BusinessHoursPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BusinessHoursPicker { - props { - label = "BusinessHours" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ButtonGroup.wrn b/.publish/ui/components/ButtonGroup.wrn index 8fa14cb2..8d40d424 100644 --- a/.publish/ui/components/ButtonGroup.wrn +++ b/.publish/ui/components/ButtonGroup.wrn @@ -1,16 +1,19 @@ component ButtonGroup { props { - label = "Button" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" + size = "default" + color = "primary" + title = "Button Group" + description = "" + items = [] + variant = "default" class = "" } - view { } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } } diff --git a/.publish/ui/components/ButtonSelector.wrn b/.publish/ui/components/ButtonSelector.wrn deleted file mode 100644 index 153ec7bf..00000000 --- a/.publish/ui/components/ButtonSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ButtonSelector { - props { - label = "Button" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CTASection.wrn b/.publish/ui/components/CTASection.wrn deleted file mode 100644 index c18aaf80..00000000 --- a/.publish/ui/components/CTASection.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component CTASection { - props { - class = "" - eyebrow = "Ready?" - title = "Start building today" - description = "" - primaryLabel = "Get started" - primaryHref = "#" - secondaryLabel = "Contact sales" - secondaryHref = "#" - } - view { -

{eyebrow}

{title}

{description}

{primaryLabel}{secondaryLabel}
- } -} diff --git a/.publish/ui/components/Calendar.wrn b/.publish/ui/components/Calendar.wrn deleted file mode 100644 index ade705d9..00000000 --- a/.publish/ui/components/Calendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Calendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CalendarGrid.wrn b/.publish/ui/components/CalendarGrid.wrn deleted file mode 100644 index 8bf8be4f..00000000 --- a/.publish/ui/components/CalendarGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CalendarGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/CalendarHeader.wrn b/.publish/ui/components/CalendarHeader.wrn deleted file mode 100644 index b0584a10..00000000 --- a/.publish/ui/components/CalendarHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CalendarHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CalendarNavigation.wrn b/.publish/ui/components/CalendarNavigation.wrn deleted file mode 100644 index 6df42a40..00000000 --- a/.publish/ui/components/CalendarNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CalendarNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CallbackUrlInput.wrn b/.publish/ui/components/CallbackUrlInput.wrn deleted file mode 100644 index 6ded0fd3..00000000 --- a/.publish/ui/components/CallbackUrlInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CallbackUrlInput { - props { - label = "CallbackUrl" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CampaignCard.wrn b/.publish/ui/components/CampaignCard.wrn deleted file mode 100644 index 69e07e07..00000000 --- a/.publish/ui/components/CampaignCard.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CampaignCard { - props { - title = "" - description = "" - href = "" - icon = "icon-[lucide--send]" - class = "" - } - view {
{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}Open {title}{/if}
} -} diff --git a/.publish/ui/components/CampaignPerformancePreview.wrn b/.publish/ui/components/CampaignPerformancePreview.wrn deleted file mode 100644 index 36195fc8..00000000 --- a/.publish/ui/components/CampaignPerformancePreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CampaignPerformancePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CampaignProgress.wrn b/.publish/ui/components/CampaignProgress.wrn deleted file mode 100644 index 43dc0e85..00000000 --- a/.publish/ui/components/CampaignProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CampaignProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/CapabilityGrid.wrn b/.publish/ui/components/CapabilityGrid.wrn deleted file mode 100644 index 91276355..00000000 --- a/.publish/ui/components/CapabilityGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CapabilityGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/CaptchaField.wrn b/.publish/ui/components/CaptchaField.wrn deleted file mode 100644 index f184ae30..00000000 --- a/.publish/ui/components/CaptchaField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CaptchaField { - props { - label = "Captcha" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CardPaymentForm.wrn b/.publish/ui/components/CardPaymentForm.wrn deleted file mode 100644 index 2842925a..00000000 --- a/.publish/ui/components/CardPaymentForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CardPaymentForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CardSelector.wrn b/.publish/ui/components/CardSelector.wrn deleted file mode 100644 index 06589d62..00000000 --- a/.publish/ui/components/CardSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CardSelector { - props { - label = "Card" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CardSkeleton.wrn b/.publish/ui/components/CardSkeleton.wrn deleted file mode 100644 index 0b82f3e8..00000000 --- a/.publish/ui/components/CardSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CardSkeleton { - props { - label = "Card" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CareerApplicationForm.wrn b/.publish/ui/components/CareerApplicationForm.wrn deleted file mode 100644 index 1f674c08..00000000 --- a/.publish/ui/components/CareerApplicationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CareerApplicationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CareerBenefitsGrid.wrn b/.publish/ui/components/CareerBenefitsGrid.wrn deleted file mode 100644 index fa61d70f..00000000 --- a/.publish/ui/components/CareerBenefitsGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CareerBenefitsGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/Carousel.wrn b/.publish/ui/components/Carousel.wrn index 0ab6f8ab..c9024c86 100644 --- a/.publish/ui/components/Carousel.wrn +++ b/.publish/ui/components/Carousel.wrn @@ -1,13 +1,19 @@ component Carousel { props { - eyebrow = "" - title = "" + size = "default" + color = "primary" + title = "Carousel" description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" + items = [] + variant = "default" class = "" } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } } diff --git a/.publish/ui/components/CaseStudyCard.wrn b/.publish/ui/components/CaseStudyCard.wrn deleted file mode 100644 index 7e3b9831..00000000 --- a/.publish/ui/components/CaseStudyCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CaseStudyCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CaseStudyHero.wrn b/.publish/ui/components/CaseStudyHero.wrn deleted file mode 100644 index 6adb849b..00000000 --- a/.publish/ui/components/CaseStudyHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CaseStudyHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CaseStudyPreview.wrn b/.publish/ui/components/CaseStudyPreview.wrn deleted file mode 100644 index 5b95a4cc..00000000 --- a/.publish/ui/components/CaseStudyPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CaseStudyPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CenteredCTA.wrn b/.publish/ui/components/CenteredCTA.wrn deleted file mode 100644 index 878af5a3..00000000 --- a/.publish/ui/components/CenteredCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CenteredCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/CenteredHero.wrn b/.publish/ui/components/CenteredHero.wrn deleted file mode 100644 index 49e37173..00000000 --- a/.publish/ui/components/CenteredHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CenteredHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CenteredSectionHeader.wrn b/.publish/ui/components/CenteredSectionHeader.wrn deleted file mode 100644 index 0a3fd90b..00000000 --- a/.publish/ui/components/CenteredSectionHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CenteredSectionHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CertificateUpload.wrn b/.publish/ui/components/CertificateUpload.wrn deleted file mode 100644 index 4a77b5c7..00000000 --- a/.publish/ui/components/CertificateUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CertificateUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CertificationBadge.wrn b/.publish/ui/components/CertificationBadge.wrn deleted file mode 100644 index 3489bd66..00000000 --- a/.publish/ui/components/CertificationBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CertificationBadge { - props { - label = "Certification" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ChallengeSection.wrn b/.publish/ui/components/ChallengeSection.wrn deleted file mode 100644 index a72934de..00000000 --- a/.publish/ui/components/ChallengeSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ChallengeSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ChannelBadge.wrn b/.publish/ui/components/ChannelBadge.wrn deleted file mode 100644 index 87261f3e..00000000 --- a/.publish/ui/components/ChannelBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChannelBadge { - props { - label = "Channel" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ChannelCard.wrn b/.publish/ui/components/ChannelCard.wrn deleted file mode 100644 index 6e9b4ce7..00000000 --- a/.publish/ui/components/ChannelCard.wrn +++ /dev/null @@ -1,54 +0,0 @@ -component ChannelCard { - props { - title = "" - description = "" - href = "" - icon = "" - actionLabel = "" - class = "" - } - - view { - - } -} diff --git a/.publish/ui/components/ChannelComparisonChart.wrn b/.publish/ui/components/ChannelComparisonChart.wrn deleted file mode 100644 index 922c168a..00000000 --- a/.publish/ui/components/ChannelComparisonChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChannelComparisonChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/ChannelComparisonTable.wrn b/.publish/ui/components/ChannelComparisonTable.wrn deleted file mode 100644 index ca1066f1..00000000 --- a/.publish/ui/components/ChannelComparisonTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ChannelComparisonTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ChannelFallbackDiagram.wrn b/.publish/ui/components/ChannelFallbackDiagram.wrn deleted file mode 100644 index 22f85b46..00000000 --- a/.publish/ui/components/ChannelFallbackDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChannelFallbackDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/ChannelFlow.wrn b/.publish/ui/components/ChannelFlow.wrn deleted file mode 100644 index 97cd8ccf..00000000 --- a/.publish/ui/components/ChannelFlow.wrn +++ /dev/null @@ -1,49 +0,0 @@ -component ChannelFlow { - props { - class = "" - } - - view { - - } -} diff --git a/.publish/ui/components/ChannelIcon.wrn b/.publish/ui/components/ChannelIcon.wrn deleted file mode 100644 index eec37ab3..00000000 --- a/.publish/ui/components/ChannelIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ChannelIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ChannelRateTable.wrn b/.publish/ui/components/ChannelRateTable.wrn deleted file mode 100644 index 652cc1a9..00000000 --- a/.publish/ui/components/ChannelRateTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ChannelRateTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ChannelSelector.wrn b/.publish/ui/components/ChannelSelector.wrn deleted file mode 100644 index 714f025f..00000000 --- a/.publish/ui/components/ChannelSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ChannelSelector { - props { - label = "Channel" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CharacterCounter.wrn b/.publish/ui/components/CharacterCounter.wrn deleted file mode 100644 index 40715d14..00000000 --- a/.publish/ui/components/CharacterCounter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CharacterCounter { - props { - label = "Character" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Chart.wrn b/.publish/ui/components/Chart.wrn new file mode 100644 index 00000000..a1d8c853 --- /dev/null +++ b/.publish/ui/components/Chart.wrn @@ -0,0 +1,19 @@ +component Chart { + props { + size = "default" + color = "primary" + title = "Chart" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/ChartEmptyState.wrn b/.publish/ui/components/ChartEmptyState.wrn deleted file mode 100644 index 3245cc5e..00000000 --- a/.publish/ui/components/ChartEmptyState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChartEmptyState { - props { - label = "ChartEmpty" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ChartTooltip.wrn b/.publish/ui/components/ChartTooltip.wrn deleted file mode 100644 index d47fc253..00000000 --- a/.publish/ui/components/ChartTooltip.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ChartTooltip { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ChatBubble.wrn b/.publish/ui/components/ChatBubble.wrn new file mode 100644 index 00000000..c53d562b --- /dev/null +++ b/.publish/ui/components/ChatBubble.wrn @@ -0,0 +1,19 @@ +component ChatBubble { + props { + size = "default" + color = "primary" + title = "Chat Bubble" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/CheckboxGroup.wrn b/.publish/ui/components/CheckboxGroup.wrn deleted file mode 100644 index d48275d1..00000000 --- a/.publish/ui/components/CheckboxGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CheckboxGroup { - props { - label = "Checkbox" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Checklist.wrn b/.publish/ui/components/Checklist.wrn deleted file mode 100644 index 6bc5e9c8..00000000 --- a/.publish/ui/components/Checklist.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Checklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ChecklistProgress.wrn b/.publish/ui/components/ChecklistProgress.wrn deleted file mode 100644 index dd4e73d9..00000000 --- a/.publish/ui/components/ChecklistProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChecklistProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/Chip.wrn b/.publish/ui/components/Chip.wrn deleted file mode 100644 index e42f4bf9..00000000 --- a/.publish/ui/components/Chip.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component Chip { - props { - label = "Chip" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/ChipInput.wrn b/.publish/ui/components/ChipInput.wrn deleted file mode 100644 index ffcad515..00000000 --- a/.publish/ui/components/ChipInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ChipInput { - props { - label = "Chip" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CircularProgress.wrn b/.publish/ui/components/CircularProgress.wrn deleted file mode 100644 index 8d938bc2..00000000 --- a/.publish/ui/components/CircularProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CircularProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/CitySelector.wrn b/.publish/ui/components/CitySelector.wrn deleted file mode 100644 index 521f32cb..00000000 --- a/.publish/ui/components/CitySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CitySelector { - props { - label = "City" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ClearFiltersButton.wrn b/.publish/ui/components/ClearFiltersButton.wrn deleted file mode 100644 index 68eb3b71..00000000 --- a/.publish/ui/components/ClearFiltersButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ClearFiltersButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ClickableCard.wrn b/.publish/ui/components/ClickableCard.wrn deleted file mode 100644 index 02fabcef..00000000 --- a/.publish/ui/components/ClickableCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ClickableCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Clipboard.wrn b/.publish/ui/components/Clipboard.wrn new file mode 100644 index 00000000..eaa43786 --- /dev/null +++ b/.publish/ui/components/Clipboard.wrn @@ -0,0 +1,19 @@ +component Clipboard { + props { + size = "default" + color = "primary" + title = "Clipboard" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/CloseButton.wrn b/.publish/ui/components/CloseButton.wrn deleted file mode 100644 index 40406cd0..00000000 --- a/.publish/ui/components/CloseButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component CloseButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/Cluster.wrn b/.publish/ui/components/Cluster.wrn deleted file mode 100644 index 2fcdafc6..00000000 --- a/.publish/ui/components/Cluster.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component Cluster { - props { - class = "" - } - - view { -
- -
- } -} diff --git a/.publish/ui/components/Code.wrn b/.publish/ui/components/Code.wrn deleted file mode 100644 index 831fc056..00000000 --- a/.publish/ui/components/Code.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Code { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CodeBlock.wrn b/.publish/ui/components/CodeBlock.wrn deleted file mode 100644 index 66321440..00000000 --- a/.publish/ui/components/CodeBlock.wrn +++ /dev/null @@ -1,26 +0,0 @@ -component CodeBlock { - props { - language = "text" - title = "" - code = "" - copyable = true - class = "" - } - - view { -
-
- - - {#if title}{title}{:else}{language}{/if} - - {#if copyable} - - {/if} -
- 
{code}
-
- } -} diff --git a/.publish/ui/components/CodeCopyButton.wrn b/.publish/ui/components/CodeCopyButton.wrn deleted file mode 100644 index dced3b68..00000000 --- a/.publish/ui/components/CodeCopyButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CodeCopyButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/CodeHeader.wrn b/.publish/ui/components/CodeHeader.wrn deleted file mode 100644 index bdfb4e5d..00000000 --- a/.publish/ui/components/CodeHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CodeHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CodeInput.wrn b/.publish/ui/components/CodeInput.wrn deleted file mode 100644 index e28dafe2..00000000 --- a/.publish/ui/components/CodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CodeInput { - props { - label = "Code" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CodeLanguageBadge.wrn b/.publish/ui/components/CodeLanguageBadge.wrn deleted file mode 100644 index c7fe5e3b..00000000 --- a/.publish/ui/components/CodeLanguageBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CodeLanguageBadge { - props { - label = "CodeLanguage" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CodeTabs.wrn b/.publish/ui/components/CodeTabs.wrn deleted file mode 100644 index 9fd89555..00000000 --- a/.publish/ui/components/CodeTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CodeTabs { - props { - class = "" - } - - view { -
- -
- } -} diff --git a/.publish/ui/components/CodeText.wrn b/.publish/ui/components/CodeText.wrn deleted file mode 100644 index 4bfbaebc..00000000 --- a/.publish/ui/components/CodeText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component CodeText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/CohortChart.wrn b/.publish/ui/components/CohortChart.wrn deleted file mode 100644 index 9a8fb673..00000000 --- a/.publish/ui/components/CohortChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CohortChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/Collapse.wrn b/.publish/ui/components/Collapse.wrn new file mode 100644 index 00000000..ddedbfca --- /dev/null +++ b/.publish/ui/components/Collapse.wrn @@ -0,0 +1,15 @@ +component Collapse { + props { + size = "default" + color = "primary" + items = [] + multiple = false + class = "" + } + view { +
+ {#each items as item}
{item.label}
{item.content}
{/each} + +
+ } +} diff --git a/.publish/ui/components/ColorGrid.wrn b/.publish/ui/components/ColorGrid.wrn deleted file mode 100644 index d8d485f1..00000000 --- a/.publish/ui/components/ColorGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ColorGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ColorHexInput.wrn b/.publish/ui/components/ColorHexInput.wrn deleted file mode 100644 index 22ab0804..00000000 --- a/.publish/ui/components/ColorHexInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ColorHexInput { - props { - label = "ColorHex" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ColorPicker.wrn b/.publish/ui/components/ColorPicker.wrn index b9d7eee4..282ca958 100644 --- a/.publish/ui/components/ColorPicker.wrn +++ b/.publish/ui/components/ColorPicker.wrn @@ -1,16 +1,20 @@ component ColorPicker { props { - label = "Color" + size = "default" + color = "primary" + label = "Color Picker" name = "" value = "" placeholder = "" - type = "text" - required = false + type = "color" + min = "" + max = "" + step = "" disabled = false - readonly = false - help = "" - error = "" + required = false class = "" } - view { } + view { + + } } diff --git a/.publish/ui/components/ColorSelector.wrn b/.publish/ui/components/ColorSelector.wrn deleted file mode 100644 index 8d86ed18..00000000 --- a/.publish/ui/components/ColorSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ColorSelector { - props { - label = "Color" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ColorSwatch.wrn b/.publish/ui/components/ColorSwatch.wrn deleted file mode 100644 index f82bf09c..00000000 --- a/.publish/ui/components/ColorSwatch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ColorSwatch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Columns.wrn b/.publish/ui/components/Columns.wrn new file mode 100644 index 00000000..a54a056e --- /dev/null +++ b/.publish/ui/components/Columns.wrn @@ -0,0 +1,13 @@ +component Columns { + props { + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" + } + view { +
+ } +} diff --git a/.publish/ui/components/Combobox.wrn b/.publish/ui/components/Combobox.wrn index 486bb9c8..7f82992b 100644 --- a/.publish/ui/components/Combobox.wrn +++ b/.publish/ui/components/Combobox.wrn @@ -1,15 +1,386 @@ -component Combobox { +component ComboBox { props { - id = "combobox" + size = "default" + color = "primary" + label = "ComboBox" name = "" - label = "Choose an option" - placeholder = "Search options" + value = "" options = [] - required = false + groups = [] + placeholder = "Search or select an option" + searchPlaceholder = "Start typing…" + clearable = true + allowCustomValue = false disabled = false + required = false + invalid = false + validationMessage = "" + helpText = "" + loading = false + loadingLabel = "Loading suggestions…" + emptyLabel = "No matching options" + clearLabel = "Clear value" + toggleLabel = "Toggle suggestions" + searchMode = "contains" + searchFields = "label,description" + minSearchLength = 0 + searchResultLimit = 0 + optionTemplate = "default" + defaultOpen = false + closeOnSelect = true + fixed = false + placement = "bottom" + autocomplete = "off" + remote = false + remoteUrl = "" + remoteQueryParam = "q" + remoteDebounce = 250 + remoteAutoLoad = true + infinite = false + hasMore = false + page = 1 + loadMoreLabel = "Load more" class = "" + @event search = function + @event select = function + @event change = function + @event clear = function + @event open = function + @event close = function + @event load = function + @event error = function } + + state open = defaultOpen + state query = "" + state selectedValue = value + state activeIndex = -1 + + functions { + function allOptions() { + return [...groups.flatMap((group) => group.options || []), ...options] + } + + function searchableText(option) { + return ((option.label || "") + " " + (option.description || "")).toLowerCase() + } + + function matches(option) { + if (!query || query.length < minSearchLength) { + return true + } + if (searchMode === "startsWith") { + return searchableText(option).startsWith(query.toLowerCase()) + } + if (searchMode === "exact") { + return searchableText(option) === query.toLowerCase() + } + return searchableText(option).includes(query.toLowerCase()) + } + + function matchingOptions(list) { + return list.filter((option) => matches(option)) + } + + function visibleOptions(list) { + if (searchResultLimit > 0) { + return matchingOptions(list).slice(0, searchResultLimit) + } + return matchingOptions(list) + } + + function flatVisibleOptions() { + return visibleOptions(allOptions()) + } + + function isSelected(option) { + return selectedValue === option.value + } + + function selectedOptions() { + return allOptions().filter((option) => isSelected(option)) + } + + function selectedText() { + return selectedOptions().length ? selectedOptions()[0].label : selectedValue + } + + function inputText() { + return query || selectedText() + } + + function shouldShowDropdown() { + if (!open) { + return false + } + if (loading) { + return true + } + if (remote && query.length !== 0 && query.length < minSearchLength) { + return true + } + if (flatVisibleOptions().length) { + return true + } + return infinite && hasMore + } + + function canSelect(option) { + return !option.disabled + } + + function chooseOption(option) { + if (!canSelect(option)) { + return + } + selectedValue = option.value + query = option.label + activeIndex = optionIndex(option) + if (closeOnSelect) { + open = false + } + } + + function updateQuery(event) { + query = event.target.value + selectedValue = allowCustomValue ? event.target.value : "" + open = true + activeIndex = flatVisibleOptions().length ? 0 : -1 + } + + function clearValue(event) { + if (event) { + event.stopPropagation() + } + query = "" + selectedValue = "" + activeIndex = -1 + open = false + } + + function openDropdown() { + if (!disabled) { + open = true + activeIndex = flatVisibleOptions().length ? 0 : -1 + } + } + + function closeDropdown() { + open = false + } + + function toggle() { + if (open) { + closeDropdown() + } else { + openDropdown() + } + } + + function setValue(nextValue) { + selectedValue = nextValue + query = "" + } + + function moveActive(direction) { + if (!flatVisibleOptions().length) { + return + } + activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length + } + + function handleKeydown(event) { + if (disabled) { + return + } + if (event.key === "ArrowDown") { + event.preventDefault() + openDropdown() + moveActive(1) + } else if (event.key === "ArrowUp") { + event.preventDefault() + openDropdown() + moveActive(-1) + } else if (event.key === "Enter" && open && activeIndex >= 0) { + event.preventDefault() + chooseOption(flatVisibleOptions()[activeIndex]) + } else if (event.key === "Escape") { + closeDropdown() + } else if (event.key === "Home" && open) { + event.preventDefault() + activeIndex = 0 + } else if (event.key === "End" && open) { + event.preventDefault() + activeIndex = flatVisibleOptions().length - 1 + } + } + + function optionIndex(option) { + return flatVisibleOptions().findIndex((item) => item.value === option.value) + } + } + view { -
{#each options as option}{/each}
+
+ + +
+ + + + + +
+ +
+
Enter at least {minSearchLength} characters.
+
+ + {loadingLabel} +
+ +
+ {#each groups as group} + {#if visibleOptions(group.options || []).length} +
+
{group.label}
+ {#each group.options || [] as option} + + {/each} +
+ {/if} + {/each} + + {#each options as option} + + {/each} +
+ + +
+ + {#if !allowCustomValue} + + {/if} + + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
} } diff --git a/.publish/ui/components/ComingSoonBadge.wrn b/.publish/ui/components/ComingSoonBadge.wrn deleted file mode 100644 index f28408cd..00000000 --- a/.publish/ui/components/ComingSoonBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component ComingSoonBadge { - props { - label = "ComingSoon" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/ComingSoonState.wrn b/.publish/ui/components/ComingSoonState.wrn deleted file mode 100644 index 40e6cedc..00000000 --- a/.publish/ui/components/ComingSoonState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ComingSoonState { - props { - label = "ComingSoon" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CommandBlock.wrn b/.publish/ui/components/CommandBlock.wrn deleted file mode 100644 index 5ec7f164..00000000 --- a/.publish/ui/components/CommandBlock.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CommandBlock { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CommandMenu.wrn b/.publish/ui/components/CommandMenu.wrn deleted file mode 100644 index 8f9def1a..00000000 --- a/.publish/ui/components/CommandMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CommandMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/CommandSearchInput.wrn b/.publish/ui/components/CommandSearchInput.wrn deleted file mode 100644 index e5839eba..00000000 --- a/.publish/ui/components/CommandSearchInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CommandSearchInput { - props { - label = "CommandSearch" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CompanyHero.wrn b/.publish/ui/components/CompanyHero.wrn deleted file mode 100644 index 5a0b0c02..00000000 --- a/.publish/ui/components/CompanyHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CompanyHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CompanyNameInput.wrn b/.publish/ui/components/CompanyNameInput.wrn deleted file mode 100644 index 4721ea62..00000000 --- a/.publish/ui/components/CompanyNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CompanyNameInput { - props { - label = "CompanyName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CompanyPageShell.wrn b/.publish/ui/components/CompanyPageShell.wrn deleted file mode 100644 index dca2426c..00000000 --- a/.publish/ui/components/CompanyPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CompanyPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/CompanySizeSelector.wrn b/.publish/ui/components/CompanySizeSelector.wrn deleted file mode 100644 index 3fd0a219..00000000 --- a/.publish/ui/components/CompanySizeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CompanySizeSelector { - props { - label = "CompanySize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ComparisonDateRangePicker.wrn b/.publish/ui/components/ComparisonDateRangePicker.wrn deleted file mode 100644 index 5120aea2..00000000 --- a/.publish/ui/components/ComparisonDateRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ComparisonDateRangePicker { - props { - label = "ComparisonDateRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ComparisonTable.wrn b/.publish/ui/components/ComparisonTable.wrn deleted file mode 100644 index 1a576d59..00000000 --- a/.publish/ui/components/ComparisonTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ComparisonTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/CompletionMeter.wrn b/.publish/ui/components/CompletionMeter.wrn deleted file mode 100644 index 77db45d4..00000000 --- a/.publish/ui/components/CompletionMeter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CompletionMeter { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/ComplianceBadgeList.wrn b/.publish/ui/components/ComplianceBadgeList.wrn deleted file mode 100644 index 968c0673..00000000 --- a/.publish/ui/components/ComplianceBadgeList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ComplianceBadgeList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ComplianceProgramCard.wrn b/.publish/ui/components/ComplianceProgramCard.wrn deleted file mode 100644 index e3591731..00000000 --- a/.publish/ui/components/ComplianceProgramCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ComplianceProgramCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Confetti.wrn b/.publish/ui/components/Confetti.wrn new file mode 100644 index 00000000..90b1ff86 --- /dev/null +++ b/.publish/ui/components/Confetti.wrn @@ -0,0 +1,19 @@ +component Confetti { + props { + size = "default" + color = "primary" + title = "Confetti" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/ConfirmPasswordInput.wrn b/.publish/ui/components/ConfirmPasswordInput.wrn deleted file mode 100644 index 98839b1d..00000000 --- a/.publish/ui/components/ConfirmPasswordInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ConfirmPasswordInput { - props { - label = "ConfirmPassword" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ConfirmationDialog.wrn b/.publish/ui/components/ConfirmationDialog.wrn deleted file mode 100644 index 9f74ed29..00000000 --- a/.publish/ui/components/ConfirmationDialog.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component ConfirmationDialog { - props { - title = "Confirm action" - description = "Are you sure you want to continue?" - confirmLabel = "Confirm" - cancelLabel = "Cancel" - danger = false - open = false - class = "" - } - state visible = open - view { - - } -} diff --git a/.publish/ui/components/ConnectedAccountCard.wrn b/.publish/ui/components/ConnectedAccountCard.wrn deleted file mode 100644 index 6abc75d7..00000000 --- a/.publish/ui/components/ConnectedAccountCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ConnectedAccountCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ConnectionCard.wrn b/.publish/ui/components/ConnectionCard.wrn deleted file mode 100644 index 906931c1..00000000 --- a/.publish/ui/components/ConnectionCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ConnectionCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ConsentTimelinePreview.wrn b/.publish/ui/components/ConsentTimelinePreview.wrn deleted file mode 100644 index 5bcb0aca..00000000 --- a/.publish/ui/components/ConsentTimelinePreview.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component ConsentTimelinePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
{#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
- } -} diff --git a/.publish/ui/components/ContactCTA.wrn b/.publish/ui/components/ContactCTA.wrn deleted file mode 100644 index 0c1de8f0..00000000 --- a/.publish/ui/components/ContactCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ContactCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ContactCard.wrn b/.publish/ui/components/ContactCard.wrn deleted file mode 100644 index 4e3dbeba..00000000 --- a/.publish/ui/components/ContactCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ContactCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ContactForm.wrn b/.publish/ui/components/ContactForm.wrn deleted file mode 100644 index c9c619d3..00000000 --- a/.publish/ui/components/ContactForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ContactForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ContactHero.wrn b/.publish/ui/components/ContactHero.wrn deleted file mode 100644 index 70e59691..00000000 --- a/.publish/ui/components/ContactHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ContactHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ContactPageShell.wrn b/.publish/ui/components/ContactPageShell.wrn deleted file mode 100644 index 1627cea5..00000000 --- a/.publish/ui/components/ContactPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ContactPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ContactSalesBanner.wrn b/.publish/ui/components/ContactSalesBanner.wrn deleted file mode 100644 index 58a954d9..00000000 --- a/.publish/ui/components/ContactSalesBanner.wrn +++ /dev/null @@ -1,195 +0,0 @@ -component ContactSalesBanner { - props { - class: string = "" - eyebrow = "Enterprise identity" - title = "Ready to secure your next application?" - description = "" - - primaryLabel = "Contact sales" - primaryHref = "/contact" - - secondaryLabel = "Start free" - secondaryHref = "/sign-up" - - iconClass = "icon-[lucide--messages-square]" - - centered = false - compact = false - - points = [] - trustPoints = [] - } - - view { -
-
- - - -
- -
- -
- -
- - - - {eyebrow} - -
- - -

- {title} -

- - -

- {description} -

- - -
- {#each points.slice(0, 4) as point} -
- - - - - {point} -
- {/each} -
-
- - -
- - {secondaryLabel} - - - - {primaryLabel} - - - -
-
- - -
-
- {#each trustPoints.slice(0, 4) as trustPoint} - - - - {trustPoint.label} - - {/each} -
-
-
-
-
- } -} diff --git a/.publish/ui/components/ContactSalesButton.wrn b/.publish/ui/components/ContactSalesButton.wrn deleted file mode 100644 index 8d721b0e..00000000 --- a/.publish/ui/components/ContactSalesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ContactSalesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ContactSalesForm.wrn b/.publish/ui/components/ContactSalesForm.wrn deleted file mode 100644 index 2a734465..00000000 --- a/.publish/ui/components/ContactSalesForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ContactSalesForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ContextMenu.wrn b/.publish/ui/components/ContextMenu.wrn index c5ff0774..543f5314 100644 --- a/.publish/ui/components/ContextMenu.wrn +++ b/.publish/ui/components/ContextMenu.wrn @@ -1,10 +1,19 @@ component ContextMenu { props { - title = "" + size = "default" + color = "primary" + title = "Context Menu" description = "" open = false + placement = "bottom" closeLabel = "Close" class = "" } - view {
} + view { +
+
{title}
+ {#if description}

{description}

{/if} + +
+ } } diff --git a/.publish/ui/components/ContextSwitcher.wrn b/.publish/ui/components/ContextSwitcher.wrn deleted file mode 100644 index ab6cff0c..00000000 --- a/.publish/ui/components/ContextSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ContextSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ConversationList.wrn b/.publish/ui/components/ConversationList.wrn deleted file mode 100644 index 809f57ad..00000000 --- a/.publish/ui/components/ConversationList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ConversationList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ConversationPreview.wrn b/.publish/ui/components/ConversationPreview.wrn deleted file mode 100644 index 14ba92dd..00000000 --- a/.publish/ui/components/ConversationPreview.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component ConversationPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
{#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
- } -} diff --git a/.publish/ui/components/ConversionChart.wrn b/.publish/ui/components/ConversionChart.wrn deleted file mode 100644 index 2840b608..00000000 --- a/.publish/ui/components/ConversionChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ConversionChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/CookieBanner.wrn b/.publish/ui/components/CookieBanner.wrn deleted file mode 100644 index af715639..00000000 --- a/.publish/ui/components/CookieBanner.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component CookieBanner { - props { - class = "" - title = "We use cookies" - description = "We use essential cookies and optional analytics to improve your experience." - privacyHref = "/privacy" - } - state visible = true - view { - - } -} diff --git a/.publish/ui/components/CookieCategoryList.wrn b/.publish/ui/components/CookieCategoryList.wrn deleted file mode 100644 index c2a9d812..00000000 --- a/.publish/ui/components/CookieCategoryList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CookieCategoryList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/CookieCategoryToggle.wrn b/.publish/ui/components/CookieCategoryToggle.wrn deleted file mode 100644 index d596498b..00000000 --- a/.publish/ui/components/CookieCategoryToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CookieCategoryToggle { - props { - label = "CookieCategory" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CookieConsent.wrn b/.publish/ui/components/CookieConsent.wrn deleted file mode 100644 index 58f63e21..00000000 --- a/.publish/ui/components/CookieConsent.wrn +++ /dev/null @@ -1,372 +0,0 @@ -component CookieConsent { - props { - class: string = "" - } - state bannerOpen = false - state preferencesOpen = false - - state analyticsCookies = false - state personalizationCookies = false - state marketingCookies = false - - view { -
- - - - - - - - -
- } -} diff --git a/.publish/ui/components/CookieDetailsTable.wrn b/.publish/ui/components/CookieDetailsTable.wrn deleted file mode 100644 index f366829d..00000000 --- a/.publish/ui/components/CookieDetailsTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CookieDetailsTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/CookiePreferencesDialog.wrn b/.publish/ui/components/CookiePreferencesDialog.wrn deleted file mode 100644 index a74888fd..00000000 --- a/.publish/ui/components/CookiePreferencesDialog.wrn +++ /dev/null @@ -1,17 +0,0 @@ -component CookiePreferencesDialog { - props { - title = "Cookie preferences" - description = "Choose which optional cookies you allow. Essential cookies are always enabled." - saveLabel = "Save preferences" - acceptLabel = "Accept all" - rejectLabel = "Reject optional" - open = false - class = "" - } - state visible = open - state analytics = false - state marketing = false - view { - - } -} diff --git a/.publish/ui/components/CookieTable.wrn b/.publish/ui/components/CookieTable.wrn deleted file mode 100644 index 411e7946..00000000 --- a/.publish/ui/components/CookieTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CookieTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/CoordinatesInput.wrn b/.publish/ui/components/CoordinatesInput.wrn deleted file mode 100644 index 520ae166..00000000 --- a/.publish/ui/components/CoordinatesInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CoordinatesInput { - props { - label = "Coordinates" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CoordinatesPicker.wrn b/.publish/ui/components/CoordinatesPicker.wrn deleted file mode 100644 index 84e04c62..00000000 --- a/.publish/ui/components/CoordinatesPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CoordinatesPicker { - props { - label = "Coordinates" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CopyButton.wrn b/.publish/ui/components/CopyButton.wrn deleted file mode 100644 index 07a68c31..00000000 --- a/.publish/ui/components/CopyButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component CopyButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/CopyCodeButton.wrn b/.publish/ui/components/CopyCodeButton.wrn deleted file mode 100644 index da387b20..00000000 --- a/.publish/ui/components/CopyCodeButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CopyCodeButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/CopyMarkup.wrn b/.publish/ui/components/CopyMarkup.wrn new file mode 100644 index 00000000..c053b12a --- /dev/null +++ b/.publish/ui/components/CopyMarkup.wrn @@ -0,0 +1,20 @@ +component CopyMarkup { + props { + size = "default" + color = "primary" + label = "Copy Markup" + name = "" + value = "" + placeholder = "" + type = "text" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/CopySecretField.wrn b/.publish/ui/components/CopySecretField.wrn deleted file mode 100644 index e016e880..00000000 --- a/.publish/ui/components/CopySecretField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CopySecretField { - props { - label = "CopySecret" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CostBreakdownChart.wrn b/.publish/ui/components/CostBreakdownChart.wrn deleted file mode 100644 index 1a773cdd..00000000 --- a/.publish/ui/components/CostBreakdownChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CostBreakdownChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/CostSummary.wrn b/.publish/ui/components/CostSummary.wrn deleted file mode 100644 index 98368415..00000000 --- a/.publish/ui/components/CostSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CostSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Counter.wrn b/.publish/ui/components/Counter.wrn deleted file mode 100644 index 95ef7af3..00000000 --- a/.publish/ui/components/Counter.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component Counter { - props { - label = "Status" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/CountryCallingCodeInput.wrn b/.publish/ui/components/CountryCallingCodeInput.wrn deleted file mode 100644 index 044717e6..00000000 --- a/.publish/ui/components/CountryCallingCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CountryCallingCodeInput { - props { - label = "CountryCallingCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CountryCallingCodeSelector.wrn b/.publish/ui/components/CountryCallingCodeSelector.wrn deleted file mode 100644 index 2b0913d1..00000000 --- a/.publish/ui/components/CountryCallingCodeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CountryCallingCodeSelector { - props { - label = "CountryCallingCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CountrySelector.wrn b/.publish/ui/components/CountrySelector.wrn deleted file mode 100644 index 0cd618c9..00000000 --- a/.publish/ui/components/CountrySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CountrySelector { - props { - label = "Country" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CouponInput.wrn b/.publish/ui/components/CouponInput.wrn deleted file mode 100644 index e6592370..00000000 --- a/.publish/ui/components/CouponInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CouponInput { - props { - label = "Coupon" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CreditAmountInput.wrn b/.publish/ui/components/CreditAmountInput.wrn deleted file mode 100644 index 68aade4d..00000000 --- a/.publish/ui/components/CreditAmountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CreditAmountInput { - props { - label = "CreditAmount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CronBuilder.wrn b/.publish/ui/components/CronBuilder.wrn deleted file mode 100644 index cf7ec37a..00000000 --- a/.publish/ui/components/CronBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CronBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CronInput.wrn b/.publish/ui/components/CronInput.wrn deleted file mode 100644 index 04e14a7c..00000000 --- a/.publish/ui/components/CronInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CronInput { - props { - label = "Cron" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CsvUpload.wrn b/.publish/ui/components/CsvUpload.wrn deleted file mode 100644 index 7fb0953e..00000000 --- a/.publish/ui/components/CsvUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CsvUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CurrencyInput.wrn b/.publish/ui/components/CurrencyInput.wrn deleted file mode 100644 index 9a4dac50..00000000 --- a/.publish/ui/components/CurrencyInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CurrencyInput { - props { - label = "Currency" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CurrencySelector.wrn b/.publish/ui/components/CurrencySelector.wrn deleted file mode 100644 index 520c86c7..00000000 --- a/.publish/ui/components/CurrencySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CurrencySelector { - props { - label = "Currency" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CurrentPasswordInput.wrn b/.publish/ui/components/CurrentPasswordInput.wrn deleted file mode 100644 index 3a1d6f22..00000000 --- a/.publish/ui/components/CurrentPasswordInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CurrentPasswordInput { - props { - label = "CurrentPassword" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/CustomScrollbar.wrn b/.publish/ui/components/CustomScrollbar.wrn new file mode 100644 index 00000000..7ed9de16 --- /dev/null +++ b/.publish/ui/components/CustomScrollbar.wrn @@ -0,0 +1,13 @@ +component CustomScrollbar { + props { + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" + } + view { +
+ } +} diff --git a/.publish/ui/components/CustomerLogo.wrn b/.publish/ui/components/CustomerLogo.wrn deleted file mode 100644 index a13c1ec3..00000000 --- a/.publish/ui/components/CustomerLogo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CustomerLogo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/CustomerStoryCard.wrn b/.publish/ui/components/CustomerStoryCard.wrn deleted file mode 100644 index b0945b4f..00000000 --- a/.publish/ui/components/CustomerStoryCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CustomerStoryCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DangerButton.wrn b/.publish/ui/components/DangerButton.wrn deleted file mode 100644 index ec738080..00000000 --- a/.publish/ui/components/DangerButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component DangerButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/DataMap.wrn b/.publish/ui/components/DataMap.wrn new file mode 100644 index 00000000..19098606 --- /dev/null +++ b/.publish/ui/components/DataMap.wrn @@ -0,0 +1,19 @@ +component DataMap { + props { + size = "default" + color = "primary" + title = "Data Map" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/DataProtectionCard.wrn b/.publish/ui/components/DataProtectionCard.wrn deleted file mode 100644 index a3c5dcbf..00000000 --- a/.publish/ui/components/DataProtectionCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DataProtectionCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DataRetentionTable.wrn b/.publish/ui/components/DataRetentionTable.wrn deleted file mode 100644 index 0292cd3f..00000000 --- a/.publish/ui/components/DataRetentionTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DataRetentionTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/DataTable.wrn b/.publish/ui/components/DataTable.wrn index a6220a9c..075dbd05 100644 --- a/.publish/ui/components/DataTable.wrn +++ b/.publish/ui/components/DataTable.wrn @@ -1,13 +1,14 @@ component DataTable { props { - caption = "Data table" + size = "default" + color = "primary" + caption = "Data Table" columns = [] rows = [] - emptyMessage = "No data available." - striped = false + striped = true class = "" } view { -
{#each columns as column}{/each}{#each rows as row}{#each columns as column}{/each}{:empty}{/each}
{caption}
{column.label}
{row[column.key]}
{emptyMessage}
+
{#each columns as column}{/each}{#each rows as row}{#each columns as column}{/each}{/each}
{caption}
{column.label}
{row[column.key]}
} } diff --git a/.publish/ui/components/DateInput.wrn b/.publish/ui/components/DateInput.wrn deleted file mode 100644 index 626844e8..00000000 --- a/.publish/ui/components/DateInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component DateInput { - props { - class = "" - id: string = "" - name: string = "" - label: string = "Date" - value: string = "" - placeholder: string = "" - help: string = "" - error: string = "" - required: boolean = false - disabled: boolean = false - readonly: boolean = false - autocomplete: string = "" - } - view { -
- - -

{help}

- -
- } -} diff --git a/.publish/ui/components/DatePicker.wrn b/.publish/ui/components/DatePicker.wrn index 57b5c294..6a604af1 100644 --- a/.publish/ui/components/DatePicker.wrn +++ b/.publish/ui/components/DatePicker.wrn @@ -1,15 +1,20 @@ component DatePicker { props { + size = "default" + color = "primary" + label = "Date Picker" + name = "" + value = "" + placeholder = "" + type = "date" + min = "" + max = "" + step = "" + disabled = false + required = false class = "" - id: string = "date" - name: string = "date" - label: string = "Date" - value: string = "" - min: string = "" - max: string = "" - required: boolean = false } view { - + } } diff --git a/.publish/ui/components/DateRangeCalendar.wrn b/.publish/ui/components/DateRangeCalendar.wrn deleted file mode 100644 index 03333d98..00000000 --- a/.publish/ui/components/DateRangeCalendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DateRangeCalendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DateRangePicker.wrn b/.publish/ui/components/DateRangePicker.wrn deleted file mode 100644 index 9ffb7dc6..00000000 --- a/.publish/ui/components/DateRangePicker.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DateRangePicker { - props { - class = "" - label = "Date range" - startName = "startDate" - endName = "endDate" - } - view { -
{label}
- } -} diff --git a/.publish/ui/components/DateRangeSlider.wrn b/.publish/ui/components/DateRangeSlider.wrn deleted file mode 100644 index a7ab515a..00000000 --- a/.publish/ui/components/DateRangeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DateRangeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DateTimeInput.wrn b/.publish/ui/components/DateTimeInput.wrn deleted file mode 100644 index 3f1fb792..00000000 --- a/.publish/ui/components/DateTimeInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component DateTimeInput { - props { - class = "" - id = "" - name = "" - label = "DateTime" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
- - -

{help}

- -
- } -} diff --git a/.publish/ui/components/DateTimePicker.wrn b/.publish/ui/components/DateTimePicker.wrn deleted file mode 100644 index 341f5464..00000000 --- a/.publish/ui/components/DateTimePicker.wrn +++ /dev/null @@ -1,14 +0,0 @@ -component DateTimePicker { - props { - id = "datetime-picker" - name = "datetime" - label = "Date and time" - value = "" - min = "" - max = "" - required = false - disabled = false - class = "" - } - view {
} -} diff --git a/.publish/ui/components/DateTimeRangePicker.wrn b/.publish/ui/components/DateTimeRangePicker.wrn deleted file mode 100644 index fec48f5f..00000000 --- a/.publish/ui/components/DateTimeRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DateTimeRangePicker { - props { - label = "DateTimeRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DecimalInput.wrn b/.publish/ui/components/DecimalInput.wrn deleted file mode 100644 index 724952b5..00000000 --- a/.publish/ui/components/DecimalInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DecimalInput { - props { - label = "Decimal" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DefinitionList.wrn b/.publish/ui/components/DefinitionList.wrn deleted file mode 100644 index 4535aee5..00000000 --- a/.publish/ui/components/DefinitionList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DefinitionList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/DeleteConfirmationDialog.wrn b/.publish/ui/components/DeleteConfirmationDialog.wrn deleted file mode 100644 index 4c57325c..00000000 --- a/.publish/ui/components/DeleteConfirmationDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DeleteConfirmationDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/DeliveryPreview.wrn b/.publish/ui/components/DeliveryPreview.wrn deleted file mode 100644 index dcf13d00..00000000 --- a/.publish/ui/components/DeliveryPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DeliveryPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DeliveryStatusChart.wrn b/.publish/ui/components/DeliveryStatusChart.wrn deleted file mode 100644 index 2eec2737..00000000 --- a/.publish/ui/components/DeliveryStatusChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeliveryStatusChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/DeliveryStatusTimeline.wrn b/.publish/ui/components/DeliveryStatusTimeline.wrn deleted file mode 100644 index 31d90d63..00000000 --- a/.publish/ui/components/DeliveryStatusTimeline.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeliveryStatusTimeline { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/DemoRequestForm.wrn b/.publish/ui/components/DemoRequestForm.wrn deleted file mode 100644 index daec8dee..00000000 --- a/.publish/ui/components/DemoRequestForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DemoRequestForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DepartmentInput.wrn b/.publish/ui/components/DepartmentInput.wrn deleted file mode 100644 index 833f66d5..00000000 --- a/.publish/ui/components/DepartmentInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DepartmentInput { - props { - label = "Department" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DeprecatedFeatureAlert.wrn b/.publish/ui/components/DeprecatedFeatureAlert.wrn deleted file mode 100644 index 1b750233..00000000 --- a/.publish/ui/components/DeprecatedFeatureAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeprecatedFeatureAlert { - props { - label = "DeprecatedFeature" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DescriptionList.wrn b/.publish/ui/components/DescriptionList.wrn deleted file mode 100644 index 93cddb8f..00000000 --- a/.publish/ui/components/DescriptionList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DescriptionList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/DesktopNavigation.wrn b/.publish/ui/components/DesktopNavigation.wrn deleted file mode 100644 index cf9b53b7..00000000 --- a/.publish/ui/components/DesktopNavigation.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component DesktopNavigation { - props { - label = "Primary navigation" - items = [] - class = "" - } - view { } -} diff --git a/.publish/ui/components/DeveloperCTA.wrn b/.publish/ui/components/DeveloperCTA.wrn deleted file mode 100644 index ed4aafe0..00000000 --- a/.publish/ui/components/DeveloperCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeveloperCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/DeveloperHero.wrn b/.publish/ui/components/DeveloperHero.wrn deleted file mode 100644 index cf3536da..00000000 --- a/.publish/ui/components/DeveloperHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DeveloperHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/DeveloperPageShell.wrn b/.publish/ui/components/DeveloperPageShell.wrn deleted file mode 100644 index cb5214a3..00000000 --- a/.publish/ui/components/DeveloperPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DeveloperPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/DeveloperSearch.wrn b/.publish/ui/components/DeveloperSearch.wrn deleted file mode 100644 index cd049bfd..00000000 --- a/.publish/ui/components/DeveloperSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DeveloperSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DevelopersMegaMenu.wrn b/.publish/ui/components/DevelopersMegaMenu.wrn deleted file mode 100644 index 529dddfc..00000000 --- a/.publish/ui/components/DevelopersMegaMenu.wrn +++ /dev/null @@ -1,421 +0,0 @@ -component DevelopersMegaMenu { - props { - class: string = "" - } - view { -
-
-
- - -
-
-
-

- Developers -

- -

- Build secure identity into any application -

- -

- Explore documentation, APIs, SDKs, examples, and tools built - for modern development teams. -

-
- - -
- -
- - - - - - - - - - - Documentation - - - - - - - Guides for authentication, users, organizations, and - authorization. - - - - - - - - - - - - - - API reference - - - - - - - Complete endpoint, request, response, and error - documentation. - - - - - - - - - - - - - - SDKs - - - - - - - Official libraries for JavaScript, TypeScript, Go, Java, - Python, and more. - - - - - - - - - - - - - - Examples - - - - - - - Ready-to-run projects for common frameworks and identity - flows. - - - - - - - - - - - - - - Webhooks - - - - - - - Respond to user, session, organization, and security events. - - - - - - - - - - - - - - Changelog - - - - - - - Review platform releases, improvements, and migration notes. - - - -
- - - Open documentation - - - -
- - - -
- - -
-
- - - - Authentication guides - - - - - - Organizations - - - - - - Authorization - - - - - - - - - System status - -
- - - Developer support - - - -
-
-
- } -} diff --git a/.publish/ui/components/DevelopersMenu.wrn b/.publish/ui/components/DevelopersMenu.wrn deleted file mode 100644 index a971815e..00000000 --- a/.publish/ui/components/DevelopersMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DevelopersMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/DeviceCard.wrn b/.publish/ui/components/DeviceCard.wrn deleted file mode 100644 index cedc0bcb..00000000 --- a/.publish/ui/components/DeviceCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DeviceCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DeviceFrame.wrn b/.publish/ui/components/DeviceFrame.wrn new file mode 100644 index 00000000..5787a4b5 --- /dev/null +++ b/.publish/ui/components/DeviceFrame.wrn @@ -0,0 +1,19 @@ +component DeviceFrame { + props { + size = "default" + color = "primary" + title = "Device Frame" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/DiscountInput.wrn b/.publish/ui/components/DiscountInput.wrn deleted file mode 100644 index c18429be..00000000 --- a/.publish/ui/components/DiscountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DiscountInput { - props { - label = "Discount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DisplayHeading.wrn b/.publish/ui/components/DisplayHeading.wrn deleted file mode 100644 index fedf276c..00000000 --- a/.publish/ui/components/DisplayHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component DisplayHeading { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/DisplayNameInput.wrn b/.publish/ui/components/DisplayNameInput.wrn deleted file mode 100644 index 763031f2..00000000 --- a/.publish/ui/components/DisplayNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DisplayNameInput { - props { - label = "DisplayName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DoNotSellLink.wrn b/.publish/ui/components/DoNotSellLink.wrn deleted file mode 100644 index a98c0af4..00000000 --- a/.publish/ui/components/DoNotSellLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DoNotSellLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/DocumentPreview.wrn b/.publish/ui/components/DocumentPreview.wrn deleted file mode 100644 index c08fd513..00000000 --- a/.publish/ui/components/DocumentPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DocumentPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DocumentUpload.wrn b/.publish/ui/components/DocumentUpload.wrn deleted file mode 100644 index 4b2665cb..00000000 --- a/.publish/ui/components/DocumentUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DocumentUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DomainInput.wrn b/.publish/ui/components/DomainInput.wrn deleted file mode 100644 index b55a2d82..00000000 --- a/.publish/ui/components/DomainInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DomainInput { - props { - label = "Domain" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DonutChart.wrn b/.publish/ui/components/DonutChart.wrn deleted file mode 100644 index e4b6c899..00000000 --- a/.publish/ui/components/DonutChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DonutChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/DownloadAction.wrn b/.publish/ui/components/DownloadAction.wrn deleted file mode 100644 index 80555512..00000000 --- a/.publish/ui/components/DownloadAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DownloadAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/DownloadButton.wrn b/.publish/ui/components/DownloadButton.wrn deleted file mode 100644 index 41a3c7ab..00000000 --- a/.publish/ui/components/DownloadButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component DownloadButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/DownloadGateForm.wrn b/.publish/ui/components/DownloadGateForm.wrn deleted file mode 100644 index 88f03dec..00000000 --- a/.publish/ui/components/DownloadGateForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DownloadGateForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DownloadPolicyButton.wrn b/.publish/ui/components/DownloadPolicyButton.wrn deleted file mode 100644 index 08635cab..00000000 --- a/.publish/ui/components/DownloadPolicyButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DownloadPolicyButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/DownloadResourceForm.wrn b/.publish/ui/components/DownloadResourceForm.wrn deleted file mode 100644 index 91bcaf6d..00000000 --- a/.publish/ui/components/DownloadResourceForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DownloadResourceForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/DragAndDrop.wrn b/.publish/ui/components/DragAndDrop.wrn new file mode 100644 index 00000000..2b97f1a7 --- /dev/null +++ b/.publish/ui/components/DragAndDrop.wrn @@ -0,0 +1,19 @@ +component DragAndDrop { + props { + size = "default" + color = "primary" + title = "Drag And Drop" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/Drawer.wrn b/.publish/ui/components/Drawer.wrn index 3a8ea618..9d460fc1 100644 --- a/.publish/ui/components/Drawer.wrn +++ b/.publish/ui/components/Drawer.wrn @@ -1,12 +1,19 @@ component Drawer { props { - class = "" - title = "Panel" + size = "default" + color = "primary" + title = "Drawer" + description = "" open = false - side = "right" + placement = "bottom" + closeLabel = "Close" + class = "" } - state visible = open view { - + } } diff --git a/.publish/ui/components/Dropdown.wrn b/.publish/ui/components/Dropdown.wrn new file mode 100644 index 00000000..d1f8c352 --- /dev/null +++ b/.publish/ui/components/Dropdown.wrn @@ -0,0 +1,19 @@ +component Dropdown { + props { + size = "default" + color = "primary" + title = "Dropdown" + description = "" + open = false + placement = "bottom" + closeLabel = "Close" + class = "" + } + view { +
+
{title}
+ {#if description}

{description}

{/if} + +
+ } +} diff --git a/.publish/ui/components/DropdownMenu.wrn b/.publish/ui/components/DropdownMenu.wrn deleted file mode 100644 index ea34d28c..00000000 --- a/.publish/ui/components/DropdownMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DropdownMenu { - props { - class = "" - label = "Menu" - } - state open = false - view { -
- } -} diff --git a/.publish/ui/components/DropdownNavigation.wrn b/.publish/ui/components/DropdownNavigation.wrn deleted file mode 100644 index f41eb1cf..00000000 --- a/.publish/ui/components/DropdownNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DropdownNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/DurationInput.wrn b/.publish/ui/components/DurationInput.wrn deleted file mode 100644 index 1b11745c..00000000 --- a/.publish/ui/components/DurationInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DurationInput { - props { - label = "Duration" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DurationPicker.wrn b/.publish/ui/components/DurationPicker.wrn deleted file mode 100644 index 57f2fedf..00000000 --- a/.publish/ui/components/DurationPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DurationPicker { - props { - label = "Duration" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/DurationSlider.wrn b/.publish/ui/components/DurationSlider.wrn deleted file mode 100644 index 1d3557c7..00000000 --- a/.publish/ui/components/DurationSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DurationSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ElevatedCard.wrn b/.publish/ui/components/ElevatedCard.wrn deleted file mode 100644 index a8ec601e..00000000 --- a/.publish/ui/components/ElevatedCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ElevatedCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/EmailBodyEditor.wrn b/.publish/ui/components/EmailBodyEditor.wrn deleted file mode 100644 index 8df9bccf..00000000 --- a/.publish/ui/components/EmailBodyEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component EmailBodyEditor { - props { - label = "EmailBody" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/EmailComposer.wrn b/.publish/ui/components/EmailComposer.wrn deleted file mode 100644 index 08e7fa58..00000000 --- a/.publish/ui/components/EmailComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EmailComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/EmailInput.wrn b/.publish/ui/components/EmailInput.wrn deleted file mode 100644 index d601b5ec..00000000 --- a/.publish/ui/components/EmailInput.wrn +++ /dev/null @@ -1,27 +0,0 @@ -component EmailInput { - props { - class = "" - id = "email" - name = "email" - label = "Email" - value = "" - placeholder = "you@company.com" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "email" - } - view { -
- -
- - -
- {#if help && !error}

{help}

{/if} - {#if error}{/if} -
- } -} diff --git a/.publish/ui/components/EmojiPicker.wrn b/.publish/ui/components/EmojiPicker.wrn deleted file mode 100644 index 5597ed59..00000000 --- a/.publish/ui/components/EmojiPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component EmojiPicker { - props { - label = "Emoji" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/EmptyState.wrn b/.publish/ui/components/EmptyState.wrn deleted file mode 100644 index c3c870e6..00000000 --- a/.publish/ui/components/EmptyState.wrn +++ /dev/null @@ -1,167 +0,0 @@ -component EmptyState { - props { - class: string = "" - eyebrow = "" - title = "Nothing found" - description = "" - - iconClass = "icon-[lucide--inbox]" - - primaryLabel = "" - primaryHref = "" - - secondaryLabel = "" - secondaryHref = "" - - compact = false - centered = true - - suggestions = [] - } - - view { -
-
- - - -
-
- -
- - - -
- - -

- {eyebrow} -

- - -

- {title} -

- - -

- {description} -

- - -
- {#each suggestions.slice(0, 4) as suggestion} - - - - {suggestion.label} - - {/each} -
- - -
- - {secondaryLabel} - - - - {primaryLabel} - - - -
-
-
-
-
- } -} diff --git a/.publish/ui/components/EncryptionDiagram.wrn b/.publish/ui/components/EncryptionDiagram.wrn deleted file mode 100644 index 99b62da6..00000000 --- a/.publish/ui/components/EncryptionDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component EncryptionDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/EnterpriseCTA.wrn b/.publish/ui/components/EnterpriseCTA.wrn deleted file mode 100644 index 5d35e4ab..00000000 --- a/.publish/ui/components/EnterpriseCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component EnterpriseCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/EnterpriseHero.wrn b/.publish/ui/components/EnterpriseHero.wrn deleted file mode 100644 index eb5fda6d..00000000 --- a/.publish/ui/components/EnterpriseHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component EnterpriseHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/EnterprisePricingCard.wrn b/.publish/ui/components/EnterprisePricingCard.wrn deleted file mode 100644 index 420f76fd..00000000 --- a/.publish/ui/components/EnterprisePricingCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EnterprisePricingCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/EnvironmentSelector.wrn b/.publish/ui/components/EnvironmentSelector.wrn deleted file mode 100644 index 0f5585bf..00000000 --- a/.publish/ui/components/EnvironmentSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component EnvironmentSelector { - props { - label = "Environment" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/EnvironmentSwitcher.wrn b/.publish/ui/components/EnvironmentSwitcher.wrn deleted file mode 100644 index 36b25835..00000000 --- a/.publish/ui/components/EnvironmentSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EnvironmentSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ErrorActions.wrn b/.publish/ui/components/ErrorActions.wrn deleted file mode 100644 index 4ea87d53..00000000 --- a/.publish/ui/components/ErrorActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ErrorActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ErrorCard.wrn b/.publish/ui/components/ErrorCard.wrn deleted file mode 100644 index 8d80152c..00000000 --- a/.publish/ui/components/ErrorCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ErrorCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ErrorCode.wrn b/.publish/ui/components/ErrorCode.wrn deleted file mode 100644 index 50e60779..00000000 --- a/.publish/ui/components/ErrorCode.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ErrorCode { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ErrorHero.wrn b/.publish/ui/components/ErrorHero.wrn deleted file mode 100644 index 11cb3fdc..00000000 --- a/.publish/ui/components/ErrorHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ErrorHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ErrorIllustration.wrn b/.publish/ui/components/ErrorIllustration.wrn deleted file mode 100644 index c588c2b2..00000000 --- a/.publish/ui/components/ErrorIllustration.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ErrorIllustration { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ErrorPage.wrn b/.publish/ui/components/ErrorPage.wrn deleted file mode 100644 index 74749556..00000000 --- a/.publish/ui/components/ErrorPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ErrorPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ErrorPageShell.wrn b/.publish/ui/components/ErrorPageShell.wrn deleted file mode 100644 index 9fd5e587..00000000 --- a/.publish/ui/components/ErrorPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ErrorPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ErrorState.wrn b/.publish/ui/components/ErrorState.wrn deleted file mode 100644 index b3776e7d..00000000 --- a/.publish/ui/components/ErrorState.wrn +++ /dev/null @@ -1,193 +0,0 @@ -component ErrorState { - props { - class: string = "" - type = "error" - - eyebrow = "" - title = "Something went wrong" - description = "" - - errorCode = "" - - iconClass = "" - - primaryLabel = "" - primaryHref = "" - - secondaryLabel = "" - secondaryHref = "" - - retryLabel = "" - retryAction = "" - - centered = true - compact = false - - details = [] - } - - view { -
-
- - - -
-
- -
-
- - - - - -
-
- - -
- - {errorCode} - -
- - -

- {eyebrow} -

- - -

- {title} -

- - -

- {description} -

- - -
- {#each details.slice(0, 4) as detail} -
- - - - - {detail.label} -
- {/each} -
- - -
- - - {secondaryLabel} - - - - - - - - {primaryLabel} - - - -
-
-
-
-
- } -} diff --git a/.publish/ui/components/ErrorSupportLink.wrn b/.publish/ui/components/ErrorSupportLink.wrn deleted file mode 100644 index f1ae500b..00000000 --- a/.publish/ui/components/ErrorSupportLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ErrorSupportLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/EstimatedCostSummary.wrn b/.publish/ui/components/EstimatedCostSummary.wrn deleted file mode 100644 index 7ecf7ad0..00000000 --- a/.publish/ui/components/EstimatedCostSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EstimatedCostSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/EventTable.wrn b/.publish/ui/components/EventTable.wrn deleted file mode 100644 index 0c1f65d0..00000000 --- a/.publish/ui/components/EventTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component EventTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ExpandableText.wrn b/.publish/ui/components/ExpandableText.wrn deleted file mode 100644 index bdd2e5e6..00000000 --- a/.publish/ui/components/ExpandableText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ExpandableText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ExpiryDateTimePicker.wrn b/.publish/ui/components/ExpiryDateTimePicker.wrn deleted file mode 100644 index f82dc331..00000000 --- a/.publish/ui/components/ExpiryDateTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ExpiryDateTimePicker { - props { - label = "ExpiryDateTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ExportProgress.wrn b/.publish/ui/components/ExportProgress.wrn deleted file mode 100644 index 86cc638a..00000000 --- a/.publish/ui/components/ExportProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ExportProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/ExternalLink.wrn b/.publish/ui/components/ExternalLink.wrn deleted file mode 100644 index 25122f36..00000000 --- a/.publish/ui/components/ExternalLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ExternalLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/EyebrowText.wrn b/.publish/ui/components/EyebrowText.wrn deleted file mode 100644 index 13120bda..00000000 --- a/.publish/ui/components/EyebrowText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component EyebrowText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/FAQ.wrn b/.publish/ui/components/FAQ.wrn deleted file mode 100644 index bc205fde..00000000 --- a/.publish/ui/components/FAQ.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FAQ { - props { - class = "" - eyebrow = "" - title = "Frequently asked questions" - description = "" - items = [] - centered = true - allowMultiple = false - defaultOpenIndex = 0 - } - view { } -} diff --git a/.publish/ui/components/FAQAccordion.wrn b/.publish/ui/components/FAQAccordion.wrn deleted file mode 100644 index 520692d7..00000000 --- a/.publish/ui/components/FAQAccordion.wrn +++ /dev/null @@ -1,235 +0,0 @@ -component FAQAccordion { - props { - class = "" - eyebrow = "" - title = "Frequently asked questions" - description = "" - - items = [] - - centered = true - compact = false - - allowMultiple = false - defaultOpenIndex = 0 - - showContact = false - contactText = "Still have questions?" - contactLabel = "Contact support" - contactHref = "/support" - } - - state openIndexes = defaultOpenIndex >= 0 ? [defaultOpenIndex] : [] - - functions { - function isOpen(index) { - return openIndexes.includes(index) - } - - function toggleItem(index) { - if (isOpen(index)) { - openIndexes = openIndexes.filter( - (itemIndex) => itemIndex !== index - ) - } else if (allowMultiple) { - openIndexes = [...openIndexes, index] - } else { - openIndexes = [index] - } - } - } - - view { -
-
-
- -
- -

- {eyebrow} -

- - -

- {title} -

- - -

- {description} -

- - -
-
- - - - -
-

- {contactText} -

- - {#if contactLabel !== '' && contactHref !== ''} - - {contactLabel} - - - - {/if} -
-
-
-
- - -
-
- {#each items as item, index} -
-

- -

- -
-
-
-
-

- {item.answer} -

- - {#if item.linkLabel !== '' && item.href !== ''} - - {item.linkLabel} - - - - {/if} -
-
-
-
-
- {/each} -
-
-
-
- - - -
- } -} diff --git a/.publish/ui/components/FactorCard.wrn b/.publish/ui/components/FactorCard.wrn deleted file mode 100644 index 9f92c2ec..00000000 --- a/.publish/ui/components/FactorCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FactorCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/FallbackRouteBuilder.wrn b/.publish/ui/components/FallbackRouteBuilder.wrn deleted file mode 100644 index 11a3ba03..00000000 --- a/.publish/ui/components/FallbackRouteBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FallbackRouteBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/FallbackRouteDiagram.wrn b/.publish/ui/components/FallbackRouteDiagram.wrn deleted file mode 100644 index c0239371..00000000 --- a/.publish/ui/components/FallbackRouteDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FallbackRouteDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/FaviconUpload.wrn b/.publish/ui/components/FaviconUpload.wrn deleted file mode 100644 index 12eefaf9..00000000 --- a/.publish/ui/components/FaviconUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FaviconUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/FaxInput.wrn b/.publish/ui/components/FaxInput.wrn deleted file mode 100644 index ca45115c..00000000 --- a/.publish/ui/components/FaxInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FaxInput { - props { - label = "Fax" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FeatureCard.wrn b/.publish/ui/components/FeatureCard.wrn deleted file mode 100644 index dcf950cc..00000000 --- a/.publish/ui/components/FeatureCard.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component FeatureCard { - props { - class = "" - icon = "icon-[lucide--sparkles]" - title = "Feature" - description = "" - href = "" - } - view { - - } -} diff --git a/.publish/ui/components/FeatureChecklist.wrn b/.publish/ui/components/FeatureChecklist.wrn deleted file mode 100644 index a1dc3b99..00000000 --- a/.publish/ui/components/FeatureChecklist.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component FeatureChecklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
{#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
- } -} diff --git a/.publish/ui/components/FeatureComparisonTable.wrn b/.publish/ui/components/FeatureComparisonTable.wrn deleted file mode 100644 index 1e55f634..00000000 --- a/.publish/ui/components/FeatureComparisonTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FeatureComparisonTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/FeatureDetailsPanel.wrn b/.publish/ui/components/FeatureDetailsPanel.wrn deleted file mode 100644 index 12146226..00000000 --- a/.publish/ui/components/FeatureDetailsPanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FeatureDetailsPanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/FeatureGrid.wrn b/.publish/ui/components/FeatureGrid.wrn deleted file mode 100644 index c3b19a2f..00000000 --- a/.publish/ui/components/FeatureGrid.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component FeatureGrid { - props { - columns = 3 - className = "" - } - view { -
- } -} diff --git a/.publish/ui/components/FeatureIconCard.wrn b/.publish/ui/components/FeatureIconCard.wrn deleted file mode 100644 index 4b88987b..00000000 --- a/.publish/ui/components/FeatureIconCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FeatureIconCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/FeatureList.wrn b/.publish/ui/components/FeatureList.wrn deleted file mode 100644 index 3dc59590..00000000 --- a/.publish/ui/components/FeatureList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FeatureList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/FeatureTabs.wrn b/.publish/ui/components/FeatureTabs.wrn deleted file mode 100644 index 8e323491..00000000 --- a/.publish/ui/components/FeatureTabs.wrn +++ /dev/null @@ -1,32 +0,0 @@ -component FeatureTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - - view { -
- {#if image} - {alt} - {/if} - -
- {#if eyebrow}

{eyebrow}

{/if} - {#if title}

{title}

{/if} - {#if description}

{description}

{/if} -
- {#if href} - - {actionLabel} - - {/if} -
-
- } -} diff --git a/.publish/ui/components/FeatureTimeline.wrn b/.publish/ui/components/FeatureTimeline.wrn deleted file mode 100644 index d04b97f9..00000000 --- a/.publish/ui/components/FeatureTimeline.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FeatureTimeline { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/FeatureUnavailableState.wrn b/.publish/ui/components/FeatureUnavailableState.wrn deleted file mode 100644 index 53d6ad9f..00000000 --- a/.publish/ui/components/FeatureUnavailableState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FeatureUnavailableState { - props { - label = "FeatureUnavailable" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FeaturedBlogCard.wrn b/.publish/ui/components/FeaturedBlogCard.wrn deleted file mode 100644 index 829c11a6..00000000 --- a/.publish/ui/components/FeaturedBlogCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FeaturedBlogCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/FieldActions.wrn b/.publish/ui/components/FieldActions.wrn deleted file mode 100644 index 931903b4..00000000 --- a/.publish/ui/components/FieldActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FieldActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/FileInput.wrn b/.publish/ui/components/FileInput.wrn index 722bf73b..fa88e751 100644 --- a/.publish/ui/components/FileInput.wrn +++ b/.publish/ui/components/FileInput.wrn @@ -1,16 +1,20 @@ component FileInput { props { - label = "File" + size = "default" + color = "primary" + label = "File Input" name = "" value = "" placeholder = "" - type = "text" - required = false + type = "file" + min = "" + max = "" + step = "" disabled = false - readonly = false - help = "" - error = "" + required = false class = "" } - view { } + view { + + } } diff --git a/.publish/ui/components/FileList.wrn b/.publish/ui/components/FileList.wrn deleted file mode 100644 index 4852cb4c..00000000 --- a/.publish/ui/components/FileList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FileList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/FileSizeInput.wrn b/.publish/ui/components/FileSizeInput.wrn deleted file mode 100644 index 2d9c7e21..00000000 --- a/.publish/ui/components/FileSizeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FileSizeInput { - props { - label = "FileSize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FileSizeLabel.wrn b/.publish/ui/components/FileSizeLabel.wrn deleted file mode 100644 index 4b01894f..00000000 --- a/.publish/ui/components/FileSizeLabel.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FileSizeLabel { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/FileTypeBadge.wrn b/.publish/ui/components/FileTypeBadge.wrn deleted file mode 100644 index 0859b24d..00000000 --- a/.publish/ui/components/FileTypeBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FileTypeBadge { - props { - label = "FileType" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FileUpload.wrn b/.publish/ui/components/FileUpload.wrn index f31cbfb4..1c865011 100644 --- a/.publish/ui/components/FileUpload.wrn +++ b/.publish/ui/components/FileUpload.wrn @@ -1,14 +1,19 @@ component FileUpload { props { + size = "default" + color = "primary" + title = "File Upload" + description = "" + items = [] + variant = "default" class = "" - id = "file" - name = "file" - label = "Upload file" - accept = "" - multiple = false - help = "Drag and drop or browse" } view { - +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
} } diff --git a/.publish/ui/components/FileUploadProgress.wrn b/.publish/ui/components/FileUploadProgress.wrn new file mode 100644 index 00000000..bbbfd97b --- /dev/null +++ b/.publish/ui/components/FileUploadProgress.wrn @@ -0,0 +1,17 @@ +component FileUploadProgress { + props { + size = "default" + color = "primary" + label = "Progress" + value = 50 + max = 100 + showValue = true + class = "" + } + view { +
+
{label}{#if showValue}{value}%{/if}
+ +
+ } +} diff --git a/.publish/ui/components/FilterBar.wrn b/.publish/ui/components/FilterBar.wrn deleted file mode 100644 index 26b93a9e..00000000 --- a/.publish/ui/components/FilterBar.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component FilterBar { - props { - label = "Filters" - clearLabel = "Clear filters" - showClear = true - class = "" - } - view {
} -} diff --git a/.publish/ui/components/FilterMenu.wrn b/.publish/ui/components/FilterMenu.wrn deleted file mode 100644 index 4b2adc4f..00000000 --- a/.publish/ui/components/FilterMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FilterMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/FilterSearchInput.wrn b/.publish/ui/components/FilterSearchInput.wrn deleted file mode 100644 index 154a74b3..00000000 --- a/.publish/ui/components/FilterSearchInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FilterSearchInput { - props { - label = "FilterSearch" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FilterableTable.wrn b/.publish/ui/components/FilterableTable.wrn deleted file mode 100644 index 5af1b937..00000000 --- a/.publish/ui/components/FilterableTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FilterableTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/FinalCTA.wrn b/.publish/ui/components/FinalCTA.wrn deleted file mode 100644 index e6048ae1..00000000 --- a/.publish/ui/components/FinalCTA.wrn +++ /dev/null @@ -1,68 +0,0 @@ -component FinalCTA { - props { - label = "Get started" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - - view { - - {#if href} - {#if variant === "primary"} - - {label} - - - - {:else} - - {label} - - - - {/if} - {:else} - {#if variant === "primary"} - - {:else} - - {/if} - {/if} - - } -} diff --git a/.publish/ui/components/FirstNameInput.wrn b/.publish/ui/components/FirstNameInput.wrn deleted file mode 100644 index 2ea59f0b..00000000 --- a/.publish/ui/components/FirstNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FirstNameInput { - props { - label = "FirstName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Flex.wrn b/.publish/ui/components/Flex.wrn deleted file mode 100644 index ab47d721..00000000 --- a/.publish/ui/components/Flex.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Flex { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/FontPicker.wrn b/.publish/ui/components/FontPicker.wrn deleted file mode 100644 index b0eeab00..00000000 --- a/.publish/ui/components/FontPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FontPicker { - props { - label = "Font" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FontSizePicker.wrn b/.publish/ui/components/FontSizePicker.wrn deleted file mode 100644 index 9582d2a2..00000000 --- a/.publish/ui/components/FontSizePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FontSizePicker { - props { - label = "FontSize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FontWeightPicker.wrn b/.publish/ui/components/FontWeightPicker.wrn deleted file mode 100644 index 5c184d30..00000000 --- a/.publish/ui/components/FontWeightPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FontWeightPicker { - props { - label = "FontWeight" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FooterLanguageSwitcher.wrn b/.publish/ui/components/FooterLanguageSwitcher.wrn deleted file mode 100644 index 92dc9730..00000000 --- a/.publish/ui/components/FooterLanguageSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FooterLanguageSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/FooterStatusIndicator.wrn b/.publish/ui/components/FooterStatusIndicator.wrn deleted file mode 100644 index 958151c5..00000000 --- a/.publish/ui/components/FooterStatusIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FooterStatusIndicator { - props { - label = "FooterStatus" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ForbiddenPage.wrn b/.publish/ui/components/ForbiddenPage.wrn deleted file mode 100644 index fc13981f..00000000 --- a/.publish/ui/components/ForbiddenPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ForbiddenPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ForbiddenState.wrn b/.publish/ui/components/ForbiddenState.wrn deleted file mode 100644 index 5e17af06..00000000 --- a/.publish/ui/components/ForbiddenState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ForbiddenState { - props { - label = "Forbidden" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ForgotPasswordForm.wrn b/.publish/ui/components/ForgotPasswordForm.wrn deleted file mode 100644 index 123da4a7..00000000 --- a/.publish/ui/components/ForgotPasswordForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ForgotPasswordForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Form.wrn b/.publish/ui/components/Form.wrn deleted file mode 100644 index fccdbcc9..00000000 --- a/.publish/ui/components/Form.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component Form { - props { - action = "" - method = "post" - name = "" - loading = false - class = "" - } - view { -
- } -} diff --git a/.publish/ui/components/FormActions.wrn b/.publish/ui/components/FormActions.wrn deleted file mode 100644 index 3b152799..00000000 --- a/.publish/ui/components/FormActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FormActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/FormAlert.wrn b/.publish/ui/components/FormAlert.wrn deleted file mode 100644 index 1af27cec..00000000 --- a/.publish/ui/components/FormAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FormAlert { - props { - label = "Form" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FormDialog.wrn b/.publish/ui/components/FormDialog.wrn deleted file mode 100644 index 0f62d212..00000000 --- a/.publish/ui/components/FormDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/FormError.wrn b/.publish/ui/components/FormError.wrn deleted file mode 100644 index c4ba8430..00000000 --- a/.publish/ui/components/FormError.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component FormError { - props { - id = "" - message = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FormErrorSummary.wrn b/.publish/ui/components/FormErrorSummary.wrn deleted file mode 100644 index bfca2381..00000000 --- a/.publish/ui/components/FormErrorSummary.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormErrorSummary { - props { - class = "" - title = "Please fix the following" - visible = true - } - view { - - } -} diff --git a/.publish/ui/components/FormField.wrn b/.publish/ui/components/FormField.wrn deleted file mode 100644 index 77b98a2d..00000000 --- a/.publish/ui/components/FormField.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component FormField { - props { - class = "" - label = "Field" - help = "" - error = "" - required = false - } - view { -
{label}*

{help}

- } -} diff --git a/.publish/ui/components/FormGrid.wrn b/.publish/ui/components/FormGrid.wrn deleted file mode 100644 index 4933d481..00000000 --- a/.publish/ui/components/FormGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/FormGroup.wrn b/.publish/ui/components/FormGroup.wrn deleted file mode 100644 index d508762a..00000000 --- a/.publish/ui/components/FormGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FormGroup { - props { - label = "Form" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/FormHelpText.wrn b/.publish/ui/components/FormHelpText.wrn deleted file mode 100644 index 6d7bfdd1..00000000 --- a/.publish/ui/components/FormHelpText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component FormHelpText { - props { - id = "" - text = "" - class = "" - } - view {

{text}

} -} diff --git a/.publish/ui/components/FormLabel.wrn b/.publish/ui/components/FormLabel.wrn deleted file mode 100644 index 9f181812..00000000 --- a/.publish/ui/components/FormLabel.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component FormLabel { - props { - for = "" - label = "Label" - required = false - optional = false - class = "" - } - view { - - } -} diff --git a/.publish/ui/components/FormProgress.wrn b/.publish/ui/components/FormProgress.wrn deleted file mode 100644 index 92452fe1..00000000 --- a/.publish/ui/components/FormProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FormProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/FormRow.wrn b/.publish/ui/components/FormRow.wrn deleted file mode 100644 index 66ef9d67..00000000 --- a/.publish/ui/components/FormRow.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormRow { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/FormSection.wrn b/.publish/ui/components/FormSection.wrn deleted file mode 100644 index aba384c9..00000000 --- a/.publish/ui/components/FormSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/FullBleed.wrn b/.publish/ui/components/FullBleed.wrn deleted file mode 100644 index f84b6803..00000000 --- a/.publish/ui/components/FullBleed.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component FullBleed { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/FullscreenDialog.wrn b/.publish/ui/components/FullscreenDialog.wrn deleted file mode 100644 index 9a4b2d89..00000000 --- a/.publish/ui/components/FullscreenDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FullscreenDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/FunnelChart.wrn b/.publish/ui/components/FunnelChart.wrn deleted file mode 100644 index cb714492..00000000 --- a/.publish/ui/components/FunnelChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FunnelChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/GeoChart.wrn b/.publish/ui/components/GeoChart.wrn deleted file mode 100644 index b448088f..00000000 --- a/.publish/ui/components/GeoChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component GeoChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/GeofenceEditor.wrn b/.publish/ui/components/GeofenceEditor.wrn deleted file mode 100644 index 15f61f70..00000000 --- a/.publish/ui/components/GeofenceEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component GeofenceEditor { - props { - label = "Geofence" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/GhostButton.wrn b/.publish/ui/components/GhostButton.wrn deleted file mode 100644 index 92ee083a..00000000 --- a/.publish/ui/components/GhostButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component GhostButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/GlassCard.wrn b/.publish/ui/components/GlassCard.wrn deleted file mode 100644 index 60847bae..00000000 --- a/.publish/ui/components/GlassCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component GlassCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/GlobalSearch.wrn b/.publish/ui/components/GlobalSearch.wrn deleted file mode 100644 index 9d9c555b..00000000 --- a/.publish/ui/components/GlobalSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GlobalSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/GradientCTA.wrn b/.publish/ui/components/GradientCTA.wrn deleted file mode 100644 index f1df07ee..00000000 --- a/.publish/ui/components/GradientCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component GradientCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/GradientPicker.wrn b/.publish/ui/components/GradientPicker.wrn deleted file mode 100644 index 01992cd4..00000000 --- a/.publish/ui/components/GradientPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component GradientPicker { - props { - label = "Gradient" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/GradientStopEditor.wrn b/.publish/ui/components/GradientStopEditor.wrn deleted file mode 100644 index 055dd545..00000000 --- a/.publish/ui/components/GradientStopEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component GradientStopEditor { - props { - label = "GradientStop" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/GuideCard.wrn b/.publish/ui/components/GuideCard.wrn deleted file mode 100644 index 57fde5ad..00000000 --- a/.publish/ui/components/GuideCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GuideCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/GuideChecklist.wrn b/.publish/ui/components/GuideChecklist.wrn deleted file mode 100644 index 30655b0c..00000000 --- a/.publish/ui/components/GuideChecklist.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GuideChecklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/GuideDifficultyBadge.wrn b/.publish/ui/components/GuideDifficultyBadge.wrn deleted file mode 100644 index 847bb1ef..00000000 --- a/.publish/ui/components/GuideDifficultyBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component GuideDifficultyBadge { - props { - label = "GuideDifficulty" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/GuideGrid.wrn b/.publish/ui/components/GuideGrid.wrn deleted file mode 100644 index 1feae40b..00000000 --- a/.publish/ui/components/GuideGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component GuideGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/GuideStep.wrn b/.publish/ui/components/GuideStep.wrn deleted file mode 100644 index e9b95ff4..00000000 --- a/.publish/ui/components/GuideStep.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GuideStep { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Header.wrn b/.publish/ui/components/Header.wrn deleted file mode 100644 index 071beed7..00000000 --- a/.publish/ui/components/Header.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component Header { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/HeaderActions.wrn b/.publish/ui/components/HeaderActions.wrn deleted file mode 100644 index 6bde395f..00000000 --- a/.publish/ui/components/HeaderActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeaderActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/HealthIndicator.wrn b/.publish/ui/components/HealthIndicator.wrn deleted file mode 100644 index 43468c6b..00000000 --- a/.publish/ui/components/HealthIndicator.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component HealthIndicator { - props { - label = "Health" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/Hero.wrn b/.publish/ui/components/Hero.wrn deleted file mode 100644 index b8aac408..00000000 --- a/.publish/ui/components/Hero.wrn +++ /dev/null @@ -1,17 +0,0 @@ -component Hero { - props { - class = "" - eyebrow = "" - title = "Build faster with WRNexusJS" - highlight = "" - description = "" - primaryLabel = "Get started" - primaryHref = "#" - secondaryLabel = "Learn more" - secondaryHref = "#" - align = "center" - } - view { -

{title} {highlight}

{description}

{primaryLabel}{secondaryLabel}
- } -} diff --git a/.publish/ui/components/HeroActions.wrn b/.publish/ui/components/HeroActions.wrn deleted file mode 100644 index ca1d1b07..00000000 --- a/.publish/ui/components/HeroActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeroActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/HeroCodePanel.wrn b/.publish/ui/components/HeroCodePanel.wrn deleted file mode 100644 index c0dd1a88..00000000 --- a/.publish/ui/components/HeroCodePanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component HeroCodePanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/HeroGradientText.wrn b/.publish/ui/components/HeroGradientText.wrn deleted file mode 100644 index d277e268..00000000 --- a/.publish/ui/components/HeroGradientText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HeroGradientText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/HeroPrimaryAction.wrn b/.publish/ui/components/HeroPrimaryAction.wrn deleted file mode 100644 index 9fdf8f1e..00000000 --- a/.publish/ui/components/HeroPrimaryAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeroPrimaryAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/HeroProductPreview.wrn b/.publish/ui/components/HeroProductPreview.wrn deleted file mode 100644 index da9bb31a..00000000 --- a/.publish/ui/components/HeroProductPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HeroProductPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/HeroSecondaryAction.wrn b/.publish/ui/components/HeroSecondaryAction.wrn deleted file mode 100644 index c42ba5d7..00000000 --- a/.publish/ui/components/HeroSecondaryAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeroSecondaryAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/HeroTrustText.wrn b/.publish/ui/components/HeroTrustText.wrn deleted file mode 100644 index 3550bb9c..00000000 --- a/.publish/ui/components/HeroTrustText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HeroTrustText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/HexColorInput.wrn b/.publish/ui/components/HexColorInput.wrn deleted file mode 100644 index 47076d66..00000000 --- a/.publish/ui/components/HexColorInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HexColorInput { - props { - label = "HexColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/HiddenField.wrn b/.publish/ui/components/HiddenField.wrn deleted file mode 100644 index 1c634c2a..00000000 --- a/.publish/ui/components/HiddenField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HiddenField { - props { - label = "Hidden" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/HighlightText.wrn b/.publish/ui/components/HighlightText.wrn deleted file mode 100644 index 872ce24c..00000000 --- a/.publish/ui/components/HighlightText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HighlightText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/HolidayCalendar.wrn b/.publish/ui/components/HolidayCalendar.wrn deleted file mode 100644 index 7c0fb8ee..00000000 --- a/.publish/ui/components/HolidayCalendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HolidayCalendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/HostnameInput.wrn b/.publish/ui/components/HostnameInput.wrn deleted file mode 100644 index 2a1df988..00000000 --- a/.publish/ui/components/HostnameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HostnameInput { - props { - label = "Hostname" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/HourPicker.wrn b/.publish/ui/components/HourPicker.wrn deleted file mode 100644 index 2931e4c6..00000000 --- a/.publish/ui/components/HourPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HourPicker { - props { - label = "Hour" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/HslColorInput.wrn b/.publish/ui/components/HslColorInput.wrn deleted file mode 100644 index ba20721d..00000000 --- a/.publish/ui/components/HslColorInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HslColorInput { - props { - label = "HslColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/HtmlEditor.wrn b/.publish/ui/components/HtmlEditor.wrn deleted file mode 100644 index ff2c2525..00000000 --- a/.publish/ui/components/HtmlEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HtmlEditor { - props { - label = "Html" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/HumanApprovalStep.wrn b/.publish/ui/components/HumanApprovalStep.wrn deleted file mode 100644 index cc865e21..00000000 --- a/.publish/ui/components/HumanApprovalStep.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HumanApprovalStep { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Icon.wrn b/.publish/ui/components/Icon.wrn deleted file mode 100644 index 3cb40b0a..00000000 --- a/.publish/ui/components/Icon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Icon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/IconButton.wrn b/.publish/ui/components/IconButton.wrn deleted file mode 100644 index 86877d10..00000000 --- a/.publish/ui/components/IconButton.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component IconButton { - props { - class = "" - label = "Action" - icon = "•" - variant = "ghost" - disabled = false - } - view { } -} diff --git a/.publish/ui/components/IconPicker.wrn b/.publish/ui/components/IconPicker.wrn deleted file mode 100644 index af3c82bb..00000000 --- a/.publish/ui/components/IconPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IconPicker { - props { - label = "Icon" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/IconSelector.wrn b/.publish/ui/components/IconSelector.wrn deleted file mode 100644 index dbbe3bef..00000000 --- a/.publish/ui/components/IconSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IconSelector { - props { - label = "Icon" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/IdentifierInput.wrn b/.publish/ui/components/IdentifierInput.wrn deleted file mode 100644 index cc110a0c..00000000 --- a/.publish/ui/components/IdentifierInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IdentifierInput { - props { - label = "Identifier" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Illustration.wrn b/.publish/ui/components/Illustration.wrn deleted file mode 100644 index 466b378b..00000000 --- a/.publish/ui/components/Illustration.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Illustration { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Image.wrn b/.publish/ui/components/Image.wrn new file mode 100644 index 00000000..5f03305e --- /dev/null +++ b/.publish/ui/components/Image.wrn @@ -0,0 +1,19 @@ +component Image { + props { + size = "default" + color = "primary" + src = "" + alt = "" + width = "" + height = "" + loading = "lazy" + rounded = false + class = "" + } + view { +
+ {alt} + +
+ } +} diff --git a/.publish/ui/components/ImageCompressionPreview.wrn b/.publish/ui/components/ImageCompressionPreview.wrn deleted file mode 100644 index 123877e6..00000000 --- a/.publish/ui/components/ImageCompressionPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ImageCompressionPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ImageEditor.wrn b/.publish/ui/components/ImageEditor.wrn deleted file mode 100644 index 8b82527d..00000000 --- a/.publish/ui/components/ImageEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ImageEditor { - props { - label = "Image" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ImagePreviewDialog.wrn b/.publish/ui/components/ImagePreviewDialog.wrn deleted file mode 100644 index d674ca03..00000000 --- a/.publish/ui/components/ImagePreviewDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ImagePreviewDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/ImageSelector.wrn b/.publish/ui/components/ImageSelector.wrn deleted file mode 100644 index 9ae4b7a8..00000000 --- a/.publish/ui/components/ImageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ImageSelector { - props { - label = "Image" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ImageUpload.wrn b/.publish/ui/components/ImageUpload.wrn deleted file mode 100644 index 4ddd8374..00000000 --- a/.publish/ui/components/ImageUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ImageUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ImportProgress.wrn b/.publish/ui/components/ImportProgress.wrn deleted file mode 100644 index 2d44a338..00000000 --- a/.publish/ui/components/ImportProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ImportProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/IncidentAlert.wrn b/.publish/ui/components/IncidentAlert.wrn deleted file mode 100644 index 059f8a9c..00000000 --- a/.publish/ui/components/IncidentAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentAlert { - props { - label = "Incident" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/IncidentBanner.wrn b/.publish/ui/components/IncidentBanner.wrn deleted file mode 100644 index d31b9a59..00000000 --- a/.publish/ui/components/IncidentBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentBanner { - props { - label = "Incident" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/IncidentCard.wrn b/.publish/ui/components/IncidentCard.wrn deleted file mode 100644 index c0410d86..00000000 --- a/.publish/ui/components/IncidentCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component IncidentCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/IncidentList.wrn b/.publish/ui/components/IncidentList.wrn deleted file mode 100644 index 273a15cd..00000000 --- a/.publish/ui/components/IncidentList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component IncidentList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/IncidentResponseFlow.wrn b/.publish/ui/components/IncidentResponseFlow.wrn deleted file mode 100644 index 0745cefd..00000000 --- a/.publish/ui/components/IncidentResponseFlow.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentResponseFlow { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/IncidentSeverityBadge.wrn b/.publish/ui/components/IncidentSeverityBadge.wrn deleted file mode 100644 index fbb29e4a..00000000 --- a/.publish/ui/components/IncidentSeverityBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentSeverityBadge { - props { - label = "IncidentSeverity" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/IncidentTimeline.wrn b/.publish/ui/components/IncidentTimeline.wrn deleted file mode 100644 index 470394cd..00000000 --- a/.publish/ui/components/IncidentTimeline.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentTimeline { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/IndustryBadge.wrn b/.publish/ui/components/IndustryBadge.wrn deleted file mode 100644 index c0f144a0..00000000 --- a/.publish/ui/components/IndustryBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IndustryBadge { - props { - label = "Industry" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/IndustrySelector.wrn b/.publish/ui/components/IndustrySelector.wrn deleted file mode 100644 index a92553b4..00000000 --- a/.publish/ui/components/IndustrySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IndustrySelector { - props { - label = "Industry" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/InfoCard.wrn b/.publish/ui/components/InfoCard.wrn deleted file mode 100644 index b7e30903..00000000 --- a/.publish/ui/components/InfoCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component InfoCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Inline.wrn b/.publish/ui/components/Inline.wrn deleted file mode 100644 index 43cc7fbd..00000000 --- a/.publish/ui/components/Inline.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component Inline { - props { - gap = "4" - className = "" - } - view { -
- } -} diff --git a/.publish/ui/components/InlineAlert.wrn b/.publish/ui/components/InlineAlert.wrn deleted file mode 100644 index 08fb34ca..00000000 --- a/.publish/ui/components/InlineAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component InlineAlert { - props { - label = "Inline" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/InlineCode.wrn b/.publish/ui/components/InlineCode.wrn deleted file mode 100644 index ea2efaa7..00000000 --- a/.publish/ui/components/InlineCode.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component InlineCode { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/InputGroup.wrn b/.publish/ui/components/InputGroup.wrn index 7bc00faf..69087104 100644 --- a/.publish/ui/components/InputGroup.wrn +++ b/.publish/ui/components/InputGroup.wrn @@ -1,16 +1,20 @@ component InputGroup { props { - label = "Input" + size = "default" + color = "primary" + label = "Input Group" name = "" value = "" placeholder = "" type = "text" - required = false + min = "" + max = "" + step = "" disabled = false - readonly = false - help = "" - error = "" + required = false class = "" } - view { } + view { + + } } diff --git a/.publish/ui/components/InputNumber.wrn b/.publish/ui/components/InputNumber.wrn new file mode 100644 index 00000000..4b205de1 --- /dev/null +++ b/.publish/ui/components/InputNumber.wrn @@ -0,0 +1,20 @@ +component InputNumber { + props { + size = "default" + color = "primary" + label = "Input Number" + name = "" + value = "" + placeholder = "" + type = "number" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/InsetPanel.wrn b/.publish/ui/components/InsetPanel.wrn deleted file mode 100644 index 2584d3f7..00000000 --- a/.publish/ui/components/InsetPanel.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component InsetPanel { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/IntegerInput.wrn b/.publish/ui/components/IntegerInput.wrn deleted file mode 100644 index d07658b0..00000000 --- a/.publish/ui/components/IntegerInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IntegerInput { - props { - label = "Integer" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/IntegrationCard.wrn b/.publish/ui/components/IntegrationCard.wrn deleted file mode 100644 index e4fd9d30..00000000 --- a/.publish/ui/components/IntegrationCard.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component IntegrationCard { - props { - title = "" - description = "" - href = "" - icon = "icon-[lucide--plug-zap]" - class = "" - } - view {
{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}Open {title}{/if}
} -} diff --git a/.publish/ui/components/InvoiceLineItem.wrn b/.publish/ui/components/InvoiceLineItem.wrn deleted file mode 100644 index 5bfa739e..00000000 --- a/.publish/ui/components/InvoiceLineItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component InvoiceLineItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/InvoiceSummary.wrn b/.publish/ui/components/InvoiceSummary.wrn deleted file mode 100644 index 1de0700f..00000000 --- a/.publish/ui/components/InvoiceSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component InvoiceSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/IpAddressInput.wrn b/.publish/ui/components/IpAddressInput.wrn deleted file mode 100644 index 98a6c98c..00000000 --- a/.publish/ui/components/IpAddressInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IpAddressInput { - props { - label = "IpAddress" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/JobCard.wrn b/.publish/ui/components/JobCard.wrn deleted file mode 100644 index f3b76c9a..00000000 --- a/.publish/ui/components/JobCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component JobCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/JobProgress.wrn b/.publish/ui/components/JobProgress.wrn deleted file mode 100644 index f1cf0c4d..00000000 --- a/.publish/ui/components/JobProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component JobProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/JobTitleInput.wrn b/.publish/ui/components/JobTitleInput.wrn deleted file mode 100644 index a62fc7f9..00000000 --- a/.publish/ui/components/JobTitleInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component JobTitleInput { - props { - label = "JobTitle" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/JsonInput.wrn b/.publish/ui/components/JsonInput.wrn deleted file mode 100644 index 1704cb10..00000000 --- a/.publish/ui/components/JsonInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component JsonInput { - props { - label = "Json" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/JsonViewer.wrn b/.publish/ui/components/JsonViewer.wrn deleted file mode 100644 index 6cf7a2c1..00000000 --- a/.publish/ui/components/JsonViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component JsonViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Kbd.wrn b/.publish/ui/components/Kbd.wrn new file mode 100644 index 00000000..e14edc4c --- /dev/null +++ b/.publish/ui/components/Kbd.wrn @@ -0,0 +1,9 @@ +component Kbd { + props { + size = "default" + color = "primary" + label = "⌘ K" + class = "" + } + view { {label} } +} diff --git a/.publish/ui/components/KeyValueTable.wrn b/.publish/ui/components/KeyValueTable.wrn deleted file mode 100644 index 45cc2602..00000000 --- a/.publish/ui/components/KeyValueTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component KeyValueTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/KycDocumentUpload.wrn b/.publish/ui/components/KycDocumentUpload.wrn deleted file mode 100644 index 3d26f7b5..00000000 --- a/.publish/ui/components/KycDocumentUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component KycDocumentUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/LanguageSelector.wrn b/.publish/ui/components/LanguageSelector.wrn deleted file mode 100644 index 14254483..00000000 --- a/.publish/ui/components/LanguageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LanguageSelector { - props { - label = "Language" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LanguageSwitcher.wrn b/.publish/ui/components/LanguageSwitcher.wrn deleted file mode 100644 index d2eaed7e..00000000 --- a/.publish/ui/components/LanguageSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LanguageSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/LastNameInput.wrn b/.publish/ui/components/LastNameInput.wrn deleted file mode 100644 index e135bdfe..00000000 --- a/.publish/ui/components/LastNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LastNameInput { - props { - label = "LastName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LatencyMetric.wrn b/.publish/ui/components/LatencyMetric.wrn deleted file mode 100644 index c2de3220..00000000 --- a/.publish/ui/components/LatencyMetric.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LatencyMetric { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/LatitudeInput.wrn b/.publish/ui/components/LatitudeInput.wrn deleted file mode 100644 index d948428e..00000000 --- a/.publish/ui/components/LatitudeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LatitudeInput { - props { - label = "Latitude" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LayoutSplitter.wrn b/.publish/ui/components/LayoutSplitter.wrn new file mode 100644 index 00000000..0833ebdf --- /dev/null +++ b/.publish/ui/components/LayoutSplitter.wrn @@ -0,0 +1,13 @@ +component LayoutSplitter { + props { + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" + } + view { +
+ } +} diff --git a/.publish/ui/components/LeadText.wrn b/.publish/ui/components/LeadText.wrn deleted file mode 100644 index 829c19ed..00000000 --- a/.publish/ui/components/LeadText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component LeadText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/LeadershipGrid.wrn b/.publish/ui/components/LeadershipGrid.wrn deleted file mode 100644 index 8bba82c8..00000000 --- a/.publish/ui/components/LeadershipGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LeadershipGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/LegalAcceptanceNotice.wrn b/.publish/ui/components/LegalAcceptanceNotice.wrn deleted file mode 100644 index 61d65317..00000000 --- a/.publish/ui/components/LegalAcceptanceNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalAcceptanceNotice { - props { - label = "LegalAcceptance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LegalBulletList.wrn b/.publish/ui/components/LegalBulletList.wrn deleted file mode 100644 index 39fafdcd..00000000 --- a/.publish/ui/components/LegalBulletList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalBulletList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/LegalContactBlock.wrn b/.publish/ui/components/LegalContactBlock.wrn deleted file mode 100644 index 1a9831ad..00000000 --- a/.publish/ui/components/LegalContactBlock.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LegalContactBlock { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/LegalDefinitionList.wrn b/.publish/ui/components/LegalDefinitionList.wrn deleted file mode 100644 index 6dd2e8b7..00000000 --- a/.publish/ui/components/LegalDefinitionList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalDefinitionList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/LegalDocumentHeader.wrn b/.publish/ui/components/LegalDocumentHeader.wrn deleted file mode 100644 index 6fd50290..00000000 --- a/.publish/ui/components/LegalDocumentHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalDocumentHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/LegalDocumentLayout.wrn b/.publish/ui/components/LegalDocumentLayout.wrn deleted file mode 100644 index b248c5ac..00000000 --- a/.publish/ui/components/LegalDocumentLayout.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalDocumentLayout { - props { - class = "" - title = "Legal document" - effectiveDate = "" - updatedDate = "" - } - view { -

{title}

Effective: {effectiveDate}Updated: {updatedDate}
- } -} diff --git a/.publish/ui/components/LegalHero.wrn b/.publish/ui/components/LegalHero.wrn deleted file mode 100644 index 681b717c..00000000 --- a/.publish/ui/components/LegalHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/LegalLanguageSelector.wrn b/.publish/ui/components/LegalLanguageSelector.wrn deleted file mode 100644 index 179613ba..00000000 --- a/.publish/ui/components/LegalLanguageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LegalLanguageSelector { - props { - label = "LegalLanguage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LegalNotice.wrn b/.publish/ui/components/LegalNotice.wrn deleted file mode 100644 index b17aa543..00000000 --- a/.publish/ui/components/LegalNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalNotice { - props { - label = "Legal" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LegalPageShell.wrn b/.publish/ui/components/LegalPageShell.wrn deleted file mode 100644 index 0c2cbc4e..00000000 --- a/.publish/ui/components/LegalPageShell.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component LegalPageShell { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/LegalPrintButton.wrn b/.publish/ui/components/LegalPrintButton.wrn deleted file mode 100644 index c10634c5..00000000 --- a/.publish/ui/components/LegalPrintButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalPrintButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/LegalRegionSelector.wrn b/.publish/ui/components/LegalRegionSelector.wrn deleted file mode 100644 index 6df40e59..00000000 --- a/.publish/ui/components/LegalRegionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LegalRegionSelector { - props { - label = "LegalRegion" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LegalSection.wrn b/.publish/ui/components/LegalSection.wrn deleted file mode 100644 index a5805825..00000000 --- a/.publish/ui/components/LegalSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/LegalSummary.wrn b/.publish/ui/components/LegalSummary.wrn deleted file mode 100644 index 50181ead..00000000 --- a/.publish/ui/components/LegalSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LegalSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/LegalTable.wrn b/.publish/ui/components/LegalTable.wrn deleted file mode 100644 index c9555b0e..00000000 --- a/.publish/ui/components/LegalTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/LegalTableOfContents.wrn b/.publish/ui/components/LegalTableOfContents.wrn deleted file mode 100644 index d3aaaf24..00000000 --- a/.publish/ui/components/LegalTableOfContents.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component LegalTableOfContents { - props { - title = "On this page" - items = [] - class = "" - } - view { } -} diff --git a/.publish/ui/components/LegalVersionBadge.wrn b/.publish/ui/components/LegalVersionBadge.wrn deleted file mode 100644 index bb998c00..00000000 --- a/.publish/ui/components/LegalVersionBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalVersionBadge { - props { - label = "LegalVersion" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LegendIndicator.wrn b/.publish/ui/components/LegendIndicator.wrn new file mode 100644 index 00000000..21905dc7 --- /dev/null +++ b/.publish/ui/components/LegendIndicator.wrn @@ -0,0 +1,19 @@ +component LegendIndicator { + props { + size = "default" + color = "primary" + title = "Legend Indicator" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/LetterSpacingPicker.wrn b/.publish/ui/components/LetterSpacingPicker.wrn deleted file mode 100644 index f2a12de8..00000000 --- a/.publish/ui/components/LetterSpacingPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LetterSpacingPicker { - props { - label = "LetterSpacing" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LicenseKeyInput.wrn b/.publish/ui/components/LicenseKeyInput.wrn deleted file mode 100644 index 627fe080..00000000 --- a/.publish/ui/components/LicenseKeyInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LicenseKeyInput { - props { - label = "LicenseKey" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Lightbox.wrn b/.publish/ui/components/Lightbox.wrn deleted file mode 100644 index bbfcfe80..00000000 --- a/.publish/ui/components/Lightbox.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component Lightbox { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/LineChart.wrn b/.publish/ui/components/LineChart.wrn deleted file mode 100644 index 99ab8236..00000000 --- a/.publish/ui/components/LineChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LineChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/LineHeightPicker.wrn b/.publish/ui/components/LineHeightPicker.wrn deleted file mode 100644 index 0dbfa67b..00000000 --- a/.publish/ui/components/LineHeightPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LineHeightPicker { - props { - label = "LineHeight" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Link.wrn b/.publish/ui/components/Link.wrn index cde2a1cb..34d19bee 100644 --- a/.publish/ui/components/Link.wrn +++ b/.publish/ui/components/Link.wrn @@ -1,11 +1,15 @@ component Link { props { - href = "#" + size = "default" + color = "primary" label = "Link" + href = "#" + target = "" + rel = "" external = false - className = "" + class = "" } view { - {label} + {label}{#if external}{/if} } } diff --git a/.publish/ui/components/LinkButton.wrn b/.publish/ui/components/LinkButton.wrn deleted file mode 100644 index d389b088..00000000 --- a/.publish/ui/components/LinkButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component LinkButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/List.wrn b/.publish/ui/components/List.wrn index a0f7f535..12f2e6bd 100644 --- a/.publish/ui/components/List.wrn +++ b/.publish/ui/components/List.wrn @@ -1,10 +1,19 @@ component List { props { - title = "" + size = "default" + color = "primary" + title = "List" description = "" - empty = false - emptyText = "No items available." + items = [] + variant = "default" class = "" } - view {

{title}

{description}

{emptyText}

} + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } } diff --git a/.publish/ui/components/ListGroup.wrn b/.publish/ui/components/ListGroup.wrn new file mode 100644 index 00000000..374e8cfd --- /dev/null +++ b/.publish/ui/components/ListGroup.wrn @@ -0,0 +1,19 @@ +component ListGroup { + props { + size = "default" + color = "primary" + title = "List Group" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/LoadingButton.wrn b/.publish/ui/components/LoadingButton.wrn deleted file mode 100644 index c54574c2..00000000 --- a/.publish/ui/components/LoadingButton.wrn +++ /dev/null @@ -1,14 +0,0 @@ -component LoadingButton { - props { - label = "Continue" - loadingLabel = "Loading…" - loading = false - disabled = false - type = "button" - variant = "primary" - class = "" - } - view { - - } -} diff --git a/.publish/ui/components/LocaleSelector.wrn b/.publish/ui/components/LocaleSelector.wrn deleted file mode 100644 index 5c5abad5..00000000 --- a/.publish/ui/components/LocaleSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LocaleSelector { - props { - label = "Locale" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LocalizedRouteLink.wrn b/.publish/ui/components/LocalizedRouteLink.wrn deleted file mode 100644 index aa4f9c04..00000000 --- a/.publish/ui/components/LocalizedRouteLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LocalizedRouteLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/LocationPicker.wrn b/.publish/ui/components/LocationPicker.wrn deleted file mode 100644 index 0c4d4c8d..00000000 --- a/.publish/ui/components/LocationPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LocationPicker { - props { - label = "Location" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/LogTable.wrn b/.publish/ui/components/LogTable.wrn deleted file mode 100644 index afe95b0f..00000000 --- a/.publish/ui/components/LogTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LogTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/Logo.wrn b/.publish/ui/components/Logo.wrn deleted file mode 100644 index 05e7fb91..00000000 --- a/.publish/ui/components/Logo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Logo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/LogoCloud.wrn b/.publish/ui/components/LogoCloud.wrn deleted file mode 100644 index bc207fd5..00000000 --- a/.publish/ui/components/LogoCloud.wrn +++ /dev/null @@ -1,150 +0,0 @@ -component LogoCloud { - props { - class: string = "" - eyebrow = "" - title = "Trusted by teams building modern products" - description = "" - - logos = [] - - centered = true - compact = false - - variant = "strip" - grayscale = true - showNames = false - maxItems = 8 - } - - view { -
-
- - - -
- -
-

- {eyebrow} -

- -

- {title} -

- -

- {description} -

-
- - -
- {#each logos.slice(0, maxItems) as logo} - - -
- {logo.alt !== '' ? logo.alt : logo.name} - - - -
- - -
-

- {logo.name} -

- -

- {logo.description} -

-
- - {/each} -
- - -

- And {logos.length - maxItems} more teams using WrNexus. -

-
-
-
- } -} diff --git a/.publish/ui/components/LogoUpload.wrn b/.publish/ui/components/LogoUpload.wrn deleted file mode 100644 index 68d901c6..00000000 --- a/.publish/ui/components/LogoUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LogoUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/LogoutDialog.wrn b/.publish/ui/components/LogoutDialog.wrn deleted file mode 100644 index 1e646bda..00000000 --- a/.publish/ui/components/LogoutDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LogoutDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/LongitudeInput.wrn b/.publish/ui/components/LongitudeInput.wrn deleted file mode 100644 index b4bb7af1..00000000 --- a/.publish/ui/components/LongitudeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LongitudeInput { - props { - label = "Longitude" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MaintenanceAlert.wrn b/.publish/ui/components/MaintenanceAlert.wrn deleted file mode 100644 index 56576733..00000000 --- a/.publish/ui/components/MaintenanceAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MaintenanceAlert { - props { - label = "Maintenance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MaintenanceBanner.wrn b/.publish/ui/components/MaintenanceBanner.wrn deleted file mode 100644 index 713542a8..00000000 --- a/.publish/ui/components/MaintenanceBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MaintenanceBanner { - props { - label = "Maintenance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MaintenanceCard.wrn b/.publish/ui/components/MaintenanceCard.wrn deleted file mode 100644 index f1ec2682..00000000 --- a/.publish/ui/components/MaintenanceCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MaintenanceCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/MaintenancePage.wrn b/.publish/ui/components/MaintenancePage.wrn deleted file mode 100644 index be54ebf7..00000000 --- a/.publish/ui/components/MaintenancePage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MaintenancePage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/MaintenanceState.wrn b/.publish/ui/components/MaintenanceState.wrn deleted file mode 100644 index c11b6750..00000000 --- a/.publish/ui/components/MaintenanceState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MaintenanceState { - props { - label = "Maintenance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MaintenanceWindowPicker.wrn b/.publish/ui/components/MaintenanceWindowPicker.wrn deleted file mode 100644 index 45e34f63..00000000 --- a/.publish/ui/components/MaintenanceWindowPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MaintenanceWindowPicker { - props { - label = "MaintenanceWindow" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Map.wrn b/.publish/ui/components/Map.wrn new file mode 100644 index 00000000..ca451ebf --- /dev/null +++ b/.publish/ui/components/Map.wrn @@ -0,0 +1,19 @@ +component Map { + props { + size = "default" + color = "primary" + title = "Map" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/MapPicker.wrn b/.publish/ui/components/MapPicker.wrn deleted file mode 100644 index 7d875a93..00000000 --- a/.publish/ui/components/MapPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MapPicker { - props { - label = "Map" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MarkdownEditor.wrn b/.publish/ui/components/MarkdownEditor.wrn deleted file mode 100644 index 61238a94..00000000 --- a/.publish/ui/components/MarkdownEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MarkdownEditor { - props { - label = "Markdown" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MarketingPageShell.wrn b/.publish/ui/components/MarketingPageShell.wrn deleted file mode 100644 index cea8ffcf..00000000 --- a/.publish/ui/components/MarketingPageShell.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component MarketingPageShell { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/MarketingSectionHeader.wrn b/.publish/ui/components/MarketingSectionHeader.wrn deleted file mode 100644 index bd0e410f..00000000 --- a/.publish/ui/components/MarketingSectionHeader.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component MarketingSectionHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - - view { -
-
-
- {#if eyebrow} -

{eyebrow}

- {/if} - {#if title} -

{title}

- {/if} - {#if description} -

{description}

- {/if} -
- -
- -
-
-
- } -} diff --git a/.publish/ui/components/Marquee.wrn b/.publish/ui/components/Marquee.wrn new file mode 100644 index 00000000..5f525cf6 --- /dev/null +++ b/.publish/ui/components/Marquee.wrn @@ -0,0 +1,19 @@ +component Marquee { + props { + size = "default" + color = "primary" + title = "Marquee" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/MaskedSecretField.wrn b/.publish/ui/components/MaskedSecretField.wrn deleted file mode 100644 index f2860e6d..00000000 --- a/.publish/ui/components/MaskedSecretField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MaskedSecretField { - props { - label = "MaskedSecret" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MegaMenu.wrn b/.publish/ui/components/MegaMenu.wrn index b6f158e3..ccac682b 100644 --- a/.publish/ui/components/MegaMenu.wrn +++ b/.publish/ui/components/MegaMenu.wrn @@ -1,11 +1,17 @@ component MegaMenu { props { - label = "Explore" - sections = [] + size = "default" + color = "primary" + label = "Mega Menu" + items = [] + active = "" + orientation = "horizontal" class = "" } - state open = false view { -
{#each sections as section}

{section.title}

{/each}
+ } } diff --git a/.publish/ui/components/MemberList.wrn b/.publish/ui/components/MemberList.wrn deleted file mode 100644 index 9907389f..00000000 --- a/.publish/ui/components/MemberList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component MemberList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/MentionInput.wrn b/.publish/ui/components/MentionInput.wrn deleted file mode 100644 index 8fd40583..00000000 --- a/.publish/ui/components/MentionInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MentionInput { - props { - label = "Mention" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MessageCharacterCounter.wrn b/.publish/ui/components/MessageCharacterCounter.wrn deleted file mode 100644 index 30bbfdfb..00000000 --- a/.publish/ui/components/MessageCharacterCounter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MessageCharacterCounter { - props { - label = "MessageCharacter" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MessageComposer.wrn b/.publish/ui/components/MessageComposer.wrn deleted file mode 100644 index 363b24e5..00000000 --- a/.publish/ui/components/MessageComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessageComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/MessageComposerPreview.wrn b/.publish/ui/components/MessageComposerPreview.wrn deleted file mode 100644 index 7a932470..00000000 --- a/.publish/ui/components/MessageComposerPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessageComposerPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/MessageLimitInput.wrn b/.publish/ui/components/MessageLimitInput.wrn deleted file mode 100644 index 06f7ee45..00000000 --- a/.publish/ui/components/MessageLimitInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MessageLimitInput { - props { - label = "MessageLimit" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MessagePreview.wrn b/.publish/ui/components/MessagePreview.wrn deleted file mode 100644 index 8b5aa348..00000000 --- a/.publish/ui/components/MessagePreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessagePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/MessageVolumeSlider.wrn b/.publish/ui/components/MessageVolumeSlider.wrn deleted file mode 100644 index 24450718..00000000 --- a/.publish/ui/components/MessageVolumeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessageVolumeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Metric.wrn b/.publish/ui/components/Metric.wrn deleted file mode 100644 index 682abc2a..00000000 --- a/.publish/ui/components/Metric.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component Metric { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/MetricCard.wrn b/.publish/ui/components/MetricCard.wrn deleted file mode 100644 index 65cc2f20..00000000 --- a/.publish/ui/components/MetricCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MetricCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/MetricGrid.wrn b/.publish/ui/components/MetricGrid.wrn deleted file mode 100644 index f46510bf..00000000 --- a/.publish/ui/components/MetricGrid.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component MetricGrid { - props { - label = "Platform metrics" - metrics = [] - compact = false - columns = 4 - class = "" - } - - view { -
-
- {#each metrics as metric} -
- {metric.value} - {metric.label} - - {#if metric.description} -

{metric.description}

- {/if} -
- {:empty} -

No metrics available.

- {/each} -
-
- } -} diff --git a/.publish/ui/components/MetricText.wrn b/.publish/ui/components/MetricText.wrn deleted file mode 100644 index 5f88225a..00000000 --- a/.publish/ui/components/MetricText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component MetricText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/MinutePicker.wrn b/.publish/ui/components/MinutePicker.wrn deleted file mode 100644 index 9aa01269..00000000 --- a/.publish/ui/components/MinutePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MinutePicker { - props { - label = "Minute" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MissionSection.wrn b/.publish/ui/components/MissionSection.wrn deleted file mode 100644 index 93694c92..00000000 --- a/.publish/ui/components/MissionSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component MissionSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/MobileDeviceFrame.wrn b/.publish/ui/components/MobileDeviceFrame.wrn deleted file mode 100644 index 1529f41b..00000000 --- a/.publish/ui/components/MobileDeviceFrame.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component MobileDeviceFrame { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/MobileInput.wrn b/.publish/ui/components/MobileInput.wrn deleted file mode 100644 index 69da0fce..00000000 --- a/.publish/ui/components/MobileInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MobileInput { - props { - label = "Mobile" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MobileMenuButton.wrn b/.publish/ui/components/MobileMenuButton.wrn deleted file mode 100644 index 530e53b2..00000000 --- a/.publish/ui/components/MobileMenuButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MobileMenuButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/MobileNavigation.wrn b/.publish/ui/components/MobileNavigation.wrn deleted file mode 100644 index c47c4ea4..00000000 --- a/.publish/ui/components/MobileNavigation.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component MobileNavigation { - props { - label = "Menu" - closeLabel = "Close menu" - items = [] - class = "" - } - state open = false - view { -
- } -} diff --git a/.publish/ui/components/MobileTableCard.wrn b/.publish/ui/components/MobileTableCard.wrn deleted file mode 100644 index 5041a401..00000000 --- a/.publish/ui/components/MobileTableCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MobileTableCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Modal.wrn b/.publish/ui/components/Modal.wrn index bd6df0c9..9a4ce3fb 100644 --- a/.publish/ui/components/Modal.wrn +++ b/.publish/ui/components/Modal.wrn @@ -1,14 +1,19 @@ component Modal { props { - class = "" - title = "Dialog" + size = "default" + color = "primary" + title = "Modal" description = "" open = false - size = "md" + placement = "bottom" closeLabel = "Close" + class = "" } - state visible = open view { - + } } diff --git a/.publish/ui/components/MonthPicker.wrn b/.publish/ui/components/MonthPicker.wrn deleted file mode 100644 index b4da50d4..00000000 --- a/.publish/ui/components/MonthPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MonthPicker { - props { - label = "Month" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MonthYearPicker.wrn b/.publish/ui/components/MonthYearPicker.wrn deleted file mode 100644 index 489589bc..00000000 --- a/.publish/ui/components/MonthYearPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MonthYearPicker { - props { - label = "MonthYear" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MonthlyVolumeSelector.wrn b/.publish/ui/components/MonthlyVolumeSelector.wrn deleted file mode 100644 index 7ae5cc79..00000000 --- a/.publish/ui/components/MonthlyVolumeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MonthlyVolumeSelector { - props { - label = "MonthlyVolume" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MultiFileUpload.wrn b/.publish/ui/components/MultiFileUpload.wrn deleted file mode 100644 index ca495a49..00000000 --- a/.publish/ui/components/MultiFileUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MultiFileUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/MultiSelect.wrn b/.publish/ui/components/MultiSelect.wrn deleted file mode 100644 index ec9d25b5..00000000 --- a/.publish/ui/components/MultiSelect.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component MultiSelect { - props { - id = "multi-select" - name = "" - label = "Choose options" - options = [] - required = false - disabled = false - size = 5 - class = "" - } - view { -
- } -} diff --git a/.publish/ui/components/MultipleEmailInput.wrn b/.publish/ui/components/MultipleEmailInput.wrn deleted file mode 100644 index e2492037..00000000 --- a/.publish/ui/components/MultipleEmailInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MultipleEmailInput { - props { - label = "MultipleEmail" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/MutedText.wrn b/.publish/ui/components/MutedText.wrn deleted file mode 100644 index c14a752a..00000000 --- a/.publish/ui/components/MutedText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component MutedText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/NameInput.wrn b/.publish/ui/components/NameInput.wrn deleted file mode 100644 index 303da4b9..00000000 --- a/.publish/ui/components/NameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component NameInput { - props { - label = "Name" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/NarrowContainer.wrn b/.publish/ui/components/NarrowContainer.wrn deleted file mode 100644 index 4c56fb4e..00000000 --- a/.publish/ui/components/NarrowContainer.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component NarrowContainer { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/Nav.wrn b/.publish/ui/components/Nav.wrn new file mode 100644 index 00000000..39475a9f --- /dev/null +++ b/.publish/ui/components/Nav.wrn @@ -0,0 +1,17 @@ +component Nav { + props { + size = "default" + color = "primary" + label = "Nav" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/Navbar.wrn b/.publish/ui/components/Navbar.wrn new file mode 100644 index 00000000..ba6fb974 --- /dev/null +++ b/.publish/ui/components/Navbar.wrn @@ -0,0 +1,17 @@ +component Navbar { + props { + size = "default" + color = "primary" + label = "Navbar" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/Navigation.wrn b/.publish/ui/components/Navigation.wrn deleted file mode 100644 index b27bae5c..00000000 --- a/.publish/ui/components/Navigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component Navigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/NavigationItem.wrn b/.publish/ui/components/NavigationItem.wrn deleted file mode 100644 index 100702d9..00000000 --- a/.publish/ui/components/NavigationItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component NavigationItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/NavigationMegaMenu.wrn b/.publish/ui/components/NavigationMegaMenu.wrn deleted file mode 100644 index cc27ba3d..00000000 --- a/.publish/ui/components/NavigationMegaMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component NavigationMegaMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/NewBadge.wrn b/.publish/ui/components/NewBadge.wrn deleted file mode 100644 index 3d668945..00000000 --- a/.publish/ui/components/NewBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component NewBadge { - props { - label = "New" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/NewPasswordInput.wrn b/.publish/ui/components/NewPasswordInput.wrn deleted file mode 100644 index 0c5897dc..00000000 --- a/.publish/ui/components/NewPasswordInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component NewPasswordInput { - props { - label = "NewPassword" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/NewsletterCTA.wrn b/.publish/ui/components/NewsletterCTA.wrn deleted file mode 100644 index be6021ff..00000000 --- a/.publish/ui/components/NewsletterCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component NewsletterCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/NewsletterForm.wrn b/.publish/ui/components/NewsletterForm.wrn deleted file mode 100644 index c7790ea7..00000000 --- a/.publish/ui/components/NewsletterForm.wrn +++ /dev/null @@ -1,214 +0,0 @@ -component NewsletterForm { - props { - class: string = "" - eyebrow = "" - title = "Stay up to date" - description = "" - - placeholder = "Enter your email" - buttonLabel = "Subscribe" - - action = "/newsletter/subscribe" - method = "post" - emailName = "email" - - privacyLabel = "" - privacyHref = "/privacy" - - successMessage = "You are subscribed." - errorMessage = "Something went wrong. Please try again." - - iconClass = "icon-[lucide--mail]" - - centered = false - compact = false - showIcon = true - showPrivacy = true - fullWidth = false - } - - state email = "" - state status = "idle" - state message = "" - - view { -
-
- - - -
-
- -
-
- -
- - - - - -
- -
- -

- {eyebrow} -

- - -

- {title} -

-
-
- - -

- {description} -

-
- - -
-
- - -
-
- - - -
- - -
-
- -

- No spam. Unsubscribe at any time. - - - {privacyLabel} - -

- -
- {message} -
-
-
-
-
-
- } -} diff --git a/.publish/ui/components/NoResultsState.wrn b/.publish/ui/components/NoResultsState.wrn deleted file mode 100644 index 7784dc5c..00000000 --- a/.publish/ui/components/NoResultsState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component NoResultsState { - props { - label = "NoResults" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/NotFoundPage.wrn b/.publish/ui/components/NotFoundPage.wrn deleted file mode 100644 index 4caee5a9..00000000 --- a/.publish/ui/components/NotFoundPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component NotFoundPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/NotFoundState.wrn b/.publish/ui/components/NotFoundState.wrn deleted file mode 100644 index 987fd40b..00000000 --- a/.publish/ui/components/NotFoundState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component NotFoundState { - props { - label = "NotFound" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/NotificationCard.wrn b/.publish/ui/components/NotificationCard.wrn deleted file mode 100644 index be36b3ad..00000000 --- a/.publish/ui/components/NotificationCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component NotificationCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/NotificationDot.wrn b/.publish/ui/components/NotificationDot.wrn deleted file mode 100644 index 21a6d903..00000000 --- a/.publish/ui/components/NotificationDot.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component NotificationDot { - props { - label = "Notification" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/NotificationList.wrn b/.publish/ui/components/NotificationList.wrn deleted file mode 100644 index 367c44e6..00000000 --- a/.publish/ui/components/NotificationList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component NotificationList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/NumberInput.wrn b/.publish/ui/components/NumberInput.wrn deleted file mode 100644 index ad1e405f..00000000 --- a/.publish/ui/components/NumberInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component NumberInput { - props { - class = "" - id = "" - name = "" - label = "Number" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
- - -

{help}

- -
- } -} diff --git a/.publish/ui/components/OfficeCard.wrn b/.publish/ui/components/OfficeCard.wrn deleted file mode 100644 index c3d2e77b..00000000 --- a/.publish/ui/components/OfficeCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OfficeCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/OfflinePage.wrn b/.publish/ui/components/OfflinePage.wrn deleted file mode 100644 index 007a272f..00000000 --- a/.publish/ui/components/OfflinePage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OfflinePage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/OfflineState.wrn b/.publish/ui/components/OfflineState.wrn deleted file mode 100644 index 089101e9..00000000 --- a/.publish/ui/components/OfflineState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OfflineState { - props { - label = "Offline" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/OnboardingProgress.wrn b/.publish/ui/components/OnboardingProgress.wrn deleted file mode 100644 index 28f8ff96..00000000 --- a/.publish/ui/components/OnboardingProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OnboardingProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/OneTimeSecretDisplay.wrn b/.publish/ui/components/OneTimeSecretDisplay.wrn deleted file mode 100644 index 8cbf0b90..00000000 --- a/.publish/ui/components/OneTimeSecretDisplay.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OneTimeSecretDisplay { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/OnlineIndicator.wrn b/.publish/ui/components/OnlineIndicator.wrn deleted file mode 100644 index e8e673ed..00000000 --- a/.publish/ui/components/OnlineIndicator.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component OnlineIndicator { - props { - label = "Online" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/OpacitySlider.wrn b/.publish/ui/components/OpacitySlider.wrn deleted file mode 100644 index b1d725d7..00000000 --- a/.publish/ui/components/OpacitySlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OpacitySlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/OpenAPICTA.wrn b/.publish/ui/components/OpenAPICTA.wrn deleted file mode 100644 index 2a01aabf..00000000 --- a/.publish/ui/components/OpenAPICTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OpenAPICTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/OptionalIndicator.wrn b/.publish/ui/components/OptionalIndicator.wrn deleted file mode 100644 index cd2820ed..00000000 --- a/.publish/ui/components/OptionalIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OptionalIndicator { - props { - label = "Optional" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/OrganizationSelector.wrn b/.publish/ui/components/OrganizationSelector.wrn deleted file mode 100644 index 08a7d36e..00000000 --- a/.publish/ui/components/OrganizationSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component OrganizationSelector { - props { - label = "Organization" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/OtpInput.wrn b/.publish/ui/components/OtpInput.wrn deleted file mode 100644 index b95a481a..00000000 --- a/.publish/ui/components/OtpInput.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OtpInput { - props { - class = "" - name = "otp" - length = 6 - label = "Verification code" - } - view { -
{label}
- } -} diff --git a/.publish/ui/components/OtpVerificationForm.wrn b/.publish/ui/components/OtpVerificationForm.wrn deleted file mode 100644 index 6c2635ef..00000000 --- a/.publish/ui/components/OtpVerificationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OtpVerificationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/OutlinedCard.wrn b/.publish/ui/components/OutlinedCard.wrn deleted file mode 100644 index 806964bc..00000000 --- a/.publish/ui/components/OutlinedCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component OutlinedCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PageAlert.wrn b/.publish/ui/components/PageAlert.wrn deleted file mode 100644 index b718b845..00000000 --- a/.publish/ui/components/PageAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PageAlert { - props { - label = "Page" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PageHeader.wrn b/.publish/ui/components/PageHeader.wrn deleted file mode 100644 index 6fd1a09d..00000000 --- a/.publish/ui/components/PageHeader.wrn +++ /dev/null @@ -1,172 +0,0 @@ -component PageHeader { - props { - class: string = "" - eyebrow = "" - title = "" - description = "" - - primaryLabel = "" - primaryHref = "" - - secondaryLabel = "" - secondaryHref = "" - - icon = "sparkles" - - centered = false - compact = false - - showBreadcrumbs = false - breadcrumbParent = "" - breadcrumbParentHref = "" - breadcrumbCurrent = "" - - highlights = [] - } - - view { -
- - - -
- - -
- -
- - -
- -
- -
- - - - - - {eyebrow} - -
- - -

- {title} -

- - -

- {description} -

-
- - -
- - - {secondaryLabel} - - - - - {primaryLabel} - - - -
-
- - -
-
- {#each highlights as highlight} -
-
- - - - -
-

- {highlight.title} -

- -

- {highlight.description} -

-
-
-
- {/each} -
-
-
-
- } -} diff --git a/.publish/ui/components/PageHeading.wrn b/.publish/ui/components/PageHeading.wrn deleted file mode 100644 index 7d6d2c65..00000000 --- a/.publish/ui/components/PageHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PageHeading { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/PageShell.wrn b/.publish/ui/components/PageShell.wrn deleted file mode 100644 index e228102e..00000000 --- a/.publish/ui/components/PageShell.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PageShell { - props { - className = "" - } - view { -
- } -} diff --git a/.publish/ui/components/PageSkeleton.wrn b/.publish/ui/components/PageSkeleton.wrn deleted file mode 100644 index 0c81d383..00000000 --- a/.publish/ui/components/PageSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PageSkeleton { - props { - label = "Page" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Pagination.wrn b/.publish/ui/components/Pagination.wrn index 05d24965..2898cdb1 100644 --- a/.publish/ui/components/Pagination.wrn +++ b/.publish/ui/components/Pagination.wrn @@ -1,187 +1,17 @@ component Pagination { - props { - class: string = "" - currentPage = 1 - totalPages = 1 - - previousHref = "" - nextHref = "" - - pages = [] - - showNumbers = true - showSummary = true - - totalItems = 0 - pageSize = 10 - - compact = false - centered = false - } - - view { - - } + props { + size = "default" + color = "primary" + label = "Pagination" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } } diff --git a/.publish/ui/components/Panel.wrn b/.publish/ui/components/Panel.wrn deleted file mode 100644 index 7bc0376e..00000000 --- a/.publish/ui/components/Panel.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Panel { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/PartnerApplicationForm.wrn b/.publish/ui/components/PartnerApplicationForm.wrn deleted file mode 100644 index 1ba11f0b..00000000 --- a/.publish/ui/components/PartnerApplicationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PartnerApplicationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PartnerLogoGrid.wrn b/.publish/ui/components/PartnerLogoGrid.wrn deleted file mode 100644 index 5cabc551..00000000 --- a/.publish/ui/components/PartnerLogoGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PartnerLogoGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/PartnerProgramCard.wrn b/.publish/ui/components/PartnerProgramCard.wrn deleted file mode 100644 index 82d4fb92..00000000 --- a/.publish/ui/components/PartnerProgramCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PartnerProgramCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PasskeyButton.wrn b/.publish/ui/components/PasskeyButton.wrn deleted file mode 100644 index ecc8b203..00000000 --- a/.publish/ui/components/PasskeyButton.wrn +++ /dev/null @@ -1,28 +0,0 @@ -component PasskeyButton { - props { - label = "Continue with a passkey" - description = "Use fingerprint, face recognition, or device PIN" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { - - {#if href} - - - {label}{#if description}{description}{/if} - - - {:else} - - {/if} - - } -} diff --git a/.publish/ui/components/PasswordInput.wrn b/.publish/ui/components/PasswordInput.wrn deleted file mode 100644 index f4430383..00000000 --- a/.publish/ui/components/PasswordInput.wrn +++ /dev/null @@ -1,32 +0,0 @@ -component PasswordInput { - props { - class = "" - id = "password" - name = "password" - label = "Password" - value = "" - placeholder = "Enter your password" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "current-password" - revealable = true - } - - state visible = false - - view { -
- -
- - - {#if revealable}{/if} -
- {#if help && !error}

{help}

{/if} - {#if error}{/if} -
- } -} diff --git a/.publish/ui/components/PasswordRequirementList.wrn b/.publish/ui/components/PasswordRequirementList.wrn deleted file mode 100644 index e72b7263..00000000 --- a/.publish/ui/components/PasswordRequirementList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PasswordRequirementList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/PasswordStrengthMeter.wrn b/.publish/ui/components/PasswordStrengthMeter.wrn deleted file mode 100644 index faa2dd88..00000000 --- a/.publish/ui/components/PasswordStrengthMeter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PasswordStrengthMeter { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/PasswordVisibilityToggle.wrn b/.publish/ui/components/PasswordVisibilityToggle.wrn deleted file mode 100644 index d277ecc6..00000000 --- a/.publish/ui/components/PasswordVisibilityToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PasswordVisibilityToggle { - props { - label = "PasswordVisibility" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PathInput.wrn b/.publish/ui/components/PathInput.wrn deleted file mode 100644 index 55b9cc51..00000000 --- a/.publish/ui/components/PathInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PathInput { - props { - label = "Path" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PaymentMethodCard.wrn b/.publish/ui/components/PaymentMethodCard.wrn deleted file mode 100644 index 0bb1a4c8..00000000 --- a/.publish/ui/components/PaymentMethodCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PaymentMethodCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PdfPreview.wrn b/.publish/ui/components/PdfPreview.wrn deleted file mode 100644 index ab11d701..00000000 --- a/.publish/ui/components/PdfPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PdfPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PercentageInput.wrn b/.publish/ui/components/PercentageInput.wrn deleted file mode 100644 index f79303a4..00000000 --- a/.publish/ui/components/PercentageInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PercentageInput { - props { - label = "Percentage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PermissionSelector.wrn b/.publish/ui/components/PermissionSelector.wrn deleted file mode 100644 index 59edfecd..00000000 --- a/.publish/ui/components/PermissionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PermissionSelector { - props { - label = "Permission" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PhoneInput.wrn b/.publish/ui/components/PhoneInput.wrn deleted file mode 100644 index 1ef30d27..00000000 --- a/.publish/ui/components/PhoneInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component PhoneInput { - props { - class = "" - id = "" - name = "" - label = "Phone" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
- - -

{help}

- -
- } -} diff --git a/.publish/ui/components/PieChart.wrn b/.publish/ui/components/PieChart.wrn deleted file mode 100644 index 6de1332e..00000000 --- a/.publish/ui/components/PieChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PieChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/Pill.wrn b/.publish/ui/components/Pill.wrn deleted file mode 100644 index 2acac5f8..00000000 --- a/.publish/ui/components/Pill.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component Pill { - props { - label = "Pill" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/PinInput.wrn b/.publish/ui/components/PinInput.wrn index 840245cf..8aa45c9e 100644 --- a/.publish/ui/components/PinInput.wrn +++ b/.publish/ui/components/PinInput.wrn @@ -1,16 +1,114 @@ component PinInput { props { - label = "Pin" - name = "" + size = "default" + color = "primary" + label = "Verification code" + name = "pin" value = "" - placeholder = "" + length = 4 + pattern = "[0-9]" type = "text" - required = false + inputMode = "numeric" + placeholder = "○" + autocomplete = "one-time-code" + masked = false disabled = false readonly = false - help = "" - error = "" + required = false + autoFocus = false + autoSubmit = false + allowPaste = true + clearable = true + clearLabel = "Clear code" + separator = "" + groupSize = 0 + helpText = "" + invalid = false + validationMessage = "" class = "" + @event input = function + @event change = function + @event complete = function + @event paste = function + @event clear = function + @event error = function + } + + functions { + function inputIndexes() { + return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].slice( + 0, + Math.max(1, Math.min(12, Number(length))) + ) + } + } + + view { +
+
+ {label} + +
+ +
+ {#each inputIndexes() as index} + + {#if separator && groupSize !== 0 && (index + 1) % groupSize === 0 && index + 1 !== length} + + {/if} + {/each} +
+ + + + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
} - view { } } diff --git a/.publish/ui/components/PlainTextEditor.wrn b/.publish/ui/components/PlainTextEditor.wrn deleted file mode 100644 index c5145146..00000000 --- a/.publish/ui/components/PlainTextEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PlainTextEditor { - props { - label = "PlainText" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PlanCTA.wrn b/.publish/ui/components/PlanCTA.wrn deleted file mode 100644 index 335e4dd7..00000000 --- a/.publish/ui/components/PlanCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PlanCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/PlanFeatureList.wrn b/.publish/ui/components/PlanFeatureList.wrn deleted file mode 100644 index 78503873..00000000 --- a/.publish/ui/components/PlanFeatureList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PlanFeatureList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/PlanLimitList.wrn b/.publish/ui/components/PlanLimitList.wrn deleted file mode 100644 index ac92bcdb..00000000 --- a/.publish/ui/components/PlanLimitList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PlanLimitList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/PlanSelector.wrn b/.publish/ui/components/PlanSelector.wrn deleted file mode 100644 index b5d9a5c3..00000000 --- a/.publish/ui/components/PlanSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PlanSelector { - props { - label = "Plan" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PlatformPillarCard.wrn b/.publish/ui/components/PlatformPillarCard.wrn deleted file mode 100644 index 15c71388..00000000 --- a/.publish/ui/components/PlatformPillarCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PlatformPillarCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PolicyVersionTable.wrn b/.publish/ui/components/PolicyVersionTable.wrn deleted file mode 100644 index 93a5c26b..00000000 --- a/.publish/ui/components/PolicyVersionTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PolicyVersionTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/Popover.wrn b/.publish/ui/components/Popover.wrn index d5635325..e53b737f 100644 --- a/.publish/ui/components/Popover.wrn +++ b/.publish/ui/components/Popover.wrn @@ -1,10 +1,19 @@ component Popover { props { - title = "" + size = "default" + color = "primary" + title = "Popover" description = "" open = false + placement = "bottom" closeLabel = "Close" class = "" } - view {
} + view { +
+
{title}
+ {#if description}

{description}

{/if} + +
+ } } diff --git a/.publish/ui/components/PortInput.wrn b/.publish/ui/components/PortInput.wrn deleted file mode 100644 index 84e0fdc4..00000000 --- a/.publish/ui/components/PortInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PortInput { - props { - label = "Port" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PortNumberInput.wrn b/.publish/ui/components/PortNumberInput.wrn deleted file mode 100644 index b98d33fd..00000000 --- a/.publish/ui/components/PortNumberInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PortNumberInput { - props { - label = "PortNumber" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PositiveNumberInput.wrn b/.publish/ui/components/PositiveNumberInput.wrn deleted file mode 100644 index 88328358..00000000 --- a/.publish/ui/components/PositiveNumberInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PositiveNumberInput { - props { - label = "PositiveNumber" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PostalCodeInput.wrn b/.publish/ui/components/PostalCodeInput.wrn deleted file mode 100644 index 19ae096c..00000000 --- a/.publish/ui/components/PostalCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PostalCodeInput { - props { - label = "PostalCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PostmanCTA.wrn b/.publish/ui/components/PostmanCTA.wrn deleted file mode 100644 index 4bd53e2d..00000000 --- a/.publish/ui/components/PostmanCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PostmanCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/PresetDateRangePicker.wrn b/.publish/ui/components/PresetDateRangePicker.wrn deleted file mode 100644 index 61ec3bdb..00000000 --- a/.publish/ui/components/PresetDateRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PresetDateRangePicker { - props { - label = "PresetDateRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PressReleaseCard.wrn b/.publish/ui/components/PressReleaseCard.wrn deleted file mode 100644 index 37e73f47..00000000 --- a/.publish/ui/components/PressReleaseCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PressReleaseCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PreviewBadge.wrn b/.publish/ui/components/PreviewBadge.wrn deleted file mode 100644 index 7f07d0a9..00000000 --- a/.publish/ui/components/PreviewBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PreviewBadge { - props { - label = "Preview" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/PreviousNextNavigation.wrn b/.publish/ui/components/PreviousNextNavigation.wrn deleted file mode 100644 index 7657873e..00000000 --- a/.publish/ui/components/PreviousNextNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PreviousNextNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/PriceInput.wrn b/.publish/ui/components/PriceInput.wrn deleted file mode 100644 index e72461ca..00000000 --- a/.publish/ui/components/PriceInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PriceInput { - props { - label = "Price" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PriceRangeSlider.wrn b/.publish/ui/components/PriceRangeSlider.wrn deleted file mode 100644 index c810af4e..00000000 --- a/.publish/ui/components/PriceRangeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PriceRangeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PriceText.wrn b/.publish/ui/components/PriceText.wrn deleted file mode 100644 index f4c87f84..00000000 --- a/.publish/ui/components/PriceText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PriceText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/PricingCard.wrn b/.publish/ui/components/PricingCard.wrn deleted file mode 100644 index fddb5f60..00000000 --- a/.publish/ui/components/PricingCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PricingCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PricingComparisonTable.wrn b/.publish/ui/components/PricingComparisonTable.wrn deleted file mode 100644 index a54f0b54..00000000 --- a/.publish/ui/components/PricingComparisonTable.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component PricingComparisonTable { - props { - caption = "Plan comparison" - plans = [] - features = [] - featuredPlan = "" - class = "" - } - - view { -
- - - - - - {#each plans as plan} - - {/each} - - - - {#each features as feature} - - - {#each feature.values as value} - - {/each} - - {/each} - -
{caption}
Feature{plan.name}
{feature.label}{value}
-
- } -} diff --git a/.publish/ui/components/PricingContactForm.wrn b/.publish/ui/components/PricingContactForm.wrn deleted file mode 100644 index 2b845fab..00000000 --- a/.publish/ui/components/PricingContactForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PricingContactForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PricingFeatureGroup.wrn b/.publish/ui/components/PricingFeatureGroup.wrn deleted file mode 100644 index 52de07b8..00000000 --- a/.publish/ui/components/PricingFeatureGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PricingFeatureGroup { - props { - label = "PricingFeature" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PricingGrid.wrn b/.publish/ui/components/PricingGrid.wrn deleted file mode 100644 index fc5d830d..00000000 --- a/.publish/ui/components/PricingGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PricingGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/PricingHero.wrn b/.publish/ui/components/PricingHero.wrn deleted file mode 100644 index f7aaaac0..00000000 --- a/.publish/ui/components/PricingHero.wrn +++ /dev/null @@ -1,66 +0,0 @@ -component PricingHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - - view { -
- - -
- {#if align === "center"} -
- {#if eyebrow} -

- {eyebrow} -

- {/if} - - {#if title} -

- {title} -

- {/if} - - {#if description} -

- {description} -

- {/if} -
- {:else} -
- {#if eyebrow} -

- {eyebrow} -

- {/if} - - {#if title} -

- {title} -

- {/if} - - {#if description} -

- {description} -

- {/if} -
- {/if} - - -
-
- } -} diff --git a/.publish/ui/components/PricingPlanCard.wrn b/.publish/ui/components/PricingPlanCard.wrn deleted file mode 100644 index 529e7a5e..00000000 --- a/.publish/ui/components/PricingPlanCard.wrn +++ /dev/null @@ -1,64 +0,0 @@ -component PricingPlanCard { - props { - class = "" - name = "Starter" - description = "" - price = "₹0" - period = "/month" - featured = false - badgeLabel = "Most popular" - ctaLabel = "Choose plan" - ctaHref = "#" - } - - view { -
- {#if featured} -
- -
- {/if} - -

- {name} -

- - {#if description} -

- {description} -

- {/if} - -
- - {price} - - {#if period} - - {period} - - {/if} -
- -
- -
- - {#if featured} - - {ctaLabel} - - {:else} - - {ctaLabel} - - {/if} -
- } -} diff --git a/.publish/ui/components/PricingTable.wrn b/.publish/ui/components/PricingTable.wrn deleted file mode 100644 index 73806601..00000000 --- a/.publish/ui/components/PricingTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PricingTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/PricingToggle.wrn b/.publish/ui/components/PricingToggle.wrn deleted file mode 100644 index 646322a5..00000000 --- a/.publish/ui/components/PricingToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PricingToggle { - props { - label = "Pricing" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PrimaryButton.wrn b/.publish/ui/components/PrimaryButton.wrn deleted file mode 100644 index 0fd29025..00000000 --- a/.publish/ui/components/PrimaryButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component PrimaryButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/PrintAction.wrn b/.publish/ui/components/PrintAction.wrn deleted file mode 100644 index a7b6f5c0..00000000 --- a/.publish/ui/components/PrintAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PrintAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/PrintPolicyButton.wrn b/.publish/ui/components/PrintPolicyButton.wrn deleted file mode 100644 index 40faf05e..00000000 --- a/.publish/ui/components/PrintPolicyButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PrintPolicyButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/PrioritySelector.wrn b/.publish/ui/components/PrioritySelector.wrn deleted file mode 100644 index 32dec11a..00000000 --- a/.publish/ui/components/PrioritySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PrioritySelector { - props { - label = "Priority" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PrivacyNotice.wrn b/.publish/ui/components/PrivacyNotice.wrn deleted file mode 100644 index 06a1da25..00000000 --- a/.publish/ui/components/PrivacyNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PrivacyNotice { - props { - label = "Privacy" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ProductArchitectureDiagram.wrn b/.publish/ui/components/ProductArchitectureDiagram.wrn deleted file mode 100644 index 032227c9..00000000 --- a/.publish/ui/components/ProductArchitectureDiagram.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component ProductArchitectureDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - - view { -
-
-
- {#if title}

{title}

{/if} - {#if value}{value}{/if} - {#if description}

{description}

{/if} -
- {#if loading} - - Loading - - {/if} -
- -
- -
- - {#if summary} -

{summary}

- {/if} -
- } -} diff --git a/.publish/ui/components/ProductCTA.wrn b/.publish/ui/components/ProductCTA.wrn deleted file mode 100644 index e852e0a9..00000000 --- a/.publish/ui/components/ProductCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ProductCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ProductCard.wrn b/.publish/ui/components/ProductCard.wrn deleted file mode 100644 index fe490ab3..00000000 --- a/.publish/ui/components/ProductCard.wrn +++ /dev/null @@ -1,27 +0,0 @@ -component ProductCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - status = "" - class = "" - } - - view { -
-
- {#if eyebrow}{eyebrow}{/if} - {#if status}{status}{/if} -
- {#if title}

{title}

{/if} - {#if description}

{description}

{/if} - {#if href} - - {actionLabel} - - {/if} -
- } -} diff --git a/.publish/ui/components/ProductCategorySection.wrn b/.publish/ui/components/ProductCategorySection.wrn deleted file mode 100644 index 9e560449..00000000 --- a/.publish/ui/components/ProductCategorySection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductCategorySection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ProductFeatureList.wrn b/.publish/ui/components/ProductFeatureList.wrn deleted file mode 100644 index e8216830..00000000 --- a/.publish/ui/components/ProductFeatureList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductFeatureList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ProductGrid.wrn b/.publish/ui/components/ProductGrid.wrn deleted file mode 100644 index 61e2bf64..00000000 --- a/.publish/ui/components/ProductGrid.wrn +++ /dev/null @@ -1,28 +0,0 @@ -component ProductGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - - view { -
-
- {#if title}

{title}

{/if} - {#if description}

{description}

{/if} - - {#if empty} -
- {emptyText} -
- {:else} -
- -
- {/if} -
-
- } -} diff --git a/.publish/ui/components/ProductHero.wrn b/.publish/ui/components/ProductHero.wrn deleted file mode 100644 index 6a2adf22..00000000 --- a/.publish/ui/components/ProductHero.wrn +++ /dev/null @@ -1,55 +0,0 @@ -component ProductHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - - view { -
- - -
-
- {#if eyebrow} -

- {eyebrow} -

- {/if} - - {#if title} -

- {title} -

- {/if} - - {#if description} -

- {description} -

- {/if} -
- -
- -
-
-
- } -} diff --git a/.publish/ui/components/ProductIcon.wrn b/.publish/ui/components/ProductIcon.wrn deleted file mode 100644 index e1a09cc3..00000000 --- a/.publish/ui/components/ProductIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ProductIntegrationList.wrn b/.publish/ui/components/ProductIntegrationList.wrn deleted file mode 100644 index f919978e..00000000 --- a/.publish/ui/components/ProductIntegrationList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductIntegrationList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ProductList.wrn b/.publish/ui/components/ProductList.wrn deleted file mode 100644 index 74c5bb0a..00000000 --- a/.publish/ui/components/ProductList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ProductLogo.wrn b/.publish/ui/components/ProductLogo.wrn deleted file mode 100644 index 60467865..00000000 --- a/.publish/ui/components/ProductLogo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductLogo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ProductMegaMenu.wrn b/.publish/ui/components/ProductMegaMenu.wrn deleted file mode 100644 index 09a9d48a..00000000 --- a/.publish/ui/components/ProductMegaMenu.wrn +++ /dev/null @@ -1,332 +0,0 @@ -component ProductMegaMenu { - props { - class: string = "" - } - view { -
-
-
- - -
-
-
-

- WrNexus platform -

- -

- Everything you need to manage identity -

-
- - -
- -
- - - - - - - - - - - Platform - - - - - - - Unified identity infrastructure for every application. - - - - - - - - - - - - - - Authentication - - - - - - - Passwords, passkeys, social login, MFA, and SSO. - - - - - - - - - - - - - - User management - - - - - - - Profiles, sessions, invitations, and user lifecycle. - - - - - - - - - - - - - - Organizations - - - - - - - Multi-tenant workspaces, teams, domains, and membership. - - - - - - - - - - - - - - Authorization - - - - - - - Roles, permissions, policies, and protected resources. - - - - - - - - - - - - - - Security - - - - - - - Session controls, recovery, audit logs, and threat protection. - - - -
- - - View all product features - - - -
- - - - -
- - -
-
- - - - Integrations - - - - - - Enterprise SSO - - - - - - Audit logs - -
- - - Read the documentation - - - -
-
-
- } -} diff --git a/.publish/ui/components/ProductMiniCard.wrn b/.publish/ui/components/ProductMiniCard.wrn deleted file mode 100644 index 69e298e2..00000000 --- a/.publish/ui/components/ProductMiniCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductMiniCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ProductNavigationCard.wrn b/.publish/ui/components/ProductNavigationCard.wrn deleted file mode 100644 index 0d17fb86..00000000 --- a/.publish/ui/components/ProductNavigationCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductNavigationCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ProductPageShell.wrn b/.publish/ui/components/ProductPageShell.wrn deleted file mode 100644 index 77a1325d..00000000 --- a/.publish/ui/components/ProductPageShell.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductPageShell { - props { - class = "" - } - - view { -
- -
- } -} diff --git a/.publish/ui/components/ProductSelector.wrn b/.publish/ui/components/ProductSelector.wrn deleted file mode 100644 index e12490a1..00000000 --- a/.publish/ui/components/ProductSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProductSelector { - props { - label = "Product" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ProductStatusBadge.wrn b/.publish/ui/components/ProductStatusBadge.wrn deleted file mode 100644 index 7d7b90f5..00000000 --- a/.publish/ui/components/ProductStatusBadge.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProductStatusBadge { - props { - label = "Available" - status = "" - class = "" - } - - view { - - - {label} - - } -} diff --git a/.publish/ui/components/ProductUseCaseList.wrn b/.publish/ui/components/ProductUseCaseList.wrn deleted file mode 100644 index 215a02b6..00000000 --- a/.publish/ui/components/ProductUseCaseList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductUseCaseList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ProductsMegaMenu.wrn b/.publish/ui/components/ProductsMegaMenu.wrn deleted file mode 100644 index bfa7aeea..00000000 --- a/.publish/ui/components/ProductsMegaMenu.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component ProductsMegaMenu { - props { - label = "Products" - sections = [] - class = "" - } - view { } -} diff --git a/.publish/ui/components/ProgressBar.wrn b/.publish/ui/components/ProgressBar.wrn deleted file mode 100644 index 268da3ca..00000000 --- a/.publish/ui/components/ProgressBar.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component ProgressBar { - props { - class = "" - value = 0 - max = 100 - label = "Progress" - showValue = true - } - view { -
{label}{value}%
- } -} diff --git a/.publish/ui/components/ProgressChart.wrn b/.publish/ui/components/ProgressChart.wrn deleted file mode 100644 index f343dbc4..00000000 --- a/.publish/ui/components/ProgressChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ProgressChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/ProgressRing.wrn b/.publish/ui/components/ProgressRing.wrn deleted file mode 100644 index 73098122..00000000 --- a/.publish/ui/components/ProgressRing.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ProgressRing { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/ProgressSlider.wrn b/.publish/ui/components/ProgressSlider.wrn deleted file mode 100644 index 58b14dcb..00000000 --- a/.publish/ui/components/ProgressSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProgressSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ProjectCard.wrn b/.publish/ui/components/ProjectCard.wrn deleted file mode 100644 index bfd59a30..00000000 --- a/.publish/ui/components/ProjectCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ProjectCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ProjectSelector.wrn b/.publish/ui/components/ProjectSelector.wrn deleted file mode 100644 index a8986575..00000000 --- a/.publish/ui/components/ProjectSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProjectSelector { - props { - label = "Project" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ProjectSwitcher.wrn b/.publish/ui/components/ProjectSwitcher.wrn deleted file mode 100644 index 4702a2b4..00000000 --- a/.publish/ui/components/ProjectSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProjectSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PromoCodeInput.wrn b/.publish/ui/components/PromoCodeInput.wrn deleted file mode 100644 index c532dd24..00000000 --- a/.publish/ui/components/PromoCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PromoCodeInput { - props { - label = "PromoCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PromptDialog.wrn b/.publish/ui/components/PromptDialog.wrn deleted file mode 100644 index 849108bd..00000000 --- a/.publish/ui/components/PromptDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PromptDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/ProviderSelector.wrn b/.publish/ui/components/ProviderSelector.wrn deleted file mode 100644 index 32822dbc..00000000 --- a/.publish/ui/components/ProviderSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProviderSelector { - props { - label = "Provider" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PublicFooter.wrn b/.publish/ui/components/PublicFooter.wrn deleted file mode 100644 index 5fc4e871..00000000 --- a/.publish/ui/components/PublicFooter.wrn +++ /dev/null @@ -1,675 +0,0 @@ -component PublicFooter { - types { - interface PublicFooterLink { - label: string - href: string - ariaLabel?: string - target?: string - icon?: string - } - interface PublicFooterColumn { - title: string - links: PublicFooterLink[] - } - } - props { - class: string = "" - homeHref: string = "/" - brandName: string = "WrNexus" - brandTagline: string = "Identity Cloud" - brandAriaLabel: string = "WrNexus home" - brandIcon: string = "icon-[lucide--blocks]" - brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications." - statusLabel: string = "All systems operational" - statusHref: string = "/status" - newsletterEyebrow: string = "WrNexus updates" - newsletterTitle: string = "Identity insights delivered to your inbox" - newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources." - newsletterAction: string = "/api/newsletter/subscribe" - newsletterButtonLabel: string = "Subscribe" - newsletterPlaceholder: string = "Enter your work email" - newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription." - newsletterPrivacyLabel: string = "privacy policy" - newsletterPrivacyHref: string = "/privacy" - newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our" - newsletterFinePrintSuffix: string = "." - newsletterEmailLabel: string = "Work email address" - newsletterEmailName: string = "email" - copyrightText: string = "© 2026 WrNexus. All rights reserved." - attributionText: string = "Built by WorkRoot Workspace." - showNewsletter: boolean = true - showSocialLinks: boolean = true - showThemeToggle: boolean = true - showStatus: boolean = true - showCookiePreferences: boolean = true - cookiePreferencesLabel: string = "Cookie preferences" - themeLabel: string = "Theme" - themeToggleLabel: string = "Toggle color theme" - legalTitle: string = "Legal" - socialLinks: PublicFooterLink[] = [] - navigationColumns: PublicFooterColumn[] = [] - legalLinks: PublicFooterLink[] = [] - navigationAriaLabel: string = "Footer navigation" - } - state email = "" - state newsletterSubmitted = false - - view { - - } -} diff --git a/.publish/ui/components/PublicHeader.wrn b/.publish/ui/components/PublicHeader.wrn deleted file mode 100644 index 5b8988b9..00000000 --- a/.publish/ui/components/PublicHeader.wrn +++ /dev/null @@ -1,350 +0,0 @@ -component PublicHeader { - types { - interface PublicHeaderNavigationItem { - label: string - href: string - ariaLabel?: string - target?: string - } - interface PublicHeaderActionItem extends PublicHeaderNavigationItem { - variant?: "primary" | "secondary" | "ghost" - } - } - props { - class: string = "" - homeHref: string = "/" - brandName: string = "WrNexus" - brandTagline: string = "Identity Cloud" - brandAriaLabel: string = "WrNexus home" - brandIcon: string = "icon-[lucide--blocks]" - pricingLabel: string = "Pricing" - pricingHref: string = "/pricing" - statusLabel: string = "All systems operational" - statusHref: string = "/status" - signInLabel: string = "Sign in" - signInHref: string = "/sign-in" - primaryLabel: string = "Start free" - primaryHref: string = "/sign-up" - showStatus: boolean = true - showThemeToggle: boolean = true - showSignIn: boolean = true - showPrimaryAction: boolean = true - productLabel: string = "Product" - solutionsLabel: string = "Solutions" - developersLabel: string = "Developers" - resourcesLabel: string = "Resources" - navigationAriaLabel: string = "Main navigation" - themeToggleLabel: string = "Toggle color theme" - mobileMenuOpenLabel: string = "Open navigation menu" - mobileMenuCloseLabel: string = "Close navigation menu" - navigationItems: PublicHeaderNavigationItem[] = [] - actionItems: PublicHeaderActionItem[] = [] - showNavigation: boolean = true - showMobileThemeToggle: boolean = true - } - state activeMenu = "" - state mobileMenuOpen = false - state headerScrolled = false - - view { -
-
- - - - - - - - - - {brandName} - - - - {brandTagline} - - - - - - - - - - - -
- - - -
- -
- - - - - -
-
- -
- -
- -
- -
- -
- -
- -
-
- - -
- {#if navigationItems.length > 0 || actionItems.length > 0} - - {:else} - - {/if} -
-
- } -} diff --git a/.publish/ui/components/PublicHeaderLogo.wrn b/.publish/ui/components/PublicHeaderLogo.wrn deleted file mode 100644 index 6c857ae8..00000000 --- a/.publish/ui/components/PublicHeaderLogo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PublicHeaderLogo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PublicMobileNavigation.wrn b/.publish/ui/components/PublicMobileNavigation.wrn deleted file mode 100644 index b8640479..00000000 --- a/.publish/ui/components/PublicMobileNavigation.wrn +++ /dev/null @@ -1,589 +0,0 @@ -component PublicMobileNavigation { - props { - class: string = "" - } - state openSection = "" - - view { -
-
- - - - - - - - - - - - All systems operational - - - - View service status - - - - - - - - - - -
- - - - Sign in - - - - Start free - - - -
- -

- Secure identity infrastructure for modern applications. -

- -
-
- } -} diff --git a/.publish/ui/components/PublicPageShell.wrn b/.publish/ui/components/PublicPageShell.wrn deleted file mode 100644 index b48ff921..00000000 --- a/.publish/ui/components/PublicPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PublicPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/PublicSearch.wrn b/.publish/ui/components/PublicSearch.wrn deleted file mode 100644 index 612c374d..00000000 --- a/.publish/ui/components/PublicSearch.wrn +++ /dev/null @@ -1,125 +0,0 @@ -component PublicSearch { - props { - class: string = "" - query = "" - - placeholder = "Search..." - label = "Search" - - action = "" - method = "get" - name = "q" - - buttonLabel = "" - clearLabel = "Clear search" - - size = "default" - centered = false - fullWidth = false - - showShortcut = false - shortcutLabel = "⌘ K" - - suggestions = [] - } - - state searchValue = query - state focused = false - - view { -
- - - -
- - Popular: - - - {#each suggestions.slice(0, 5) as suggestion} - - - - {suggestion.label} - - {/each} -
-
- } -} diff --git a/.publish/ui/components/PublishDateTimePicker.wrn b/.publish/ui/components/PublishDateTimePicker.wrn deleted file mode 100644 index 1f5b9ea5..00000000 --- a/.publish/ui/components/PublishDateTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PublishDateTimePicker { - props { - label = "PublishDateTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/PushComposer.wrn b/.publish/ui/components/PushComposer.wrn deleted file mode 100644 index 601ac0e4..00000000 --- a/.publish/ui/components/PushComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PushComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/PushNotificationEditor.wrn b/.publish/ui/components/PushNotificationEditor.wrn deleted file mode 100644 index c410e262..00000000 --- a/.publish/ui/components/PushNotificationEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PushNotificationEditor { - props { - label = "PushNotification" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/QrCode.wrn b/.publish/ui/components/QrCode.wrn deleted file mode 100644 index 02a3d04d..00000000 --- a/.publish/ui/components/QrCode.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component QrCode { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/QuantityInput.wrn b/.publish/ui/components/QuantityInput.wrn deleted file mode 100644 index 5347a0f3..00000000 --- a/.publish/ui/components/QuantityInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component QuantityInput { - props { - label = "Quantity" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/QuantityStepper.wrn b/.publish/ui/components/QuantityStepper.wrn deleted file mode 100644 index 4b43430e..00000000 --- a/.publish/ui/components/QuantityStepper.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component QuantityStepper { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/QuietHoursPicker.wrn b/.publish/ui/components/QuietHoursPicker.wrn deleted file mode 100644 index 479fd396..00000000 --- a/.publish/ui/components/QuietHoursPicker.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component QuietHoursPicker { - props { - label = "Quiet hours" - startName = "quietStart" - endName = "quietEnd" - start = "22:00" - end = "08:00" - timezone = "UTC" - disabled = false - class = "" - } - view { -
{label}

Timezone: {timezone}

- } -} diff --git a/.publish/ui/components/QuoteText.wrn b/.publish/ui/components/QuoteText.wrn deleted file mode 100644 index 9db342f1..00000000 --- a/.publish/ui/components/QuoteText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component QuoteText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/RadioGroup.wrn b/.publish/ui/components/RadioGroup.wrn deleted file mode 100644 index 8d89c736..00000000 --- a/.publish/ui/components/RadioGroup.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RadioGroup { - props { - class = "" - label = "Choose one" - name = "choice" - } - view { -
{label}
- } -} diff --git a/.publish/ui/components/RangeInput.wrn b/.publish/ui/components/RangeInput.wrn deleted file mode 100644 index 64fe87af..00000000 --- a/.publish/ui/components/RangeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RangeInput { - props { - label = "Range" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RangeSlider.wrn b/.publish/ui/components/RangeSlider.wrn index a5b7517d..2c04e82f 100644 --- a/.publish/ui/components/RangeSlider.wrn +++ b/.publish/ui/components/RangeSlider.wrn @@ -1,13 +1,20 @@ component RangeSlider { props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" + size = "default" + color = "primary" + label = "Range Slider" + name = "" + value = "" + placeholder = "" + type = "range" + min = "" + max = "" + step = "" + disabled = false + required = false class = "" } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} + view { + + } } diff --git a/.publish/ui/components/RateLimitInput.wrn b/.publish/ui/components/RateLimitInput.wrn deleted file mode 100644 index 71246e9a..00000000 --- a/.publish/ui/components/RateLimitInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RateLimitInput { - props { - label = "RateLimit" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RateLimitPage.wrn b/.publish/ui/components/RateLimitPage.wrn deleted file mode 100644 index f90235b6..00000000 --- a/.publish/ui/components/RateLimitPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RateLimitPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/RateLimitedState.wrn b/.publish/ui/components/RateLimitedState.wrn deleted file mode 100644 index 29b72837..00000000 --- a/.publish/ui/components/RateLimitedState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RateLimitedState { - props { - label = "RateLimited" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RateTable.wrn b/.publish/ui/components/RateTable.wrn deleted file mode 100644 index 1f5cc46f..00000000 --- a/.publish/ui/components/RateTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RateTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/Rating.wrn b/.publish/ui/components/Rating.wrn new file mode 100644 index 00000000..1298a069 --- /dev/null +++ b/.publish/ui/components/Rating.wrn @@ -0,0 +1,19 @@ +component Rating { + props { + size = "default" + color = "primary" + title = "Rating" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/RatingSlider.wrn b/.publish/ui/components/RatingSlider.wrn deleted file mode 100644 index 9c8eaebe..00000000 --- a/.publish/ui/components/RatingSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RatingSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/RecipientSelector.wrn b/.publish/ui/components/RecipientSelector.wrn deleted file mode 100644 index 648aad68..00000000 --- a/.publish/ui/components/RecipientSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RecipientSelector { - props { - label = "Recipient" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RecoveryCodeForm.wrn b/.publish/ui/components/RecoveryCodeForm.wrn deleted file mode 100644 index 884062e8..00000000 --- a/.publish/ui/components/RecoveryCodeForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RecoveryCodeForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/RecoveryCodeInput.wrn b/.publish/ui/components/RecoveryCodeInput.wrn deleted file mode 100644 index ebede31c..00000000 --- a/.publish/ui/components/RecoveryCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RecoveryCodeInput { - props { - label = "RecoveryCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RecurrenceRuleBuilder.wrn b/.publish/ui/components/RecurrenceRuleBuilder.wrn deleted file mode 100644 index b77ed077..00000000 --- a/.publish/ui/components/RecurrenceRuleBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RecurrenceRuleBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/RecurringSchedulePicker.wrn b/.publish/ui/components/RecurringSchedulePicker.wrn deleted file mode 100644 index d3a137a4..00000000 --- a/.publish/ui/components/RecurringSchedulePicker.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RecurringSchedulePicker { - props { - id = "recurring-schedule" - name = "recurrence" - label = "Repeat" - value = "none" - disabled = false - class = "" - } - view { -
- } -} diff --git a/.publish/ui/components/RedirectUriInput.wrn b/.publish/ui/components/RedirectUriInput.wrn deleted file mode 100644 index 269fa2d1..00000000 --- a/.publish/ui/components/RedirectUriInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RedirectUriInput { - props { - label = "RedirectUri" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ReferenceInput.wrn b/.publish/ui/components/ReferenceInput.wrn deleted file mode 100644 index cacd74f0..00000000 --- a/.publish/ui/components/ReferenceInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ReferenceInput { - props { - label = "Reference" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RegexInput.wrn b/.publish/ui/components/RegexInput.wrn deleted file mode 100644 index c378e3b3..00000000 --- a/.publish/ui/components/RegexInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RegexInput { - props { - label = "Regex" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RegionAvailabilityTable.wrn b/.publish/ui/components/RegionAvailabilityTable.wrn deleted file mode 100644 index 5064fb24..00000000 --- a/.publish/ui/components/RegionAvailabilityTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RegionAvailabilityTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/RegionSelector.wrn b/.publish/ui/components/RegionSelector.wrn deleted file mode 100644 index 8612f1ad..00000000 --- a/.publish/ui/components/RegionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RegionSelector { - props { - label = "Region" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RegionUnavailableAlert.wrn b/.publish/ui/components/RegionUnavailableAlert.wrn deleted file mode 100644 index 0c87af5f..00000000 --- a/.publish/ui/components/RegionUnavailableAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RegionUnavailableAlert { - props { - label = "RegionUnavailable" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RegionUnavailableState.wrn b/.publish/ui/components/RegionUnavailableState.wrn deleted file mode 100644 index 300c0c1f..00000000 --- a/.publish/ui/components/RegionUnavailableState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RegionUnavailableState { - props { - label = "RegionUnavailable" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RegionalPrivacyBanner.wrn b/.publish/ui/components/RegionalPrivacyBanner.wrn deleted file mode 100644 index f5c732fd..00000000 --- a/.publish/ui/components/RegionalPrivacyBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RegionalPrivacyBanner { - props { - label = "RegionalPrivacy" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RejectOptionalCookiesButton.wrn b/.publish/ui/components/RejectOptionalCookiesButton.wrn deleted file mode 100644 index 78e29b4e..00000000 --- a/.publish/ui/components/RejectOptionalCookiesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RejectOptionalCookiesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ReopenCookieSettingsButton.wrn b/.publish/ui/components/ReopenCookieSettingsButton.wrn deleted file mode 100644 index 8a9959ad..00000000 --- a/.publish/ui/components/ReopenCookieSettingsButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ReopenCookieSettingsButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ReportCard.wrn b/.publish/ui/components/ReportCard.wrn deleted file mode 100644 index 84721dc0..00000000 --- a/.publish/ui/components/ReportCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ReportCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/RequestResponseViewer.wrn b/.publish/ui/components/RequestResponseViewer.wrn deleted file mode 100644 index 06383d12..00000000 --- a/.publish/ui/components/RequestResponseViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RequestResponseViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/RequestViewer.wrn b/.publish/ui/components/RequestViewer.wrn deleted file mode 100644 index 32531ac7..00000000 --- a/.publish/ui/components/RequestViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RequestViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/RequiredIndicator.wrn b/.publish/ui/components/RequiredIndicator.wrn deleted file mode 100644 index c1d9ef32..00000000 --- a/.publish/ui/components/RequiredIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RequiredIndicator { - props { - label = "Required" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ResetPasswordForm.wrn b/.publish/ui/components/ResetPasswordForm.wrn deleted file mode 100644 index a2bcaccc..00000000 --- a/.publish/ui/components/ResetPasswordForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResetPasswordForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ResizablePanel.wrn b/.publish/ui/components/ResizablePanel.wrn deleted file mode 100644 index c017f8e1..00000000 --- a/.publish/ui/components/ResizablePanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResizablePanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ResourceCard.wrn b/.publish/ui/components/ResourceCard.wrn deleted file mode 100644 index 1b9de0fb..00000000 --- a/.publish/ui/components/ResourceCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResourceCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ResourceDownloadCard.wrn b/.publish/ui/components/ResourceDownloadCard.wrn deleted file mode 100644 index 4cf3bf02..00000000 --- a/.publish/ui/components/ResourceDownloadCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResourceDownloadCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ResourcePageShell.wrn b/.publish/ui/components/ResourcePageShell.wrn deleted file mode 100644 index 74efa28b..00000000 --- a/.publish/ui/components/ResourcePageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResourcePageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ResourceSearch.wrn b/.publish/ui/components/ResourceSearch.wrn deleted file mode 100644 index 2277b9da..00000000 --- a/.publish/ui/components/ResourceSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResourceSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ResourceTypeBadge.wrn b/.publish/ui/components/ResourceTypeBadge.wrn deleted file mode 100644 index d1444b18..00000000 --- a/.publish/ui/components/ResourceTypeBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ResourceTypeBadge { - props { - label = "ResourceType" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ResourcesMegaMenu.wrn b/.publish/ui/components/ResourcesMegaMenu.wrn deleted file mode 100644 index e5b32038..00000000 --- a/.publish/ui/components/ResourcesMegaMenu.wrn +++ /dev/null @@ -1,365 +0,0 @@ -component ResourcesMegaMenu { - props { - class: string = "" - } - view { -
-
-
- - -
-
-
-

- Resources -

- -

- Learn, build, and get support -

- -

- Explore practical guides, customer stories, product updates, - and security resources. -

-
- - -
- -
- - - - - - - - - - - Blog - - - - - - - Product updates, engineering insights, identity trends, and - company news. - - - - - - - - - - - - - - Customer stories - - - - - - - See how teams use WrNexus to secure and scale their - applications. - - - - - - - - - - - - - - Guides - - - - - - - Practical identity, security, SaaS, and architecture - walkthroughs. - - - - - - - - - - - - - - Help center - - - - - - - Find answers for account, workspace, billing, and security - questions. - - - - - - - - - - - - - - Security - - - - - - - Learn how WrNexus protects accounts, sessions, and - organizations. - - - - - - - - - - - - - - Trust center - - - - - - - Review compliance, privacy, infrastructure, and operational - controls. - - - -
- - - View all resources - - - -
- - - -
- - -
-
- - - - Webinars - - - - - - Events - - - - - - Reports - - - - - - Newsletter - -
- - - Contact our team - - - -
-
-
- } -} diff --git a/.publish/ui/components/ResponseViewer.wrn b/.publish/ui/components/ResponseViewer.wrn deleted file mode 100644 index 30a92d7c..00000000 --- a/.publish/ui/components/ResponseViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResponseViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ResponsibleDisclosureCTA.wrn b/.publish/ui/components/ResponsibleDisclosureCTA.wrn deleted file mode 100644 index 0b823cb2..00000000 --- a/.publish/ui/components/ResponsibleDisclosureCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ResponsibleDisclosureCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ResponsiveTable.wrn b/.publish/ui/components/ResponsiveTable.wrn deleted file mode 100644 index 31c07a09..00000000 --- a/.publish/ui/components/ResponsiveTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResponsiveTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ResultsSection.wrn b/.publish/ui/components/ResultsSection.wrn deleted file mode 100644 index 15edae6d..00000000 --- a/.publish/ui/components/ResultsSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResultsSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/RetentionTable.wrn b/.publish/ui/components/RetentionTable.wrn deleted file mode 100644 index 43accd7f..00000000 --- a/.publish/ui/components/RetentionTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RetentionTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/RetryCountInput.wrn b/.publish/ui/components/RetryCountInput.wrn deleted file mode 100644 index 963d1e61..00000000 --- a/.publish/ui/components/RetryCountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RetryCountInput { - props { - label = "RetryCount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RevenueChart.wrn b/.publish/ui/components/RevenueChart.wrn deleted file mode 100644 index 5e3890b9..00000000 --- a/.publish/ui/components/RevenueChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RevenueChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/RgbColorInput.wrn b/.publish/ui/components/RgbColorInput.wrn deleted file mode 100644 index e71d5341..00000000 --- a/.publish/ui/components/RgbColorInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RgbColorInput { - props { - label = "RgbColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RichTextEditor.wrn b/.publish/ui/components/RichTextEditor.wrn deleted file mode 100644 index d90f189b..00000000 --- a/.publish/ui/components/RichTextEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RichTextEditor { - props { - label = "RichText" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RichTextInput.wrn b/.publish/ui/components/RichTextInput.wrn deleted file mode 100644 index 809a85d0..00000000 --- a/.publish/ui/components/RichTextInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RichTextInput { - props { - label = "RichText" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RoleSelector.wrn b/.publish/ui/components/RoleSelector.wrn deleted file mode 100644 index 0f1afa13..00000000 --- a/.publish/ui/components/RoleSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RoleSelector { - props { - label = "Role" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/RollingDateRangePicker.wrn b/.publish/ui/components/RollingDateRangePicker.wrn deleted file mode 100644 index a760949c..00000000 --- a/.publish/ui/components/RollingDateRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RollingDateRangePicker { - props { - label = "RollingDateRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SDKCard.wrn b/.publish/ui/components/SDKCard.wrn deleted file mode 100644 index 215e3103..00000000 --- a/.publish/ui/components/SDKCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SDKCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SDKLanguageTabs.wrn b/.publish/ui/components/SDKLanguageTabs.wrn deleted file mode 100644 index f95d40b2..00000000 --- a/.publish/ui/components/SDKLanguageTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SDKLanguageTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SDKTabs.wrn b/.publish/ui/components/SDKTabs.wrn deleted file mode 100644 index 7e8af688..00000000 --- a/.publish/ui/components/SDKTabs.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SDKTabs { - props { - label = "SDK languages" - tabs = [] - defaultIndex = 0 - class = "" - } - state active = defaultIndex - view {
{#each tabs as tab, index}{/each}
{#each tabs as tab, index}
{tab.code}
{/each}
} -} diff --git a/.publish/ui/components/SaveCookiePreferencesButton.wrn b/.publish/ui/components/SaveCookiePreferencesButton.wrn deleted file mode 100644 index b38f2961..00000000 --- a/.publish/ui/components/SaveCookiePreferencesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SaveCookiePreferencesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/SavedFilterSelector.wrn b/.publish/ui/components/SavedFilterSelector.wrn deleted file mode 100644 index 0c809640..00000000 --- a/.publish/ui/components/SavedFilterSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SavedFilterSelector { - props { - label = "SavedFilter" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ScheduleMessagePicker.wrn b/.publish/ui/components/ScheduleMessagePicker.wrn deleted file mode 100644 index 2b7d2243..00000000 --- a/.publish/ui/components/ScheduleMessagePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ScheduleMessagePicker { - props { - label = "ScheduleMessage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SchedulePicker.wrn b/.publish/ui/components/SchedulePicker.wrn deleted file mode 100644 index 51ea45d6..00000000 --- a/.publish/ui/components/SchedulePicker.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component SchedulePicker { - props { - class = "" - label = "Schedule" - } - view { -
{label}
- } -} diff --git a/.publish/ui/components/ScheduledDateTimePicker.wrn b/.publish/ui/components/ScheduledDateTimePicker.wrn deleted file mode 100644 index 8c472235..00000000 --- a/.publish/ui/components/ScheduledDateTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ScheduledDateTimePicker { - props { - label = "ScheduledDateTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ScreenshotFrame.wrn b/.publish/ui/components/ScreenshotFrame.wrn deleted file mode 100644 index d5db0b14..00000000 --- a/.publish/ui/components/ScreenshotFrame.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ScreenshotFrame { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/ScrollArea.wrn b/.publish/ui/components/ScrollArea.wrn deleted file mode 100644 index 5c5f0ce6..00000000 --- a/.publish/ui/components/ScrollArea.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component ScrollArea { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/Scrollspy.wrn b/.publish/ui/components/Scrollspy.wrn new file mode 100644 index 00000000..cbde5bae --- /dev/null +++ b/.publish/ui/components/Scrollspy.wrn @@ -0,0 +1,17 @@ +component Scrollspy { + props { + size = "default" + color = "primary" + label = "Scrollspy" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/SdkLanguageSelector.wrn b/.publish/ui/components/SdkLanguageSelector.wrn deleted file mode 100644 index 1d02e63c..00000000 --- a/.publish/ui/components/SdkLanguageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SdkLanguageSelector { - props { - label = "SdkLanguage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SearchBox.wrn b/.publish/ui/components/SearchBox.wrn new file mode 100644 index 00000000..e319a93a --- /dev/null +++ b/.publish/ui/components/SearchBox.wrn @@ -0,0 +1,20 @@ +component SearchBox { + props { + size = "default" + color = "primary" + label = "Search Box" + name = "" + value = "" + placeholder = "" + type = "search" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/SearchButton.wrn b/.publish/ui/components/SearchButton.wrn deleted file mode 100644 index 36a45fec..00000000 --- a/.publish/ui/components/SearchButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SearchButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/SearchCategoryTabs.wrn b/.publish/ui/components/SearchCategoryTabs.wrn deleted file mode 100644 index 25c4abc5..00000000 --- a/.publish/ui/components/SearchCategoryTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SearchCategoryTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SearchDialog.wrn b/.publish/ui/components/SearchDialog.wrn deleted file mode 100644 index 15bbb874..00000000 --- a/.publish/ui/components/SearchDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SearchDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/SearchEmptyState.wrn b/.publish/ui/components/SearchEmptyState.wrn deleted file mode 100644 index ebe7c1ba..00000000 --- a/.publish/ui/components/SearchEmptyState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SearchEmptyState { - props { - label = "SearchEmpty" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SearchInput.wrn b/.publish/ui/components/SearchInput.wrn deleted file mode 100644 index 4fcf2dcc..00000000 --- a/.publish/ui/components/SearchInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component SearchInput { - props { - class = "" - id = "" - name = "" - label = "Search" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
- - -

{help}

- -
- } -} diff --git a/.publish/ui/components/SearchLoadingState.wrn b/.publish/ui/components/SearchLoadingState.wrn deleted file mode 100644 index 8e7d98c4..00000000 --- a/.publish/ui/components/SearchLoadingState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SearchLoadingState { - props { - label = "SearchLoading" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SearchResultItem.wrn b/.publish/ui/components/SearchResultItem.wrn deleted file mode 100644 index 443b72c4..00000000 --- a/.publish/ui/components/SearchResultItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SearchResultItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SecondPicker.wrn b/.publish/ui/components/SecondPicker.wrn deleted file mode 100644 index 93308a8a..00000000 --- a/.publish/ui/components/SecondPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SecondPicker { - props { - label = "Second" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SecondaryButton.wrn b/.publish/ui/components/SecondaryButton.wrn deleted file mode 100644 index 10d52d85..00000000 --- a/.publish/ui/components/SecondaryButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component SecondaryButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/SecretDisplay.wrn b/.publish/ui/components/SecretDisplay.wrn deleted file mode 100644 index 0195d982..00000000 --- a/.publish/ui/components/SecretDisplay.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecretDisplay { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SecretInput.wrn b/.publish/ui/components/SecretInput.wrn deleted file mode 100644 index 25564ab3..00000000 --- a/.publish/ui/components/SecretInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SecretInput { - props { - label = "Secret" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SecretRevealDialog.wrn b/.publish/ui/components/SecretRevealDialog.wrn deleted file mode 100644 index 38c88ce0..00000000 --- a/.publish/ui/components/SecretRevealDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecretRevealDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/Section.wrn b/.publish/ui/components/Section.wrn deleted file mode 100644 index 81cf8331..00000000 --- a/.publish/ui/components/Section.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component Section { - props { - id = "" - size = "default" - surface = "default" - className = "" - } - view { -
- } -} diff --git a/.publish/ui/components/SectionActions.wrn b/.publish/ui/components/SectionActions.wrn deleted file mode 100644 index 3e9e1c65..00000000 --- a/.publish/ui/components/SectionActions.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SectionActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { - {#if href}{label}{:else}{/if} - } -} diff --git a/.publish/ui/components/SectionHeader.wrn b/.publish/ui/components/SectionHeader.wrn deleted file mode 100644 index 030df5e3..00000000 --- a/.publish/ui/components/SectionHeader.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component SectionHeader { - props { - class = "" - eyebrow = "" - title = "Section title" - description = "" - align = "left" - } - view { -

{eyebrow}

{title}

{description}

- } -} diff --git a/.publish/ui/components/SectionHeading.wrn b/.publish/ui/components/SectionHeading.wrn deleted file mode 100644 index bb0466ab..00000000 --- a/.publish/ui/components/SectionHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component SectionHeading { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/SecurityAlert.wrn b/.publish/ui/components/SecurityAlert.wrn deleted file mode 100644 index 09254f5b..00000000 --- a/.publish/ui/components/SecurityAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SecurityAlert { - props { - label = "Security" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SecurityContactCard.wrn b/.publish/ui/components/SecurityContactCard.wrn deleted file mode 100644 index 59b4c5b4..00000000 --- a/.publish/ui/components/SecurityContactCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecurityContactCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SecurityFeatureCard.wrn b/.publish/ui/components/SecurityFeatureCard.wrn deleted file mode 100644 index 1c83a8df..00000000 --- a/.publish/ui/components/SecurityFeatureCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecurityFeatureCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SecurityHero.wrn b/.publish/ui/components/SecurityHero.wrn deleted file mode 100644 index 8d15334a..00000000 --- a/.publish/ui/components/SecurityHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecurityHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/SecurityPillarGrid.wrn b/.publish/ui/components/SecurityPillarGrid.wrn deleted file mode 100644 index 72fd8159..00000000 --- a/.publish/ui/components/SecurityPillarGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecurityPillarGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/SecurityPracticeList.wrn b/.publish/ui/components/SecurityPracticeList.wrn deleted file mode 100644 index 733bee29..00000000 --- a/.publish/ui/components/SecurityPracticeList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecurityPracticeList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/SecurityReportForm.wrn b/.publish/ui/components/SecurityReportForm.wrn deleted file mode 100644 index b94dbd1a..00000000 --- a/.publish/ui/components/SecurityReportForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecurityReportForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SegmentedButtonGroup.wrn b/.publish/ui/components/SegmentedButtonGroup.wrn deleted file mode 100644 index 65cdbc6b..00000000 --- a/.publish/ui/components/SegmentedButtonGroup.wrn +++ /dev/null @@ -1,44 +0,0 @@ -component SegmentedButtonGroup { - props { - label = "Options" - items = [] - active = "" - size = "md" - fullWidth = false - class = "" - } - - state current = active - - view { -
- {#each items as item, index} - - {:empty} - No options available - {/each} -
- } -} diff --git a/.publish/ui/components/SenderIdInput.wrn b/.publish/ui/components/SenderIdInput.wrn deleted file mode 100644 index adc69c57..00000000 --- a/.publish/ui/components/SenderIdInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SenderIdInput { - props { - label = "SenderId" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ServerErrorPage.wrn b/.publish/ui/components/ServerErrorPage.wrn deleted file mode 100644 index b83167dc..00000000 --- a/.publish/ui/components/ServerErrorPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ServerErrorPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/ServiceLevelTable.wrn b/.publish/ui/components/ServiceLevelTable.wrn deleted file mode 100644 index 4f996a95..00000000 --- a/.publish/ui/components/ServiceLevelTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ServiceLevelTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ServiceStatusBadge.wrn b/.publish/ui/components/ServiceStatusBadge.wrn deleted file mode 100644 index c4ae243e..00000000 --- a/.publish/ui/components/ServiceStatusBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ServiceStatusBadge { - props { - label = "ServiceStatus" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ServiceStatusList.wrn b/.publish/ui/components/ServiceStatusList.wrn deleted file mode 100644 index 9eb73f53..00000000 --- a/.publish/ui/components/ServiceStatusList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ServiceStatusList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/ServiceStatusRow.wrn b/.publish/ui/components/ServiceStatusRow.wrn deleted file mode 100644 index debc8b69..00000000 --- a/.publish/ui/components/ServiceStatusRow.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ServiceStatusRow { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/SessionCard.wrn b/.publish/ui/components/SessionCard.wrn deleted file mode 100644 index 6853a7f2..00000000 --- a/.publish/ui/components/SessionCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SessionCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SessionExpiredDialog.wrn b/.publish/ui/components/SessionExpiredDialog.wrn deleted file mode 100644 index f3c3358c..00000000 --- a/.publish/ui/components/SessionExpiredDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SessionExpiredDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/SetupChecklist.wrn b/.publish/ui/components/SetupChecklist.wrn deleted file mode 100644 index 56336e91..00000000 --- a/.publish/ui/components/SetupChecklist.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SetupChecklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SeveritySelector.wrn b/.publish/ui/components/SeveritySelector.wrn deleted file mode 100644 index 140be8ce..00000000 --- a/.publish/ui/components/SeveritySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SeveritySelector { - props { - label = "Severity" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ShadowPicker.wrn b/.publish/ui/components/ShadowPicker.wrn deleted file mode 100644 index baa57205..00000000 --- a/.publish/ui/components/ShadowPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ShadowPicker { - props { - label = "Shadow" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ShareAction.wrn b/.publish/ui/components/ShareAction.wrn deleted file mode 100644 index a15c143b..00000000 --- a/.publish/ui/components/ShareAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ShareAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ShareButton.wrn b/.publish/ui/components/ShareButton.wrn deleted file mode 100644 index fcab2456..00000000 --- a/.publish/ui/components/ShareButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ShareButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/SidePanel.wrn b/.publish/ui/components/SidePanel.wrn deleted file mode 100644 index 202caf90..00000000 --- a/.publish/ui/components/SidePanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SidePanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/Sidebar.wrn b/.publish/ui/components/Sidebar.wrn new file mode 100644 index 00000000..150b8395 --- /dev/null +++ b/.publish/ui/components/Sidebar.wrn @@ -0,0 +1,17 @@ +component Sidebar { + props { + size = "default" + color = "primary" + label = "Sidebar" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/SidebarLayout.wrn b/.publish/ui/components/SidebarLayout.wrn deleted file mode 100644 index 82d8b428..00000000 --- a/.publish/ui/components/SidebarLayout.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component SidebarLayout { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/SignInForm.wrn b/.publish/ui/components/SignInForm.wrn deleted file mode 100644 index 86c32145..00000000 --- a/.publish/ui/components/SignInForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SignInForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SignInLink.wrn b/.publish/ui/components/SignInLink.wrn deleted file mode 100644 index 343af26d..00000000 --- a/.publish/ui/components/SignInLink.wrn +++ /dev/null @@ -1,30 +0,0 @@ -component SignInLink { - props { - label = "Sign in with password" - description = "Use your username or email and password" - href = "" - type = "button" - variant = "secondary" - disabled = false - icon = "icon-[lucide--lock-keyhole]" - tone = "password" - class = "" - } - view { - - {#if href} - - {#if tone == "account"}{:else}{/if} - {label}{#if description}{description}{/if} - - - {:else} - - {/if} - - } -} diff --git a/.publish/ui/components/SignUpForm.wrn b/.publish/ui/components/SignUpForm.wrn deleted file mode 100644 index 8d0f8c3b..00000000 --- a/.publish/ui/components/SignUpForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SignUpForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SiteSearch.wrn b/.publish/ui/components/SiteSearch.wrn deleted file mode 100644 index 108cc320..00000000 --- a/.publish/ui/components/SiteSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SiteSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SkipLink.wrn b/.publish/ui/components/SkipLink.wrn deleted file mode 100644 index ec7e55eb..00000000 --- a/.publish/ui/components/SkipLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SkipLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/SlaTable.wrn b/.publish/ui/components/SlaTable.wrn deleted file mode 100644 index 2c963e9c..00000000 --- a/.publish/ui/components/SlaTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SlaTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/Slider.wrn b/.publish/ui/components/Slider.wrn deleted file mode 100644 index da39f7ff..00000000 --- a/.publish/ui/components/Slider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Slider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SlugInput.wrn b/.publish/ui/components/SlugInput.wrn deleted file mode 100644 index 641b6769..00000000 --- a/.publish/ui/components/SlugInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SlugInput { - props { - label = "Slug" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SmallText.wrn b/.publish/ui/components/SmallText.wrn deleted file mode 100644 index 615ea928..00000000 --- a/.publish/ui/components/SmallText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component SmallText { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/SmartRouteDiagram.wrn b/.publish/ui/components/SmartRouteDiagram.wrn deleted file mode 100644 index 3401b7f3..00000000 --- a/.publish/ui/components/SmartRouteDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SmartRouteDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{#if title}{title}{/if}{#if value}{value}{/if}{#if description}{description}{/if}
{#if loading}
{:else}
{/if}{#if summary}

{summary}

{/if}
} -} diff --git a/.publish/ui/components/SmsComposer.wrn b/.publish/ui/components/SmsComposer.wrn deleted file mode 100644 index 72965025..00000000 --- a/.publish/ui/components/SmsComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SmsComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/SmsMessageEditor.wrn b/.publish/ui/components/SmsMessageEditor.wrn deleted file mode 100644 index 383c1cde..00000000 --- a/.publish/ui/components/SmsMessageEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SmsMessageEditor { - props { - label = "SmsMessage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SmsSegmentCounter.wrn b/.publish/ui/components/SmsSegmentCounter.wrn deleted file mode 100644 index 67cff100..00000000 --- a/.publish/ui/components/SmsSegmentCounter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SmsSegmentCounter { - props { - label = "SmsSegment" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SocialShare.wrn b/.publish/ui/components/SocialShare.wrn deleted file mode 100644 index b0420ef5..00000000 --- a/.publish/ui/components/SocialShare.wrn +++ /dev/null @@ -1,143 +0,0 @@ -component SocialShare { - props { - class: string = "" - title = "Share this page" - description = "" - - url = "" - shareText = "" - - centered = false - compact = false - showTitle = true - showCopy = true - - networks = [] - } - - state copied = false - - view { - - } -} diff --git a/.publish/ui/components/SolutionHero.wrn b/.publish/ui/components/SolutionHero.wrn deleted file mode 100644 index 2929f126..00000000 --- a/.publish/ui/components/SolutionHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SolutionHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/SolutionPageShell.wrn b/.publish/ui/components/SolutionPageShell.wrn deleted file mode 100644 index 77c761f3..00000000 --- a/.publish/ui/components/SolutionPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SolutionPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/SolutionSection.wrn b/.publish/ui/components/SolutionSection.wrn deleted file mode 100644 index 197b10d5..00000000 --- a/.publish/ui/components/SolutionSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SolutionSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/SolutionsMegaMenu.wrn b/.publish/ui/components/SolutionsMegaMenu.wrn deleted file mode 100644 index 48a1c6f3..00000000 --- a/.publish/ui/components/SolutionsMegaMenu.wrn +++ /dev/null @@ -1,368 +0,0 @@ -component SolutionsMegaMenu { - props { - class: string = "" - } - view { -
-
-
- - -
-
-
-

- Solutions -

- -

- Identity infrastructure for every stage of growth -

- -

- Choose a solution designed around your product, team, and customers. -

-
- - -
- -
- - - - - - - - - - - Startups - - - - - - - Launch secure authentication quickly without slowing product development. - - - - - - - - - - - - - - SaaS platforms - - - - - - - Add users, organizations, roles, SSO, and secure account recovery. - - - - - - - - - - - - - - Enterprise - - - - - - - Support complex organizations, governance, auditability, and scale. - - - - - - - - - - - - - - Developers - - - - - - - APIs, SDKs, webhooks, templates, and developer-friendly workflows. - - - - - - - - - - - - - - Agencies - - - - - - - Manage identities across customer projects and branded experiences. - - - - - - - - - - - - - - B2B products - - - - - - - Secure customer organizations, team access, and enterprise connections. - - - -
- - - View all solutions - - - -
- - - -
- - -
-
- - - - Customer identity - - - - - - Workforce identity - - - - - - Marketplaces - - - - - - Multi-tenant apps - -
- - - See customer stories - - - -
-
-
- } -} diff --git a/.publish/ui/components/SortableTable.wrn b/.publish/ui/components/SortableTable.wrn deleted file mode 100644 index 9a71a3da..00000000 --- a/.publish/ui/components/SortableTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SortableTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/SplitButton.wrn b/.publish/ui/components/SplitButton.wrn deleted file mode 100644 index a64a924d..00000000 --- a/.publish/ui/components/SplitButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SplitButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/SplitCTA.wrn b/.publish/ui/components/SplitCTA.wrn deleted file mode 100644 index 72f2c2cc..00000000 --- a/.publish/ui/components/SplitCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SplitCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/SplitHero.wrn b/.publish/ui/components/SplitHero.wrn deleted file mode 100644 index 03647264..00000000 --- a/.publish/ui/components/SplitHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SplitHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/SplitLayout.wrn b/.publish/ui/components/SplitLayout.wrn deleted file mode 100644 index 05062fdd..00000000 --- a/.publish/ui/components/SplitLayout.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component SplitLayout { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/SplitSectionHeader.wrn b/.publish/ui/components/SplitSectionHeader.wrn deleted file mode 100644 index 5306fec8..00000000 --- a/.publish/ui/components/SplitSectionHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SplitSectionHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/StartFreeButton.wrn b/.publish/ui/components/StartFreeButton.wrn deleted file mode 100644 index 2004690c..00000000 --- a/.publish/ui/components/StartFreeButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component StartFreeButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/StatCard.wrn b/.publish/ui/components/StatCard.wrn deleted file mode 100644 index 29f07204..00000000 --- a/.publish/ui/components/StatCard.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component StatCard { - props { - class = "" - label = "Metric" - value = "0" - change = "" - trend = "neutral" - } - view { -

{label}

{value}

{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}
- } -} diff --git a/.publish/ui/components/StateSelector.wrn b/.publish/ui/components/StateSelector.wrn deleted file mode 100644 index d1ca9db9..00000000 --- a/.publish/ui/components/StateSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StateSelector { - props { - label = "State" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/StatusBadge.wrn b/.publish/ui/components/StatusBadge.wrn deleted file mode 100644 index b4c2bf8c..00000000 --- a/.publish/ui/components/StatusBadge.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component StatusBadge { - props { - class = "" - status = "operational" - } - view { - {status} - } -} diff --git a/.publish/ui/components/StatusBanner.wrn b/.publish/ui/components/StatusBanner.wrn deleted file mode 100644 index 83c8f0f7..00000000 --- a/.publish/ui/components/StatusBanner.wrn +++ /dev/null @@ -1,122 +0,0 @@ -component StatusBanner { - props { - class: string = "" - type = "info" - - title = "" - description = "" - - actionLabel = "" - actionHref = "" - - dismissible = true - compact = false - - details = [] - } - - state visible = true - - view { - - } -} diff --git a/.publish/ui/components/StatusPageShell.wrn b/.publish/ui/components/StatusPageShell.wrn deleted file mode 100644 index 525cddb0..00000000 --- a/.publish/ui/components/StatusPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StatusPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/StatusSelector.wrn b/.publish/ui/components/StatusSelector.wrn deleted file mode 100644 index 090f482a..00000000 --- a/.publish/ui/components/StatusSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StatusSelector { - props { - label = "Status" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/StatusSubscribeForm.wrn b/.publish/ui/components/StatusSubscribeForm.wrn deleted file mode 100644 index 8720f0b3..00000000 --- a/.publish/ui/components/StatusSubscribeForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component StatusSubscribeForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/StatusTable.wrn b/.publish/ui/components/StatusTable.wrn deleted file mode 100644 index a18e80d4..00000000 --- a/.publish/ui/components/StatusTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StatusTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/StepNavigation.wrn b/.publish/ui/components/StepNavigation.wrn deleted file mode 100644 index 327b9b79..00000000 --- a/.publish/ui/components/StepNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StepNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/StepUpAuthenticationDialog.wrn b/.publish/ui/components/StepUpAuthenticationDialog.wrn deleted file mode 100644 index 42fc746e..00000000 --- a/.publish/ui/components/StepUpAuthenticationDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StepUpAuthenticationDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/Stepper.wrn b/.publish/ui/components/Stepper.wrn index 2f74d729..d279d4ae 100644 --- a/.publish/ui/components/Stepper.wrn +++ b/.publish/ui/components/Stepper.wrn @@ -1,13 +1,17 @@ component Stepper { props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" + size = "default" + color = "primary" + label = "Stepper" + items = [] + active = "" + orientation = "horizontal" class = "" } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} + view { + + } } diff --git a/.publish/ui/components/StepperInput.wrn b/.publish/ui/components/StepperInput.wrn deleted file mode 100644 index e7a8af04..00000000 --- a/.publish/ui/components/StepperInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StepperInput { - props { - label = "Stepper" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/StickerPicker.wrn b/.publish/ui/components/StickerPicker.wrn deleted file mode 100644 index 483898bd..00000000 --- a/.publish/ui/components/StickerPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StickerPicker { - props { - label = "Sticker" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Sticky.wrn b/.publish/ui/components/Sticky.wrn deleted file mode 100644 index 729e53e1..00000000 --- a/.publish/ui/components/Sticky.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Sticky { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/StickyLayout.wrn b/.publish/ui/components/StickyLayout.wrn deleted file mode 100644 index 9e30e02e..00000000 --- a/.publish/ui/components/StickyLayout.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component StickyLayout { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/StreetAddressInput.wrn b/.publish/ui/components/StreetAddressInput.wrn deleted file mode 100644 index a1c7b144..00000000 --- a/.publish/ui/components/StreetAddressInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StreetAddressInput { - props { - label = "StreetAddress" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/StrongPassword.wrn b/.publish/ui/components/StrongPassword.wrn new file mode 100644 index 00000000..d8f3137d --- /dev/null +++ b/.publish/ui/components/StrongPassword.wrn @@ -0,0 +1,215 @@ +component StrongPassword { + props { + size = "default" + color = "primary" + label = "Password" + name = "password" + value = "" + placeholder = "Create a strong password" + autocomplete = "new-password" + minLength = 8 + specialCharactersSet = "!@#$%^&*()_+-=[]{}|;:,.<>?" + requireLowercase = true + requireUppercase = true + requireNumber = true + requireSpecialCharacter = true + showRequirements = true + presentation = "inline" + hintText = "Use a unique password you do not use elsewhere." + emptyLabel = "Enter a password" + weakLabel = "Weak" + fairLabel = "Fair" + goodLabel = "Good" + strongLabel = "Strong" + disabled = false + readonly = false + required = false + invalid = false + validationMessage = "" + class = "" + @event input = function + @event change = function + @event strength = function + } + + state password = value + state detailsOpen = false + + functions { + function hasMinimumLength() { + return password.length >= Number(minLength) + } + + function hasLowercase() { + return password !== password.toUpperCase() + } + + function hasUppercase() { + return password !== password.toLowerCase() + } + + function hasNumber() { + return containsCharacterAt("0123456789", 0) + } + + function hasSpecialCharacter() { + return containsCharacterAt(specialCharactersSet, 0) + } + + function containsCharacterAt(characters, index) { + if (index >= characters.length) { + return false + } + if (password.includes(characters[index])) { + return true + } + return containsCharacterAt(characters, index + 1) + } + + function score() { + return (hasMinimumLength() ? 1 : 0) + (requireLowercase && hasLowercase() ? 1 : 0) + (requireUppercase && hasUppercase() ? 1 : 0) + (requireNumber && hasNumber() ? 1 : 0) + (requireSpecialCharacter && hasSpecialCharacter() ? 1 : 0) + } + + function maximumScore() { + return 1 + (requireLowercase ? 1 : 0) + (requireUppercase ? 1 : 0) + (requireNumber ? 1 : 0) + (requireSpecialCharacter ? 1 : 0) + } + + function strengthPercent() { + return Math.round(score() / maximumScore() * 100) + } + + function strengthLevel() { + if (!password) { + return "empty" + } + if (strengthPercent() <= 25) { + return "weak" + } + if (strengthPercent() <= 50) { + return "fair" + } + if (strengthPercent() < 100) { + return "good" + } + return "strong" + } + + function strengthLabel() { + if (strengthLevel() === "weak") { + return weakLabel + } + if (strengthLevel() === "fair") { + return fairLabel + } + if (strengthLevel() === "good") { + return goodLabel + } + if (strengthLevel() === "strong") { + return strongLabel + } + return emptyLabel + } + + } + + view { +
+ +
+ + + {#if presentation === "popover"} +
+ +
+
+ Password strength + {password ? strengthLabel() : emptyLabel} +
+
+ +
+ {#if showRequirements} +
    +
  • + At least {minLength} characters +
    • + {#if requireLowercase}
  • One lowercase letter
    • {/if} + {#if requireUppercase}
  • One uppercase letter
    • {/if} + {#if requireNumber}
  • One number
    • {/if} + {#if requireSpecialCharacter}
  • One special character: {specialCharactersSet}
    • {/if} +
+ {/if} + {#if hintText}{hintText}{/if} +
+
+ {/if} +
+ + {#if presentation !== "popover"} +
+
+ Password strength + {password ? strengthLabel() : emptyLabel} +
+
+ +
+ {#if showRequirements} +
    +
  • At least {minLength} characters
    • + {#if requireLowercase}
  • One lowercase letter
    • {/if} + {#if requireUppercase}
  • One uppercase letter
    • {/if} + {#if requireNumber}
  • One number
    • {/if} + {#if requireSpecialCharacter}
  • One special character: {specialCharactersSet}
    • {/if} +
+ {/if} + {#if hintText}{hintText}{/if} +
+ {/if} + + {validationMessage} +
+ } +} diff --git a/.publish/ui/components/StyledIcon.wrn b/.publish/ui/components/StyledIcon.wrn new file mode 100644 index 00000000..a394af25 --- /dev/null +++ b/.publish/ui/components/StyledIcon.wrn @@ -0,0 +1,19 @@ +component StyledIcon { + props { + size = "default" + color = "primary" + title = "Styled Icon" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
+ } +} diff --git a/.publish/ui/components/SubdomainInput.wrn b/.publish/ui/components/SubdomainInput.wrn deleted file mode 100644 index dcf246a0..00000000 --- a/.publish/ui/components/SubdomainInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SubdomainInput { - props { - label = "Subdomain" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SubjectInput.wrn b/.publish/ui/components/SubjectInput.wrn deleted file mode 100644 index 2351844c..00000000 --- a/.publish/ui/components/SubjectInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SubjectInput { - props { - label = "Subject" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SubprocessorTable.wrn b/.publish/ui/components/SubprocessorTable.wrn deleted file mode 100644 index 0cdd5ac1..00000000 --- a/.publish/ui/components/SubprocessorTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SubprocessorTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/SubsectionHeading.wrn b/.publish/ui/components/SubsectionHeading.wrn deleted file mode 100644 index e8456826..00000000 --- a/.publish/ui/components/SubsectionHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component SubsectionHeading { - props { - text = "" - align = "start" - class = "" - } - view {
{text}
} -} diff --git a/.publish/ui/components/SuccessCard.wrn b/.publish/ui/components/SuccessCard.wrn deleted file mode 100644 index ed7b77cb..00000000 --- a/.publish/ui/components/SuccessCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component SuccessCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SuccessState.wrn b/.publish/ui/components/SuccessState.wrn deleted file mode 100644 index cb589ade..00000000 --- a/.publish/ui/components/SuccessState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SuccessState { - props { - label = "Success" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/SupportRequestForm.wrn b/.publish/ui/components/SupportRequestForm.wrn deleted file mode 100644 index 3cf42b46..00000000 --- a/.publish/ui/components/SupportRequestForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SupportRequestForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/Surface.wrn b/.publish/ui/components/Surface.wrn deleted file mode 100644 index c12e44ce..00000000 --- a/.publish/ui/components/Surface.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Surface { - props { - class = "" - } - view {
} -} diff --git a/.publish/ui/components/TableHeader.wrn b/.publish/ui/components/TableHeader.wrn deleted file mode 100644 index 70c03ade..00000000 --- a/.publish/ui/components/TableHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TableHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
{eyebrow}

{title}

{description}

} -} diff --git a/.publish/ui/components/TableRow.wrn b/.publish/ui/components/TableRow.wrn deleted file mode 100644 index e6aa2e89..00000000 --- a/.publish/ui/components/TableRow.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TableRow { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

{title}

{description}

{emptyText}

} -} diff --git a/.publish/ui/components/TableSkeleton.wrn b/.publish/ui/components/TableSkeleton.wrn deleted file mode 100644 index 5e02a8db..00000000 --- a/.publish/ui/components/TableSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TableSkeleton { - props { - label = "Table" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Tabs.wrn b/.publish/ui/components/Tabs.wrn index 3f207391..7bdfea2b 100644 --- a/.publish/ui/components/Tabs.wrn +++ b/.publish/ui/components/Tabs.wrn @@ -1,10 +1,17 @@ component Tabs { props { + size = "default" + color = "primary" + label = "Tabs" + items = [] + active = "" + orientation = "horizontal" class = "" - active = "first" } - state current = active view { -
+ } } diff --git a/.publish/ui/components/TagInput.wrn b/.publish/ui/components/TagInput.wrn deleted file mode 100644 index fafa831e..00000000 --- a/.publish/ui/components/TagInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TagInput { - props { - label = "Tag" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TaxNotice.wrn b/.publish/ui/components/TaxNotice.wrn deleted file mode 100644 index 8c143dc0..00000000 --- a/.publish/ui/components/TaxNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TaxNotice { - props { - label = "Tax" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TaxRateInput.wrn b/.publish/ui/components/TaxRateInput.wrn deleted file mode 100644 index 52e09314..00000000 --- a/.publish/ui/components/TaxRateInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TaxRateInput { - props { - label = "TaxRate" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TeamMemberCard.wrn b/.publish/ui/components/TeamMemberCard.wrn deleted file mode 100644 index e7d96db8..00000000 --- a/.publish/ui/components/TeamMemberCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TeamMemberCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/TeamSizeSelector.wrn b/.publish/ui/components/TeamSizeSelector.wrn deleted file mode 100644 index d9145185..00000000 --- a/.publish/ui/components/TeamSizeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TeamSizeSelector { - props { - label = "TeamSize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TemplateCard.wrn b/.publish/ui/components/TemplateCard.wrn deleted file mode 100644 index 1b39f3e1..00000000 --- a/.publish/ui/components/TemplateCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component TemplateCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TemplateSelector.wrn b/.publish/ui/components/TemplateSelector.wrn deleted file mode 100644 index 1c7ba07b..00000000 --- a/.publish/ui/components/TemplateSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TemplateSelector { - props { - label = "Template" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TemplateVariableInput.wrn b/.publish/ui/components/TemplateVariableInput.wrn deleted file mode 100644 index 81ced6f4..00000000 --- a/.publish/ui/components/TemplateVariableInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TemplateVariableInput { - props { - label = "TemplateVariable" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TenantIsolationDiagram.wrn b/.publish/ui/components/TenantIsolationDiagram.wrn deleted file mode 100644 index cc899cd1..00000000 --- a/.publish/ui/components/TenantIsolationDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TenantIsolationDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/TerminalBlock.wrn b/.publish/ui/components/TerminalBlock.wrn deleted file mode 100644 index 54043019..00000000 --- a/.publish/ui/components/TerminalBlock.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TerminalBlock { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/TertiaryButton.wrn b/.publish/ui/components/TertiaryButton.wrn deleted file mode 100644 index aa80c94b..00000000 --- a/.publish/ui/components/TertiaryButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component TertiaryButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/.publish/ui/components/TestMessageDialog.wrn b/.publish/ui/components/TestMessageDialog.wrn deleted file mode 100644 index 42a1ba51..00000000 --- a/.publish/ui/components/TestMessageDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TestMessageDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} -} diff --git a/.publish/ui/components/TestimonialCard.wrn b/.publish/ui/components/TestimonialCard.wrn deleted file mode 100644 index 657e9b2f..00000000 --- a/.publish/ui/components/TestimonialCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TestimonialCard { - props { - class = "" - quote = "Great product." - name = "Customer" - role = "" - company = "" - avatar = "" - } - view { -
“{quote}”
{name}
{role} · {company}
- } -} diff --git a/.publish/ui/components/TestimonialCarousel.wrn b/.publish/ui/components/TestimonialCarousel.wrn deleted file mode 100644 index 01bd0721..00000000 --- a/.publish/ui/components/TestimonialCarousel.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TestimonialCarousel { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/TextInput.wrn b/.publish/ui/components/TextInput.wrn deleted file mode 100644 index c585ae4c..00000000 --- a/.publish/ui/components/TextInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component TextInput { - props { - class = "" - id = "" - name = "" - label = "Text" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
- - -

{help}

- -
- } -} diff --git a/.publish/ui/components/TextLink.wrn b/.publish/ui/components/TextLink.wrn deleted file mode 100644 index 85bd38bd..00000000 --- a/.publish/ui/components/TextLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TextLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/TextSkeleton.wrn b/.publish/ui/components/TextSkeleton.wrn deleted file mode 100644 index becbcc06..00000000 --- a/.publish/ui/components/TextSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TextSkeleton { - props { - label = "Text" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ThemeColorPicker.wrn b/.publish/ui/components/ThemeColorPicker.wrn deleted file mode 100644 index 5ab4968b..00000000 --- a/.publish/ui/components/ThemeColorPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ThemeColorPicker { - props { - label = "ThemeColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ThemeSwitcher.wrn b/.publish/ui/components/ThemeSwitcher.wrn deleted file mode 100644 index 882397ce..00000000 --- a/.publish/ui/components/ThemeSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ThemeSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

{title}

{/if}{#if description}

{description}

{/if}{#if href}{actionLabel}{/if}
} -} diff --git a/.publish/ui/components/TimeInput.wrn b/.publish/ui/components/TimeInput.wrn deleted file mode 100644 index 2f492c68..00000000 --- a/.publish/ui/components/TimeInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component TimeInput { - props { - class = "" - id = "" - name = "" - label = "Time" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
- - -

{help}

- -
- } -} diff --git a/.publish/ui/components/TimePicker.wrn b/.publish/ui/components/TimePicker.wrn index 56335ad6..79dc66a7 100644 --- a/.publish/ui/components/TimePicker.wrn +++ b/.publish/ui/components/TimePicker.wrn @@ -1,15 +1,20 @@ component TimePicker { props { - id = "time-picker" - name = "time" - label = "Time" + size = "default" + color = "primary" + label = "Time Picker" + name = "" value = "" + placeholder = "" + type = "time" min = "" max = "" - step = 60 - required = false + step = "" disabled = false + required = false class = "" } - view {
} + view { + + } } diff --git a/.publish/ui/components/TimeRangePicker.wrn b/.publish/ui/components/TimeRangePicker.wrn deleted file mode 100644 index 560efe30..00000000 --- a/.publish/ui/components/TimeRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TimeRangePicker { - props { - label = "TimeRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/Timeline.wrn b/.publish/ui/components/Timeline.wrn index c3879653..e7db15c1 100644 --- a/.publish/ui/components/Timeline.wrn +++ b/.publish/ui/components/Timeline.wrn @@ -1,9 +1,19 @@ component Timeline { props { - class = "" + size = "default" + color = "primary" title = "Timeline" + description = "" + items = [] + variant = "default" + class = "" } view { -

{title}

+
+ {#if title}{title}{/if} + {#if description}

{description}

{/if} + {#if items}
{#each items as item}{item.label}{/each}
{/if} + +
} } diff --git a/.publish/ui/components/TimelineChart.wrn b/.publish/ui/components/TimelineChart.wrn deleted file mode 100644 index 74749404..00000000 --- a/.publish/ui/components/TimelineChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TimelineChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
{title}{value}{description}

{summary}

} -} diff --git a/.publish/ui/components/TimelineItem.wrn b/.publish/ui/components/TimelineItem.wrn deleted file mode 100644 index 760e7376..00000000 --- a/.publish/ui/components/TimelineItem.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component TimelineItem { - props { - class = "" - title = "Event" - date = "" - description = "" - status = "default" - } - view { -

  • {title}

    {description}

    • - } -} diff --git a/.publish/ui/components/TimeoutInput.wrn b/.publish/ui/components/TimeoutInput.wrn deleted file mode 100644 index 0b7649be..00000000 --- a/.publish/ui/components/TimeoutInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TimeoutInput { - props { - label = "Timeout" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TimezoneAwareTimePicker.wrn b/.publish/ui/components/TimezoneAwareTimePicker.wrn deleted file mode 100644 index 0f2bb20a..00000000 --- a/.publish/ui/components/TimezoneAwareTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TimezoneAwareTimePicker { - props { - label = "TimezoneAwareTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TimezoneSelector.wrn b/.publish/ui/components/TimezoneSelector.wrn deleted file mode 100644 index 3d138c39..00000000 --- a/.publish/ui/components/TimezoneSelector.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TimezoneSelector { - props { - class = "" - id = "timezone" - name = "timezone" - label = "Timezone" - } - view { - - } -} diff --git a/.publish/ui/components/Toast.wrn b/.publish/ui/components/Toast.wrn index dd9a4ce1..0b52e5bf 100644 --- a/.publish/ui/components/Toast.wrn +++ b/.publish/ui/components/Toast.wrn @@ -1,13 +1,19 @@ component Toast { props { - class = "" - title = "Saved" + size = "default" + color = "primary" + title = "Toast" description = "" - variant = "success" - duration = 5000 + items = [] + variant = "default" + class = "" } - state visible = true view { -
    {variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}

    {title}

    {description}

    +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/.publish/ui/components/ToastAction.wrn b/.publish/ui/components/ToastAction.wrn deleted file mode 100644 index 816fc95d..00000000 --- a/.publish/ui/components/ToastAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ToastAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/.publish/ui/components/ToastHost.wrn b/.publish/ui/components/ToastHost.wrn deleted file mode 100644 index 36a516b5..00000000 --- a/.publish/ui/components/ToastHost.wrn +++ /dev/null @@ -1,212 +0,0 @@ -component ToastHost { - props { - class: string = "" - } - state successOpen = false - state errorOpen = false - state warningOpen = false - state infoOpen = false - - state successTitle = "Changes saved" - state successMessage = "Your changes were saved successfully." - - state errorTitle = "Something went wrong" - state errorMessage = "We could not complete your request. Please try again." - - state warningTitle = "Action required" - state warningMessage = "Review the highlighted information before continuing." - - state infoTitle = "New update available" - state infoMessage = "A newer version of this feature is now available." - - view { -
    - -
    -
    - -
    - - - - -
    -

    - {successTitle} -

    - -

    - {successMessage} -

    -
    - - -
    - -
    -
    -
    -
    - - - - - -
    -
    - -
    - - - - -
    -

    - {warningTitle} -

    - -

    - {warningMessage} -

    -
    - - -
    - -
    -
    -
    -
    - - - -
    - } -} diff --git a/.publish/ui/components/ToastIcon.wrn b/.publish/ui/components/ToastIcon.wrn deleted file mode 100644 index a60a6800..00000000 --- a/.publish/ui/components/ToastIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ToastIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/ToastNotifications.wrn b/.publish/ui/components/ToastNotifications.wrn new file mode 100644 index 00000000..f786700e --- /dev/null +++ b/.publish/ui/components/ToastNotifications.wrn @@ -0,0 +1,19 @@ +component ToastNotifications { + props { + size = "default" + color = "primary" + title = "Toast Notifications" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/.publish/ui/components/ToastProgress.wrn b/.publish/ui/components/ToastProgress.wrn deleted file mode 100644 index 30055854..00000000 --- a/.publish/ui/components/ToastProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ToastProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/.publish/ui/components/Toggle.wrn b/.publish/ui/components/Toggle.wrn deleted file mode 100644 index 09b887ec..00000000 --- a/.publish/ui/components/Toggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component Toggle { - props { - label = "" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ToggleCount.wrn b/.publish/ui/components/ToggleCount.wrn new file mode 100644 index 00000000..7003bda2 --- /dev/null +++ b/.publish/ui/components/ToggleCount.wrn @@ -0,0 +1,20 @@ +component ToggleCount { + props { + size = "default" + color = "primary" + label = "Toggle Count" + name = "" + value = "" + placeholder = "" + type = "text" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/.publish/ui/components/ToggleGroup.wrn b/.publish/ui/components/ToggleGroup.wrn deleted file mode 100644 index 54cf872b..00000000 --- a/.publish/ui/components/ToggleGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ToggleGroup { - props { - label = "Toggle" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TogglePassword.wrn b/.publish/ui/components/TogglePassword.wrn new file mode 100644 index 00000000..43eb9cc6 --- /dev/null +++ b/.publish/ui/components/TogglePassword.wrn @@ -0,0 +1,153 @@ +component TogglePassword { + props { + size = "default" + color = "primary" + label = "Password" + name = "password" + value = "" + placeholder = "Enter your password" + autocomplete = "current-password" + minlength = "" + maxlength = "" + pattern = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" + fields = [] + visible = false + toggleable = true + toggleMode = "button" + checkboxLabel = "Show password" + showLabel = "Show password" + hideLabel = "Hide password" + disabled = false + readonly = false + required = false + invalid = false + helpText = "" + validationMessage = "" + class = "" + @event input = function + @event change = function + @event toggle = function + } + + state revealed = visible + + functions { + function toggleVisibility() { + if (disabled || readonly || !toggleable) { + return + } + revealed = !revealed + } + + function fieldId(field, index) { + return field.id || field.name || name + "-" + index + } + + function fieldName(field, index) { + return field.name || name + "-" + index + } + } + + view { +
    + {#if fields.length} +
    + {#each fields as field, index} +
    + +
    + + {#if toggleable && toggleMode === "button"} + + {/if} +
    +
    + {/each} +
    + {:else} + +
    + + {#if toggleable && toggleMode === "button"} + + {/if} +
    + {/if} + {#if toggleable && toggleMode === "checkbox"} + + {/if} + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
    + } +} diff --git a/.publish/ui/components/TokenInput.wrn b/.publish/ui/components/TokenInput.wrn deleted file mode 100644 index 70c4a9d6..00000000 --- a/.publish/ui/components/TokenInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TokenInput { - props { - label = "Token" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TotpVerificationForm.wrn b/.publish/ui/components/TotpVerificationForm.wrn deleted file mode 100644 index f6d8d8a4..00000000 --- a/.publish/ui/components/TotpVerificationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TotpVerificationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/TranslatedText.wrn b/.publish/ui/components/TranslatedText.wrn deleted file mode 100644 index 477cce79..00000000 --- a/.publish/ui/components/TranslatedText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TranslatedText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/TreeTable.wrn b/.publish/ui/components/TreeTable.wrn deleted file mode 100644 index 21bd6026..00000000 --- a/.publish/ui/components/TreeTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TreeTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/.publish/ui/components/TreeView.wrn b/.publish/ui/components/TreeView.wrn new file mode 100644 index 00000000..e0bab164 --- /dev/null +++ b/.publish/ui/components/TreeView.wrn @@ -0,0 +1,19 @@ +component TreeView { + props { + size = "default" + color = "primary" + title = "Tree View" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/.publish/ui/components/TrendIndicator.wrn b/.publish/ui/components/TrendIndicator.wrn deleted file mode 100644 index 9c1e6c3b..00000000 --- a/.publish/ui/components/TrendIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TrendIndicator { - props { - label = "Trend" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/TruncatedText.wrn b/.publish/ui/components/TruncatedText.wrn deleted file mode 100644 index 5dcc0be5..00000000 --- a/.publish/ui/components/TruncatedText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TruncatedText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/TrustBadgeList.wrn b/.publish/ui/components/TrustBadgeList.wrn deleted file mode 100644 index e504eedf..00000000 --- a/.publish/ui/components/TrustBadgeList.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component TrustBadgeList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view { -
    - {#if title || description}
    {#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}
    {/if} - {#if empty}

    {emptyText}

    {:else}
    {/if} -
    - } -} diff --git a/.publish/ui/components/Typography.wrn b/.publish/ui/components/Typography.wrn index 4e27647f..0fecb460 100644 --- a/.publish/ui/components/Typography.wrn +++ b/.publish/ui/components/Typography.wrn @@ -1,11 +1,13 @@ component Typography { props { - as = "p" - variant = "body" - align = "start" + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" class = "" } view { -
    +
    } } diff --git a/.publish/ui/components/UnavailableRegionState.wrn b/.publish/ui/components/UnavailableRegionState.wrn deleted file mode 100644 index f0f63bce..00000000 --- a/.publish/ui/components/UnavailableRegionState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UnavailableRegionState { - props { - label = "UnavailableRegion" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/.publish/ui/components/UnifiedTimelinePreview.wrn b/.publish/ui/components/UnifiedTimelinePreview.wrn deleted file mode 100644 index 4e0fbb4b..00000000 --- a/.publish/ui/components/UnifiedTimelinePreview.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component UnifiedTimelinePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    {#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    - } -} diff --git a/.publish/ui/components/UnsavedChangesDialog.wrn b/.publish/ui/components/UnsavedChangesDialog.wrn deleted file mode 100644 index a0ab2846..00000000 --- a/.publish/ui/components/UnsavedChangesDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component UnsavedChangesDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/.publish/ui/components/UploadItem.wrn b/.publish/ui/components/UploadItem.wrn deleted file mode 100644 index 81ceb207..00000000 --- a/.publish/ui/components/UploadItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component UploadItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/UploadPreview.wrn b/.publish/ui/components/UploadPreview.wrn deleted file mode 100644 index 79013b80..00000000 --- a/.publish/ui/components/UploadPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component UploadPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/UploadProgress.wrn b/.publish/ui/components/UploadProgress.wrn deleted file mode 100644 index df18c972..00000000 --- a/.publish/ui/components/UploadProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UploadProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/.publish/ui/components/UptimeChart.wrn b/.publish/ui/components/UptimeChart.wrn deleted file mode 100644 index 79fde90e..00000000 --- a/.publish/ui/components/UptimeChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UptimeChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/.publish/ui/components/UptimeMetric.wrn b/.publish/ui/components/UptimeMetric.wrn deleted file mode 100644 index 8c20faf7..00000000 --- a/.publish/ui/components/UptimeMetric.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UptimeMetric { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/.publish/ui/components/UrlInput.wrn b/.publish/ui/components/UrlInput.wrn deleted file mode 100644 index b9fd0534..00000000 --- a/.publish/ui/components/UrlInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component UrlInput { - props { - class = "" - id = "" - name = "" - label = "Url" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/.publish/ui/components/UsagePricingTable.wrn b/.publish/ui/components/UsagePricingTable.wrn deleted file mode 100644 index 34c41084..00000000 --- a/.publish/ui/components/UsagePricingTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component UsagePricingTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/.publish/ui/components/UseCaseSelector.wrn b/.publish/ui/components/UseCaseSelector.wrn deleted file mode 100644 index 8b8b257c..00000000 --- a/.publish/ui/components/UseCaseSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component UseCaseSelector { - props { - label = "UseCase" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/UserCard.wrn b/.publish/ui/components/UserCard.wrn deleted file mode 100644 index 05c685e6..00000000 --- a/.publish/ui/components/UserCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component UserCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/UsernameInput.wrn b/.publish/ui/components/UsernameInput.wrn deleted file mode 100644 index f2b7181f..00000000 --- a/.publish/ui/components/UsernameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component UsernameInput { - props { - label = "Username" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ValueCard.wrn b/.publish/ui/components/ValueCard.wrn deleted file mode 100644 index 15a9de30..00000000 --- a/.publish/ui/components/ValueCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ValueCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/ValuesGrid.wrn b/.publish/ui/components/ValuesGrid.wrn deleted file mode 100644 index a6a79c23..00000000 --- a/.publish/ui/components/ValuesGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ValuesGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/.publish/ui/components/VerificationCodeInput.wrn b/.publish/ui/components/VerificationCodeInput.wrn deleted file mode 100644 index db996491..00000000 --- a/.publish/ui/components/VerificationCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VerificationCodeInput { - props { - label = "VerificationCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/VerifiedBadge.wrn b/.publish/ui/components/VerifiedBadge.wrn deleted file mode 100644 index d9bc55fe..00000000 --- a/.publish/ui/components/VerifiedBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component VerifiedBadge { - props { - label = "Verified" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/.publish/ui/components/VersionSelector.wrn b/.publish/ui/components/VersionSelector.wrn deleted file mode 100644 index f35b6580..00000000 --- a/.publish/ui/components/VersionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VersionSelector { - props { - label = "Version" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/VerticalTabs.wrn b/.publish/ui/components/VerticalTabs.wrn deleted file mode 100644 index e48cbe8f..00000000 --- a/.publish/ui/components/VerticalTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VerticalTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/VideoCard.wrn b/.publish/ui/components/VideoCard.wrn deleted file mode 100644 index 8a7d2a3e..00000000 --- a/.publish/ui/components/VideoCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VideoCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/VideoPreviewDialog.wrn b/.publish/ui/components/VideoPreviewDialog.wrn deleted file mode 100644 index e871b30d..00000000 --- a/.publish/ui/components/VideoPreviewDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component VideoPreviewDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/.publish/ui/components/VideoUpload.wrn b/.publish/ui/components/VideoUpload.wrn deleted file mode 100644 index 2e058390..00000000 --- a/.publish/ui/components/VideoUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VideoUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/VirtualizedTable.wrn b/.publish/ui/components/VirtualizedTable.wrn deleted file mode 100644 index fb52b4d8..00000000 --- a/.publish/ui/components/VirtualizedTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component VirtualizedTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/.publish/ui/components/VisionSection.wrn b/.publish/ui/components/VisionSection.wrn deleted file mode 100644 index cacb5a7c..00000000 --- a/.publish/ui/components/VisionSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component VisionSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/.publish/ui/components/VisuallyHidden.wrn b/.publish/ui/components/VisuallyHidden.wrn deleted file mode 100644 index 6d093b9c..00000000 --- a/.publish/ui/components/VisuallyHidden.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component VisuallyHidden { - props { - className = "" - } - view { -
    - } -} diff --git a/.publish/ui/components/VoiceScriptComposer.wrn b/.publish/ui/components/VoiceScriptComposer.wrn deleted file mode 100644 index ace34f3e..00000000 --- a/.publish/ui/components/VoiceScriptComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VoiceScriptComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/VoiceScriptEditor.wrn b/.publish/ui/components/VoiceScriptEditor.wrn deleted file mode 100644 index 1bbd3af4..00000000 --- a/.publish/ui/components/VoiceScriptEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VoiceScriptEditor { - props { - label = "VoiceScript" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/VolumeInput.wrn b/.publish/ui/components/VolumeInput.wrn deleted file mode 100644 index 71c789cc..00000000 --- a/.publish/ui/components/VolumeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VolumeInput { - props { - label = "Volume" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/VolumeSlider.wrn b/.publish/ui/components/VolumeSlider.wrn deleted file mode 100644 index 3fe2439b..00000000 --- a/.publish/ui/components/VolumeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VolumeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/WarningCard.wrn b/.publish/ui/components/WarningCard.wrn deleted file mode 100644 index 6c9153b4..00000000 --- a/.publish/ui/components/WarningCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component WarningCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/WebhookEventCard.wrn b/.publish/ui/components/WebhookEventCard.wrn deleted file mode 100644 index 9a1a5014..00000000 --- a/.publish/ui/components/WebhookEventCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebhookEventCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/WebhookFlowDiagram.wrn b/.publish/ui/components/WebhookFlowDiagram.wrn deleted file mode 100644 index 2d01823e..00000000 --- a/.publish/ui/components/WebhookFlowDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component WebhookFlowDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/.publish/ui/components/WebhookPayloadViewer.wrn b/.publish/ui/components/WebhookPayloadViewer.wrn deleted file mode 100644 index 49be2b1b..00000000 --- a/.publish/ui/components/WebhookPayloadViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebhookPayloadViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/WebhookUrlInput.wrn b/.publish/ui/components/WebhookUrlInput.wrn deleted file mode 100644 index 91da3bab..00000000 --- a/.publish/ui/components/WebhookUrlInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WebhookUrlInput { - props { - label = "WebhookUrl" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/WebinarCard.wrn b/.publish/ui/components/WebinarCard.wrn deleted file mode 100644 index 0320138a..00000000 --- a/.publish/ui/components/WebinarCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebinarCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/WebinarRegistrationForm.wrn b/.publish/ui/components/WebinarRegistrationForm.wrn deleted file mode 100644 index adb252ca..00000000 --- a/.publish/ui/components/WebinarRegistrationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebinarRegistrationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/Well.wrn b/.publish/ui/components/Well.wrn deleted file mode 100644 index dbb584d3..00000000 --- a/.publish/ui/components/Well.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Well { - props { - class = "" - } - view {
    } -} diff --git a/.publish/ui/components/WhatsAppComposer.wrn b/.publish/ui/components/WhatsAppComposer.wrn deleted file mode 100644 index 9b4d9405..00000000 --- a/.publish/ui/components/WhatsAppComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WhatsAppComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/WhatsAppNumberInput.wrn b/.publish/ui/components/WhatsAppNumberInput.wrn deleted file mode 100644 index 0a5e6ab7..00000000 --- a/.publish/ui/components/WhatsAppNumberInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WhatsAppNumberInput { - props { - label = "WhatsAppNumber" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/WhatsAppTemplateEditor.wrn b/.publish/ui/components/WhatsAppTemplateEditor.wrn deleted file mode 100644 index 909d6089..00000000 --- a/.publish/ui/components/WhatsAppTemplateEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WhatsAppTemplateEditor { - props { - label = "WhatsAppTemplate" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/WideContainer.wrn b/.publish/ui/components/WideContainer.wrn deleted file mode 100644 index a9da7ff4..00000000 --- a/.publish/ui/components/WideContainer.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component WideContainer { - props { - class = "" - } - view {
    } -} diff --git a/.publish/ui/components/Wizard.wrn b/.publish/ui/components/Wizard.wrn deleted file mode 100644 index 6198321e..00000000 --- a/.publish/ui/components/Wizard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Wizard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/WizardHeader.wrn b/.publish/ui/components/WizardHeader.wrn deleted file mode 100644 index cab5ba9a..00000000 --- a/.publish/ui/components/WizardHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component WizardHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/.publish/ui/components/WizardNavigation.wrn b/.publish/ui/components/WizardNavigation.wrn deleted file mode 100644 index 08a7b2b8..00000000 --- a/.publish/ui/components/WizardNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component WizardNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/.publish/ui/components/WorkflowCanvasPreview.wrn b/.publish/ui/components/WorkflowCanvasPreview.wrn deleted file mode 100644 index 97d92844..00000000 --- a/.publish/ui/components/WorkflowCanvasPreview.wrn +++ /dev/null @@ -1,18 +0,0 @@ -component WorkflowCanvasPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    - {#if image}{alt}{:else}{/if} - {#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if} -
    - } -} diff --git a/.publish/ui/components/WorkflowProgress.wrn b/.publish/ui/components/WorkflowProgress.wrn deleted file mode 100644 index e5fd1dc7..00000000 --- a/.publish/ui/components/WorkflowProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component WorkflowProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/.publish/ui/components/WorkspaceCard.wrn b/.publish/ui/components/WorkspaceCard.wrn deleted file mode 100644 index 1b7ce09a..00000000 --- a/.publish/ui/components/WorkspaceCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component WorkspaceCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/WorkspaceSelector.wrn b/.publish/ui/components/WorkspaceSelector.wrn deleted file mode 100644 index fe4f204d..00000000 --- a/.publish/ui/components/WorkspaceSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WorkspaceSelector { - props { - label = "Workspace" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/WorkspaceSwitcher.wrn b/.publish/ui/components/WorkspaceSwitcher.wrn deleted file mode 100644 index 77efce7b..00000000 --- a/.publish/ui/components/WorkspaceSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WorkspaceSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/WysiwygEditor.wrn b/.publish/ui/components/WysiwygEditor.wrn new file mode 100644 index 00000000..2114ab00 --- /dev/null +++ b/.publish/ui/components/WysiwygEditor.wrn @@ -0,0 +1,19 @@ +component WysiwygEditor { + props { + size = "default" + color = "primary" + title = "Wysiwyg Editor" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/.publish/ui/components/YearPicker.wrn b/.publish/ui/components/YearPicker.wrn deleted file mode 100644 index 3656a4f1..00000000 --- a/.publish/ui/components/YearPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component YearPicker { - props { - label = "Year" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/.publish/ui/components/ZoomSlider.wrn b/.publish/ui/components/ZoomSlider.wrn deleted file mode 100644 index d2c6aca0..00000000 --- a/.publish/ui/components/ZoomSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ZoomSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/.publish/ui/components/alert.wrn b/.publish/ui/components/alert.wrn index 715287d4..152a419d 100644 --- a/.publish/ui/components/alert.wrn +++ b/.publish/ui/components/alert.wrn @@ -1,23 +1,19 @@ component Alert { props { - class = "" - title = "Notice" + size = "default" + color = "primary" + title = "Alert" description = "" - variant = "info" - dismissible = false + items = [] + variant = "default" + class = "" } - - state visible = true - view { - +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/.publish/ui/components/avatar.wrn b/.publish/ui/components/avatar.wrn index ab6bc3d4..8e3f6039 100644 --- a/.publish/ui/components/avatar.wrn +++ b/.publish/ui/components/avatar.wrn @@ -1,12 +1,19 @@ component Avatar { props { + size = "default" + color = "primary" + title = "Avatar" + description = "" + items = [] + variant = "default" class = "" - src = "" - alt = "" - initials = "WR" - size = "md" } view { - {alt} +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/.publish/ui/components/badge.wrn b/.publish/ui/components/badge.wrn index 889cfdf4..3b4d5bdc 100644 --- a/.publish/ui/components/badge.wrn +++ b/.publish/ui/components/badge.wrn @@ -1,27 +1,19 @@ component Badge { props { + size = "default" + color = "primary" + title = "Badge" + description = "" + items = [] + variant = "default" class = "" - label = "" - variant = "neutral" - size = "md" } - view { - - {#if variant === "success"} - - {/if} - {#if variant === "warning"} - - {/if} - {#if variant === "danger"} - - {/if} - {#if variant === "brand"} - - {/if} - {label} +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} - +
    } } diff --git a/.publish/ui/components/button.wrn b/.publish/ui/components/button.wrn index f722001e..be7c4d75 100644 --- a/.publish/ui/components/button.wrn +++ b/.publish/ui/components/button.wrn @@ -1,40 +1,161 @@ component Button { props { label = "Button" + loadingLabel = "Loading…" + description = "" + as = "" + href = "" + target = "" + rel = "" type = "button" - variant = "primary" - size = "md" + variant = "default" + color = "primary" + size = "default" disabled = false loading = false + pill = false + fullWidth = false icon = "" iconPosition = "start" - fullWidth = false - className = "" + ariaLabel = "" + ariaPressed = "" + ariaExpanded = "" + ariaControls = "" + title = "" + autofocus = false + controlClass = "" + class = "" } view { - {/if} - - {#if icon && !loading && iconPosition === "start"} - - {/if} - - {label} - - {#if icon && !loading && iconPosition === "end"} - - {/if} - - - +     } } diff --git a/.publish/ui/components/card.wrn b/.publish/ui/components/card.wrn index 6e69bbc3..f9572262 100644 --- a/.publish/ui/components/card.wrn +++ b/.publish/ui/components/card.wrn @@ -1,11 +1,19 @@ component Card { props { + size = "default" + color = "primary" + title = "Card" + description = "" + items = [] variant = "default" - padding = "md" - interactive = false - className = "" + class = "" } view { -
    +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/.publish/ui/components/checkbox.wrn b/.publish/ui/components/checkbox.wrn index c0527699..eca1f3cc 100644 --- a/.publish/ui/components/checkbox.wrn +++ b/.publish/ui/components/checkbox.wrn @@ -1,14 +1,15 @@ component Checkbox { props { - class = "" - id = "" - name = "" + size = "default" + color = "primary" label = "Checkbox" - description = "" + name = "" + value = "on" checked = false disabled = false + class = "" } view { - + } } diff --git a/.publish/ui/components/container.wrn b/.publish/ui/components/container.wrn index aeae25ab..84d7b0a9 100644 --- a/.publish/ui/components/container.wrn +++ b/.publish/ui/components/container.wrn @@ -1,9 +1,13 @@ component Container { props { size = "default" - className = "" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" } view { -
    +
    } } diff --git a/.publish/ui/components/disclosure.wrn b/.publish/ui/components/disclosure.wrn deleted file mode 100644 index 75f84031..00000000 --- a/.publish/ui/components/disclosure.wrn +++ /dev/null @@ -1,13 +0,0 @@ -// Expand/collapse section using native
    (no JS). -component Disclosure { - props { - summary = "Details" - class = "" - } - view { -
    - {summary} -
    -
    - } -} diff --git a/.publish/ui/components/divider.wrn b/.publish/ui/components/divider.wrn index 844e0c98..a724621f 100644 --- a/.publish/ui/components/divider.wrn +++ b/.publish/ui/components/divider.wrn @@ -1,8 +1,12 @@ component Divider { props { - className = "" + size = "default" + color = "primary" + label = "" + orientation = "horizontal" + class = "" } view { -
    + } } diff --git a/.publish/ui/components/file-upload.wrn b/.publish/ui/components/file-upload.wrn deleted file mode 100644 index c0770739..00000000 --- a/.publish/ui/components/file-upload.wrn +++ /dev/null @@ -1,21 +0,0 @@ -// Drag-and-drop file uploader with per-file progress. Progressive enhancement: -// the markup is inert until /__wrnexus/uploader.js loads (auto-injected when a -// page contains `data-uploader`). Pairs with `handleUpload` on the server — -// files POST to `endpoint`, which returns `{ ok, files:[{ key, url, … }] }`. -// -//
    -component FileUpload { - props { - store = "public" - endpoint = "/api/upload" - accept = "" - multiple = false - max = 0 - label = "Drag files here or click to browse" - class = "" - } - view { -
    - } -} diff --git a/.publish/ui/components/grid.wrn b/.publish/ui/components/grid.wrn index ef0facc6..1cee0963 100644 --- a/.publish/ui/components/grid.wrn +++ b/.publish/ui/components/grid.wrn @@ -1,9 +1,13 @@ component Grid { props { - gap = "4" - className = "" + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" } view { -
    +
    } } diff --git a/.publish/ui/components/hstack.wrn b/.publish/ui/components/hstack.wrn deleted file mode 100644 index 327a518b..00000000 --- a/.publish/ui/components/hstack.wrn +++ /dev/null @@ -1,12 +0,0 @@ -// Horizontal stack: row layout with a gap and cross-axis alignment. -// align: start | center | end | stretch -component HStack { - props { - gap = "4" - align = "center" - class = "" - } - view { -
    - } -} diff --git a/.publish/ui/components/input.wrn b/.publish/ui/components/input.wrn index 61d74abe..2111900c 100644 --- a/.publish/ui/components/input.wrn +++ b/.publish/ui/components/input.wrn @@ -1,13 +1,20 @@ -// Text input. Pairs with the validation system (name maps to a field). component Input { props { - type = "text" + size = "default" + color = "primary" + label = "Input" name = "" value = "" placeholder = "" + type = "text" + min = "" + max = "" + step = "" + disabled = false + required = false class = "" } view { - + } } diff --git a/.publish/ui/components/progress.wrn b/.publish/ui/components/progress.wrn index 91c5cf52..dea093ca 100644 --- a/.publish/ui/components/progress.wrn +++ b/.publish/ui/components/progress.wrn @@ -1,11 +1,17 @@ -// Progress bar (native , themed). component Progress { props { - value = 0 + size = "default" + color = "primary" + label = "Progress" + value = 50 max = 100 + showValue = true class = "" } view { - +
    +
    {label}{#if showValue}{value}%{/if}
    + +
    } } diff --git a/.publish/ui/components/radio.wrn b/.publish/ui/components/radio.wrn index ed5f0317..1d1266aa 100644 --- a/.publish/ui/components/radio.wrn +++ b/.publish/ui/components/radio.wrn @@ -1,15 +1,15 @@ component Radio { props { - class = "" - id = "" - name = "choice" - value = "" - label = "Option" - description = "" + size = "default" + color = "primary" + label = "Radio" + name = "" + value = "on" checked = false disabled = false + class = "" } view { - + } } diff --git a/.publish/ui/components/select.wrn b/.publish/ui/components/select.wrn index b3a1a494..a7bd6d33 100644 --- a/.publish/ui/components/select.wrn +++ b/.publish/ui/components/select.wrn @@ -1,15 +1,17 @@ component Select { props { - class = "" - id = "" - name = "" + size = "default" + color = "primary" label = "Select" - help = "" - error = "" - required = false + name = "" + value = "" + options = [] + placeholder = "Select an option" + multiple = false disabled = false + class = "" } view { -

    {help}

    + } } diff --git a/.publish/ui/components/skeleton.wrn b/.publish/ui/components/skeleton.wrn index b43e0abd..3adaf9fd 100644 --- a/.publish/ui/components/skeleton.wrn +++ b/.publish/ui/components/skeleton.wrn @@ -1,10 +1,14 @@ component Skeleton { props { - height = "4" - rounded = "lg" - className = "" + color = "primary" + label = "Loading" + size = "md" + lines = 3 + class = "" } view { - +
    + {#if "Skeleton" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if} +
    } } diff --git a/.publish/ui/components/spacer.wrn b/.publish/ui/components/spacer.wrn deleted file mode 100644 index b321ffec..00000000 --- a/.publish/ui/components/spacer.wrn +++ /dev/null @@ -1,9 +0,0 @@ -// Flexible spacer: grows to push siblings apart inside a flex row/column. -component Spacer { - props { - class = "" - } - view { -
    - } -} diff --git a/.publish/ui/components/spinner.wrn b/.publish/ui/components/spinner.wrn index 15a0cc1e..bd607734 100644 --- a/.publish/ui/components/spinner.wrn +++ b/.publish/ui/components/spinner.wrn @@ -1,10 +1,14 @@ component Spinner { props { - class = "" + color = "primary" label = "Loading" size = "md" + lines = 3 + class = "" } view { - + } } diff --git a/.publish/ui/components/stack.wrn b/.publish/ui/components/stack.wrn deleted file mode 100644 index 6c53bc53..00000000 --- a/.publish/ui/components/stack.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component Stack { - props { - gap = "4" - className = "" - } - view { -
    - } -} diff --git a/.publish/ui/components/switch.wrn b/.publish/ui/components/switch.wrn index 28e17c25..6bfcc875 100644 --- a/.publish/ui/components/switch.wrn +++ b/.publish/ui/components/switch.wrn @@ -1,15 +1,15 @@ component Switch { props { - class = "" - id = "" - name = "" + size = "default" + color = "primary" label = "Switch" - description = "" + name = "" + value = "on" checked = false disabled = false + class = "" } - state on = checked view { - + } } diff --git a/.publish/ui/components/table.wrn b/.publish/ui/components/table.wrn index 517cfcec..8ad3b313 100644 --- a/.publish/ui/components/table.wrn +++ b/.publish/ui/components/table.wrn @@ -1,24 +1,14 @@ component Table { props { + size = "default" + color = "primary" + caption = "Table" + columns = [] + rows = [] + striped = true class = "" - caption = "Data table" - responsive = true - striped = false - hoverable = true - compact = false } - view { -
    - - - -
    {caption}
    -
    +
    {#each columns as column}{/each}{#each rows as row}{#each columns as column}{/each}{/each}
    {caption}
    {column.label}
    {row[column.key]}
    } } diff --git a/.publish/ui/components/tag.wrn b/.publish/ui/components/tag.wrn deleted file mode 100644 index f9db63ea..00000000 --- a/.publish/ui/components/tag.wrn +++ /dev/null @@ -1,11 +0,0 @@ -// Small tag / chip. variant: default | primary | success | danger | warning. -component Tag { - props { - label = "" - variant = "default" - class = "" - } - view { - {label} - } -} diff --git a/.publish/ui/components/textarea.wrn b/.publish/ui/components/textarea.wrn index 60c8a6c4..a75c8ce2 100644 --- a/.publish/ui/components/textarea.wrn +++ b/.publish/ui/components/textarea.wrn @@ -1,18 +1,17 @@ component Textarea { props { - class = "" - id = "" + size = "default" + color = "primary" + label = "Textarea" name = "" - label = "Message" value = "" placeholder = "" rows = 5 - help = "" - error = "" - required = false disabled = false + required = false + class = "" } view { -

    {help}

    + } } diff --git a/.publish/ui/components/theme-toggle.wrn b/.publish/ui/components/theme-toggle.wrn deleted file mode 100644 index 27c8d903..00000000 --- a/.publish/ui/components/theme-toggle.wrn +++ /dev/null @@ -1,11 +0,0 @@ -// Theme switch button. The framework's theme runtime binds the click -// (data-wire-theme-toggle), so no component JS is needed. -component ThemeToggle { - props { - label = "Toggle theme" - class = "" - } - view { - - } -} diff --git a/.publish/ui/components/tooltip.wrn b/.publish/ui/components/tooltip.wrn index b0803fae..abab9060 100644 --- a/.publish/ui/components/tooltip.wrn +++ b/.publish/ui/components/tooltip.wrn @@ -1,10 +1,19 @@ component Tooltip { props { + size = "default" + color = "primary" + title = "Tooltip" + description = "" + open = false + placement = "bottom" + closeLabel = "Close" class = "" - text = "Helpful information" - position = "top" } view { - {text} +
    +
    {title}
    + {#if description}

    {description}

    {/if} + +
    } } diff --git a/.publish/ui/package.json b/.publish/ui/package.json index 70356c5f..921a59ef 100644 --- a/.publish/ui/package.json +++ b/.publish/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/ui — part of the WrNexus framework.", "license": "MIT", @@ -21,17 +21,19 @@ }, "./components/*": "./components/*", "./component-catalog.json": "./component-catalog.json", + "./component-migrations.json": "./component-migrations.json", "./component-reference.json": "./component-reference.json", "./ui.css": "./ui.css" }, "dependencies": { - "@wrnexus/core": "^0.3.4" + "@wrnexus/core": "^0.3.5" }, "files": [ "dist", "components", "ui.css", "component-catalog.json", + "component-migrations.json", "component-reference.json", "COMPONENTS.md" ] diff --git a/.publish/ui/ui.css b/.publish/ui/ui.css index c57b35ad..c8077cd7 100644 --- a/.publish/ui/ui.css +++ b/.publish/ui/ui.css @@ -15,6 +15,57 @@ display: none !important; } +/* + * Universal component configuration. Every canonical component exposes + * `color` and `size`, while theme, mode, and font flow through inherited + * design tokens configured at the application root. + */ +.wire-next { + --wire-component-color: var(--wire-color-primary); + --wire-component-scale: 1; + font-family: inherit; +} +.wire-next--color-primary { + --wire-component-color: var(--wire-color-primary); +} +.wire-next--color-secondary { + --wire-component-color: var(--wire-color-secondary); +} +.wire-next--color-success { + --wire-component-color: var(--wire-color-success); +} +.wire-next--color-warning { + --wire-component-color: var(--wire-color-warning); +} +.wire-next--color-danger { + --wire-component-color: var(--wire-color-danger); +} +.wire-next--color-info { + --wire-component-color: var(--wire-color-info); +} +.wire-next--size-xs { + --wire-component-scale: 0.78; +} +.wire-next--size-sm { + --wire-component-scale: 0.88; +} +.wire-next--size-default, +.wire-next--size-md { + --wire-component-scale: 1; +} +.wire-next--size-lg { + --wire-component-scale: 1.14; +} +.wire-next--size-xl { + --wire-component-scale: 1.28; +} +.wire-next:not(.wire-btn) { + font-size: calc(1em * var(--wire-component-scale)); +} +.wire-next :is(a, button, input, select, textarea):focus-visible { + outline-color: var(--wire-component-color); +} + /* --- Layout --------------------------------------------------------------- */ .wire-container { width: 100%; @@ -107,20 +158,29 @@ } /* --- Button --------------------------------------------------------------- */ +.wire-action { + position: relative; + display: inline-flex; +} .wire-btn { + position: relative; + --wire-btn-color: var(--wire-color-primary); + --wire-btn-contrast: var(--wire-color-primary-contrast); + display: inline-flex; align-items: center; justify-content: center; - gap: 0.4rem; + gap: 0.5rem; font: inherit; + font-size: 0.875rem; font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--wire-radius-sm); - padding: 0.55rem 0.9rem; + padding: 0 0.75rem; cursor: pointer; text-decoration: none; - min-height: 44px; + min-height: 2rem; transition: color var(--wire-motion-base) var(--wire-ease-standard), border-color var(--wire-motion-base) var(--wire-ease-standard), @@ -136,45 +196,108 @@ outline-offset: 2px; } -.wire-btn--default { - background: var(--wire-color-surface-2); - color: var(--wire-color-text); - border-color: var(--wire-color-border); +.wire-btn--color-primary { + --wire-btn-color: var(--wire-color-primary); + --wire-btn-contrast: var(--wire-color-primary-contrast); } +.wire-btn--color-secondary { + --wire-btn-color: var(--wire-color-muted); + --wire-btn-contrast: var(--wire-color-bg); +} +.wire-btn--color-success { + --wire-btn-color: var(--wire-color-success); + --wire-btn-contrast: var(--wire-color-primary-contrast); +} +.wire-btn--color-warning { + --wire-btn-color: var(--wire-color-warning); + --wire-btn-contrast: var(--wire-color-bg); +} +.wire-btn--color-danger { + --wire-btn-color: var(--wire-color-danger); + --wire-btn-contrast: var(--wire-color-primary-contrast); +} +.wire-btn--color-info { + --wire-btn-color: var(--wire-color-info); + --wire-btn-contrast: var(--wire-color-primary-contrast); +} +.wire-btn--variant-default, +.wire-btn--default, .wire-btn--primary { - background: var(--wire-color-primary); - color: var(--wire-color-primary-contrast); - box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 20%, transparent); + color: var(--wire-btn-contrast); + background: var(--wire-btn-color); + box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent); } +.wire-btn--variant-default:hover, +.wire-btn--default:hover, .wire-btn--primary:hover { - background: var(--wire-color-primary-hover); + background: color-mix(in srgb, var(--wire-btn-color) 84%, black); transform: translateY(-2px); - box-shadow: 0 1rem 2rem color-mix(in srgb, var(--wire-color-primary) 28%, transparent); + box-shadow: 0 1rem 2rem color-mix(in srgb, var(--wire-btn-color) 28%, transparent); } -.wire-btn--danger { - background: var(--wire-color-danger); - color: #fff; +.wire-btn--variant-outline, +.wire-btn--outline { + color: var(--wire-btn-color); + background: transparent; + border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border)); } +.wire-btn--variant-outline:hover, +.wire-btn--outline:hover { + background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent); + border-color: var(--wire-btn-color); +} +.wire-btn--variant-destructive, +.wire-btn--danger, +.wire-btn--destructive { + color: var(--wire-btn-color); + background: color-mix(in srgb, var(--wire-btn-color) 12%, transparent); + border-color: color-mix(in srgb, var(--wire-btn-color) 28%, transparent); +} +.wire-btn--danger, +.wire-btn--destructive { + --wire-btn-color: var(--wire-color-danger); +} +.wire-btn--variant-destructive:hover, +.wire-btn--danger:hover, +.wire-btn--destructive:hover { + background: color-mix(in srgb, var(--wire-btn-color) 20%, transparent); +} +.wire-btn--variant-ghost, .wire-btn--ghost { background: transparent; - color: var(--wire-color-text); - border-color: var(--wire-color-border); + color: var(--wire-btn-color); } +.wire-btn--variant-ghost:hover, .wire-btn--ghost:hover { - background: var(--wire-color-surface-2); + background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent); } +.wire-btn--variant-secondary, .wire-btn--secondary { color: var(--wire-color-text); - background: var(--wire-color-surface); - border-color: var(--wire-color-border); + background: color-mix(in srgb, var(--wire-btn-color) 10%, var(--wire-color-surface)); + border-color: color-mix(in srgb, var(--wire-btn-color) 24%, var(--wire-color-border)); box-shadow: var(--wire-shadow-1); } +.wire-btn--variant-secondary:hover, .wire-btn--secondary:hover { - color: var(--wire-color-primary); - border-color: color-mix(in srgb, var(--wire-color-primary) 55%, var(--wire-color-border)); - background: var(--wire-color-surface-2); + color: var(--wire-btn-color); + border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border)); + background: color-mix(in srgb, var(--wire-btn-color) 15%, var(--wire-color-surface)); transform: translateY(-2px); } +.wire-btn--variant-link, +.wire-btn--link { + min-height: auto; + padding: 0; + color: var(--wire-btn-color); + background: transparent; + border-color: transparent; + border-radius: 0; + text-underline-offset: 0.22em; +} +.wire-btn--variant-link:hover, +.wire-btn--link:hover { + text-decoration: underline; +} .wire-btn:disabled, .wire-btn[aria-busy="true"] { cursor: not-allowed; @@ -183,17 +306,120 @@ box-shadow: none; } +.wire-btn--size-xs, +.wire-btn--xs { + min-height: 1.5rem; + padding-inline: 0.5rem; + gap: 0.25rem; + font-size: 0.75rem; +} +.wire-btn--size-sm, .wire-btn--sm { - padding: 0.35rem 0.6rem; - font-size: 0.85rem; + min-height: 1.75rem; + padding-inline: 0.625rem; + gap: 0.25rem; + font-size: 0.8rem; } +.wire-btn--size-default, .wire-btn--md { - padding: 0.55rem 0.9rem; + min-height: 2rem; + padding-inline: 0.75rem; + font-size: 0.875rem; } +.wire-btn--size-lg, .wire-btn--lg { + min-height: 2.25rem; + padding-inline: 0.875rem; + font-size: 0.925rem; +} +.wire-btn--size-icon, +.wire-btn--size-icon-xs, +.wire-btn--size-icon-sm, +.wire-btn--size-icon-lg, +.wire-btn--icon, +.wire-btn--icon-xs, +.wire-btn--icon-sm, +.wire-btn--icon-lg { + flex: none; + padding: 0; +} +.wire-btn--size-icon, +.wire-btn--icon { + width: 2rem; + height: 2rem; +} +.wire-btn--size-icon-xs, +.wire-btn--icon-xs { + width: 1.5rem; + min-height: 1.5rem; +} +.wire-btn--size-icon-sm, +.wire-btn--icon-sm { + width: 1.75rem; + min-height: 1.75rem; +} +.wire-btn--size-icon-lg, +.wire-btn--icon-lg { + width: 2.25rem; + min-height: 2.25rem; +} +.wire-btn--pill { + border-radius: 999px; +} +.wire-btn--with-description { min-height: 3.5rem; - padding: 0.8rem 1.25rem; - font-size: 1rem; + justify-content: flex-start; + padding: 0.6rem 0.875rem; + text-align: left; +} +.wire-btn__icon { + width: 1rem; + height: 1rem; + flex: none; +} +.wire-btn__copy { + display: grid; + min-width: 0; + gap: 0.15rem; +} +.wire-btn__label { + font-weight: 650; +} +.wire-btn__description { + color: currentColor; + font-size: 0.75rem; + font-weight: 450; + line-height: 1.35; + opacity: 0.74; +} +.wire-btn__tooltip { + position: absolute; + z-index: 80; + inset-block-end: calc(100% + 0.5rem); + inset-inline-start: 50%; + width: max-content; + max-width: min(16rem, calc(100vw - 2rem)); + padding: 0.4rem 0.6rem; + color: var(--wire-color-bg); + background: var(--wire-color-text); + border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border)); + border-radius: var(--wire-radius-sm); + box-shadow: var(--wire-shadow-2); + font-size: 0.75rem; + font-weight: 600; + line-height: 1.25; + text-align: center; + pointer-events: none; + opacity: 0; + transform: translate(-50%, 0.25rem); + transition: + opacity var(--wire-motion-fast) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); +} +.wire-btn:hover > .wire-btn__tooltip, +.wire-btn:focus-visible > .wire-btn__tooltip { + opacity: 1; + transform: translate(-50%, 0); } /* --- Inputs --------------------------------------------------------------- */ @@ -1520,6 +1746,1141 @@ } } +/* --- Screenshot-directed canonical component set ------------------------- */ +.wire-next { + margin: 0; + color: var(--wire-color-text); + font-family: var(--wrn-font-sans, inherit); +} + +.wire-next--rounded, +.wire-next--image img { + border-radius: var(--wire-radius-md); +} + +.wire-next--container { + width: min(100%, 72rem); + margin-inline: auto; +} + +.wire-next--columns, +.wire-next--grid { + display: grid; + grid-template-columns: repeat(var(--wire-next-columns, 2), minmax(0, 1fr)); +} + +.wire-next--columns-1 { + --wire-next-columns: 1; +} +.wire-next--columns-2 { + --wire-next-columns: 2; +} +.wire-next--columns-3 { + --wire-next-columns: 3; +} +.wire-next--columns-4 { + --wire-next-columns: 4; +} +.wire-next--gap-sm { + gap: 0.5rem; +} +.wire-next--gap-md { + gap: 1rem; +} +.wire-next--gap-lg { + gap: 1.5rem; +} + +.wire-next--layout-splitter { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); +} + +.wire-next--custom-scrollbar { + max-height: 24rem; + overflow: auto; + scrollbar-color: var(--wire-color-primary) transparent; + scrollbar-width: thin; +} + +.wire-next--link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + color: var(--wire-color-primary); + text-underline-offset: 0.2em; +} + +.wire-next--divider { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--wire-color-muted); +} +.wire-next--divider::before, +.wire-next--divider::after { + height: 1px; + flex: 1; + background: var(--wire-color-border); + content: ""; +} +.wire-next--divider-vertical { + width: 1px; + min-height: 4rem; + background: var(--wire-color-border); +} + +.wire-next--kbd { + display: inline-flex; + min-width: 1.8rem; + justify-content: center; + padding: 0.25rem 0.45rem; + border: 1px solid var(--wire-color-border); + border-bottom-width: 2px; + border-radius: 0.4rem; + background: var(--wire-color-surface-2); + font-size: 0.75rem; +} + +.wire-next--accordion, +.wire-next--collapse, +.wire-next--card, +.wire-next--alert, +.wire-next--toast, +.wire-next--chat-bubble, +.wire-next--blockquote, +.wire-next--device-frame, +.wire-next--tree-view, +.wire-next--timeline, +.wire-next--carousel, +.wire-next--list, +.wire-next--list-group, +.wire-next--legend-indicator, +.wire-next--rating, +.wire-next--styled-icon, +.wire-next--confetti, +.wire-next--data-map, +.wire-next--chart, +.wire-next--map, +.wire-next--drag-and-drop, +.wire-next--file-upload, +.wire-next--toast-notifications, +.wire-next--clipboard, +.wire-next--copy-markup, +.wire-next--toggle-count { + display: grid; + gap: 0.75rem; + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.wire-next p { + margin: 0; + color: var(--wire-color-muted); + line-height: 1.6; +} + +.wire-next__items { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.wire-next__items > span, +.wire-next--badge { + padding: 0.3rem 0.55rem; + border-radius: 999px; + background: var(--wire-color-surface-2); + font-size: 0.75rem; +} + +.wire-next details { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); +} +.wire-next summary { + padding: 0.75rem; + cursor: pointer; + font-weight: 700; +} +.wire-next details > div { + padding: 0 0.75rem 0.75rem; + color: var(--wire-color-muted); +} + +.wire-next__row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} +.wire-next progress { + width: 100%; + accent-color: var(--wire-color-primary); +} + +.wire-next--pin-input { + display: grid; + width: 100%; + min-width: 0; + gap: 0.65rem; + padding: 0; + border: 0; + color: var(--wire-color-text); +} + +.wire-next__pin-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.wire-next__pin-heading legend { + padding: 0; + font-size: 0.82em; + font-weight: 700; +} + +.wire-next__pin-clear { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0; + border: 0; + color: var(--wire-component-color); + background: transparent; + font: inherit; + font-size: 0.7em; + font-weight: 750; + cursor: pointer; +} + +.wire-next__pin-clear > span:first-child { + width: 0.9rem; + height: 0.9rem; +} + +.wire-next__pin-cells { + display: flex; + max-width: 100%; + align-items: center; + gap: clamp(0.35rem, 1.5vw, 0.65rem); + overflow-x: auto; + padding: 0.2rem; + scrollbar-width: thin; +} + +.wire-next--pin-input .wire-next__pin-cells input { + flex: 0 0 clamp(2.4rem, 8vw, 3.25rem); + width: clamp(2.4rem, 8vw, 3.25rem); + height: clamp(2.75rem, 9vw, 3.5rem); + min-width: clamp(2.4rem, 8vw, 3.25rem); + padding: 0; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: clamp(1rem, 3vw, 1.25rem); + font-weight: 750; + text-align: center; + caret-color: var(--wire-component-color); + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); +} + +.wire-next--pin-input .wire-next__pin-cells input::placeholder { + color: var(--wire-color-muted); + opacity: 0.45; +} + +.wire-next--pin-input .wire-next__pin-cells input:focus-visible { + border-color: var(--wire-component-color); + outline: 0; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); + transform: translateY(-1px); +} + +.wire-next--pin-input .wire-next__pin-cells input:disabled, +.wire-next--pin-input .wire-next__pin-cells input:read-only { + cursor: not-allowed; + opacity: 0.55; +} + +.wire-next__pin-separator { + color: var(--wire-color-muted); + font-size: 1.1rem; + font-weight: 800; +} + +.wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input { + border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border)); + background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg)); +} + +.wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input, +.wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input { + border-color: var(--wire-color-danger); +} + +@media (max-width: 480px) { + .wire-next__pin-cells { + gap: 0.3rem; + } + + .wire-next--pin-input .wire-next__pin-cells input { + flex-basis: min(2.7rem, 12vw); + width: min(2.7rem, 12vw); + min-width: min(2.7rem, 12vw); + height: min(3rem, 14vw); + } +} + +.wire-next--spinner i { + display: block; + width: 1.5rem; + height: 1.5rem; + border: 2px solid var(--wire-color-border); + border-top-color: var(--wire-color-primary); + border-radius: 50%; + animation: wire-spin 700ms linear infinite; +} +.wire-next--skeleton { + display: grid; + width: min(100%, 24rem); + gap: 0.55rem; +} +.wire-next--skeleton span { + height: 0.8rem; + border-radius: 999px; + background: linear-gradient( + 90deg, + var(--wire-color-surface-2), + var(--wire-color-border), + var(--wire-color-surface-2) + ); + background-size: 200% 100%; + animation: wire-shimmer 1.4s infinite; +} + +.wire-next--navbar, +.wire-next--mega-menu, +.wire-next--nav, +.wire-next--tabs, +.wire-next--sidebar, +.wire-next--scrollspy, +.wire-next--breadcrumb, +.wire-next--pagination, +.wire-next--stepper { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; +} +.wire-next--vertical { + flex-direction: column; +} +.wire-next nav a, +.wire-next--navbar a, +.wire-next--mega-menu a, +.wire-next--nav a, +.wire-next--tabs a, +.wire-next--sidebar a, +.wire-next--scrollspy a, +.wire-next--breadcrumb a, +.wire-next--pagination a, +.wire-next--stepper a { + padding: 0.5rem 0.7rem; + border-radius: 0.5rem; + color: var(--wire-color-muted); + text-decoration: none; +} +.wire-next a[aria-current="page"] { + color: var(--wire-color-text); + background: var(--wire-color-surface-2); +} + +.wire-next--field { + display: grid; + width: min(100%, 28rem); + gap: 0.4rem; + font-size: 0.78rem; + font-weight: 700; +} +.wire-next--field :where(input, textarea, select) { + width: 100%; + min-height: 2.65rem; + padding: 0.6rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.6rem; + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-weight: 500; +} +.wire-next--field :where(input, textarea, select):focus-visible { + border-color: var(--wire-color-primary); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent); +} +.wire-next--field textarea { + resize: vertical; +} + +.wire-next--toggle-password { + display: grid; + width: min(100%, 28rem); + min-width: 0; + gap: 0.45rem; + padding: 0; + border: 0; +} + +.wire-next--toggle-password > label { + color: var(--wire-color-text); + font-size: 0.82em; + font-weight: 750; +} + +.wire-next__password-fields { + display: grid; + gap: 1rem; +} + +.wire-next__password-field { + display: grid; + gap: 0.45rem; +} + +.wire-next__password-field > label { + color: var(--wire-color-text); + font-size: 0.82em; + font-weight: 750; +} + +.wire-next__password-control { + position: relative; + display: flex; + min-width: 0; + align-items: center; +} + +.wire-next__password-control > input { + width: 100%; + min-width: 0; + min-height: 2.75em; + padding: 0.65em 3em 0.65em 0.8em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard); +} + +.wire-next__password-control > input:focus-visible { + border-color: var(--wire-component-color); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); +} + +.wire-next__password-toggle { + position: absolute; + top: 50%; + right: 0.45em; + display: grid; + width: 2em; + height: 2em; + padding: 0; + place-items: center; + border: 0; + border-radius: calc(var(--wire-radius-sm) * 0.72); + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; + transform: translateY(-50%); +} + +.wire-next__password-toggle:hover, +.wire-next__password-toggle:focus-visible { + color: var(--wire-component-color); + background: color-mix(in srgb, var(--wire-component-color) 10%, transparent); + outline: 0; +} + +.wire-next__password-icon { + display: block; + width: 1.05em; + height: 1.05em; + background: currentColor; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; +} + +.wire-next__password-icon--show { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); +} + +.wire-next__password-toggle[aria-pressed="true"]::after { + position: absolute; + width: 1.25em; + height: 0.12em; + border-radius: 999px; + background: currentColor; + content: ""; + transform: rotate(45deg); + box-shadow: 0 0 0 1px var(--wire-color-bg); +} + +.wire-next__password-checkbox { + display: inline-flex; + width: fit-content; + align-items: center; + gap: 0.55rem; + color: var(--wire-color-muted); + font-size: 0.78em; + cursor: pointer; +} + +.wire-next__password-checkbox > input { + width: 1rem; + height: 1rem; + margin: 0; + accent-color: var(--wire-component-color); +} + +.wire-next--toggle-password > small { + color: var(--wire-color-muted); + font-size: 0.72em; +} + +.wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input, +.wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input { + border-color: var(--wire-color-danger); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent); +} + +.wire-next--strong-password { + position: relative; + display: grid; + width: 100%; + gap: 0.6rem; + color: var(--wire-color-text); +} + +.wire-next--strong-password > label { + font-size: 0.82em; + font-weight: 700; +} + +.wire-next__strong-password-anchor { + position: relative; +} + +.wire-next--strong-password input { + width: 100%; + min-height: 2.75em; + padding: 0.68em 0.85em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font: inherit; + transition: + border-color 160ms ease, + box-shadow 160ms ease; +} + +.wire-next--strong-password input:focus-visible { + border-color: var(--wire-component-color); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 16%, transparent); +} + +.wire-next--strong-password.wire-next--invalid input, +.wire-next--strong-password input.wire-invalid { + border-color: var(--wire-color-danger); +} + +.wire-next__strong-password-details { + display: grid; + gap: 0.65rem; +} + +.wire-next__strong-password-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + color: var(--wire-color-muted); + font-size: 0.75em; +} + +.wire-next__strong-password-summary strong { + color: var(--wire-color-text); +} + +.wire-next__strong-password-meter { + width: 100%; + height: 0.42rem; + overflow: hidden; + border-radius: 999px; + background: color-mix(in srgb, var(--wire-color-border) 72%, transparent); +} + +.wire-next__strong-password-meter > span { + display: block; + width: 0; + height: 100%; + border-radius: inherit; + background: var(--wire-color-danger); + transition: + width 180ms ease, + background-color 180ms ease; +} + +.wire-next--strong-password[data-strength="fair"] .wire-next__strong-password-meter > span { + background: var(--wire-color-warning); +} + +.wire-next--strong-password[data-strength="good"] .wire-next__strong-password-meter > span { + background: var(--wire-component-color); +} + +.wire-next--strong-password[data-strength="strong"] .wire-next__strong-password-meter > span { + background: var(--wire-color-success); +} + +.wire-next__strong-password-requirements { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.45rem 1rem; + margin: 0; + padding: 0; + list-style: none; +} + +.wire-next__strong-password-requirements li { + display: flex; + min-width: 0; + align-items: flex-start; + gap: 0.45rem; + color: var(--wire-color-muted); + font-size: 0.72em; + line-height: 1.45; +} + +.wire-next__strong-password-requirements li > span { + width: 0.9rem; + height: 0.9rem; + flex: 0 0 auto; + margin-top: 0.08rem; + border: 1px solid currentColor; + border-radius: 50%; +} + +.wire-next__strong-password-requirements li[data-met="true"] { + color: var(--wire-color-success); +} + +.wire-next__strong-password-requirements li[data-met="true"] > span { + border-color: var(--wire-color-success); + background: + linear-gradient(135deg, transparent 42%, var(--wire-color-surface) 42% 52%, transparent 52%) + 0.05rem 0.07rem / 0.52rem 0.52rem no-repeat, + var(--wire-color-success); +} + +.wire-next__strong-password-details > small { + color: var(--wire-color-muted); + font-size: 0.7em; + line-height: 1.5; +} + +.wire-next__strong-password-popover { + position: absolute; + top: calc(100% + 0.7rem); + left: 0; + z-index: 30; + width: min(28rem, calc(100vw - 2rem)); + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + opacity: 0; + visibility: hidden; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-2); + transform: translateY(-0.35rem); + transition: + opacity 140ms ease, + transform 140ms ease, + visibility 140ms ease; +} + +.wire-next__strong-password-popover[data-open="true"] { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.wire-next__strong-password-popover-arrow { + position: absolute; + top: -0.38rem; + left: 1.25rem; + width: 0.7rem; + height: 0.7rem; + border-top: 1px solid var(--wire-color-border); + border-left: 1px solid var(--wire-color-border); + background: var(--wire-color-surface); + transform: rotate(45deg); +} + +@media (max-width: 560px) { + .wire-next__strong-password-requirements { + grid-template-columns: 1fr; + } +} + +.wire-next--advanced-select { + position: relative; + display: grid; + width: 100%; + gap: 0.55rem; + padding: 0; + border: 0; + background: transparent; + box-shadow: none; +} +.wire-next--advanced-select > label:first-child, +.wire-next--advanced-select .wire-next__row > label { + color: var(--wire-color-text); + font-size: 0.82em; + font-weight: 700; +} +.wire-next--advanced-select .wire-next__row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} +.wire-next--advanced-select small { + color: var(--wire-color-muted); + font-size: 0.72em; +} +.wire-next__select-search { + position: relative; + display: block; +} +.wire-next__select-search input, +.wire-next--advanced-select select { + width: 100%; + min-height: 2.6em; + padding: 0.62em 0.75em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-surface); + font: inherit; +} +.wire-next__select-search input { + padding-left: 2.25em; +} +.wire-next__search-icon { + position: absolute; + top: 50%; + left: 0.75em; + z-index: 1; + color: var(--wire-component-color); + transform: translateY(-50%); +} +.wire-next--advanced-select select:focus-visible, +.wire-next__select-search input:focus-visible { + border-color: var(--wire-component-color); + outline: 2px solid color-mix(in srgb, var(--wire-component-color) 24%, transparent); + outline-offset: 1px; +} +.wire-next--advanced-select select[multiple] { + min-height: 8rem; +} +.wire-next__select-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} +.wire-next__select-tags > span { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.3rem 0.55rem; + border-radius: 999px; + color: var(--wire-component-color); + background: color-mix(in srgb, var(--wire-component-color) 12%, transparent); + font-size: 0.75em; + font-weight: 700; +} +.wire-next__select-tags img { + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + object-fit: cover; +} +.wire-next__color-dot { + width: 0.65rem; + height: 0.65rem; + border-radius: 50%; + background: var(--option-color); +} +.wire-next__clear-select, +.wire-next__create-option, +.wire-next__load-more { + width: fit-content; + padding: 0; + border: 0; + color: var(--wire-component-color); + background: transparent; + font: inherit; + font-size: 0.75em; + font-weight: 700; + cursor: pointer; +} +.wire-next--invalid :is(input, select) { + border-color: var(--wire-color-danger); +} +.wire-next__validation { + color: var(--wire-color-danger) !important; +} +.wire-next__validation:empty { + display: none; +} +.wire-next--advanced-select:has(input.wire-invalid) .wire-next__select-trigger { + border-color: var(--wire-color-danger); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 16%, transparent); +} +.wire-next--advanced-select-fixed select { + box-shadow: var(--wire-shadow-1); +} +.wire-next__select-control { + position: relative; +} +.wire-next__combobox-control > .wire-next__search-icon { + width: 1rem; + height: 1rem; + pointer-events: none; +} +.wire-next__combobox-toggle { + position: absolute; + top: 50%; + right: 0; + z-index: 1; + display: grid; + width: 2.25em; + height: 100%; + padding: 0; + place-items: center; + border: 0; + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; + transform: translateY(-50%); +} +.wire-next__combobox-toggle .wire-next__select-chevron { + position: static; + transform: none; +} +.wire-next--combobox .wire-next__clear-select { + right: 2.4em; +} +.wire-next__select-trigger { + display: flex; + width: 100%; + min-height: 2.75em; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + padding: 0.55em 2.75em 0.55em 0.8em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + text-align: left; + cursor: pointer; + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard); +} +.wire-next--combobox .wire-next__combobox-input { + padding-right: 5.25em; + padding-left: 2.5em; + cursor: text; +} +.wire-next--open .wire-next__select-trigger, +.wire-next__select-trigger:focus-visible { + border-color: var(--wire-component-color); + outline: 0; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); +} +.wire-next__select-value { + display: flex; + min-width: 0; + align-items: center; + gap: 0.55em; +} +.wire-next__placeholder { + overflow: hidden; + color: var(--wire-color-muted); + text-overflow: ellipsis; + white-space: nowrap; +} +.wire-next__select-chevron { + position: absolute; + top: 50%; + right: 0.9em; + color: var(--wire-color-muted); + pointer-events: none; + transform: translateY(-54%); +} +.wire-next__clear-select { + position: absolute; + top: 50%; + right: 2.15em; + z-index: 2; + display: grid; + width: 1.4em; + height: 1.4em; + padding: 0; + place-items: center; + border-radius: 50%; + transform: translateY(-50%); +} +.wire-next__clear-select:hover { + background: var(--wire-color-surface-2); +} +.wire-next__select-dropdown { + position: absolute; + top: calc(100% + 0.4rem); + left: 0; + z-index: 80; + display: grid; + width: 100%; + min-width: min(20rem, 92vw); + gap: 0.45rem; + padding: 0.5rem; + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); + box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 18%); +} +.wire-next[data-placement="top"] .wire-next__select-dropdown { + top: auto; + bottom: calc(100% + 0.4rem); +} +.wire-next__select-dropdown--fixed { + position: fixed; + top: auto; +} +.wire-next__select-list { + display: grid; + max-height: 18rem; + gap: 0.15rem; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; +} +.wire-next__option-group { + display: grid; + gap: 0.15rem; +} +.wire-next__group-label { + padding: 0.55rem 0.7rem 0.3rem; + color: var(--wire-component-color); + font-size: 0.68em; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} +.wire-next__select-option { + position: relative; + display: grid; + width: 100%; + grid-template-columns: minmax(0, 1fr); + align-items: center; + gap: 0.65rem; + padding: 0.58rem 2.5rem 0.58rem 0.7rem; + border: 0; + border-radius: calc(var(--wire-radius-sm) * 0.72); + color: var(--wire-color-text); + background: transparent; + font: inherit; + text-align: left; + cursor: pointer; +} +.wire-next__select-option:has(> img), +.wire-next__select-option:has(> i:not(.wire-next__check)) { + grid-template-columns: auto minmax(0, 1fr); +} +.wire-next__select-option > span { + display: grid; + min-width: 0; + gap: 0.12rem; +} +.wire-next__select-option strong { + overflow: hidden; + font-size: 0.82em; + font-weight: 650; + text-overflow: ellipsis; + white-space: nowrap; +} +.wire-next__select-option small { + overflow: hidden; + font-size: 0.68em; + text-overflow: ellipsis; + white-space: nowrap; +} +.wire-next__select-option img, +.wire-next__selected-avatar { + width: 1.65rem; + height: 1.65rem; + border-radius: 50%; + object-fit: cover; +} +.wire-next__select-option--active { + background: var(--wire-color-surface-2); +} +.wire-next__select-option--selected { + color: var(--wire-component-color); +} +.wire-next__select-option:disabled { + opacity: 0.45; + cursor: not-allowed; +} +.wire-next__check { + position: absolute; + top: 50%; + right: 0.8rem; + width: 1rem; + height: 1rem; + color: var(--wire-component-color); + transform: translateY(-50%); +} +.wire-next__select-message { + display: flex; + min-height: 4rem; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem; + color: var(--wire-color-muted); + font-size: 0.78em; + text-align: center; +} +.wire-next__create-option, +.wire-next__load-more { + width: 100%; + padding: 0.65rem; + border-top: 1px solid var(--wire-color-border); + text-align: left; +} +.wire-next--disabled { + opacity: 0.62; +} +.wire-next__select-trigger .wire-next__select-tags { + flex-wrap: nowrap; + overflow: hidden; +} +@media (max-width: 640px) { + .wire-next__select-dropdown { + min-width: 100%; + } +} + +.wire-next--choice { + display: inline-flex; + align-items: center; + gap: 0.55rem; + cursor: pointer; +} +.wire-next--choice input { + width: 1.1rem; + height: 1.1rem; + accent-color: var(--wire-color-primary); +} + +.wire-next--modal, +.wire-next--drawer, +.wire-next--dropdown, +.wire-next--context-menu, +.wire-next--popover, +.wire-next--tooltip { + width: min(100%, 28rem); + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-3); +} +.wire-next--modal > header, +.wire-next--drawer > header, +.wire-next--dropdown > header, +.wire-next--context-menu > header, +.wire-next--popover > header, +.wire-next--tooltip > header { + display: flex; + align-items: center; + justify-content: space-between; +} +.wire-next > header button { + border: 0; + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; +} + +.wire-next--table { + width: 100%; + overflow: auto; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); +} +.wire-next--table table { + width: 100%; + border-collapse: collapse; +} +.wire-next--table caption, +.wire-next--table th, +.wire-next--table td { + padding: 0.75rem; + border-bottom: 1px solid var(--wire-color-border); + text-align: left; +} +.wire-next--table caption, +.wire-next--table th { + font-weight: 800; +} + +@keyframes wire-shimmer { + to { + background-position: -200% 0; + } +} + +@media (max-width: 768px) { + .wire-next--columns, + .wire-next--grid, + .wire-next--layout-splitter { + grid-template-columns: 1fr; + } +} + [data-component] :where(button, .wire-btn, [role="button"]):not(:disabled):active { transform: translateY(0) scale(0.98); transition-duration: var(--wire-motion-fast); diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json index 86e2f028..56d751e1 100644 --- a/.publish/uploader/package.json +++ b/.publish/uploader/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/uploader", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/uploader — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.3.4" + "@wrnexus/core": "^0.3.5" }, "files": [ "dist" diff --git a/.publish/validation/package.json b/.publish/validation/package.json index 70e89ed8..8ceb66ed 100644 --- a/.publish/validation/package.json +++ b/.publish/validation/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/validation", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "description": "@wrnexus/validation — part of the WrNexus framework.", "license": "MIT", diff --git a/README.md b/README.md index 2ac84458..f82f6bee 100644 --- a/README.md +++ b/README.md @@ -357,6 +357,26 @@ page Dashboard { Pages with no `layout` fall back to a `default` layout if one exists; `layout = "none"` opts out. Layouts can mount components (nav, theme-toggle) like any page. +**Document layout.** A conventional `app/layouts/document.wrn` is applied outside +the selected page layout and may own ``, ``, ``, and `#app`. +The framework passes `cookies`, `theme`, `language`, `url`, and `pathname` as +SSR props, then safely merges page SEO, global head entries, styles, and scripts: + +```wrn +layout Document { + props { cookies = {} theme = "light" language = "en" } + view { + + +
    + + } +} +``` + +Cookie-backed document attributes are present in the first server response, so +CSS can apply before paint instead of correcting the page after hydration. + ## API routes `app/api/hello.ts` → `/api/hello`: diff --git a/bun.lock b/bun.lock index 5a949188..0e71ea92 100644 --- a/bun.lock +++ b/bun.lock @@ -2,231 +2,250 @@ "lockfileVersion": 1, "configVersion": 1, "workspaces": { - "": { - "name": "wrnexus", - "devDependencies": { - "@eslint/js": "latest", - "@types/bun": "latest", - "eslint": "latest", - "happy-dom": "^20.10.6", - "prettier": "latest", - "tsup": "^8.5.1", - "typescript": "^5.5.0", - "typescript-eslint": "latest" - } + "": { + "name": "wrnexus", + "devDependencies": { + "@eslint/js": "latest", + "@types/bun": "latest", + "eslint": "latest", + "happy-dom": "^20.10.6", + "prettier": "latest", + "tsup": "^8.5.1", + "typescript": "^5.5.0", + "typescript-eslint": "latest", }, - "packages/ai": { - "name": "@wrnexus/ai", - "version": "0.3.0" + }, + "examples/basic-app": { + "name": "basic-app", + "version": "0.1.0", + "dependencies": { + "@wrnexus/core": "workspace:*", + "@wrnexus/db": "workspace:*", + "@wrnexus/validation": "workspace:*", }, - "packages/authz": { - "name": "@wrnexus/authz", - "version": "0.3.0" + "devDependencies": { + "@eslint/js": "latest", + "@tailwindcss/cli": "^4.0.0", + "@wrnexus/test": "workspace:*", + "eslint": "latest", + "prettier": "^3.9.4", + "tailwindcss": "^4.0.0", + "typescript-eslint": "latest", }, - "packages/cli": { - "name": "@wrnexus/cli", - "version": "0.3.0", - "bin": { - "wrnexus": "src/index.ts" - }, - "dependencies": { - "@wrnexus/core": "workspace:*", - "@wrnexus/router": "workspace:*", - "@wrnexus/csr": "workspace:*", - "@wrnexus/compiler": "workspace:*", - "@wrnexus/styles": "workspace:*", - "@wrnexus/dev-server": "workspace:*", - "@wrnexus/ui": "workspace:*", - "@wrnexus/validation": "workspace:*", - "@wrnexus/i18n": "workspace:*", - "@wrnexus/db": "workspace:*", - "@wrnexus/plugin": "workspace:*", - "@wrnexus/syntax": "workspace:*" - } + }, + "examples/component-showcase": { + "name": "component-showcase", + "version": "0.1.0", + "dependencies": { + "@wrnexus/core": "workspace:*", + "@wrnexus/ui": "workspace:*", }, - "packages/compiler": { - "name": "@wrnexus/compiler", - "version": "0.3.0", - "dependencies": { - "@wrnexus/syntax": "workspace:*" - } + "devDependencies": { + "@iconify-json/lucide": "^1.2.118", + "@iconify/tailwind4": "^1.2.3", + "@tailwindcss/cli": "^4.0.0", + "tailwindcss": "^4.0.0", + "typescript": "^5.5.0", }, - "packages/core": { - "name": "@wrnexus/core", - "version": "0.3.0" + }, + "packages/ai": { + "name": "@wrnexus/ai", + "version": "0.3.4", + }, + "packages/authz": { + "name": "@wrnexus/authz", + "version": "0.3.4", + }, + "packages/cli": { + "name": "@wrnexus/cli", + "version": "0.3.4", + "bin": { + "wrnexus": "src/index.ts", }, - "packages/csr": { - "name": "@wrnexus/csr", - "version": "0.3.0", - "dependencies": { - "@wrnexus/core": "workspace:*" - } + "dependencies": { + "@wrnexus/compiler": "workspace:*", + "@wrnexus/core": "workspace:*", + "@wrnexus/csr": "workspace:*", + "@wrnexus/db": "workspace:*", + "@wrnexus/dev-server": "workspace:*", + "@wrnexus/i18n": "workspace:*", + "@wrnexus/plugin": "workspace:*", + "@wrnexus/router": "workspace:*", + "@wrnexus/styles": "workspace:*", + "@wrnexus/syntax": "workspace:*", + "@wrnexus/ui": "workspace:*", + "@wrnexus/validation": "workspace:*", }, - "packages/db": { - "name": "@wrnexus/db", - "version": "0.3.0" + }, + "packages/compiler": { + "name": "@wrnexus/compiler", + "version": "0.3.4", + "dependencies": { + "@wrnexus/syntax": "workspace:*", }, - "packages/dev-server": { - "name": "@wrnexus/dev-server", - "version": "0.3.0", - "dependencies": { - "@wrnexus/core": "workspace:*", - "@wrnexus/dev-toolbar": "workspace:*", - "@wrnexus/router": "workspace:*", - "@wrnexus/ssr": "workspace:*", - "@wrnexus/csr": "workspace:*", - "@wrnexus/compiler": "workspace:*", - "@wrnexus/styles": "workspace:*", - "@wrnexus/ui": "workspace:*", - "@wrnexus/validation": "workspace:*", - "@wrnexus/i18n": "workspace:*", - "@wrnexus/db": "workspace:*", - "@wrnexus/pubsub": "workspace:*", - "@wrnexus/uploader": "workspace:*", - "@wrnexus/plugin": "workspace:*" - } + }, + "packages/core": { + "name": "@wrnexus/core", + "version": "0.3.4", + }, + "packages/csr": { + "name": "@wrnexus/csr", + "version": "0.3.4", + "dependencies": { + "@wrnexus/core": "workspace:*", }, - "packages/dev-toolbar": { - "name": "@wrnexus/dev-toolbar", - "version": "0.3.0", - "devDependencies": { - "@types/bun": "latest", - "typescript": "^5.9.2" - } + }, + "packages/db": { + "name": "@wrnexus/db", + "version": "0.3.4", + }, + "packages/dev-server": { + "name": "@wrnexus/dev-server", + "version": "0.3.4", + "dependencies": { + "@wrnexus/compiler": "workspace:*", + "@wrnexus/core": "workspace:*", + "@wrnexus/csr": "workspace:*", + "@wrnexus/db": "workspace:*", + "@wrnexus/dev-toolbar": "workspace:*", + "@wrnexus/i18n": "workspace:*", + "@wrnexus/plugin": "workspace:*", + "@wrnexus/pubsub": "workspace:*", + "@wrnexus/router": "workspace:*", + "@wrnexus/ssr": "workspace:*", + "@wrnexus/styles": "workspace:*", + "@wrnexus/ui": "workspace:*", + "@wrnexus/uploader": "workspace:*", + "@wrnexus/validation": "workspace:*", }, - "packages/encryption": { - "name": "@wrnexus/encryption", - "version": "0.3.0" + }, + "packages/dev-toolbar": { + "name": "@wrnexus/dev-toolbar", + "version": "0.3.4", + "devDependencies": { + "@types/bun": "latest", + "typescript": "^5.9.2", }, - "packages/helpers": { - "name": "@wrnexus/helpers", - "version": "0.3.0", - "dependencies": { - "@wrnexus/core": "workspace:*" - } + }, + "packages/encryption": { + "name": "@wrnexus/encryption", + "version": "0.3.4", + }, + "packages/helpers": { + "name": "@wrnexus/helpers", + "version": "0.3.4", + "dependencies": { + "@wrnexus/core": "workspace:*", }, - "packages/i18n": { - "name": "@wrnexus/i18n", - "version": "0.3.0", - "dependencies": { - "@wrnexus/core": "workspace:*" - } + }, + "packages/i18n": { + "name": "@wrnexus/i18n", + "version": "0.3.4", + "dependencies": { + "@wrnexus/core": "workspace:*", }, - "packages/jwt": { - "name": "@wrnexus/jwt", - "version": "0.3.0" + }, + "packages/jwt": { + "name": "@wrnexus/jwt", + "version": "0.3.4", + }, + "packages/mobile": { + "name": "@wrnexus/mobile", + "version": "0.3.4", + "dependencies": { + "@wrnexus/native": "workspace:*", }, - "packages/mobile": { - "name": "@wrnexus/mobile", - "version": "0.3.0", - "dependencies": { - "@wrnexus/native": "workspace:*" - } + }, + "packages/native": { + "name": "@wrnexus/native", + "version": "0.3.4", + }, + "packages/oauth": { + "name": "@wrnexus/oauth", + "version": "0.3.4", + }, + "packages/plugin": { + "name": "@wrnexus/plugin", + "version": "0.3.4", + "dependencies": { + "@wrnexus/syntax": "workspace:*", }, - "packages/native": { - "name": "@wrnexus/native", - "version": "0.3.0" + }, + "packages/pubsub": { + "name": "@wrnexus/pubsub", + "version": "0.3.4", + }, + "packages/queue": { + "name": "@wrnexus/queue", + "version": "0.3.4", + }, + "packages/reactive": { + "name": "@wrnexus/reactive", + "version": "0.3.4", + }, + "packages/router": { + "name": "@wrnexus/router", + "version": "0.3.4", + "dependencies": { + "@wrnexus/compiler": "workspace:*", + "@wrnexus/core": "workspace:*", }, - "packages/oauth": { - "name": "@wrnexus/oauth", - "version": "0.3.0" + }, + "packages/ssr": { + "name": "@wrnexus/ssr", + "version": "0.3.4", + "dependencies": { + "@wrnexus/core": "workspace:*", }, - "packages/plugin": { - "name": "@wrnexus/plugin", - "version": "0.3.0", - "dependencies": { - "@wrnexus/syntax": "workspace:*" - } + }, + "packages/styles": { + "name": "@wrnexus/styles", + "version": "0.3.4", + "dependencies": { + "@wrnexus/core": "workspace:*", + "@wrnexus/plugin": "workspace:*", + "@wrnexus/uploader": "workspace:*", }, - "packages/pubsub": { - "name": "@wrnexus/pubsub", - "version": "0.3.0" + }, + "packages/syntax": { + "name": "@wrnexus/syntax", + "version": "0.3.4", + }, + "packages/test": { + "name": "@wrnexus/test", + "version": "0.3.4", + }, + "packages/tracking": { + "name": "@wrnexus/tracking", + "version": "0.3.4", + }, + "packages/ui": { + "name": "@wrnexus/ui", + "version": "0.3.4", + "dependencies": { + "@wrnexus/core": "workspace:*", }, - "packages/queue": { - "name": "@wrnexus/queue", - "version": "0.3.0" + }, + "packages/uploader": { + "name": "@wrnexus/uploader", + "version": "0.3.4", + "dependencies": { + "@wrnexus/core": "workspace:*", }, - "packages/reactive": { - "name": "@wrnexus/reactive", - "version": "0.3.0" - }, - "packages/router": { - "name": "@wrnexus/router", - "version": "0.3.0", - "dependencies": { - "@wrnexus/compiler": "workspace:*", - "@wrnexus/core": "workspace:*" - } - }, - "packages/ssr": { - "name": "@wrnexus/ssr", - "version": "0.3.0", - "dependencies": { - "@wrnexus/core": "workspace:*" - } - }, - "packages/styles": { - "name": "@wrnexus/styles", - "version": "0.3.0", - "dependencies": { - "@wrnexus/uploader": "workspace:*", - "@wrnexus/core": "workspace:*", - "@wrnexus/plugin": "workspace:*" - } - }, - "packages/syntax": { - "name": "@wrnexus/syntax", - "version": "0.3.0" - }, - "packages/test": { - "name": "@wrnexus/test", - "version": "0.3.0" - }, - "packages/tracking": { - "name": "@wrnexus/tracking", - "version": "0.3.0" - }, - "packages/ui": { - "name": "@wrnexus/ui", - "version": "0.3.0", - "dependencies": { - "@wrnexus/core": "workspace:*" - } - }, - "packages/uploader": { - "name": "@wrnexus/uploader", - "version": "0.3.0", - "dependencies": { - "@wrnexus/core": "workspace:*" - } - }, - "packages/validation": { - "name": "@wrnexus/validation", - "version": "0.3.0" - }, - "examples/basic-app": { - "name": "basic-app", - "version": "0.1.0", - "dependencies": { - "@wrnexus/core": "workspace:*", - "@wrnexus/validation": "workspace:*", - "@wrnexus/db": "workspace:*" - }, - "devDependencies": { - "@wrnexus/test": "workspace:*", - "@eslint/js": "latest", - "@tailwindcss/cli": "^4.0.0", - "eslint": "latest", - "prettier": "^3.9.4", - "tailwindcss": "^4.0.0", - "typescript-eslint": "latest" - } - } + }, + "packages/validation": { + "name": "@wrnexus/validation", + "version": "0.3.4", + }, }, "overrides": { "esbuild": "0.28.1", }, "packages": { + "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="], + + "@cyberalien/svg-utils": ["@cyberalien/svg-utils@1.2.19", "", { "dependencies": { "@iconify/types": "^2.0.0" } }, "sha512-paDJoDu+LhuH5Ma1q0BDqBpg6d16Xk22cZZrlg/s/J9oB8KgnnpU/snaEETJu2G1pwYcWQINUz6WUqu0Wm9k6A=="], + "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.28.1", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ=="], "@esbuild/android-arm": ["@esbuild/android-arm@0.28.1", "", { "os": "android", "cpu": "arm" }, "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ=="], @@ -305,6 +324,16 @@ "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="], + "@iconify-json/lucide": ["@iconify-json/lucide@1.2.118", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-JBnK4YOq6K/lA0JP//27QxFxJ4120TjvfXAzGZZIGjCcXcRRRFxl1rcV7+IWdcVCe90KXdqVaAwLaLf6G3HELw=="], + + "@iconify/tailwind4": ["@iconify/tailwind4@1.2.3", "", { "dependencies": { "@iconify/tools": "^5.0.5", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.0" }, "peerDependencies": { "tailwindcss": ">= 4.0.0" } }, "sha512-z8SKiMHRASJKF/IY//87MF88lcB7ulxh8vlhQXXLWsBkNtOh6ese9R41MyGpQeqXdRvQVt+/fX2glQtHFjQ+MA=="], + + "@iconify/tools": ["@iconify/tools@5.0.12", "", { "dependencies": { "@cyberalien/svg-utils": "^1.2.15", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.3", "fflate": "^0.8.3", "modern-tar": "^0.7.6", "pathe": "^2.0.3", "svgo": "^4.0.1" } }, "sha512-aFPwSFmFphUPVjNLUkgxgUPSPVgTEEjv0mE7NgvfoQBuE5TtsMrKa4HTY65cM5oXZ2a1xKQcW/RKhiOKEiAarw=="], + + "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="], + + "@iconify/utils": ["@iconify/utils@3.1.4", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "import-meta-resolve": "^4.2.0" } }, "sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw=="], + "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="], "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="], @@ -527,6 +556,8 @@ "basic-app": ["basic-app@workspace:examples/basic-app"], + "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="], + "brace-expansion": ["brace-expansion@5.0.7", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA=="], "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="], @@ -543,18 +574,36 @@ "commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="], + "component-showcase": ["component-showcase@workspace:examples/component-showcase"], + "confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="], "consola": ["consola@3.4.2", "", {}, "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="], "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], + "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="], + + "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="], + + "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="], + + "csso": ["csso@5.0.5", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="], + "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="], "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="], "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="], + "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="], + + "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="], + + "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="], + + "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="], + "enhanced-resolve": ["enhanced-resolve@5.21.6", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ=="], "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="], @@ -587,6 +636,8 @@ "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="], + "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="], + "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="], "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], @@ -609,6 +660,8 @@ "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="], + "import-meta-resolve": ["import-meta-resolve@4.2.0", "", {}, "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg=="], + "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="], "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="], @@ -667,12 +720,16 @@ "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="], + "mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="], + "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="], "minimatch": ["minimatch@10.2.5", "", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="], "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="], + "modern-tar": ["modern-tar@0.7.7", "", {}, "sha512-t9VmxaqrmANnEOBhpSDI6HD192Ge48k8vmWqQQL7hSFEqHEYwZbbsu49+aKLWZeRvFs3j1pMhXOqqF4kPlvjkQ=="], + "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="], "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], @@ -683,6 +740,8 @@ "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="], + "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="], + "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="], "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="], @@ -691,6 +750,8 @@ "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="], + "package-manager-detector": ["package-manager-detector@1.8.0", "", {}, "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A=="], + "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="], "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="], @@ -719,6 +780,8 @@ "rollup": ["rollup@4.62.2", "", { "dependencies": { "@types/estree": "1.0.9" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.62.2", "@rollup/rollup-android-arm64": "4.62.2", "@rollup/rollup-darwin-arm64": "4.62.2", "@rollup/rollup-darwin-x64": "4.62.2", "@rollup/rollup-freebsd-arm64": "4.62.2", "@rollup/rollup-freebsd-x64": "4.62.2", "@rollup/rollup-linux-arm-gnueabihf": "4.62.2", "@rollup/rollup-linux-arm-musleabihf": "4.62.2", "@rollup/rollup-linux-arm64-gnu": "4.62.2", "@rollup/rollup-linux-arm64-musl": "4.62.2", "@rollup/rollup-linux-loong64-gnu": "4.62.2", "@rollup/rollup-linux-loong64-musl": "4.62.2", "@rollup/rollup-linux-ppc64-gnu": "4.62.2", "@rollup/rollup-linux-ppc64-musl": "4.62.2", "@rollup/rollup-linux-riscv64-gnu": "4.62.2", "@rollup/rollup-linux-riscv64-musl": "4.62.2", "@rollup/rollup-linux-s390x-gnu": "4.62.2", "@rollup/rollup-linux-x64-gnu": "4.62.2", "@rollup/rollup-linux-x64-musl": "4.62.2", "@rollup/rollup-openbsd-x64": "4.62.2", "@rollup/rollup-openharmony-arm64": "4.62.2", "@rollup/rollup-win32-arm64-msvc": "4.62.2", "@rollup/rollup-win32-ia32-msvc": "4.62.2", "@rollup/rollup-win32-x64-gnu": "4.62.2", "@rollup/rollup-win32-x64-msvc": "4.62.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA=="], + "sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="], + "semver": ["semver@7.8.5", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA=="], "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="], @@ -731,6 +794,8 @@ "sucrase": ["sucrase@3.35.1", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "tinyglobby": "^0.2.11", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="], + "svgo": ["svgo@4.0.2", "", { "dependencies": { "commander": "^11.1.0", "css-select": "^5.1.0", "css-tree": "^3.0.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.1.1", "sax": "^1.5.0" }, "bin": "./bin/svgo.js" }, "sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng=="], + "tailwindcss": ["tailwindcss@4.3.2", "", {}, "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA=="], "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="], @@ -775,6 +840,8 @@ "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="], + "@antfu/install-pkg/tinyexec": ["tinyexec@1.2.4", "", {}, "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg=="], + "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="], "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ=="], @@ -795,10 +862,16 @@ "basic-app/typescript-eslint": ["typescript-eslint@8.63.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.63.0", "@typescript-eslint/parser": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0", "@typescript-eslint/utils": "8.63.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-xgwXyzG4sK9ALkBxbyGkTMMOS+imnW65iPhxCQMK83KhxyoDNW7l+IDqEf9vMdoUidHpOoS967RCq4eMiTexwQ=="], + "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="], + + "dom-serializer/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="], + "lightningcss/detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="], "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="], + "svgo/commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="], + "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.63.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.63.0", "@typescript-eslint/type-utils": "8.63.0", "@typescript-eslint/utils": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.63.0", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-rvwSgqT+DHpWdzfSzPatRLm02a0GlESt++9iy3hLCDY4BgkaLcl8LBi9Yh7XGFBpwcBE/K3024QuXWTpbz4FfQ=="], "basic-app/typescript-eslint/@typescript-eslint/parser": ["@typescript-eslint/parser@8.63.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.63.0", "@typescript-eslint/types": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-gwh4gvvlaVDKKxyfxMG+Gnu1u9X0OQBwyGLkbwB65dIzBKnxeRiJlNFqlI3zwVhNXJIs6qV7mlFCn/BIajlVig=="], @@ -807,6 +880,8 @@ "basic-app/typescript-eslint/@typescript-eslint/utils": ["@typescript-eslint/utils@8.63.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.63.0", "@typescript-eslint/types": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-fUKaeAvrTuQg/Tgt3nliAUSZHJM6DlCcfyEmxCvlX8kieWSStBX+5O5Fnidtc3i2JrH+9c/GL4RY2iasd/GPTA=="], + "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="], + "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "@typescript-eslint/visitor-keys": "8.63.0" } }, "sha512-uUyfMWCnDSN8bCpcrY8nGP2BLkQ9Xn0GsipcONcpIDWhwhO4ZSyHvyS14U3X75mzxWxL3I2UZIrenTzdzcJO8A=="], "basic-app/typescript-eslint/@typescript-eslint/eslint-plugin/@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.63.0", "", { "dependencies": { "@typescript-eslint/types": "8.63.0", "@typescript-eslint/typescript-estree": "8.63.0", "@typescript-eslint/utils": "8.63.0", "debug": "^4.4.3", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-Nzzh/OGxVCOjObjaj1CQF2RUasyYy2Jfuh+zZ3PjLzG2fYRriAiZLib9UKtO+CpQAS3YHiAS+ckZDclwqI1TPA=="], diff --git a/docs/GUIDE.md b/docs/GUIDE.md index 058f98a8..cabb282c 100644 --- a/docs/GUIDE.md +++ b/docs/GUIDE.md @@ -414,7 +414,7 @@ Scaffold: `wrnexus generate page home` (alias `g p`). `app/layouts/public.wrn`: ``` -component Public { +layout Public { view {
    @@ -425,6 +425,12 @@ component Public { A page opts in with `layout = "public"`. Missing → a `default` layout if present; `layout = "none"` disables layouts for that page. +`app/layouts/document.wrn` is the optional global outer layout. It wraps the +selected page layout and can define ``, ``, ``, and `#app`. +It receives `cookies`, `theme`, `language`, `url`, and `pathname` during SSR. +Framework metadata, configured head content, styles, and scripts are merged into +the authored document automatically. + ## 12. Components & props `app/components/counter.wrn`: diff --git a/editors/vscode/package.json b/editors/vscode/package.json index b220330a..461c52b6 100644 --- a/editors/vscode/package.json +++ b/editors/vscode/package.json @@ -2,7 +2,7 @@ "name": "wrnexus", "displayName": "WRNexus Language Support", "description": "Complete language support for WRNexus .wrn files, including highlighting, formatting, diagnostics, snippets, lifecycle hooks, state watchers, component functions, completions, and definition navigation.", - "version": "0.3.0", + "version": "0.3.4", "publisher": "wrnexus", "private": true, "license": "SEE LICENSE IN LICENSE", @@ -117,13 +117,11 @@ "scope": "resource", "description": "Enable the built-in WRNexus formatter for .wrn files." }, - "wrnexus.formatting.printWidth": { - "type": "number", - "default": 100, - "minimum": 60, - "maximum": 240, + "wrnexus.formatting.multilineAttributes": { + "type": "boolean", + "default": true, "scope": "resource", - "description": "Preferred maximum line width used by the WRNexus formatter." + "description": "Place opening-tag attributes on separate lines, with the closing delimiter on its own line." } } }, diff --git a/editors/vscode/src/compiler.cjs b/editors/vscode/src/compiler.cjs index bf678afe..c0e0fda3 100644 --- a/editors/vscode/src/compiler.cjs +++ b/editors/vscode/src/compiler.cjs @@ -30,6 +30,36 @@ const types_ts_1 = require("./types.js"); function isComponentTag(tag) { return /^[A-Z][A-Za-z0-9_$]*$/.test(tag); } +const HTML_BOOLEAN_ATTRIBUTES = new Set([ + "allowfullscreen", + "async", + "autofocus", + "autoplay", + "checked", + "controls", + "default", + "defer", + "disabled", + "formnovalidate", + "hidden", + "inert", + "ismap", + "itemscope", + "loop", + "multiple", + "muted", + "nomodule", + "novalidate", + "open", + "playsinline", + "readonly", + "required", + "reversed", + "selected", +]); +function isHtmlBooleanAttribute(name) { + return HTML_BOOLEAN_ATTRIBUTES.has(name.toLowerCase()); +} /** Escape a value placed inside a double-quoted HTML attribute. */ function attrEscape(value) { return value @@ -94,13 +124,22 @@ function reactiveAttrValue(raw, reactive) { }); return found ? value : null; } -function renderAttrs(attrs, csrId, reactive = null) { +function renderAttrs(attrs, csrId, reactive = null, dynamicExpressions) { let bindIndex = 0; const rendered = attrs .map((attr) => { const base = renderAttr(attr); if (!reactive || attr.event || attr.boolean || !base || !attr.value.includes("{")) return base; + const expression = wholeAttributeExpression(attr.value); + if (expression && + exprRefsState(expression, reactive.runtimeStateNames) && + dynamicExpressions) { + dynamicExpressions.push(`\${__wrnexusPropAttr(${expression})}`); + const sentinel = `\x00WRNEACH${dynamicExpressions.length - 1}\x00`; + const marker = JSON.stringify([attr.name, attr.value]); + return ` ${attr.name}="${sentinel}" data-wrn-bind-${bindIndex++}="${attrEscape(marker)}"`; + } const initial = reactiveAttrValue(attr.value, reactive); if (initial === null) return base; @@ -332,7 +371,7 @@ function renderNode(node, ssrBindings, csrBindings, apiBindings, loops, reactive : undefined; // Void elements (
    , , …) have no closing tag and no children. if (parser_ts_1.VOID_ELEMENTS.has(node.tag.toLowerCase())) { - return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive)}>`; + return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive, loops)}>`; } const inner = apiBinding?.mode === "ssr" ? ssrMarker(ssrBindings, renderBinding(apiBinding)) @@ -346,7 +385,7 @@ function renderNode(node, ssrBindings, csrBindings, apiBindings, loops, reactive : node.children .map((child) => renderNode(child, ssrBindings, csrBindings, apiBindings, loops, reactive)) .join(""); - return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive)}>${inner}`; + return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive, loops)}>${inner}`; } function renderPageComponentInvocation(node, ssrBindings, csrBindings, apiBindings, loops, reactive) { const attrs = node.attrs @@ -363,6 +402,10 @@ function renderNestedComponentInvocation(node, ctx) { const attrs = node.attrs .filter((attr) => attr.name !== "data-component") .map((attr) => { + const spread = /^\{\.\.\.([A-Za-z_$][\w$]*)\}$/.exec(attr.name); + if (spread) { + return `\${__wireSpreadAttrs(${ctx.resolveExpr(spread[1])})}`; + } if (attr.event) { return (escLit(` ${eventAttribute(attr.name)}="`) + escLit(attrEscape(attr.value)) + escLit(`"`)); } @@ -387,11 +430,14 @@ function renderNestedComponentInvocation(node, ctx) { const childCtx = loops.length > 0 ? { ...ctx, + forwardRestAttrs: false, loopVars: new Set([...(ctx.loopVars ?? []), ...loops]), } - : ctx; + : { ...ctx, forwardRestAttrs: false }; const inner = node.children.map((child) => renderComponentNode(child, childCtx)).join(""); - return `
    ${inner}
    `; + return (`
    ${inner}
    `); } function ssrMarker(bindings, binding) { const marker = ``; @@ -549,12 +595,23 @@ function hydrationId(ast) { kind: ast.kind, name: ast.name, props: ast.props.map((entry) => entry.name), + events: ast.events.map((entry) => entry.name), states: ast.states.map((entry) => entry.name), computed: ast.computed.map((entry) => entry.name), view: ast.view, }); return `${ast.name}:${stableHash(shape)}`; } +function isSafeGeneratedIdentifier(name) { + return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name); +} +function generateSsrStateAliases(stateNames) { + const names = [...new Set(stateNames)].filter(isSafeGeneratedIdentifier); + if (!names.length) { + return ""; + } + return `const { ${names.join(", ")} } = __state;\n`; +} function hydrationAttribute(ast) { const strategy = ast.hydrate ?? "load"; return ` data-wrn-hydration="${attrEscape(hydrationId(ast))}" data-wrn-hydrate="${attrEscape(strategy)}" data-wrn-runtime="${attrEscape(ast.runtime ?? "universal")}"`; @@ -606,7 +663,10 @@ function generate(ast) { ...ast.states.map((entry) => entry.name), ...ast.computed.map((entry) => entry.name), ]; - const reactive = reactiveNames.length > 0 ? { stateNames: new Set(reactiveNames), scope: seedScope } : null; + const runtimeStateNames = new Set(ast.states.filter((entry) => /\bctx\b/.test(entry.expr)).map((entry) => entry.name)); + const reactive = reactiveNames.length > 0 + ? { stateNames: new Set(reactiveNames), runtimeStateNames, scope: seedScope } + : null; const loops = []; let html = ast.view .map((node) => renderNode(node, ssrBindings, csrBindings, apiBindings, loops, reactive)) @@ -643,6 +703,7 @@ function generate(ast) { .map((state) => `${JSON.stringify(state.name)}: ${state.valueType ?? "unknown"}`) .join("; ")} }` : "Record"; + const ssrStateAliases = generateSsrStateAliases(ast.states.map((state) => state.name)); loops.forEach((code, idx) => { body = body.replace(`\x00WRNEACH${idx}\x00`, () => code); }); @@ -669,7 +730,7 @@ function generate(ast) { out.push(`export default async function ${ast.name}(ctx: any) { ${decls} const __state: ${stateType} = { ${dynamicStateScope} }; - + ${ssrStateAliases} const __scopeValue = Object.entries(__state) .map(([key, value]) => { const encoded = @@ -696,7 +757,7 @@ function generate(ast) { else { out.push(`export default function ${ast.name}(ctx: any) { const __state: ${stateType} = { ${dynamicStateScope} }; - + ${ssrStateAliases} const __scopeValue = Object.entries(__state) .map(([key, value]) => { const encoded = @@ -901,6 +962,20 @@ function viewHasServerEach(nodes) { return viewHasServerEach(node.children); }); } +function viewHasRestAttributeSpread(nodes) { + return nodes.some((node) => { + if (node.type === "text") + return false; + if (node.type === "each") { + return viewHasRestAttributeSpread(node.body) || viewHasRestAttributeSpread(node.empty); + } + if (node.type === "if") { + return node.branches.some((branch) => viewHasRestAttributeSpread(branch.body)); + } + return (node.attrs.some((attr) => /^\{\.\.\.([A-Za-z_$][\w$]*)\}$/.test(attr.name)) || + viewHasRestAttributeSpread(node.children)); + }); +} /** * Compile a text node. Interpolations that reference state stay as client * mustaches (`{expr}`, hydrated by the reactive runtime); interpolations of @@ -1060,12 +1135,13 @@ function renderComponentNode(node, ctx) { return renderNestedComponentInvocation(node, ctx); } const loopVariables = loopVarsOf(node); - const elementContext = loopVariables.length > 0 - ? { - ...ctx, - loopVars: new Set([...(ctx.loopVars ?? []), ...loopVariables]), - } - : ctx; + const elementContext = { + ...ctx, + forwardRestAttrs: false, + ...(loopVariables.length > 0 + ? { loopVars: new Set([...(ctx.loopVars ?? []), ...loopVariables]) } + : {}), + }; let bindIndex = 0; const staticClasses = []; const conditionalClasses = []; @@ -1083,12 +1159,36 @@ function renderComponentNode(node, ctx) { const attrs = node.attrs .filter((a) => a.name !== "class" && !a.name.startsWith("class:")) .map((a) => { + const spread = /^\{\.\.\.([A-Za-z_$][\w$]*)\}$/.exec(a.name); + if (spread) { + return `\${__wireSpreadAttrs(${elementContext.resolveExpr(spread[1])})}`; + } if (a.event) { return ` ${eventAttribute(a.name)}="${escLit(attrEscape(a.value))}"`; } if (a.boolean) { return ` ${a.name}`; } + if (isHtmlBooleanAttribute(a.name)) { + const expression = wholeAttributeExpression(a.value); + if (expression) { + const referencesState = exprRefsState(a.value, ctx.stateNames); + const referencesLoopVariable = elementContext.loopVars + ? exprRefsState(a.value, elementContext.loopVars) + : false; + const referencesServerLocal = ctx.serverLocals + ? exprRefsState(a.value, ctx.serverLocals) + : false; + const marker = referencesState || referencesLoopVariable || referencesServerLocal + ? ` data-wrn-bind-${bindIndex++}="${escLit(attrEscape(JSON.stringify([a.name, a.value])))}"` + : ""; + return `\${__wireBooleanAttr(${JSON.stringify(a.name)}, ${elementContext.resolveExpr(expression)})}${marker}`; + } + if (a.value === "false") + return ""; + if (a.value === "true" || a.value === "") + return ` ${a.name}`; + } const rendered = ` ${a.name}="${compileAttrValue(a.value, elementContext)}"`; const referencesState = exprRefsState(a.value, ctx.stateNames); const referencesLoopVariable = elementContext.loopVars @@ -1142,6 +1242,10 @@ function renderComponentNode(node, ctx) { .join(""); const loopLocalsAttribute = serverLoopLocalsAttribute(ctx); const allAttrs = `${loopLocalsAttribute}` + + `${ctx.forwardRestAttrs ? "${__wireSpreadAttrs(__attrs)}" : ""}` + + `${ctx.forwardRestAttrs && ctx.eventNames?.length + ? ` data-wrn-events="${attrEscape(ctx.eventNames.join(","))}"` + : ""}` + `${classAttribute}` + `${classReactiveBinding}` + `${classBindings}` + @@ -1179,6 +1283,9 @@ function generateComponent(ast) { for (const p of effectiveProps) { nameRefs.set(p.name, safeRef(p.name)); } + if (!nameRefs.has("attrs")) { + nameRefs.set("attrs", "__attrs"); + } for (const s of ast.states) nameRefs.set(s.name, safeRef(s.name)); for (const entry of ast.computed) @@ -1191,12 +1298,25 @@ function generateComponent(ast) { } return result; }; - const ctx = { stateNames, resolveExpr }; + const ctx = { + stateNames, + resolveExpr, + eventNames: ast.events.map((event) => event.name), + }; const serverFunctions = ast.functions .map((body) => body.trim()) .filter(Boolean) .join("\n\n"); - const viewCode = ast.view.map((node) => renderComponentNode(node, ctx)).join(""); + const hasExplicitRestSpread = viewHasRestAttributeSpread(ast.view); + const rootElementIndex = ast.view.findIndex((node) => node.type === "element"); + const automaticallyForwardRootAttrs = !hasExplicitRestSpread && + !effectiveProps.some((prop) => prop.name === "attrs") && + rootElementIndex >= 0; + const viewCode = ast.view + .map((node, index) => renderComponentNode(node, automaticallyForwardRootAttrs && index === rootElementIndex + ? { ...ctx, forwardRestAttrs: true } + : ctx)) + .join(""); const styles = ast.styles.map((body) => body.trim()).filter(Boolean); const styleTag = styles.length > 0 ? escLit(``) @@ -1222,6 +1342,9 @@ function generateComponent(ast) { } decls.push(` const ${nameRefs.get(prop.name)}: ${prop.valueType ?? "any"} = __coerce(__p[${JSON.stringify(prop.name)}], (${resolveExpr(prop.default)}), ${JSON.stringify((0, types_ts_1.runtimeTypeOf)(prop.valueType))});`); } + if (!effectiveProps.some((prop) => prop.name === "attrs")) { + decls.push(` const __attrs = __restProps(__p, new Set(${JSON.stringify(effectiveProps.map((prop) => prop.name))}));`); + } for (const state of ast.states) { decls.push(` let ${nameRefs.get(state.name)}${state.valueType ? `: ${state.valueType}` : ""} = (${resolveExpr(state.expr)});`); } @@ -1264,7 +1387,7 @@ function generateComponent(ast) { if (typeSource) out.push(typeSource); if (effectiveProps.length > 0) { - out.push(`export interface ${ast.name}Props {\n${effectiveProps + out.push(`export interface ${ast.name}Props {\n [attribute: string]: unknown;\n${effectiveProps .map((prop) => ` ${JSON.stringify(prop.name)}${prop.required ? "" : "?"}: ${prop.valueType ?? "unknown"};`) .join("\n")}\n}`); } @@ -1339,6 +1462,15 @@ function generateComponent(ast) { return declared === "unknown" && def === undefined ? v : String(v); } +function __restProps( + props: Record, + declared: Set, +): Record { + return Object.fromEntries( + Object.entries(props).filter(([name]) => !declared.has(name)), + ); +} + function __wireHtml(v: any): string { return String(v == null ? "" : v).replace( /[&<>]/g, @@ -1365,6 +1497,48 @@ function __wireAttr(v: any): string { ); } +function __wireBooleanAttr(name: string, value: any): string { + return value === true || + value === "true" || + value === "" || + value === 1 || + value === "1" || + value === name + ? " " + name + : ""; +} + +function __wireSpreadAttrs(value: any): string { + if (value === null || typeof value !== "object" || Array.isArray(value)) return ""; + + const booleanAttributes = new Set(${JSON.stringify([...HTML_BOOLEAN_ATTRIBUTES])}); + const attributes: string[] = []; + + for (const [name, raw] of Object.entries(value)) { + const lowerName = name.toLowerCase(); + if ( + !/^[A-Za-z_:][A-Za-z0-9_.:-]*$/.test(name) || + lowerName.startsWith("on") || + lowerName === "style" || + lowerName === "slot" || + lowerName === "data-component" || + lowerName.startsWith("data-wrn") + ) { + continue; + } + + if (booleanAttributes.has(lowerName)) { + attributes.push(__wireBooleanAttr(name, raw)); + continue; + } + + if (raw === false || raw === null || raw === undefined) continue; + attributes.push(" " + name + '="' + __wireAttr(raw) + '"'); + } + + return attributes.join(""); +} + function __wireProp(v: any): string { const value = v !== null && typeof v === "object" @@ -2192,6 +2366,7 @@ function parse(source) { let runtime; let hydrate; const props = []; + const events = []; const types = []; const states = []; const computed = []; @@ -2241,13 +2416,28 @@ function parse(source) { break; } case "props": { - // props { name: Type = } — omit the default for required props. + // props { name: Type = ; @event name = function } lx.next(); expect("lbrace"); while (lx.peek().type !== "rbrace") { const t = lx.peek(); if (t.type === "eof") throw new ParseError("Unexpected end of input inside props"); + if (t.type === "at") { + lx.next(); + const declarationKind = expect("ident"); + if (declarationKind.value !== "event") { + throw new ParseError(`Expected '@event' but got '@${declarationKind.value}' at offset ${declarationKind.pos}`); + } + const eventName = expect("ident").value; + expect("eq"); + const marker = lx.readPropInitializer(); + if (marker !== "function") { + throw new ParseError(`Event '${eventName}' must be declared as '@event ${eventName} = function'`); + } + events.push({ name: eventName }); + continue; + } if (t.type !== "ident") { throw new ParseError(`Expected a prop name at offset ${t.pos}`); } @@ -2510,6 +2700,7 @@ function parse(source) { runtime, hydrate, props, + events, types, states, computed, diff --git a/editors/vscode/src/component-metadata.js b/editors/vscode/src/component-metadata.js index 6509dd04..d503af4c 100644 --- a/editors/vscode/src/component-metadata.js +++ b/editors/vscode/src/component-metadata.js @@ -69,6 +69,7 @@ function parseComponentMetadata(source, uri = null) { const propsKeyword = /\bprops\s*\{/.exec(source.slice(declaration.index)); const props = []; + const events = []; if (propsKeyword) { const start = declaration.index + propsKeyword.index; const openingBrace = source.indexOf("{", start); @@ -94,9 +95,12 @@ function parseComponentMetadata(source, uri = null) { options: inferOptions(source, name), }); } + const eventPattern = /^\s*@event\s+([A-Za-z_$][\w$]*)\s*=\s*function\s*$/gm; + let eventMatch; + while ((eventMatch = eventPattern.exec(body)) !== null) events.push(eventMatch[1]); } - return { kind: declaration[1], name: declaration[2], props, uri }; + return { kind: declaration[1], name: declaration[2], props, events, uri }; } function unwrapAttributeValue(value) { @@ -173,6 +177,7 @@ function validateComponentTags(source, components) { if (!component) continue; const provided = new Map(tag.attributes.map((attribute) => [attribute.name, attribute])); const declared = new Map(component.props.map((prop) => [prop.name, prop])); + const declaredEvents = new Set(component.events || []); for (const prop of component.props) { if (prop.required && !provided.has(prop.name)) { @@ -187,6 +192,19 @@ function validateComponentTags(source, components) { } for (const attribute of tag.attributes) { + if (attribute.name.startsWith("@")) { + const eventName = attribute.name.slice(1); + if (!declaredEvents.has(eventName)) { + diagnostics.push({ + severity: "warning", + code: "wrn-unknown-component-event", + message: `Unknown event \`${eventName}\` on <${tag.name}>.`, + start: attribute.nameStart, + end: attribute.nameEnd, + }); + } + continue; + } const prop = declared.get(attribute.name); if (!prop) { diagnostics.push({ diff --git a/editors/vscode/src/diagnostics.js b/editors/vscode/src/diagnostics.js index 054bc262..f3cebf43 100644 --- a/editors/vscode/src/diagnostics.js +++ b/editors/vscode/src/diagnostics.js @@ -84,7 +84,62 @@ function lineDiagnostic( } function stripComments(source) { - return source.replace(//g, (comment) => comment.replace(/[^\n]/g, " ")); + const masked = [...source]; + let quote = null; + let escaped = false; + + const maskRange = (start, end) => { + for (let index = start; index < end; index += 1) { + if (source[index] !== "\n" && source[index] !== "\r") { + masked[index] = " "; + } + } + }; + + for (let index = 0; index < source.length; index += 1) { + const character = source[index]; + + if (quote !== null) { + if (escaped) { + escaped = false; + } else if (character === "\\") { + escaped = true; + } else if (character === quote) { + quote = null; + } + continue; + } + + if (character === '"' || character === "'" || character === "`") { + quote = character; + continue; + } + + if (source.startsWith("//", index)) { + const lineEnd = source.indexOf("\n", index + 2); + const end = lineEnd === -1 ? source.length : lineEnd; + maskRange(index, end); + index = end - 1; + continue; + } + + if (source.startsWith("/*", index)) { + const commentEnd = source.indexOf("*/", index + 2); + const end = commentEnd === -1 ? source.length : commentEnd + 2; + maskRange(index, end); + index = end - 1; + continue; + } + + if (source.startsWith("", index + 4); + const end = commentEnd === -1 ? source.length : commentEnd + 3; + maskRange(index, end); + index = end - 1; + } + } + + return masked.join(""); } function maskLeadingTrivia(source) { @@ -509,6 +564,17 @@ function findRootMembers(source, bodyStart, bodyEnd) { continue; } + if (source.startsWith("//", index)) { + skipLine(); + continue; + } + + if (source.startsWith("/*", index)) { + const end = source.indexOf("*/", index + 2); + index = end === -1 ? bodyEnd : end + 2; + continue; + } + if (source.startsWith("", index + 4); diff --git a/editors/vscode/src/extension.js b/editors/vscode/src/extension.js index 6f00faad..2a250046 100644 --- a/editors/vscode/src/extension.js +++ b/editors/vscode/src/extension.js @@ -68,11 +68,14 @@ function registerFormatter(context) { const printWidth = configuration.get("formatting.printWidth", 100); + const multilineAttributes = configuration.get("formatting.multilineAttributes", true); + try { const formatted = formatWrn(source, { - tabSize: options.tabSize || 2, + tabSize: options.tabSize || 4, insertSpaces: options.insertSpaces !== false, printWidth, + multilineAttributes, }); if (typeof formatted !== "string" || formatted === source) { diff --git a/editors/vscode/src/formatter.js b/editors/vscode/src/formatter.js index 15c85e8c..60acf5a3 100644 --- a/editors/vscode/src/formatter.js +++ b/editors/vscode/src/formatter.js @@ -33,6 +33,16 @@ function splitPropDeclarations(value) { const beginsDeclaration = (position) => { let cursor = position; while (cursor < value.length && /[ \t]/.test(value[cursor])) cursor += 1; + if (value.slice(cursor).startsWith("@event")) { + cursor += "@event".length; + if (!/\s/.test(value[cursor] || "")) return false; + while (cursor < value.length && /\s/.test(value[cursor])) cursor += 1; + if (!isIdentifierStart(value[cursor])) return false; + cursor += 1; + while (cursor < value.length && isIdentifierPart(value[cursor])) cursor += 1; + while (cursor < value.length && /[ \t]/.test(value[cursor])) cursor += 1; + return value[cursor] === "="; + } if (!isIdentifierStart(value[cursor])) return false; cursor += 1; while (cursor < value.length && isIdentifierPart(value[cursor])) cursor += 1; @@ -69,6 +79,7 @@ function splitPropDeclarations(value) { brace === 0 && paren === 0 && /\s/.test(character) && + value.slice(start, index).trim() !== "@event" && beginsDeclaration(index) ) { const declaration = value.slice(start, index).trim(); @@ -154,6 +165,10 @@ function parseAttributes(value) { return attributes; } +function escapeRegExp(value) { + return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); +} + function parseOpeningTag(value) { const endIndex = findOpeningTagEnd(value); @@ -162,7 +177,6 @@ function parseOpeningTag(value) { } const openingPart = value.slice(0, endIndex + 1); - const remainder = value.slice(endIndex + 1).trim(); const match = /^<([A-Za-z][\w$:.-]*)([\s\S]*?)(\/?)>$/.exec(openingPart); @@ -172,26 +186,39 @@ function parseOpeningTag(value) { } const tagName = match[1]; - const attributes = parseAttributes(match[2].trim()); - const selfClosing = match[3] === "/"; - const inlineClosing = remainder === ``; + const escapedTagName = escapeRegExp(tagName); - const closesInRemainder = remainder.startsWith(``); + const immediateClosing = new RegExp(`^<\\/${escapedTagName}\\s*>`, "i").test(remainder); + + const trailingClosingMatch = new RegExp(`^([\\s\\S]*?)<\\/${escapedTagName}\\s*>$`, "i").exec( + remainder, + ); + + const trailingClosing = trailingClosingMatch !== null; + + const inlineContent = trailingClosing ? trailingClosingMatch[1].trim() : ""; + + const inlineClosing = trailingClosing && inlineContent.length === 0; + + const closesInRemainder = immediateClosing || trailingClosing; return { tagName, attributes, selfClosing, inlineClosing, + immediateClosing, + trailingClosing, + inlineContent, closesInRemainder, remainder, }; } -function formatOpeningTag(value, unit, depth, printWidth = 100) { +function formatOpeningTag(value, unit, depth, printWidth = 100, multilineAttributes = true) { const parsed = parseOpeningTag(value); if (!parsed) { @@ -202,23 +229,22 @@ function formatOpeningTag(value, unit, depth, printWidth = 100) { } const baseIndent = unit.repeat(depth); + const childIndent = unit.repeat(depth + 1); - const attributeIndent = unit.repeat(depth + 1); - - const normalizedOpening = `<${parsed.tagName}${ - parsed.attributes.length ? ` ${parsed.attributes.join(" ")}` : "" - }${parsed.selfClosing ? " /" : ""}>`; + const normalizedOpening = + `<${parsed.tagName}` + + `${parsed.attributes.length ? ` ${parsed.attributes.join(" ")}` : ""}` + + `${parsed.selfClosing ? " /" : ""}>`; const normalizedSingleLine = `${normalizedOpening}${parsed.remainder}`; const shouldBreak = - parsed.attributes.length > 1 || - normalizedSingleLine.length > printWidth || - value.includes("\n"); + value.includes("\n") || + (multilineAttributes && parsed.attributes.length > 0) || + baseIndent.length + normalizedSingleLine.length > printWidth; const opensElement = !parsed.selfClosing && - !parsed.inlineClosing && !parsed.closesInRemainder && !VOID_ELEMENTS.has(parsed.tagName.toLowerCase()); @@ -231,19 +257,27 @@ function formatOpeningTag(value, unit, depth, printWidth = 100) { const lines = [ `${baseIndent}<${parsed.tagName}`, - ...parsed.attributes.map((attribute) => `${attributeIndent}${attribute}`), + ...parsed.attributes.map((attribute) => `${childIndent}${attribute}`), ]; - if (parsed.inlineClosing) { - lines.push(`${baseIndent}>`); - } else if (parsed.selfClosing) { + if (parsed.selfClosing) { lines.push(`${baseIndent}/>`); - } else { - lines.push(`${baseIndent}>`); + return { + lines, + opensElement, + }; + } - if (parsed.remainder) { - lines.push(`${baseIndent}${parsed.remainder}`); + lines.push(`${baseIndent}>`); + + if (parsed.trailingClosing) { + if (parsed.inlineContent) { + lines.push(`${childIndent}${parsed.inlineContent}`); } + + lines.push(`${baseIndent}`); + } else if (parsed.remainder) { + lines.push(`${parsed.immediateClosing ? baseIndent : childIndent}${parsed.remainder}`); } return { @@ -273,8 +307,16 @@ function isClosingTag(value) { return /^<\/[A-Za-z][\w$:.-]*\s*>/.test(value); } -function isInlineElement(value) { - return /^<([A-Za-z][\w$:.-]*)\b[^>]*>[\s\S]*<\/\1\s*>$/.test(value); +function isControlBlockOpen(value) { + return /^\{#(?:if|each)\b[\s\S]*\}$/.test(value); +} + +function isControlBlockMiddle(value) { + return /^\{:(?:else(?:\s+if\b[\s\S]*)?|empty)\}$/.test(value); +} + +function isControlBlockClose(value) { + return /^\{\/(?:if|each)\}$/.test(value); } function countLeadingClosingBraces(value) { @@ -390,18 +432,47 @@ function collectOpeningTag(inputLines, startIndex) { }; } +/** + * Put WRN template control markers on their own lines before indentation. + * + * Authors commonly write compact fragments such as + * `{#if loading}…{/if}`. Treating that as one line prevents the + * normal HTML and control-block formatters from seeing its structure. + */ +function expandInlineControlBlocks(lines) { + const marker = + /(\{#(?:if|each)\b[^}]*\}|\{:(?:else(?:\s+if\b[^}]*)?|empty)\}|\{\/(?:if|each)\})/g; + + return lines.flatMap((line) => { + if (!marker.test(line)) return [line]; + marker.lastIndex = 0; + + const indentation = line.match(/^\s*/)?.[0] ?? ""; + const segments = line + .split(marker) + .map((segment) => segment.trim()) + .filter(Boolean); + + return segments.map((segment) => `${indentation}${segment}`); + }); +} + function formatWrn(source, options = {}) { - const unit = options.insertSpaces === false ? "\t" : " ".repeat(options.tabSize || 4); + const unit = options.insertSpaces === false ? "\t" : " ".repeat(options.tabSize ?? 4); - const printWidth = options.printWidth || 100; + const printWidth = options.printWidth ?? 100; - const inputLines = source.replace(/\r\n/g, "\n").split("\n"); - - const output = []; + const multilineAttributes = options.multilineAttributes !== false; let codeDepth = 0; let htmlDepth = 0; + let controlDepth = 0; let index = 0; + + const inputLines = expandInlineControlBlocks(source.replace(/\r\n/g, "\n").split("\n")); + + const output = []; + let previousWasBlank = false; while (index < inputLines.length) { @@ -451,6 +522,13 @@ function formatWrn(source, options = {}) { const leadingClosingBraces = countLeadingClosingBraces(value); + const closesControlBlock = isControlBlockClose(value); + + const continuesControlBlock = isControlBlockMiddle(value); + + const lineControlDepth = + closesControlBlock || continuesControlBlock ? Math.max(0, controlDepth - 1) : controlDepth; + const lineCodeDepth = Math.max(0, codeDepth - leadingClosingBraces); let lineHtmlDepth = htmlDepth; @@ -459,17 +537,16 @@ function formatWrn(source, options = {}) { lineHtmlDepth = Math.max(0, htmlDepth - 1); } - const depth = lineCodeDepth + lineHtmlDepth; + const depth = lineCodeDepth + lineHtmlDepth + lineControlDepth; if ( value.startsWith("<") && !value.startsWith(" { + const target = parseComponentMetadata(`component PinInput { + props { + value = "" + @event complete = function + @event clear = function + } + view {
    } + }`); + + assert.deepEqual(target.events, ["complete", "clear"]); + assert.deepEqual( + validateComponentTags( + ``, + new Map([["PinInput", target]]), + ).map(({ code }) => code), + ["wrn-unknown-component-event"], + ); +}); diff --git a/editors/vscode/test/diagnostics.test.js b/editors/vscode/test/diagnostics.test.js index 5f7ea1f3..641d0fc3 100644 --- a/editors/vscode/test/diagnostics.test.js +++ b/editors/vscode/test/diagnostics.test.js @@ -30,6 +30,7 @@ const { findTopLevelDeclaration, maskLeadingTrivia, validateBalancedCharacters, + validateHtmlTags, validateRootMembers, } = require("../src/diagnostics"); Module._load = originalLoad; @@ -115,3 +116,37 @@ test("accepts all WRN 0.3 root members without false unknown-member errors", () assert.deepEqual(validateRootMembers(document, source, declaration.kind, declaration.match), []); }); + +test("ignores member-like words inside component line and block comments", () => { + const source = `component Counter { + // Props are passed as attributes on the mount element. + /* State and View are explained here, not declared here. */ + props { + start = 0 + label = "Count" + } + state count = start + view { } + }`; + const declaration = findTopLevelDeclaration({}, source); + + assert.deepEqual( + validateRootMembers(mockDocument(source), source, declaration.kind, declaration.match), + [], + ); +}); + +test("ignores HTML-like tags inside WRN comments", () => { + const source = `// The
    below listens for child events. +// is only documentation in this comment. +page Test { + /* + Example markup:
    Preview
    + */ + view { +
    Real content
    + } +}`; + + assert.deepEqual(validateHtmlTags(mockDocument(source), source), []); +}); diff --git a/editors/vscode/test/formatter.test.js b/editors/vscode/test/formatter.test.js index bdfa2a96..4bb47c30 100644 --- a/editors/vscode/test/formatter.test.js +++ b/editors/vscode/test/formatter.test.js @@ -20,6 +20,15 @@ test("preserves nested prop defaults while formatting", () => { assert.equal(formatWrn(formatted, { insertSpaces: true, tabSize: 2 }), formatted); }); +test("formats public event declarations as individual props members", () => { + const source = `component Search {\nprops { value = "" @event search = function @event clear = function }\nview { }\n}\n`; + const formatted = formatWrn(source, { insertSpaces: true, tabSize: 2 }); + + assert.match(formatted, / {4}@event search = function/); + assert.match(formatted, / {4}@event clear = function/); + assert.equal(formatWrn(formatted, { insertSpaces: true, tabSize: 2 }), formatted); +}); + test("keeps long inline-closing tags idempotent after multiline expansion", () => { const source = `component Status { view { @@ -37,3 +46,139 @@ test("keeps long inline-closing tags idempotent after multiline expansion", () = assert.equal(formatWrn(formatted, options), formatted); assert.match(formatted, /<\/span>Loading/); }); + +test("formats inline elements with one attribute per line", () => { + const source = `component Button { + view { + + } +} +`; + + const expected = `component Button { + view { + + } +} +`; + + const options = { + insertSpaces: true, + tabSize: 2, + printWidth: 100, + multilineAttributes: true, + }; + + assert.equal(formatWrn(source, options), expected); + + assert.equal(formatWrn(expected, options), expected); +}); + +test("formats self-closing component props", () => { + const source = `component Demo { + view { + + } +} +`; + + const formatted = formatWrn(source, { + insertSpaces: true, + tabSize: 2, + printWidth: 100, + multilineAttributes: true, + }); + + assert.match(formatted, /$/m); +}); + +test("indents if and each blocks", () => { + const source = `page Demo { + view { + {#if open} + {#each items as item} + {item.label} + {:empty} +

    Empty

    + {/each} + {:else} +

    Closed

    + {/if} + } +} +`; + + const formatted = formatWrn(source, { + insertSpaces: true, + tabSize: 2, + multilineAttributes: true, + }); + + assert.match(formatted, /^ {6}\{#each items as item\}$/m); + + assert.match(formatted, /^ {8}/m); + + assert.equal( + formatWrn(formatted, { + insertSpaces: true, + tabSize: 2, + multilineAttributes: true, + }), + formatted, + ); +}); + +test("expands inline if blocks around HTML", () => { + const source = `component Button { + view { + + } +} +`; + + const expected = `component Button { + view { + + } +} +`; + + const options = { + insertSpaces: true, + tabSize: 2, + printWidth: 100, + multilineAttributes: true, + }; + + assert.equal(formatWrn(source, options), expected); + assert.equal(formatWrn(expected, options), expected); +}); diff --git a/examples/basic-app/app/db/queries.gen.ts b/examples/basic-app/app/db/queries.gen.ts index 0d83d4b3..da6ca380 100644 --- a/examples/basic-app/app/db/queries.gen.ts +++ b/examples/basic-app/app/db/queries.gen.ts @@ -3,7 +3,7 @@ import type { Db, ExecResult } from "@wrnexus/db"; import { users } from "./schema.ts"; export async function GetUserByEmail(db: Db, args: { email: string }): Promise<{ id: number; email: string; name: string; active: boolean; passwordHash: string; createdAt: Date } | null> { - return (await db.one("SELECT * FROM users WHERE email = $1", [args.email], users)) as { id: number; email: string; name: string; active: boolean; passwordHash: string; createdAt: Date } | null; + return (await db.one("SELECT * FROM users WHERE email = ?", [args.email], users)) as { id: number; email: string; name: string; active: boolean; passwordHash: string; createdAt: Date } | null; } export async function ListUsers(db: Db): Promise<{ id: number; name: string; active: boolean }[]> { @@ -11,13 +11,13 @@ export async function ListUsers(db: Db): Promise<{ id: number; name: string; act } export async function CountActive(db: Db, args: { active: boolean }): Promise<{ n: number } | null> { - return (await db.one("SELECT COUNT(*) AS n FROM users WHERE active = $1", [args.active])) as { n: number } | null; + return (await db.one("SELECT COUNT(*) AS n FROM users WHERE active = ?", [args.active])) as { n: number } | null; } export async function CreateUser(db: Db, args: { email: string; name: string; active: boolean }): Promise { - return db.exec("INSERT INTO users (email, name, active) VALUES ($1, $2, $3)", [args.email, args.name, args.active]); + return db.exec("INSERT INTO users (email, name, active) VALUES (?, ?, ?)", [args.email, args.name, args.active]); } export async function DeactivateUser(db: Db, args: { id: number }): Promise { - return db.exec("UPDATE users SET active = 0 WHERE id = $1", [args.id]); + return db.exec("UPDATE users SET active = 0 WHERE id = ?", [args.id]); } diff --git a/examples/basic-app/app/pages/test.wrn b/examples/basic-app/app/pages/test.wrn new file mode 100644 index 00000000..eeb783b4 --- /dev/null +++ b/examples/basic-app/app/pages/test.wrn @@ -0,0 +1,233 @@ +// Component event test page. Route: /test +// +// Events bubble from the exact ComboBox or AdvancedSelect that emitted them. +// The
    below listens once for every child component, while the first +// ComboBox also demonstrates a listener attached directly to one component. +page Test { + layout = "public" + + state teams = [{ value: "design", label: "Design", description: "Product and visual design", icon: "icon-[lucide--palette]" }, { value: "engineering", label: "Engineering", description: "Platform engineering", icon: "icon-[lucide--code-2]" }, { value: "growth", label: "Growth", description: "Marketing and customer growth", icon: "icon-[lucide--trending-up]" }, { value: "support", label: "Support", description: "Customer operations", icon: "icon-[lucide--life-buoy]" }] + state eventName = "No event yet" + state eventSource = "Interact with a component" + state eventPayload = "{}" + state selectedTeam = "" + + seo { + title = "Component event test" + description = "Test ComboBox and AdvancedSelect events on one WRN page." + canonical = "/test" + } + + functions { + function handleComponentEvent(event) { + eventName = event.type + eventSource = event.target.getAttribute("data-field") || event.detail.component + eventPayload = JSON.stringify(event.detail, null, 2) + } + + function handleTeamSelect(event) { + selectedTeam = event.detail.value + } + } + + view { +
    + WRN component events +

    ComboBox and AdvancedSelect event test

    +

    + This page contains multiple component instances. Every component has a + unique id and data-field, so the event source + is always identifiable. +

    +
    + + +
    +
    + Direct listener +

    Team ComboBox

    +

    + Its @select listener updates the selected-team + text below. The delegated section listener also receives the event. +

    + + + + + Selected team: {selectedTeam || "None"} + +
    + +
    + Second instance +

    Reviewer ComboBox

    +

    + This is another ComboBox on the same page. Its events remain + distinguishable through data-field="reviewer-combobox". +

    + + +
    + +
    + Multiple selection +

    Project teams

    +

    + AdvancedSelect emits the same event names. Multiple values are + available through event.detail.values. +

    + + +
    + + +
    + } + + style { + .test-hero { + display: grid; + max-width: 52rem; + gap: 0.75rem; + margin-block: 3rem 2rem; + } + + .test-hero > span, + .test-card__type, + .event-monitor span { + color: var(--wire-color-primary); + font-size: 0.72rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + } + + .test-hero h1, + .test-card h2, + .test-hero p, + .test-card p { + margin: 0; + } + + .test-hero p, + .test-card p { + color: var(--wire-color-muted); + line-height: 1.65; + } + + .test-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; + margin-bottom: 4rem; + } + + .test-card, + .event-monitor { + display: grid; + align-content: start; + gap: 1rem; + padding: clamp(1rem, 3vw, 1.5rem); + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-lg); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + } + + .test-selection { + color: var(--wire-color-muted); + font-size: 0.82rem; + } + + .event-monitor { + position: sticky; + bottom: 1rem; + grid-column: 1 / -1; + grid-template-columns: repeat(2, minmax(0, 1fr)); + background: color-mix(in srgb, var(--wire-color-surface) 94%, var(--wire-color-primary)); + } + + .event-monitor > div { + display: grid; + gap: 0.35rem; + } + + .event-monitor pre { + grid-column: 1 / -1; + max-height: 18rem; + overflow: auto; + margin: 0; + padding: 1rem; + border-radius: var(--wire-radius-md); + background: var(--wire-color-bg); + font-size: 0.75rem; + line-height: 1.65; + white-space: pre-wrap; + } + + @media (max-width: 760px) { + .test-grid { + grid-template-columns: 1fr; + } + + .event-monitor { + grid-template-columns: 1fr; + } + + .event-monitor pre { + grid-column: auto; + } + } + } +} diff --git a/examples/basic-app/app/routes.gen.ts b/examples/basic-app/app/routes.gen.ts index 94001b78..49575ea2 100644 --- a/examples/basic-app/app/routes.gen.ts +++ b/examples/basic-app/app/routes.gen.ts @@ -1,6 +1,5 @@ -// AUTO-GENERATED by `wrnexus dev` — do not edit. -// Typed routes: a compile-time map of every page path to its [param] types, -// plus an href() builder that fills params and rejects unknown paths. +// AUTO-GENERATED by `wrnexus dev` - do not edit. +// Typed routes support required, optional, and catch-all parameters. export interface Routes { "/": Record; @@ -10,22 +9,55 @@ export interface Routes { "/hello": Record; "/login": Record; "/reactive": Record; + "/test": Record; "/ui": Record; } export type RoutePath = keyof Routes; +type RouteValue = string | readonly string[] | undefined; + +function encodeRouteValue(value: RouteValue, catchAll: boolean): string { + if (value === undefined) return ""; + const values = Array.isArray(value) ? value : catchAll ? String(value).split("/") : [String(value)]; + return values.map((part) => encodeURIComponent(part)).join("/"); +} export function href

    ( path: P, - ...args: Routes[P] extends Record ? [] : [params: Routes[P]] + ...args: keyof Routes[P] extends never + ? [] + : Record extends Routes[P] + ? [params?: Routes[P]] + : [params: Routes[P]] ): string { - const params = (args[0] ?? {}) as Record; - return String(path) - .split("/") - .map((seg) => - seg.startsWith("[") && seg.endsWith("]") - ? encodeURIComponent(params[seg.slice(1, -1)] ?? "") - : seg, - ) - .join("/"); + const params = (args[0] ?? {}) as Record; + const output: string[] = []; + for (const segment of String(path).split("/").filter(Boolean)) { + let name: string | undefined; + let optional = false; + let catchAll = false; + if (segment.startsWith("[[") && segment.endsWith("]]")) { + optional = true; + name = segment.slice(2, -2); + } else if (segment.startsWith("[") && segment.endsWith("]")) { + name = segment.slice(1, -1); + if (name.endsWith("?")) { + optional = true; + name = name.slice(0, -1); + } + } + if (!name) { + output.push(segment); + continue; + } + if (name.startsWith("...")) { + catchAll = true; + name = name.slice(3); + } + const value = params[name]; + if (value === undefined && optional) continue; + if (value === undefined) throw new Error(`WRN-ROUTE-MISSING-PARAM: Missing route parameter '${name}'.`); + output.push(encodeRouteValue(value, catchAll)); + } + return "/" + output.filter(Boolean).join("/"); } diff --git a/examples/component-showcase/README.md b/examples/component-showcase/README.md new file mode 100644 index 00000000..841d0264 --- /dev/null +++ b/examples/component-showcase/README.md @@ -0,0 +1,23 @@ +# WRNexus UI component showcase + +This example renders every component from `@wrnexus/ui` with representative, +prop-driven data. Pages are generated from `packages/ui/component-reference.json` +so coverage stays synchronized with the packaged component catalog. + +```bash +bun run --cwd examples/component-showcase dev +``` + +Open `http://localhost:3000`. The index links to the category catalog, and every +component card opens a dedicated documentation page with three live use cases, +usage examples, its prop API, events, slots, and related navigation. + +After changing UI component props, regenerate and verify the catalog: + +```bash +bun run --cwd examples/component-showcase generate +bun run --cwd examples/component-showcase check +``` + +Files under `app/pages/` are generated. Customize the generator or stylesheet +instead of editing those pages directly. diff --git a/examples/component-showcase/app/api/teams.ts b/examples/component-showcase/app/api/teams.ts new file mode 100644 index 00000000..87e09c88 --- /dev/null +++ b/examples/component-showcase/app/api/teams.ts @@ -0,0 +1,44 @@ +import type { Context } from "@wrnexus/core"; + +const teams = [ + { + value: "design", + label: "Design", + description: "Product and visual design", + icon: "icon-[lucide--palette]", + }, + { + value: "engineering", + label: "Engineering", + description: "Platform and application engineering", + icon: "icon-[lucide--code-2]", + }, + { + value: "growth", + label: "Growth", + description: "Marketing and customer growth", + icon: "icon-[lucide--trending-up]", + }, + { + value: "support", + label: "Support", + description: "Customer operations", + icon: "icon-[lucide--life-buoy]", + }, +]; + +export const GET = async (ctx: Context) => { + const query = (ctx.url.searchParams.get("q") ?? "").trim().toLowerCase(); + const page = Math.max(1, Number(ctx.url.searchParams.get("page") ?? 1)); + const pageSize = 2; + const matches = teams.filter((team) => + `${team.label} ${team.description}`.toLowerCase().includes(query), + ); + const start = (page - 1) * pageSize; + + return Response.json({ + items: matches.slice(start, start + pageSize), + hasMore: start + pageSize < matches.length, + page, + }); +}; diff --git a/examples/component-showcase/app/layouts/document.wrn b/examples/component-showcase/app/layouts/document.wrn new file mode 100644 index 00000000..7fd2b7d1 --- /dev/null +++ b/examples/component-showcase/app/layouts/document.wrn @@ -0,0 +1,22 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Document { + props { + cookies = {} + theme = "light" + language = "en" + url = "" + pathname = "/" + } + view { + + +

    + + } +} diff --git a/examples/component-showcase/app/layouts/showcase.wrn b/examples/component-showcase/app/layouts/showcase.wrn new file mode 100644 index 00000000..67a8a875 --- /dev/null +++ b/examples/component-showcase/app/layouts/showcase.wrn @@ -0,0 +1,70 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Showcase { + view { +
    +
    +
    + + WRNexus UI + +
    +
    + + +
    +
    + +
    + +
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/accessibility.wrn b/examples/component-showcase/app/pages/accessibility.wrn new file mode 100644 index 00000000..de126e90 --- /dev/null +++ b/examples/component-showcase/app/pages/accessibility.wrn @@ -0,0 +1,16 @@ +page AccessibilityGuide { + layout = "showcase" + seo { + title = "Accessibility" + description = "Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default." + } + view { +
    + +
    Getting Started

    Accessibility

    Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.

    +

    Overview

    Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.

    Configuration

    Use the design switcher in the header to test this setting live.

    Component behavior

    The setting is inherited by components, blocks, templates, and playground previews.

    + + +
    + } +} diff --git a/examples/component-showcase/app/pages/advanced-forms.wrn b/examples/component-showcase/app/pages/advanced-forms.wrn new file mode 100644 index 00000000..ae2d190e --- /dev/null +++ b/examples/component-showcase/app/pages/advanced-forms.wrn @@ -0,0 +1,107 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedFormsShowcase { + layout = "showcase" + seo { + title = "Advanced Forms components" + description = "9 advanced-forms components from @wrnexus/ui." + } + view { +
    + Component category +

    Advanced Forms

    +

    9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    9 componentsMultiple use cases106 live configurations
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Advanced Select

    Theme-aware, responsive advanced select component.

    +
    51 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Combo Box

    Editable autocomplete combobox with local and remote suggestions.

    +
    41 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Copy Markup

    Theme-aware, responsive copy markup component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Input Number

    Theme-aware, responsive input number component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Pin Input

    Secure multi-cell PIN and verification-code input with regex and paste support.

    +
    26 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Search Box

    Theme-aware, responsive search box component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Strong Password

    Theme-aware, responsive strong password component.

    +
    27 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Toggle Count

    Theme-aware, responsive toggle count component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Advanced Forms

    Toggle Password

    Accessible password field with optional show and hide controls.

    +
    24 props · 0 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/base.wrn b/examples/component-showcase/app/pages/base.wrn new file mode 100644 index 00000000..eba4c5d6 --- /dev/null +++ b/examples/component-showcase/app/pages/base.wrn @@ -0,0 +1,287 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BaseShowcase { + layout = "showcase" + seo { + title = "Base components" + description = "27 base components from @wrnexus/ui." + } + view { +
    + Component category +

    Base

    +

    27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    27 componentsMultiple use cases86 live configurations
    +
    +
    +
    +
    + +
    Composable content area.
    +
    +
    +
    Base

    Accordion

    Theme-aware, responsive accordion component.

    +
    5 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Alert

    Theme-aware, responsive alert component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Avatar

    Theme-aware, responsive avatar component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Avatar Group

    Theme-aware, responsive avatar group component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Badge

    Theme-aware, responsive badge component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Blockquote

    Theme-aware, responsive blockquote component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Button

    Theme-aware, responsive button component.

    +
    25 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Button Group

    Theme-aware, responsive button group component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Card

    Theme-aware, responsive card component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Carousel

    Theme-aware, responsive carousel component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Chat Bubble

    Theme-aware, responsive chat bubble component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Collapse

    Theme-aware, responsive collapse component.

    +
    5 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Date Picker

    Theme-aware, responsive date picker component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Device Frame

    Theme-aware, responsive device frame component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    File Upload Progress

    Theme-aware, responsive file upload progress component.

    +
    7 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Legend Indicator

    Theme-aware, responsive legend indicator component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    List

    Theme-aware, responsive list component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    List Group

    Theme-aware, responsive list group component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Marquee

    Theme-aware, responsive marquee component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Progress

    Theme-aware, responsive progress component.

    +
    7 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Rating

    Theme-aware, responsive rating component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Skeleton

    Theme-aware, responsive skeleton component.

    +
    5 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Spinner

    Theme-aware, responsive spinner component.

    +
    5 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Styled Icon

    Theme-aware, responsive styled icon component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Timeline

    Theme-aware, responsive timeline component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Toast

    Theme-aware, responsive toast component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Base

    Tree View

    Theme-aware, responsive tree view component.

    +
    7 props · 1 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/blocks.wrn b/examples/component-showcase/app/pages/blocks.wrn new file mode 100644 index 00000000..59df0ea8 --- /dev/null +++ b/examples/component-showcase/app/pages/blocks.wrn @@ -0,0 +1,11 @@ +page Blocks { + layout = "showcase" + seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." } + view { +
    + +
    Composable sections

    Ready-to-use UI blocks

    Complete responsive sections composed exclusively from the components in this library.

    +
    Application UI

    Application shells

    Headers, sidebars, content, and command areas.

    View components →
    Blog & Articles

    Article layouts

    Editorial headers, content, author, and sharing.

    View components →
    Application UI

    Authentication

    Sign in, registration, recovery, and verification.

    View components →
    +
    + } +} diff --git a/examples/component-showcase/app/pages/colors.wrn b/examples/component-showcase/app/pages/colors.wrn new file mode 100644 index 00000000..4949fc97 --- /dev/null +++ b/examples/component-showcase/app/pages/colors.wrn @@ -0,0 +1,16 @@ +page ColorsGuide { + layout = "showcase" + seo { + title = "Colors" + description = "Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette." + } + view { +
    + +
    Customization

    Colors

    Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.

    +

    Brand colors

    Primary and secondary tokens communicate brand hierarchy.

    Status colors

    Success, warning, danger, and info preserve their semantic meaning in every palette.

    Component override

    Pass color="success" or another semantic color to any component.

    + + +
    + } +} diff --git a/examples/component-showcase/app/pages/components/accordion.wrn b/examples/component-showcase/app/pages/components/accordion.wrn new file mode 100644 index 00000000..60cc7ac0 --- /dev/null +++ b/examples/component-showcase/app/pages/components/accordion.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AccordionDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"accordion-0-1\",\n \"key\": \"accordion-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#accordion-demo\",\n \"actionHref\": \"#accordion-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"accordion-0-2\",\n \"key\": \"accordion-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#accordion-demo\",\n \"actionHref\": \"#accordion-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Accordion" + description = "Theme-aware, responsive accordion component." + } + view { + +
    +
    + Base component +

    Accordion

    +

    Theme-aware, responsive accordion component.

    +
    5 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Accordion

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    Component code
    + 
    <Accordion
+  items='[
+    {
+      "id": "accordion-0-1",
+      "key": "accordion-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "accordion-0-2",
+      "key": "accordion-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
    +
    +
    +
    +
    +
    Component props5 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    +
    Component usage.wrn
    + 
    <Accordion
+  items='[
+    {
+      "id": "accordion-0-1",
+      "key": "accordion-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "accordion-0-2",
+      "key": "accordion-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    +
    Component usage.wrn
    + 
    <Accordion
+  size="sm"
+  items='[
+    {
+      "id": "accordion-1-1",
+      "key": "accordion-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "accordion-1-2",
+      "key": "accordion-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    Rich supporting content with additional context.
    +
    +
    +
    Component usage.wrn
    + 
    <Accordion
+  size="lg"
+  items='[
+    {
+      "id": "accordion-2-1",
+      "key": "accordion-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "accordion-2-2",
+      "key": "accordion-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    itemsstring[]No
    multiplebooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn new file mode 100644 index 00000000..1acf43ff --- /dev/null +++ b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedDatePickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Date Picker example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced date picker for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"advanced-date-picker-0-1\",\n \"key\": \"advanced-date-picker-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#advanced-date-picker-demo\",\n \"actionHref\": \"#advanced-date-picker-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"advanced-date-picker-0-2\",\n \"key\": \"advanced-date-picker-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#advanced-date-picker-demo\",\n \"actionHref\": \"#advanced-date-picker-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Advanced Date Picker" + description = "Theme-aware, responsive advanced date picker component." + } + view { + +
    +
    + Integrations component +

    Advanced Date Picker

    +

    Theme-aware, responsive advanced date picker component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Advanced Date Picker

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <AdvancedDatePicker
+  title="Advanced Date Picker example"
+  description="A polished default advanced date picker for a modern application."
+  items='[
+    {
+      "id": "advanced-date-picker-0-1",
+      "key": "advanced-date-picker-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-0-2",
+      "key": "advanced-date-picker-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedDatePicker
+  title="Advanced Date Picker example"
+  description="A polished default advanced date picker for a modern application."
+  items='[
+    {
+      "id": "advanced-date-picker-0-1",
+      "key": "advanced-date-picker-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-0-2",
+      "key": "advanced-date-picker-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedDatePicker
+  size="sm"
+  title="Compact Advanced Date Picker"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "advanced-date-picker-1-1",
+      "key": "advanced-date-picker-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-1-2",
+      "key": "advanced-date-picker-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedDatePicker
+  size="lg"
+  title="Advanced Advanced Date Picker"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "advanced-date-picker-2-1",
+      "key": "advanced-date-picker-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-2-2",
+      "key": "advanced-date-picker-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Advanced Date Picker"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn new file mode 100644 index 00000000..b63958d9 --- /dev/null +++ b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedRangeSliderDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Range Slider example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced range slider for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"advanced-range-slider-0-1\",\n \"key\": \"advanced-range-slider-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#advanced-range-slider-demo\",\n \"actionHref\": \"#advanced-range-slider-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"advanced-range-slider-0-2\",\n \"key\": \"advanced-range-slider-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#advanced-range-slider-demo\",\n \"actionHref\": \"#advanced-range-slider-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Advanced Range Slider" + description = "Theme-aware, responsive advanced range slider component." + } + view { + +
    +
    + Integrations component +

    Advanced Range Slider

    +

    Theme-aware, responsive advanced range slider component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Advanced Range Slider

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <AdvancedRangeSlider
+  title="Advanced Range Slider example"
+  description="A polished default advanced range slider for a modern application."
+  items='[
+    {
+      "id": "advanced-range-slider-0-1",
+      "key": "advanced-range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-0-2",
+      "key": "advanced-range-slider-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedRangeSlider
+  title="Advanced Range Slider example"
+  description="A polished default advanced range slider for a modern application."
+  items='[
+    {
+      "id": "advanced-range-slider-0-1",
+      "key": "advanced-range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-0-2",
+      "key": "advanced-range-slider-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedRangeSlider
+  size="sm"
+  title="Compact Advanced Range Slider"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "advanced-range-slider-1-1",
+      "key": "advanced-range-slider-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-1-2",
+      "key": "advanced-range-slider-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedRangeSlider
+  size="lg"
+  title="Advanced Advanced Range Slider"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "advanced-range-slider-2-1",
+      "key": "advanced-range-slider-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-2-2",
+      "key": "advanced-range-slider-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Advanced Range Slider"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/advanced-select.wrn b/examples/component-showcase/app/pages/components/advanced-select.wrn new file mode 100644 index 00000000..9104ae76 --- /dev/null +++ b/examples/component-showcase/app/pages/components/advanced-select.wrn @@ -0,0 +1,2604 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedSelectDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default advanced select" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "advanced-select-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "design" + state playground_values = ctx.url.searchParams.get("pg_values") ?? "[]" + state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"value\": \"design\",\n \"label\": \"Design\",\n \"description\": \"Product and visual design\",\n \"icon\": \"icon-[lucide--palette]\",\n \"color\": \"#8b5cf6\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"engineering\",\n \"label\": \"Engineering\",\n \"description\": \"Platform and application engineering\",\n \"icon\": \"icon-[lucide--code-2]\",\n \"color\": \"#0ea5e9\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"growth\",\n \"label\": \"Growth\",\n \"description\": \"Marketing and customer growth\",\n \"icon\": \"icon-[lucide--trending-up]\",\n \"color\": \"#10b981\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"support\",\n \"label\": \"Support\",\n \"description\": \"Customer operations\",\n \"disabled\": false\n }\n]" + state playground_groups = ctx.url.searchParams.get("pg_groups") ?? "[]" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose a team" + state playground_placeholderIcon = ctx.url.searchParams.get("pg_placeholderIcon") ?? "" + state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Search options…" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_searchable = ctx.url.searchParams.get("pg_searchable") ?? "true" + state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false" + state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true" + state playground_allowEmpty = ctx.url.searchParams.get("pg_allowEmpty") ?? "false" + state playground_tags = ctx.url.searchParams.get("pg_tags") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false" + state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading options…" + state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No options found" + state playground_selectedOptionsLabel = ctx.url.searchParams.get("pg_selectedOptionsLabel") ?? "Selected options" + state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear selection" + state playground_createLabel = ctx.url.searchParams.get("pg_createLabel") ?? "Create" + state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more" + state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains" + state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description" + state playground_minSearchLength = ctx.url.searchParams.get("pg_minSearchLength") ?? "0" + state playground_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0" + state playground_maxSelections = ctx.url.searchParams.get("pg_maxSelections") ?? "0" + state playground_showCounter = ctx.url.searchParams.get("pg_showCounter") ?? "false" + state playground_counterTemplate = ctx.url.searchParams.get("pg_counterTemplate") ?? "{selected} selected" + state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default" + state playground_selectedTemplate = ctx.url.searchParams.get("pg_selectedTemplate") ?? "default" + state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true" + state playground_scrollToSelected = ctx.url.searchParams.get("pg_scrollToSelected") ?? "true" + state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_remote = ctx.url.searchParams.get("pg_remote") ?? "false" + state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? "" + state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q" + state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250" + state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true" + state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false" + state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false" + state playground_page = ctx.url.searchParams.get("pg_page") ?? "1" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Advanced Select" + description = "Theme-aware, responsive advanced select component." + } + view { + +
    +
    + Advanced Forms component +

    Advanced Select

    +

    Theme-aware, responsive advanced select component.

    +
    51 props0 slots8 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Advanced Select

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <AdvancedSelect
+  label="Default advanced select"
+  name="advanced-select-1"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    Component props51 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Selection

    Default advanced select

    Live default advanced select configuration with copyable component code.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Default advanced select"
+  name="advanced-select-1"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Grouped options

    Live grouped options configuration with copyable component code.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Grouped options"
+  name="advanced-select-2"
+  value="design"
+  values='[]'
+  options='[]'
+  groups='[
+    {
+      "label": "Product",
+      "options": [
+        {
+          "value": "design",
+          "label": "Design",
+          "description": "Product and visual design",
+          "icon": "icon-[lucide--palette]",
+          "color": "#8b5cf6",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "engineering",
+          "label": "Engineering",
+          "description": "Platform and application engineering",
+          "icon": "icon-[lucide--code-2]",
+          "color": "#0ea5e9",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+        }
+      ]
+    },
+    {
+      "label": "Business",
+      "options": [
+        {
+          "value": "growth",
+          "label": "Growth",
+          "description": "Marketing and customer growth",
+          "icon": "icon-[lucide--trending-up]",
+          "color": "#10b981",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "support",
+          "label": "Support",
+          "description": "Customer operations",
+          "disabled": false
+        }
+      ]
+    }
+  ]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Fixed-position dropdown

    Live fixed-position dropdown configuration with copyable component code.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Fixed-position dropdown"
+  name="advanced-select-3"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  fixed="true"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Placeholder with icon

    Live placeholder with icon configuration with copyable component code.

    + 04 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Placeholder with icon"
+  name="advanced-select-4"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a workspace"
+  placeholderIcon="icon-[lucide--building-2]"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="icon"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Allow empty selection

    Live allow empty selection configuration with copyable component code.

    + 05 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Allow empty selection"
+  name="advanced-select-5"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Multiple selection

    Live multiple selection configuration with copyable component code.

    + 06 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Multiple selection"
+  name="advanced-select-6"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Multiple selection with optgroups

    Live multiple selection with optgroups configuration with copyable component code.

    + 07 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Multiple selection with optgroups"
+  name="advanced-select-7"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[]'
+  groups='[
+    {
+      "label": "Product",
+      "options": [
+        {
+          "value": "design",
+          "label": "Design",
+          "description": "Product and visual design",
+          "icon": "icon-[lucide--palette]",
+          "color": "#8b5cf6",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "engineering",
+          "label": "Engineering",
+          "description": "Platform and application engineering",
+          "icon": "icon-[lucide--code-2]",
+          "color": "#0ea5e9",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+        }
+      ]
+    },
+    {
+      "label": "Business",
+      "options": [
+        {
+          "value": "growth",
+          "label": "Growth",
+          "description": "Marketing and customer growth",
+          "icon": "icon-[lucide--trending-up]",
+          "color": "#10b981",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "support",
+          "label": "Support",
+          "description": "Customer operations",
+          "disabled": false
+        }
+      ]
+    }
+  ]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Multiple selection with option templates

    Live multiple selection with option templates configuration with copyable component code.

    + 08 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Multiple selection with option templates"
+  name="advanced-select-8"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="icon"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Multiple selection with counter

    Live multiple selection with counter configuration with copyable component code.

    + 09 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Multiple selection with counter"
+  name="advanced-select-9"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+  showCounter="true"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Multiple selection with conditional counter

    Live multiple selection with conditional counter configuration with copyable component code.

    + 010 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Multiple selection with conditional counter"
+  name="advanced-select-10"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+  maxSelections="3"
+  showCounter="true"
+/>
    +
    +
    +
    +
    +
    +
    Selection

    Counter with option templates

    Live counter with option templates configuration with copyable component code.

    + 011 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Counter with option templates"
+  name="advanced-select-11"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  showCounter="true"
+  optionTemplate="icon"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Searchable dropdown

    Live searchable dropdown configuration with copyable component code.

    + 012 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Searchable dropdown"
+  name="advanced-select-12"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Minimum search length

    Live minimum search length configuration with copyable component code.

    + 013 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Minimum search length"
+  name="advanced-select-13"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="3"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Search result limit

    Live search result limit configuration with copyable component code.

    + 014 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Search result limit"
+  name="advanced-select-14"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  searchResultLimit="3"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Scroll to selected option

    Live scroll to selected option configuration with copyable component code.

    + 015 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Scroll to selected option"
+  name="advanced-select-15"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Search match mode

    Live search match mode configuration with copyable component code.

    + 016 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Search match mode"
+  name="advanced-select-16"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  searchMode="startsWith"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Search labels and descriptions

    Live search labels and descriptions configuration with copyable component code.

    + 017 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Search labels and descriptions"
+  name="advanced-select-17"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Tag-style selection

    Live tag-style selection configuration with copyable component code.

    + 018 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Tag-style selection"
+  name="advanced-select-18"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  tags="true"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Disabled tag selection

    Live disabled tag selection configuration with copyable component code.

    + 019 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Disabled tag selection"
+  name="advanced-select-19"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  tags="true"
+  disabled="true"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Option template with icons

    Live option template with icons configuration with copyable component code.

    + 020 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Option template with icons"
+  name="advanced-select-20"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="icon"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Option template with avatars

    Live option template with avatars configuration with copyable component code.

    + 021 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Option template with avatars"
+  name="advanced-select-21"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="avatar"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Option template with color indicators

    Live option template with color indicators configuration with copyable component code.

    + 022 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Option template with color indicators"
+  name="advanced-select-22"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="color"
+/>
    +
    +
    +
    +
    +
    +
    Search & templates

    Advanced select sizes

    Live advanced select sizes configuration with copyable component code.

    + 023 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  size="lg"
+  label="Advanced select sizes"
+  name="advanced-select-23"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Disabled advanced select

    Live disabled advanced select configuration with copyable component code.

    + 024 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Disabled advanced select"
+  name="advanced-select-24"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  disabled="true"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Inside a modal

    Live inside a modal configuration with copyable component code.

    + 025 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Inside a modal"
+  name="advanced-select-25"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Validation states

    Live validation states configuration with copyable component code.

    + 026 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Validation states"
+  name="advanced-select-26"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  required="true"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Dynamic validation styling

    Live dynamic validation styling configuration with copyable component code.

    + 027 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Dynamic validation styling"
+  name="advanced-select-27"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  required="true"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Add or remove options

    Live add or remove options configuration with copyable component code.

    + 028 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Add or remove options"
+  name="advanced-select-28"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Add or remove options in multiple mode

    Live add or remove options in multiple mode configuration with copyable component code.

    + 029 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Add or remove options in multiple mode"
+  name="advanced-select-29"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Set a single value programmatically

    Live set a single value programmatically configuration with copyable component code.

    + 030 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Set a single value programmatically"
+  name="advanced-select-30"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Set multiple values programmatically

    Live set multiple values programmatically configuration with copyable component code.

    + 031 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Set multiple values programmatically"
+  name="advanced-select-31"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Remote data source

    Live remote data source configuration with copyable component code.

    + 032 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Remote data source"
+  name="advanced-select-32"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Remote data source (multiple)

    Live remote data source (multiple) configuration with copyable component code.

    + 033 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Remote data source (multiple)"
+  name="advanced-select-33"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  allowEmpty="false"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Remote data tags

    Live remote data tags configuration with copyable component code.

    + 034 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Remote data tags"
+  name="advanced-select-34"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  allowEmpty="false"
+  tags="true"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Option templates with remote data

    Live option templates with remote data configuration with copyable component code.

    + 035 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Option templates with remote data"
+  name="advanced-select-35"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  optionTemplate="icon"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Conditional counter with remote data

    Live conditional counter with remote data configuration with copyable component code.

    + 036 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Conditional counter with remote data"
+  name="advanced-select-36"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  maxSelections="3"
+  showCounter="true"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Avatar template with remote data

    Live avatar template with remote data configuration with copyable component code.

    + 037 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Avatar template with remote data"
+  name="advanced-select-37"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  optionTemplate="avatar"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Preselected values

    Live preselected values configuration with copyable component code.

    + 038 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Preselected values"
+  name="advanced-select-38"
+  value="engineering"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Infinite scroll

    Live infinite scroll configuration with copyable component code.

    + 039 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Infinite scroll"
+  name="advanced-select-39"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  remote="true"
+  remoteUrl="/api/teams"
+  infinite="true"
+  hasMore="true"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Inside overflow-hidden containers

    Live inside overflow-hidden containers configuration with copyable component code.

    + 040 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Inside overflow-hidden containers"
+  name="advanced-select-40"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  fixed="true"
+/>
    +
    +
    +
    +
    +
    +
    Advanced behavior

    Destroy and reinitialize

    Live destroy and reinitialize configuration with copyable component code.

    + 041 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AdvancedSelect
+  label="Destroy and reinitialize"
+  name="advanced-select-41"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
    +
    +
    +
    +
    Component events

    Respond to every interaction

    Events are declared with @event, bubble from the component root, and expose their state through event.detail.

    @searchFires whenever the autocomplete query changes.
    @selectFires after an option is selected by pointer or keyboard.
    @changeFires when the selected value changes or is cleared.
    @clearFires after the current selection is cleared.
    @openFires when the suggestion dropdown opens.
    @closeFires when the suggestion dropdown closes.
    @loadFires after a remote request succeeds.
    @errorFires when a remote request fails.
    Event listeners.js
    const component = document.querySelector("[data-wrn-select]")
+
+component.addEventListener("select", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("load", (event) => {
+  console.log(event.detail)
+})
    +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Advanced Select"No
    namestring""No
    valuestring""No
    valuesstring[]No
    optionsstring[]No
    groupsstring[]No
    placeholderstring"Select an option"No
    placeholderIconstring""No
    searchPlaceholderstring"Search options…"No
    multiplebooleanfalseNo
    searchablebooleantrueNo
    defaultOpenbooleanfalseNo
    clearablebooleantrueNo
    allowEmptybooleantrueNo
    tagsbooleanfalseNo
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    invalidbooleanfalseNo
    validationMessagestring""No
    helpTextstring""No
    loadingbooleanfalseNo
    loadingLabelstring"Loading options…"No
    emptyLabelstring"No options found"No
    selectedOptionsLabelstring"Selected options"No
    clearLabelstring"Clear selection"No
    createLabelstring"Create"No
    loadMoreLabelstring"Load more"No
    searchModestring"contains"No
    searchFieldsstring"label,description"No
    minSearchLengthnumber0No
    searchResultLimitnumber0No
    maxSelectionsnumber0No
    showCounterbooleanfalseNo
    counterTemplatestring"{selected} selected"No
    optionTemplatestring"default"No
    selectedTemplatestring"default"No
    closeOnSelectbooleantrueNo
    scrollToSelectedbooleantrueNo
    fixedbooleanfalseNo
    placementstring"bottom"No
    remotebooleanfalseNo
    remoteUrlstring""No
    remoteQueryParamstring"q"No
    remoteDebouncenumber250No
    remoteAutoLoadbooleantrueNo
    infinitebooleanfalseNo
    hasMorebooleanfalseNo
    pagenumber1No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/alert.wrn b/examples/component-showcase/app/pages/components/alert.wrn new file mode 100644 index 00000000..b571e730 --- /dev/null +++ b/examples/component-showcase/app/pages/components/alert.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AlertDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Alert example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default alert for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"alert-0-1\",\n \"key\": \"alert-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#alert-demo\",\n \"actionHref\": \"#alert-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"alert-0-2\",\n \"key\": \"alert-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#alert-demo\",\n \"actionHref\": \"#alert-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Alert" + description = "Theme-aware, responsive alert component." + } + view { + +
    +
    + Base component +

    Alert

    +

    Theme-aware, responsive alert component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Alert

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Alert
+  title="Alert example"
+  description="A polished default alert for a modern application."
+  items='[
+    {
+      "id": "alert-0-1",
+      "key": "alert-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "alert-0-2",
+      "key": "alert-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Alert
+  title="Alert example"
+  description="A polished default alert for a modern application."
+  items='[
+    {
+      "id": "alert-0-1",
+      "key": "alert-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "alert-0-2",
+      "key": "alert-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Alert
+  size="sm"
+  title="Compact Alert"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "alert-1-1",
+      "key": "alert-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "alert-1-2",
+      "key": "alert-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Alert
+  size="lg"
+  title="Advanced Alert"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "alert-2-1",
+      "key": "alert-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "alert-2-2",
+      "key": "alert-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Alert"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/avatar-group.wrn b/examples/component-showcase/app/pages/components/avatar-group.wrn new file mode 100644 index 00000000..df3244d6 --- /dev/null +++ b/examples/component-showcase/app/pages/components/avatar-group.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AvatarGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Avatar Group example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar group for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"avatar-group-0-1\",\n \"key\": \"avatar-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#avatar-group-demo\",\n \"actionHref\": \"#avatar-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"avatar-group-0-2\",\n \"key\": \"avatar-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#avatar-group-demo\",\n \"actionHref\": \"#avatar-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Avatar Group" + description = "Theme-aware, responsive avatar group component." + } + view { + +
    +
    + Base component +

    Avatar Group

    +

    Theme-aware, responsive avatar group component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Avatar Group

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <AvatarGroup
+  title="Avatar Group example"
+  description="A polished default avatar group for a modern application."
+  items='[
+    {
+      "id": "avatar-group-0-1",
+      "key": "avatar-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-group-0-2",
+      "key": "avatar-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AvatarGroup
+  title="Avatar Group example"
+  description="A polished default avatar group for a modern application."
+  items='[
+    {
+      "id": "avatar-group-0-1",
+      "key": "avatar-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-group-0-2",
+      "key": "avatar-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AvatarGroup
+  size="sm"
+  title="Compact Avatar Group"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "avatar-group-1-1",
+      "key": "avatar-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-group-1-2",
+      "key": "avatar-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <AvatarGroup
+  size="lg"
+  title="Advanced Avatar Group"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "avatar-group-2-1",
+      "key": "avatar-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "avatar-group-2-2",
+      "key": "avatar-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Avatar Group"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/avatar.wrn b/examples/component-showcase/app/pages/components/avatar.wrn new file mode 100644 index 00000000..4246725d --- /dev/null +++ b/examples/component-showcase/app/pages/components/avatar.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AvatarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Avatar example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"avatar-0-1\",\n \"key\": \"avatar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#avatar-demo\",\n \"actionHref\": \"#avatar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"avatar-0-2\",\n \"key\": \"avatar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#avatar-demo\",\n \"actionHref\": \"#avatar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Avatar" + description = "Theme-aware, responsive avatar component." + } + view { + +
    +
    + Base component +

    Avatar

    +

    Theme-aware, responsive avatar component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Avatar

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Avatar
+  title="Avatar example"
+  description="A polished default avatar for a modern application."
+  items='[
+    {
+      "id": "avatar-0-1",
+      "key": "avatar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-0-2",
+      "key": "avatar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Avatar
+  title="Avatar example"
+  description="A polished default avatar for a modern application."
+  items='[
+    {
+      "id": "avatar-0-1",
+      "key": "avatar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-0-2",
+      "key": "avatar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Avatar
+  size="sm"
+  title="Compact Avatar"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "avatar-1-1",
+      "key": "avatar-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-1-2",
+      "key": "avatar-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Avatar
+  size="lg"
+  title="Advanced Avatar"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "avatar-2-1",
+      "key": "avatar-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "avatar-2-2",
+      "key": "avatar-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Avatar"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/badge.wrn b/examples/component-showcase/app/pages/components/badge.wrn new file mode 100644 index 00000000..cad79e4f --- /dev/null +++ b/examples/component-showcase/app/pages/components/badge.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BadgeDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Badge example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default badge for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"badge-0-1\",\n \"key\": \"badge-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#badge-demo\",\n \"actionHref\": \"#badge-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"badge-0-2\",\n \"key\": \"badge-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#badge-demo\",\n \"actionHref\": \"#badge-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Badge" + description = "Theme-aware, responsive badge component." + } + view { + +
    +
    + Base component +

    Badge

    +

    Theme-aware, responsive badge component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Badge

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Badge
+  title="Badge example"
+  description="A polished default badge for a modern application."
+  items='[
+    {
+      "id": "badge-0-1",
+      "key": "badge-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "badge-0-2",
+      "key": "badge-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Badge
+  title="Badge example"
+  description="A polished default badge for a modern application."
+  items='[
+    {
+      "id": "badge-0-1",
+      "key": "badge-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "badge-0-2",
+      "key": "badge-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Badge
+  size="sm"
+  title="Compact Badge"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "badge-1-1",
+      "key": "badge-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "badge-1-2",
+      "key": "badge-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Badge
+  size="lg"
+  title="Advanced Badge"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "badge-2-1",
+      "key": "badge-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "badge-2-2",
+      "key": "badge-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Badge"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/blockquote.wrn b/examples/component-showcase/app/pages/components/blockquote.wrn new file mode 100644 index 00000000..8043ce77 --- /dev/null +++ b/examples/component-showcase/app/pages/components/blockquote.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BlockquoteDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Blockquote example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default blockquote for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"blockquote-0-1\",\n \"key\": \"blockquote-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#blockquote-demo\",\n \"actionHref\": \"#blockquote-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"blockquote-0-2\",\n \"key\": \"blockquote-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#blockquote-demo\",\n \"actionHref\": \"#blockquote-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Blockquote" + description = "Theme-aware, responsive blockquote component." + } + view { + +
    +
    + Base component +

    Blockquote

    +

    Theme-aware, responsive blockquote component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Blockquote

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Blockquote
+  title="Blockquote example"
+  description="A polished default blockquote for a modern application."
+  items='[
+    {
+      "id": "blockquote-0-1",
+      "key": "blockquote-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "blockquote-0-2",
+      "key": "blockquote-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Blockquote
+  title="Blockquote example"
+  description="A polished default blockquote for a modern application."
+  items='[
+    {
+      "id": "blockquote-0-1",
+      "key": "blockquote-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "blockquote-0-2",
+      "key": "blockquote-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Blockquote
+  size="sm"
+  title="Compact Blockquote"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "blockquote-1-1",
+      "key": "blockquote-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "blockquote-1-2",
+      "key": "blockquote-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Blockquote
+  size="lg"
+  title="Advanced Blockquote"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "blockquote-2-1",
+      "key": "blockquote-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "blockquote-2-2",
+      "key": "blockquote-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Blockquote"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/breadcrumb.wrn b/examples/component-showcase/app/pages/components/breadcrumb.wrn new file mode 100644 index 00000000..0fbac5dc --- /dev/null +++ b/examples/component-showcase/app/pages/components/breadcrumb.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BreadcrumbDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"breadcrumb-0-1\",\n \"key\": \"breadcrumb-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#breadcrumb-demo\",\n \"actionHref\": \"#breadcrumb-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"breadcrumb-0-2\",\n \"key\": \"breadcrumb-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#breadcrumb-demo\",\n \"actionHref\": \"#breadcrumb-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Breadcrumb" + description = "Theme-aware, responsive breadcrumb component." + } + view { + +
    +
    + Navigation component +

    Breadcrumb

    +

    Theme-aware, responsive breadcrumb component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Breadcrumb

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Breadcrumb
+  items='[
+    {
+      "id": "breadcrumb-0-1",
+      "key": "breadcrumb-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "breadcrumb-0-2",
+      "key": "breadcrumb-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Breadcrumb
+  items='[
+    {
+      "id": "breadcrumb-0-1",
+      "key": "breadcrumb-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "breadcrumb-0-2",
+      "key": "breadcrumb-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Breadcrumb
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "breadcrumb-1-1",
+      "key": "breadcrumb-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "breadcrumb-1-2",
+      "key": "breadcrumb-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Breadcrumb
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "breadcrumb-2-1",
+      "key": "breadcrumb-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "breadcrumb-2-2",
+      "key": "breadcrumb-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Breadcrumb"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/button-group.wrn b/examples/component-showcase/app/pages/components/button-group.wrn new file mode 100644 index 00000000..5e8129ac --- /dev/null +++ b/examples/component-showcase/app/pages/components/button-group.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ButtonGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Button Group example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default button group for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"button-group-0-1\",\n \"key\": \"button-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#button-group-demo\",\n \"actionHref\": \"#button-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"button-group-0-2\",\n \"key\": \"button-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#button-group-demo\",\n \"actionHref\": \"#button-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Button Group" + description = "Theme-aware, responsive button group component." + } + view { + +
    +
    + Base component +

    Button Group

    +

    Theme-aware, responsive button group component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Button Group

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ButtonGroup
+  title="Button Group example"
+  description="A polished default button group for a modern application."
+  items='[
+    {
+      "id": "button-group-0-1",
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "button-group-0-2",
+      "key": "button-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ButtonGroup
+  title="Button Group example"
+  description="A polished default button group for a modern application."
+  items='[
+    {
+      "id": "button-group-0-1",
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "button-group-0-2",
+      "key": "button-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ButtonGroup
+  size="sm"
+  title="Compact Button Group"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "button-group-1-1",
+      "key": "button-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "button-group-1-2",
+      "key": "button-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ButtonGroup
+  size="lg"
+  title="Advanced Button Group"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "button-group-2-1",
+      "key": "button-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "button-group-2-2",
+      "key": "button-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Button Group"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/button.wrn b/examples/component-showcase/app/pages/components/button.wrn new file mode 100644 index 00000000..4bd4244a --- /dev/null +++ b/examples/component-showcase/app/pages/components/button.wrn @@ -0,0 +1,256 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ButtonDetail { + layout = "showcase" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Save & Submit" + state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading…" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "" + state playground_as = ctx.url.searchParams.get("pg_as") ?? "button" + state playground_href = ctx.url.searchParams.get("pg_href") ?? "" + state playground_target = ctx.url.searchParams.get("pg_target") ?? "" + state playground_rel = ctx.url.searchParams.get("pg_rel") ?? "" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "submit" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false" + state playground_pill = ctx.url.searchParams.get("pg_pill") ?? "false" + state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false" + state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" + state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" + state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "" + state playground_ariaPressed = ctx.url.searchParams.get("pg_ariaPressed") ?? "" + state playground_ariaExpanded = ctx.url.searchParams.get("pg_ariaExpanded") ?? "" + state playground_ariaControls = ctx.url.searchParams.get("pg_ariaControls") ?? "" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "" + state playground_autofocus = ctx.url.searchParams.get("pg_autofocus") ?? "false" + state playground_controlClass = ctx.url.searchParams.get("pg_controlClass") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Button" + description = "Theme-aware, responsive button component." + } + view { + +
    +
    + Base component +

    Button

    +

    Theme-aware, responsive button component.

    +
    25 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Button

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Button
+  label="Save & Submit"
+  as="button"
+  type="submit"
+/>
    +
    +
    +
    +
    +
    Component props25 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Default

    Primary action

    The standard high-emphasis action for forms and product workflows.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Save & Submit"
+  as="button"
+  type="submit"
+/>
    +
    +
    +
    +
    +
    +
    Outline · Small

    Secondary navigation

    A compact link button with an end icon and restrained emphasis.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Learn more"
+  as="a"
+  href="#button-demo"
+  variant="outline"
+  size="sm"
+  icon="icon-[lucide--arrow-right]"
+  iconPosition="end"
+/>
    +
    +
    +
    +
    +
    +
    Secondary · Large · Pill

    Prominent rounded action

    A large secondary action using the optional pill shape.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Upgrade plan"
+  as="button"
+  variant="secondary"
+  size="lg"
+  pill="true"
+/>
    +
    +
    +
    +
    +
    +
    Ghost · Icon

    Accessible icon action

    An icon-only control with its accessible name supplied through props.

    + 04 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Open settings"
+  as="button"
+  variant="ghost"
+  size="icon"
+  icon="icon-[lucide--settings]"
+  ariaLabel="Open settings"
+/>
    +
    +
    +
    +
    +
    +
    Destructive

    Dangerous action

    A destructive treatment for irreversible or high-risk operations.

    + 05 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Delete project"
+  as="button"
+  variant="destructive"
+  icon="icon-[lucide--trash-2]"
+/>
    +
    +
    +
    +
    +
    +
    Link

    Inline action

    A low-chrome action that behaves and reads like an inline link.

    + 06 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Read documentation"
+  as="a"
+  href="#button-demo"
+  variant="link"
+/>
    +
    +
    +
    +
    +
    +
    Loading

    Pending action

    The button owns its busy state, loading label, spinner, and disabled behavior.

    + 07 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Publish"
+  loadingLabel="Publishing…"
+  as="button"
+  loading="true"
+/>
    +
    +
    +
    +
    +
    +
    Disabled

    Unavailable action

    A visibly and semantically disabled control.

    + 08 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Button
+  label="Unavailable action"
+  as="button"
+  variant="outline"
+  disabled="true"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    labelstring"Button"No
    loadingLabelstring"Loading…"No
    descriptionstring""No
    asstring""No
    hrefstring""No
    targetstring""No
    relstring""No
    typestring"button"No
    variantstring"default"No
    colorstring"primary"No
    sizestring"default"No
    disabledbooleanfalseNo
    loadingbooleanfalseNo
    pillbooleanfalseNo
    fullWidthbooleanfalseNo
    iconstring""No
    iconPositionstring"start"No
    ariaLabelstring""No
    ariaPressedstring""No
    ariaExpandedstring""No
    ariaControlsstring""No
    titlestring""No
    autofocusbooleanfalseNo
    controlClassstring""No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/card.wrn b/examples/component-showcase/app/pages/components/card.wrn new file mode 100644 index 00000000..a4851ce6 --- /dev/null +++ b/examples/component-showcase/app/pages/components/card.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CardDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Card example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default card for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"card-0-1\",\n \"key\": \"card-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#card-demo\",\n \"actionHref\": \"#card-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"card-0-2\",\n \"key\": \"card-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#card-demo\",\n \"actionHref\": \"#card-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Card" + description = "Theme-aware, responsive card component." + } + view { + +
    +
    + Base component +

    Card

    +

    Theme-aware, responsive card component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Card

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Card
+  title="Card example"
+  description="A polished default card for a modern application."
+  items='[
+    {
+      "id": "card-0-1",
+      "key": "card-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "card-0-2",
+      "key": "card-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Card
+  title="Card example"
+  description="A polished default card for a modern application."
+  items='[
+    {
+      "id": "card-0-1",
+      "key": "card-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "card-0-2",
+      "key": "card-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Card
+  size="sm"
+  title="Compact Card"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "card-1-1",
+      "key": "card-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "card-1-2",
+      "key": "card-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Card
+  size="lg"
+  title="Advanced Card"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "card-2-1",
+      "key": "card-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "card-2-2",
+      "key": "card-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Card"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/carousel.wrn b/examples/component-showcase/app/pages/components/carousel.wrn new file mode 100644 index 00000000..87535382 --- /dev/null +++ b/examples/component-showcase/app/pages/components/carousel.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CarouselDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Carousel example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default carousel for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"carousel-0-1\",\n \"key\": \"carousel-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#carousel-demo\",\n \"actionHref\": \"#carousel-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"carousel-0-2\",\n \"key\": \"carousel-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#carousel-demo\",\n \"actionHref\": \"#carousel-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Carousel" + description = "Theme-aware, responsive carousel component." + } + view { + +
    +
    + Base component +

    Carousel

    +

    Theme-aware, responsive carousel component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Carousel

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Carousel
+  title="Carousel example"
+  description="A polished default carousel for a modern application."
+  items='[
+    {
+      "id": "carousel-0-1",
+      "key": "carousel-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "carousel-0-2",
+      "key": "carousel-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Carousel
+  title="Carousel example"
+  description="A polished default carousel for a modern application."
+  items='[
+    {
+      "id": "carousel-0-1",
+      "key": "carousel-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "carousel-0-2",
+      "key": "carousel-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Carousel
+  size="sm"
+  title="Compact Carousel"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "carousel-1-1",
+      "key": "carousel-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "carousel-1-2",
+      "key": "carousel-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Carousel
+  size="lg"
+  title="Advanced Carousel"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "carousel-2-1",
+      "key": "carousel-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "carousel-2-2",
+      "key": "carousel-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Carousel"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/chart.wrn b/examples/component-showcase/app/pages/components/chart.wrn new file mode 100644 index 00000000..502fd9a0 --- /dev/null +++ b/examples/component-showcase/app/pages/components/chart.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ChartDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chart example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chart for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"chart-0-1\",\n \"key\": \"chart-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#chart-demo\",\n \"actionHref\": \"#chart-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"chart-0-2\",\n \"key\": \"chart-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#chart-demo\",\n \"actionHref\": \"#chart-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Chart" + description = "Theme-aware, responsive chart component." + } + view { + +
    +
    + Integrations component +

    Chart

    +

    Theme-aware, responsive chart component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Chart

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Chart
+  title="Chart example"
+  description="A polished default chart for a modern application."
+  items='[
+    {
+      "id": "chart-0-1",
+      "key": "chart-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chart-0-2",
+      "key": "chart-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Chart
+  title="Chart example"
+  description="A polished default chart for a modern application."
+  items='[
+    {
+      "id": "chart-0-1",
+      "key": "chart-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chart-0-2",
+      "key": "chart-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Chart
+  size="sm"
+  title="Compact Chart"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "chart-1-1",
+      "key": "chart-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chart-1-2",
+      "key": "chart-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Chart
+  size="lg"
+  title="Advanced Chart"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "chart-2-1",
+      "key": "chart-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "chart-2-2",
+      "key": "chart-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Chart"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/chat-bubble.wrn b/examples/component-showcase/app/pages/components/chat-bubble.wrn new file mode 100644 index 00000000..8752b09d --- /dev/null +++ b/examples/component-showcase/app/pages/components/chat-bubble.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ChatBubbleDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chat Bubble example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chat bubble for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"chat-bubble-0-1\",\n \"key\": \"chat-bubble-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#chat-bubble-demo\",\n \"actionHref\": \"#chat-bubble-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"chat-bubble-0-2\",\n \"key\": \"chat-bubble-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#chat-bubble-demo\",\n \"actionHref\": \"#chat-bubble-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Chat Bubble" + description = "Theme-aware, responsive chat bubble component." + } + view { + +
    +
    + Base component +

    Chat Bubble

    +

    Theme-aware, responsive chat bubble component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Chat Bubble

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ChatBubble
+  title="Chat Bubble example"
+  description="A polished default chat bubble for a modern application."
+  items='[
+    {
+      "id": "chat-bubble-0-1",
+      "key": "chat-bubble-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chat-bubble-0-2",
+      "key": "chat-bubble-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ChatBubble
+  title="Chat Bubble example"
+  description="A polished default chat bubble for a modern application."
+  items='[
+    {
+      "id": "chat-bubble-0-1",
+      "key": "chat-bubble-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chat-bubble-0-2",
+      "key": "chat-bubble-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ChatBubble
+  size="sm"
+  title="Compact Chat Bubble"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "chat-bubble-1-1",
+      "key": "chat-bubble-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chat-bubble-1-2",
+      "key": "chat-bubble-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ChatBubble
+  size="lg"
+  title="Advanced Chat Bubble"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "chat-bubble-2-1",
+      "key": "chat-bubble-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "chat-bubble-2-2",
+      "key": "chat-bubble-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Chat Bubble"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/checkbox.wrn b/examples/component-showcase/app/pages/components/checkbox.wrn new file mode 100644 index 00000000..263972d8 --- /dev/null +++ b/examples/component-showcase/app/pages/components/checkbox.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CheckboxDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Checkbox" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Checkbox" + description = "Theme-aware, responsive checkbox component." + } + view { + +
    +
    + Forms component +

    Checkbox

    +

    Theme-aware, responsive checkbox component.

    +
    8 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Checkbox

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Checkbox
+  value="sample-1"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Checkbox
+  value="sample-1"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Checkbox
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Checkbox
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Checkbox"No
    namestring""No
    valuestring"on"No
    checkedbooleanfalseNo
    disabledbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/clipboard.wrn b/examples/component-showcase/app/pages/components/clipboard.wrn new file mode 100644 index 00000000..d59678cd --- /dev/null +++ b/examples/component-showcase/app/pages/components/clipboard.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ClipboardDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Clipboard example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default clipboard for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"clipboard-0-1\",\n \"key\": \"clipboard-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#clipboard-demo\",\n \"actionHref\": \"#clipboard-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"clipboard-0-2\",\n \"key\": \"clipboard-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#clipboard-demo\",\n \"actionHref\": \"#clipboard-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Clipboard" + description = "Theme-aware, responsive clipboard component." + } + view { + +
    +
    + Integrations component +

    Clipboard

    +

    Theme-aware, responsive clipboard component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Clipboard

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Clipboard
+  title="Clipboard example"
+  description="A polished default clipboard for a modern application."
+  items='[
+    {
+      "id": "clipboard-0-1",
+      "key": "clipboard-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "clipboard-0-2",
+      "key": "clipboard-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Clipboard
+  title="Clipboard example"
+  description="A polished default clipboard for a modern application."
+  items='[
+    {
+      "id": "clipboard-0-1",
+      "key": "clipboard-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "clipboard-0-2",
+      "key": "clipboard-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Clipboard
+  size="sm"
+  title="Compact Clipboard"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "clipboard-1-1",
+      "key": "clipboard-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "clipboard-1-2",
+      "key": "clipboard-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Clipboard
+  size="lg"
+  title="Advanced Clipboard"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "clipboard-2-1",
+      "key": "clipboard-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "clipboard-2-2",
+      "key": "clipboard-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Clipboard"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/collapse.wrn b/examples/component-showcase/app/pages/components/collapse.wrn new file mode 100644 index 00000000..6f86d73f --- /dev/null +++ b/examples/component-showcase/app/pages/components/collapse.wrn @@ -0,0 +1,652 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CollapseDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"collapse-0-1\",\n \"key\": \"collapse-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#collapse-demo\",\n \"actionHref\": \"#collapse-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"collapse-0-2\",\n \"key\": \"collapse-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#collapse-demo\",\n \"actionHref\": \"#collapse-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Collapse" + description = "Theme-aware, responsive collapse component." + } + view { + +
    +
    + Base component +

    Collapse

    +

    Theme-aware, responsive collapse component.

    +
    5 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Collapse

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Collapse
+  items='[
+    {
+      "id": "collapse-0-1",
+      "key": "collapse-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "collapse-0-2",
+      "key": "collapse-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props5 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Collapse
+  items='[
+    {
+      "id": "collapse-0-1",
+      "key": "collapse-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "collapse-0-2",
+      "key": "collapse-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Collapse
+  size="sm"
+  items='[
+    {
+      "id": "collapse-1-1",
+      "key": "collapse-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "collapse-1-2",
+      "key": "collapse-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Collapse
+  size="lg"
+  items='[
+    {
+      "id": "collapse-2-1",
+      "key": "collapse-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "collapse-2-2",
+      "key": "collapse-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    itemsstring[]No
    multiplebooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/color-picker.wrn b/examples/component-showcase/app/pages/components/color-picker.wrn new file mode 100644 index 00000000..545098c0 --- /dev/null +++ b/examples/component-showcase/app/pages/components/color-picker.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ColorPickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Color Picker" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "color" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Color Picker" + description = "Theme-aware, responsive color picker component." + } + view { + +
    +
    + Forms component +

    Color Picker

    +

    Theme-aware, responsive color picker component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Color Picker

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ColorPicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ColorPicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ColorPicker
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ColorPicker
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Color Picker"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"color"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/columns.wrn b/examples/component-showcase/app/pages/components/columns.wrn new file mode 100644 index 00000000..33303651 --- /dev/null +++ b/examples/component-showcase/app/pages/components/columns.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ColumnsDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Columns" + description = "Theme-aware, responsive columns component." + } + view { + +
    +
    + Layout component +

    Columns

    +

    Theme-aware, responsive columns component.

    +
    6 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Columns

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Columns />
    +
    +
    +
    +
    +
    Component props6 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Columns />
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Columns
+  size="sm"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Columns
+  size="lg"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    columnsnumber2No
    gapstring"md"No
    maxWidthstring"xl"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/combo-box.wrn b/examples/component-showcase/app/pages/components/combo-box.wrn new file mode 100644 index 00000000..47d1d856 --- /dev/null +++ b/examples/component-showcase/app/pages/components/combo-box.wrn @@ -0,0 +1,1343 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ComboBoxDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default autocomplete" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "" + state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"value\": \"design\",\n \"label\": \"Design\",\n \"description\": \"Product and visual design\",\n \"icon\": \"icon-[lucide--palette]\",\n \"color\": \"#8b5cf6\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"engineering\",\n \"label\": \"Engineering\",\n \"description\": \"Platform and application engineering\",\n \"icon\": \"icon-[lucide--code-2]\",\n \"color\": \"#0ea5e9\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"growth\",\n \"label\": \"Growth\",\n \"description\": \"Marketing and customer growth\",\n \"icon\": \"icon-[lucide--trending-up]\",\n \"color\": \"#10b981\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"support\",\n \"label\": \"Support\",\n \"description\": \"Customer operations\",\n \"icon\": \"icon-[lucide--life-buoy]\",\n \"color\": \"#f59e0b\"\n }\n]" + state playground_groups = ctx.url.searchParams.get("pg_groups") ?? "[]" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams" + state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…" + state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true" + state playground_allowCustomValue = ctx.url.searchParams.get("pg_allowCustomValue") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false" + state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading suggestions…" + state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No matching options" + state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear value" + state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Toggle suggestions" + state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains" + state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description" + state playground_minSearchLength = ctx.url.searchParams.get("pg_minSearchLength") ?? "0" + state playground_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0" + state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default" + state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false" + state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true" + state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off" + state playground_remote = ctx.url.searchParams.get("pg_remote") ?? "false" + state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? "" + state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q" + state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250" + state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true" + state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false" + state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false" + state playground_page = ctx.url.searchParams.get("pg_page") ?? "1" + state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Combo Box" + description = "Editable autocomplete combobox with local and remote suggestions." + } + view { + +
    +
    + Advanced Forms component +

    Combo Box

    +

    Editable autocomplete combobox with local and remote suggestions.

    +
    41 props0 slots8 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Combo Box

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ComboBox
+  label="Default autocomplete"
+  name="combobox-1"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    +
    Component props41 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Autocomplete

    Default autocomplete

    Live default autocomplete combobox with editable autocomplete and copyable component code.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Default autocomplete"
+  name="combobox-1"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    +
    +
    Autocomplete

    Local HTML options

    Live local html options combobox with editable autocomplete and copyable component code.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Local HTML options"
+  name="combobox-2"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    +
    +
    Autocomplete

    Grouped suggestions

    Live grouped suggestions combobox with editable autocomplete and copyable component code.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Grouped suggestions"
+  name="combobox-3"
+  options='[]'
+  groups='[
+    {
+      "label": "Product",
+      "options": [
+        {
+          "value": "design",
+          "label": "Design",
+          "description": "Product and visual design",
+          "icon": "icon-[lucide--palette]",
+          "color": "#8b5cf6",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "engineering",
+          "label": "Engineering",
+          "description": "Platform and application engineering",
+          "icon": "icon-[lucide--code-2]",
+          "color": "#0ea5e9",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+        }
+      ]
+    },
+    {
+      "label": "Business",
+      "options": [
+        {
+          "value": "growth",
+          "label": "Growth",
+          "description": "Marketing and customer growth",
+          "icon": "icon-[lucide--trending-up]",
+          "color": "#10b981",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "support",
+          "label": "Support",
+          "description": "Customer operations",
+          "icon": "icon-[lucide--life-buoy]",
+          "color": "#f59e0b"
+        }
+      ]
+    }
+  ]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    +
    +
    Autocomplete

    Minimum search length

    Live minimum search length combobox with editable autocomplete and copyable component code.

    + 04 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Minimum search length"
+  name="combobox-4"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  minSearchLength="3"
+/>
    +
    +
    +
    +
    +
    +
    Autocomplete

    Search result limit

    Live search result limit combobox with editable autocomplete and copyable component code.

    + 05 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Search result limit"
+  name="combobox-5"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  searchResultLimit="2"
+/>
    +
    +
    +
    +
    +
    +
    Autocomplete

    Starts-with matching

    Live starts-with matching combobox with editable autocomplete and copyable component code.

    + 06 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Starts-with matching"
+  name="combobox-6"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  searchMode="startsWith"
+/>
    +
    +
    +
    +
    +
    +
    Autocomplete

    Search labels and descriptions

    Live search labels and descriptions combobox with editable autocomplete and copyable component code.

    + 07 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Search labels and descriptions"
+  name="combobox-7"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Suggestions with icons

    Live suggestions with icons combobox with editable autocomplete and copyable component code.

    + 08 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Suggestions with icons"
+  name="combobox-8"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  optionTemplate="icon"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Suggestions with avatars

    Live suggestions with avatars combobox with editable autocomplete and copyable component code.

    + 09 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Suggestions with avatars"
+  name="combobox-9"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  optionTemplate="avatar"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Suggestions with color indicators

    Live suggestions with color indicators combobox with editable autocomplete and copyable component code.

    + 010 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Suggestions with color indicators"
+  name="combobox-10"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  optionTemplate="color"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Clearable value

    Live clearable value combobox with editable autocomplete and copyable component code.

    + 011 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Clearable value"
+  name="combobox-11"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Custom text values

    Live custom text values combobox with editable autocomplete and copyable component code.

    + 012 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Custom text values"
+  name="combobox-12"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  allowCustomValue="true"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Preselected value

    Live preselected value combobox with editable autocomplete and copyable component code.

    + 013 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Preselected value"
+  name="combobox-13"
+  value="engineering"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Disabled combobox

    Live disabled combobox combobox with editable autocomplete and copyable component code.

    + 014 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Disabled combobox"
+  name="combobox-14"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  disabled="true"
+/>
    +
    +
    +
    +
    +
    +
    Templates & states

    Validation state

    Live validation state combobox with editable autocomplete and copyable component code.

    + 015 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Validation state"
+  name="combobox-15"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  required="true"
+/>
    +
    +
    +
    +
    +
    +
    Remote & API

    Remote data with automatic preload

    Live remote data with automatic preload combobox with editable autocomplete and copyable component code.

    + 016 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Remote data with automatic preload"
+  name="combobox-16"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Remote & API

    Remote search API

    Live remote search api combobox with editable autocomplete and copyable component code.

    + 017 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Remote search API"
+  name="combobox-17"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Remote & API

    Remote query parameters

    Live remote query parameters combobox with editable autocomplete and copyable component code.

    + 018 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Remote query parameters"
+  name="combobox-18"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
    +
    +
    +
    +
    +
    +
    Remote & API

    Infinite remote suggestions

    Live infinite remote suggestions combobox with editable autocomplete and copyable component code.

    + 019 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Infinite remote suggestions"
+  name="combobox-19"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+  infinite="true"
+  hasMore="true"
+/>
    +
    +
    +
    +
    +
    +
    Remote & API

    Fixed-position suggestions

    Live fixed-position suggestions combobox with editable autocomplete and copyable component code.

    + 020 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="Fixed-position suggestions"
+  name="combobox-20"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  fixed="true"
+/>
    +
    +
    +
    +
    +
    +
    Remote & API

    JavaScript methods

    Live javascript methods combobox with editable autocomplete and copyable component code.

    + 021 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ComboBox
+  label="JavaScript methods"
+  name="combobox-21"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
    +
    +
    +
    +
    Component events

    Respond to every interaction

    Events are declared with @event, bubble from the component root, and expose their state through event.detail.

    @searchFires whenever the autocomplete query changes.
    @selectFires after an option is selected by pointer or keyboard.
    @changeFires when the selected value changes or is cleared.
    @clearFires after the current selection is cleared.
    @openFires when the suggestion dropdown opens.
    @closeFires when the suggestion dropdown closes.
    @loadFires after a remote request succeeds.
    @errorFires when a remote request fails.
    Event listeners.js
    const component = document.querySelector("[data-wrn-combobox]")
+
+component.addEventListener("select", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("load", (event) => {
+  console.log(event.detail)
+})
    +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"ComboBox"No
    namestring""No
    valuestring""No
    optionsstring[]No
    groupsstring[]No
    placeholderstring"Search or select an option"No
    searchPlaceholderstring"Start typing…"No
    clearablebooleantrueNo
    allowCustomValuebooleanfalseNo
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    invalidbooleanfalseNo
    validationMessagestring""No
    helpTextstring""No
    loadingbooleanfalseNo
    loadingLabelstring"Loading suggestions…"No
    emptyLabelstring"No matching options"No
    clearLabelstring"Clear value"No
    toggleLabelstring"Toggle suggestions"No
    searchModestring"contains"No
    searchFieldsstring"label,description"No
    minSearchLengthnumber0No
    searchResultLimitnumber0No
    optionTemplatestring"default"No
    defaultOpenbooleanfalseNo
    closeOnSelectbooleantrueNo
    fixedbooleanfalseNo
    placementstring"bottom"No
    autocompletestring"off"No
    remotebooleanfalseNo
    remoteUrlstring""No
    remoteQueryParamstring"q"No
    remoteDebouncenumber250No
    remoteAutoLoadbooleantrueNo
    infinitebooleanfalseNo
    hasMorebooleanfalseNo
    pagenumber1No
    loadMoreLabelstring"Load more"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/confetti.wrn b/examples/component-showcase/app/pages/components/confetti.wrn new file mode 100644 index 00000000..288d4e86 --- /dev/null +++ b/examples/component-showcase/app/pages/components/confetti.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ConfettiDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Confetti example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default confetti for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"confetti-0-1\",\n \"key\": \"confetti-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#confetti-demo\",\n \"actionHref\": \"#confetti-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"confetti-0-2\",\n \"key\": \"confetti-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#confetti-demo\",\n \"actionHref\": \"#confetti-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Confetti" + description = "Theme-aware, responsive confetti component." + } + view { + +
    +
    + Integrations component +

    Confetti

    +

    Theme-aware, responsive confetti component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Confetti

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Confetti
+  title="Confetti example"
+  description="A polished default confetti for a modern application."
+  items='[
+    {
+      "id": "confetti-0-1",
+      "key": "confetti-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "confetti-0-2",
+      "key": "confetti-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Confetti
+  title="Confetti example"
+  description="A polished default confetti for a modern application."
+  items='[
+    {
+      "id": "confetti-0-1",
+      "key": "confetti-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "confetti-0-2",
+      "key": "confetti-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Confetti
+  size="sm"
+  title="Compact Confetti"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "confetti-1-1",
+      "key": "confetti-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "confetti-1-2",
+      "key": "confetti-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Confetti
+  size="lg"
+  title="Advanced Confetti"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "confetti-2-1",
+      "key": "confetti-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "confetti-2-2",
+      "key": "confetti-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Confetti"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/container.wrn b/examples/component-showcase/app/pages/components/container.wrn new file mode 100644 index 00000000..4873c45e --- /dev/null +++ b/examples/component-showcase/app/pages/components/container.wrn @@ -0,0 +1,118 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ContainerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Container" + description = "Theme-aware, responsive container component." + } + view { + +
    +
    + Layout component +

    Container

    +

    Theme-aware, responsive container component.

    +
    6 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Container

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    Component code
    + 
    <Container>
+  <!-- Add default slot content here -->
+</Container>
    +
    +
    +
    +
    +
    Component props6 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    +
    Component usage.wrn
    + 
    <Container>
+  <!-- Add default slot content here -->
+</Container>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    +
    Component usage.wrn
    + 
    <Container
+  size="sm">
+  <!-- Add default slot content here -->
+</Container>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    Rich supporting content with additional context.
    +
    +
    +
    Component usage.wrn
    + 
    <Container
+  size="lg">
+  <!-- Add default slot content here -->
+</Container>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    columnsnumber2No
    gapstring"md"No
    maxWidthstring"xl"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/context-menu.wrn b/examples/component-showcase/app/pages/components/context-menu.wrn new file mode 100644 index 00000000..dbfc82fd --- /dev/null +++ b/examples/component-showcase/app/pages/components/context-menu.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ContextMenuDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Context Menu example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default context menu for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Context Menu" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Context Menu" + description = "Theme-aware, responsive context menu component." + } + view { + +
    +
    + Overlays component +

    Context Menu

    +

    Theme-aware, responsive context menu component.

    +
    8 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Context Menu

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ContextMenu
+  title="Context Menu example"
+  description="A polished default context menu for a modern application."
+  open="true"
+  closeLabel="Context Menu"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ContextMenu
+  title="Context Menu example"
+  description="A polished default context menu for a modern application."
+  open="true"
+  closeLabel="Context Menu"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ContextMenu
+  size="sm"
+  title="Compact Context Menu"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ContextMenu
+  size="lg"
+  title="Advanced Context Menu"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Context Menu"No
    descriptionstring""No
    openbooleanfalseNo
    placementstring"bottom"No
    closeLabelstring"Close"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/copy-markup.wrn b/examples/component-showcase/app/pages/components/copy-markup.wrn new file mode 100644 index 00000000..67864d69 --- /dev/null +++ b/examples/component-showcase/app/pages/components/copy-markup.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CopyMarkupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Copy Markup" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Copy Markup" + description = "Theme-aware, responsive copy markup component." + } + view { + +
    +
    + Advanced Forms component +

    Copy Markup

    +

    Theme-aware, responsive copy markup component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Copy Markup

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <CopyMarkup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <CopyMarkup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <CopyMarkup
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <CopyMarkup
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Copy Markup"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"text"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/custom-scrollbar.wrn b/examples/component-showcase/app/pages/components/custom-scrollbar.wrn new file mode 100644 index 00000000..a9adb125 --- /dev/null +++ b/examples/component-showcase/app/pages/components/custom-scrollbar.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CustomScrollbarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Custom Scrollbar" + description = "Theme-aware, responsive custom scrollbar component." + } + view { + +
    +
    + Layout component +

    Custom Scrollbar

    +

    Theme-aware, responsive custom scrollbar component.

    +
    6 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Custom Scrollbar

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <CustomScrollbar />
    +
    +
    +
    +
    +
    Component props6 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <CustomScrollbar />
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <CustomScrollbar
+  size="sm"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <CustomScrollbar
+  size="lg"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    columnsnumber2No
    gapstring"md"No
    maxWidthstring"xl"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/data-map.wrn b/examples/component-showcase/app/pages/components/data-map.wrn new file mode 100644 index 00000000..9baf8b2b --- /dev/null +++ b/examples/component-showcase/app/pages/components/data-map.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DataMapDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Data Map example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default data map for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"data-map-0-1\",\n \"key\": \"data-map-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-map-demo\",\n \"actionHref\": \"#data-map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-map-0-2\",\n \"key\": \"data-map-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-map-demo\",\n \"actionHref\": \"#data-map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Data Map" + description = "Theme-aware, responsive data map component." + } + view { + +
    +
    + Integrations component +

    Data Map

    +

    Theme-aware, responsive data map component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Data Map

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <DataMap
+  title="Data Map example"
+  description="A polished default data map for a modern application."
+  items='[
+    {
+      "id": "data-map-0-1",
+      "key": "data-map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-map-0-2",
+      "key": "data-map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DataMap
+  title="Data Map example"
+  description="A polished default data map for a modern application."
+  items='[
+    {
+      "id": "data-map-0-1",
+      "key": "data-map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-map-0-2",
+      "key": "data-map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DataMap
+  size="sm"
+  title="Compact Data Map"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "data-map-1-1",
+      "key": "data-map-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-map-1-2",
+      "key": "data-map-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DataMap
+  size="lg"
+  title="Advanced Data Map"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "data-map-2-1",
+      "key": "data-map-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "data-map-2-2",
+      "key": "data-map-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Data Map"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/data-table.wrn b/examples/component-showcase/app/pages/components/data-table.wrn new file mode 100644 index 00000000..a7486fc4 --- /dev/null +++ b/examples/component-showcase/app/pages/components/data-table.wrn @@ -0,0 +1,1193 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DataTableDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_caption = ctx.url.searchParams.get("pg_caption") ?? "Data Table" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "[\n {\n \"id\": \"data-table-0-1\",\n \"key\": \"data-table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-table-0-2\",\n \"key\": \"data-table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "[\n {\n \"id\": \"data-table-0-1\",\n \"key\": \"data-table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-table-0-2\",\n \"key\": \"data-table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_striped = ctx.url.searchParams.get("pg_striped") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Data Table" + description = "Theme-aware, responsive data table component." + } + view { + +
    +
    + Integrations component +

    Data Table

    +

    Theme-aware, responsive data table component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Data Table

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <DataTable
+  columns='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DataTable
+  columns='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DataTable
+  size="sm"
+  columns='[
+    {
+      "id": "data-table-1-1",
+      "key": "data-table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-1-2",
+      "key": "data-table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-1-1",
+      "key": "data-table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-1-2",
+      "key": "data-table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DataTable
+  size="lg"
+  columns='[
+    {
+      "id": "data-table-2-1",
+      "key": "data-table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "data-table-2-2",
+      "key": "data-table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-2-1",
+      "key": "data-table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "data-table-2-2",
+      "key": "data-table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    captionstring"Data Table"No
    columnsstring[]No
    rowsstring[]No
    stripedbooleantrueNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/date-picker.wrn b/examples/component-showcase/app/pages/components/date-picker.wrn new file mode 100644 index 00000000..eb9982d0 --- /dev/null +++ b/examples/component-showcase/app/pages/components/date-picker.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DatePickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "date" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Date Picker" + description = "Theme-aware, responsive date picker component." + } + view { + +
    +
    + Base component +

    Date Picker

    +

    Theme-aware, responsive date picker component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Date Picker

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <DatePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DatePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DatePicker
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DatePicker
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Date Picker"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"date"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/device-frame.wrn b/examples/component-showcase/app/pages/components/device-frame.wrn new file mode 100644 index 00000000..0657cb46 --- /dev/null +++ b/examples/component-showcase/app/pages/components/device-frame.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DeviceFrameDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Device Frame example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default device frame for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"device-frame-0-1\",\n \"key\": \"device-frame-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"device-frame-0-2\",\n \"key\": \"device-frame-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Device Frame" + description = "Theme-aware, responsive device frame component." + } + view { + +
    +
    + Base component +

    Device Frame

    +

    Theme-aware, responsive device frame component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Device Frame

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <DeviceFrame
+  title="Device Frame example"
+  description="A polished default device frame for a modern application."
+  items='[
+    {
+      "id": "device-frame-0-1",
+      "key": "device-frame-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "device-frame-0-2",
+      "key": "device-frame-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DeviceFrame
+  title="Device Frame example"
+  description="A polished default device frame for a modern application."
+  items='[
+    {
+      "id": "device-frame-0-1",
+      "key": "device-frame-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "device-frame-0-2",
+      "key": "device-frame-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DeviceFrame
+  size="sm"
+  title="Compact Device Frame"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "device-frame-1-1",
+      "key": "device-frame-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "device-frame-1-2",
+      "key": "device-frame-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DeviceFrame
+  size="lg"
+  title="Advanced Device Frame"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "device-frame-2-1",
+      "key": "device-frame-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "device-frame-2-2",
+      "key": "device-frame-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Device Frame"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/divider.wrn b/examples/component-showcase/app/pages/components/divider.wrn new file mode 100644 index 00000000..991a0a71 --- /dev/null +++ b/examples/component-showcase/app/pages/components/divider.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DividerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Divider" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Divider" + description = "Theme-aware, responsive divider component." + } + view { + +
    +
    + Layout component +

    Divider

    +

    Theme-aware, responsive divider component.

    +
    5 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Divider

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Divider
+  label="Divider"
+/>
    +
    +
    +
    +
    +
    Component props5 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Divider
+  label="Divider"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Divider
+  size="sm"
+  label="Compact example"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Divider
+  size="lg"
+  label="Advanced example"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/drag-and-drop.wrn b/examples/component-showcase/app/pages/components/drag-and-drop.wrn new file mode 100644 index 00000000..f5ed4d80 --- /dev/null +++ b/examples/component-showcase/app/pages/components/drag-and-drop.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DragAndDropDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drag And Drop example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drag and drop for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"drag-and-drop-0-1\",\n \"key\": \"drag-and-drop-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#drag-and-drop-demo\",\n \"actionHref\": \"#drag-and-drop-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"drag-and-drop-0-2\",\n \"key\": \"drag-and-drop-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#drag-and-drop-demo\",\n \"actionHref\": \"#drag-and-drop-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Drag And Drop" + description = "Theme-aware, responsive drag and drop component." + } + view { + +
    +
    + Integrations component +

    Drag And Drop

    +

    Theme-aware, responsive drag and drop component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Drag And Drop

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <DragAndDrop
+  title="Drag And Drop example"
+  description="A polished default drag and drop for a modern application."
+  items='[
+    {
+      "id": "drag-and-drop-0-1",
+      "key": "drag-and-drop-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "drag-and-drop-0-2",
+      "key": "drag-and-drop-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DragAndDrop
+  title="Drag And Drop example"
+  description="A polished default drag and drop for a modern application."
+  items='[
+    {
+      "id": "drag-and-drop-0-1",
+      "key": "drag-and-drop-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "drag-and-drop-0-2",
+      "key": "drag-and-drop-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DragAndDrop
+  size="sm"
+  title="Compact Drag And Drop"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "drag-and-drop-1-1",
+      "key": "drag-and-drop-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "drag-and-drop-1-2",
+      "key": "drag-and-drop-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <DragAndDrop
+  size="lg"
+  title="Advanced Drag And Drop"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "drag-and-drop-2-1",
+      "key": "drag-and-drop-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "drag-and-drop-2-2",
+      "key": "drag-and-drop-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Drag And Drop"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/drawer.wrn b/examples/component-showcase/app/pages/components/drawer.wrn new file mode 100644 index 00000000..31702437 --- /dev/null +++ b/examples/component-showcase/app/pages/components/drawer.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DrawerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drawer example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drawer for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Drawer" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Drawer" + description = "Theme-aware, responsive drawer component." + } + view { + +
    +
    + Overlays component +

    Drawer

    +

    Theme-aware, responsive drawer component.

    +
    8 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Drawer

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Drawer
+  title="Drawer example"
+  description="A polished default drawer for a modern application."
+  open="true"
+  closeLabel="Drawer"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Drawer
+  title="Drawer example"
+  description="A polished default drawer for a modern application."
+  open="true"
+  closeLabel="Drawer"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Drawer
+  size="sm"
+  title="Compact Drawer"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Drawer
+  size="lg"
+  title="Advanced Drawer"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Drawer"No
    descriptionstring""No
    openbooleanfalseNo
    placementstring"bottom"No
    closeLabelstring"Close"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/dropdown.wrn b/examples/component-showcase/app/pages/components/dropdown.wrn new file mode 100644 index 00000000..d313f151 --- /dev/null +++ b/examples/component-showcase/app/pages/components/dropdown.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DropdownDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Dropdown example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default dropdown for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Dropdown" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Dropdown" + description = "Theme-aware, responsive dropdown component." + } + view { + +
    +
    + Overlays component +

    Dropdown

    +

    Theme-aware, responsive dropdown component.

    +
    8 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Dropdown

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Dropdown
+  title="Dropdown example"
+  description="A polished default dropdown for a modern application."
+  open="true"
+  closeLabel="Dropdown"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Dropdown
+  title="Dropdown example"
+  description="A polished default dropdown for a modern application."
+  open="true"
+  closeLabel="Dropdown"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Dropdown
+  size="sm"
+  title="Compact Dropdown"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Dropdown
+  size="lg"
+  title="Advanced Dropdown"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Dropdown"No
    descriptionstring""No
    openbooleanfalseNo
    placementstring"bottom"No
    closeLabelstring"Close"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/file-input.wrn b/examples/component-showcase/app/pages/components/file-input.wrn new file mode 100644 index 00000000..e3ecfe45 --- /dev/null +++ b/examples/component-showcase/app/pages/components/file-input.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FileInputDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Input" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "file" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "File Input" + description = "Theme-aware, responsive file input component." + } + view { + +
    +
    + Forms component +

    File Input

    +

    Theme-aware, responsive file input component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure File Input

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <FileInput
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileInput
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileInput
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileInput
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"File Input"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"file"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/file-upload-progress.wrn b/examples/component-showcase/app/pages/components/file-upload-progress.wrn new file mode 100644 index 00000000..a020c0ba --- /dev/null +++ b/examples/component-showcase/app/pages/components/file-upload-progress.wrn @@ -0,0 +1,123 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FileUploadProgressDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Upload Progress" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "36" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "100" + state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "File Upload Progress" + description = "Theme-aware, responsive file upload progress component." + } + view { + +
    +
    + Base component +

    File Upload Progress

    +

    Theme-aware, responsive file upload progress component.

    +
    7 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure File Upload Progress

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <FileUploadProgress
+  label="File Upload Progress"
+  value="36"
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileUploadProgress
+  label="File Upload Progress"
+  value="36"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileUploadProgress
+  size="sm"
+  label="Compact example"
+  value="60"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileUploadProgress
+  size="lg"
+  label="Advanced example"
+  value="84"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Progress"No
    valuenumber50No
    maxnumber100No
    showValuebooleantrueNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/file-upload.wrn b/examples/component-showcase/app/pages/components/file-upload.wrn new file mode 100644 index 00000000..35ab5942 --- /dev/null +++ b/examples/component-showcase/app/pages/components/file-upload.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FileUploadDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "File Upload example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default file upload for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"file-upload-0-1\",\n \"key\": \"file-upload-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#file-upload-demo\",\n \"actionHref\": \"#file-upload-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"file-upload-0-2\",\n \"key\": \"file-upload-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#file-upload-demo\",\n \"actionHref\": \"#file-upload-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "File Upload" + description = "Theme-aware, responsive file upload component." + } + view { + +
    +
    + Integrations component +

    File Upload

    +

    Theme-aware, responsive file upload component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure File Upload

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <FileUpload
+  title="File Upload example"
+  description="A polished default file upload for a modern application."
+  items='[
+    {
+      "id": "file-upload-0-1",
+      "key": "file-upload-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "file-upload-0-2",
+      "key": "file-upload-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileUpload
+  title="File Upload example"
+  description="A polished default file upload for a modern application."
+  items='[
+    {
+      "id": "file-upload-0-1",
+      "key": "file-upload-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "file-upload-0-2",
+      "key": "file-upload-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileUpload
+  size="sm"
+  title="Compact File Upload"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "file-upload-1-1",
+      "key": "file-upload-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "file-upload-1-2",
+      "key": "file-upload-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <FileUpload
+  size="lg"
+  title="Advanced File Upload"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "file-upload-2-1",
+      "key": "file-upload-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "file-upload-2-2",
+      "key": "file-upload-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"File Upload"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/grid.wrn b/examples/component-showcase/app/pages/components/grid.wrn new file mode 100644 index 00000000..ba071ed0 --- /dev/null +++ b/examples/component-showcase/app/pages/components/grid.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page GridDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Grid" + description = "Theme-aware, responsive grid component." + } + view { + +
    +
    + Layout component +

    Grid

    +

    Theme-aware, responsive grid component.

    +
    6 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Grid

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Grid />
    +
    +
    +
    +
    +
    Component props6 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Grid />
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Grid
+  size="sm"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Grid
+  size="lg"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    columnsnumber2No
    gapstring"md"No
    maxWidthstring"xl"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/image.wrn b/examples/component-showcase/app/pages/components/image.wrn new file mode 100644 index 00000000..6833951b --- /dev/null +++ b/examples/component-showcase/app/pages/components/image.wrn @@ -0,0 +1,115 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ImageDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_src = ctx.url.searchParams.get("pg_src") ?? "" + state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "" + state playground_width = ctx.url.searchParams.get("pg_width") ?? "" + state playground_height = ctx.url.searchParams.get("pg_height") ?? "" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy" + state playground_rounded = ctx.url.searchParams.get("pg_rounded") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Image" + description = "Theme-aware, responsive image component." + } + view { + +
    +
    + Layout component +

    Image

    +

    Theme-aware, responsive image component.

    +
    9 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Image

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Image />
    +
    +
    +
    +
    +
    Component props9 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Image />
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Image
+  size="sm"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Image
+  size="lg"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    srcstring""No
    altstring""No
    widthstring""No
    heightstring""No
    loadingstring"lazy"No
    roundedbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/input-group.wrn b/examples/component-showcase/app/pages/components/input-group.wrn new file mode 100644 index 00000000..6d2221d6 --- /dev/null +++ b/examples/component-showcase/app/pages/components/input-group.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page InputGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Group" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Input Group" + description = "Theme-aware, responsive input group component." + } + view { + +
    +
    + Forms component +

    Input Group

    +

    Theme-aware, responsive input group component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Input Group

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <InputGroup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <InputGroup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <InputGroup
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <InputGroup
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Input Group"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"text"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/input-number.wrn b/examples/component-showcase/app/pages/components/input-number.wrn new file mode 100644 index 00000000..70e28619 --- /dev/null +++ b/examples/component-showcase/app/pages/components/input-number.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page InputNumberDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Number" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "number" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Input Number" + description = "Theme-aware, responsive input number component." + } + view { + +
    +
    + Advanced Forms component +

    Input Number

    +

    Theme-aware, responsive input number component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Input Number

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <InputNumber
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <InputNumber
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <InputNumber
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <InputNumber
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Input Number"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"number"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/input.wrn b/examples/component-showcase/app/pages/components/input.wrn new file mode 100644 index 00000000..2c877558 --- /dev/null +++ b/examples/component-showcase/app/pages/components/input.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page InputDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Input" + description = "Theme-aware, responsive input component." + } + view { + +
    +
    + Forms component +

    Input

    +

    Theme-aware, responsive input component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Input

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Input
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Input
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Input
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Input
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Input"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"text"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/kbd.wrn b/examples/component-showcase/app/pages/components/kbd.wrn new file mode 100644 index 00000000..4dec3184 --- /dev/null +++ b/examples/component-showcase/app/pages/components/kbd.wrn @@ -0,0 +1,116 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page KbdDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Kbd" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Kbd" + description = "Theme-aware, responsive kbd component." + } + view { + +
    +
    + Layout component +

    Kbd

    +

    Theme-aware, responsive kbd component.

    +
    4 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Kbd

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Kbd
+  label="Kbd"
+/>
    +
    +
    +
    +
    +
    Component props4 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Kbd
+  label="Kbd"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Kbd
+  size="sm"
+  label="Compact example"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Kbd
+  size="lg"
+  label="Advanced example"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"⌘ K"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/layout-splitter.wrn b/examples/component-showcase/app/pages/components/layout-splitter.wrn new file mode 100644 index 00000000..b64aa719 --- /dev/null +++ b/examples/component-showcase/app/pages/components/layout-splitter.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LayoutSplitterDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Layout Splitter" + description = "Theme-aware, responsive layout splitter component." + } + view { + +
    +
    + Layout component +

    Layout Splitter

    +

    Theme-aware, responsive layout splitter component.

    +
    6 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Layout Splitter

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <LayoutSplitter />
    +
    +
    +
    +
    +
    Component props6 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <LayoutSplitter />
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <LayoutSplitter
+  size="sm"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <LayoutSplitter
+  size="lg"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    columnsnumber2No
    gapstring"md"No
    maxWidthstring"xl"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/legend-indicator.wrn b/examples/component-showcase/app/pages/components/legend-indicator.wrn new file mode 100644 index 00000000..fe5e7019 --- /dev/null +++ b/examples/component-showcase/app/pages/components/legend-indicator.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LegendIndicatorDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Legend Indicator example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default legend indicator for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"legend-indicator-0-1\",\n \"key\": \"legend-indicator-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#legend-indicator-demo\",\n \"actionHref\": \"#legend-indicator-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"legend-indicator-0-2\",\n \"key\": \"legend-indicator-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#legend-indicator-demo\",\n \"actionHref\": \"#legend-indicator-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Legend Indicator" + description = "Theme-aware, responsive legend indicator component." + } + view { + +
    +
    + Base component +

    Legend Indicator

    +

    Theme-aware, responsive legend indicator component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Legend Indicator

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <LegendIndicator
+  title="Legend Indicator example"
+  description="A polished default legend indicator for a modern application."
+  items='[
+    {
+      "id": "legend-indicator-0-1",
+      "key": "legend-indicator-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "legend-indicator-0-2",
+      "key": "legend-indicator-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <LegendIndicator
+  title="Legend Indicator example"
+  description="A polished default legend indicator for a modern application."
+  items='[
+    {
+      "id": "legend-indicator-0-1",
+      "key": "legend-indicator-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "legend-indicator-0-2",
+      "key": "legend-indicator-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <LegendIndicator
+  size="sm"
+  title="Compact Legend Indicator"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "legend-indicator-1-1",
+      "key": "legend-indicator-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "legend-indicator-1-2",
+      "key": "legend-indicator-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <LegendIndicator
+  size="lg"
+  title="Advanced Legend Indicator"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "legend-indicator-2-1",
+      "key": "legend-indicator-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "legend-indicator-2-2",
+      "key": "legend-indicator-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Legend Indicator"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/link.wrn b/examples/component-showcase/app/pages/components/link.wrn new file mode 100644 index 00000000..a0114091 --- /dev/null +++ b/examples/component-showcase/app/pages/components/link.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LinkDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Link" + state playground_href = ctx.url.searchParams.get("pg_href") ?? "#link-demo" + state playground_target = ctx.url.searchParams.get("pg_target") ?? "" + state playground_rel = ctx.url.searchParams.get("pg_rel") ?? "" + state playground_external = ctx.url.searchParams.get("pg_external") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Link" + description = "Theme-aware, responsive link component." + } + view { + +
    +
    + Layout component +

    Link

    +

    Theme-aware, responsive link component.

    +
    8 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Link

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Link
+  href="#link-demo"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Link
+  href="#link-demo"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Link
+  size="sm"
+  label="Compact example"
+  href="#link-demo"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Link
+  size="lg"
+  label="Advanced example"
+  href="#link-demo"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Link"No
    hrefstring"#"No
    targetstring""No
    relstring""No
    externalbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/list-group.wrn b/examples/component-showcase/app/pages/components/list-group.wrn new file mode 100644 index 00000000..82700b81 --- /dev/null +++ b/examples/component-showcase/app/pages/components/list-group.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ListGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "List Group example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list group for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"list-group-0-1\",\n \"key\": \"list-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#list-group-demo\",\n \"actionHref\": \"#list-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"list-group-0-2\",\n \"key\": \"list-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#list-group-demo\",\n \"actionHref\": \"#list-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "List Group" + description = "Theme-aware, responsive list group component." + } + view { + +
    +
    + Base component +

    List Group

    +

    Theme-aware, responsive list group component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure List Group

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ListGroup
+  title="List Group example"
+  description="A polished default list group for a modern application."
+  items='[
+    {
+      "id": "list-group-0-1",
+      "key": "list-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-group-0-2",
+      "key": "list-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ListGroup
+  title="List Group example"
+  description="A polished default list group for a modern application."
+  items='[
+    {
+      "id": "list-group-0-1",
+      "key": "list-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-group-0-2",
+      "key": "list-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ListGroup
+  size="sm"
+  title="Compact List Group"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "list-group-1-1",
+      "key": "list-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-group-1-2",
+      "key": "list-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ListGroup
+  size="lg"
+  title="Advanced List Group"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "list-group-2-1",
+      "key": "list-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "list-group-2-2",
+      "key": "list-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"List Group"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/list.wrn b/examples/component-showcase/app/pages/components/list.wrn new file mode 100644 index 00000000..c484444b --- /dev/null +++ b/examples/component-showcase/app/pages/components/list.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ListDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "List example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"list-0-1\",\n \"key\": \"list-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#list-demo\",\n \"actionHref\": \"#list-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"list-0-2\",\n \"key\": \"list-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#list-demo\",\n \"actionHref\": \"#list-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "List" + description = "Theme-aware, responsive list component." + } + view { + +
    +
    + Base component +

    List

    +

    Theme-aware, responsive list component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure List

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <List
+  title="List example"
+  description="A polished default list for a modern application."
+  items='[
+    {
+      "id": "list-0-1",
+      "key": "list-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-0-2",
+      "key": "list-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <List
+  title="List example"
+  description="A polished default list for a modern application."
+  items='[
+    {
+      "id": "list-0-1",
+      "key": "list-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-0-2",
+      "key": "list-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <List
+  size="sm"
+  title="Compact List"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "list-1-1",
+      "key": "list-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-1-2",
+      "key": "list-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <List
+  size="lg"
+  title="Advanced List"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "list-2-1",
+      "key": "list-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "list-2-2",
+      "key": "list-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"List"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/map.wrn b/examples/component-showcase/app/pages/components/map.wrn new file mode 100644 index 00000000..d389c5bb --- /dev/null +++ b/examples/component-showcase/app/pages/components/map.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page MapDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Map example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default map for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"map-0-1\",\n \"key\": \"map-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#map-demo\",\n \"actionHref\": \"#map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"map-0-2\",\n \"key\": \"map-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#map-demo\",\n \"actionHref\": \"#map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Map" + description = "Theme-aware, responsive map component." + } + view { + +
    +
    + Integrations component +

    Map

    +

    Theme-aware, responsive map component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Map

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Map
+  title="Map example"
+  description="A polished default map for a modern application."
+  items='[
+    {
+      "id": "map-0-1",
+      "key": "map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "map-0-2",
+      "key": "map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Map
+  title="Map example"
+  description="A polished default map for a modern application."
+  items='[
+    {
+      "id": "map-0-1",
+      "key": "map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "map-0-2",
+      "key": "map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Map
+  size="sm"
+  title="Compact Map"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "map-1-1",
+      "key": "map-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "map-1-2",
+      "key": "map-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Map
+  size="lg"
+  title="Advanced Map"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "map-2-1",
+      "key": "map-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "map-2-2",
+      "key": "map-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Map"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/marquee.wrn b/examples/component-showcase/app/pages/components/marquee.wrn new file mode 100644 index 00000000..0e6a6065 --- /dev/null +++ b/examples/component-showcase/app/pages/components/marquee.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page MarqueeDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Marquee example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default marquee for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"marquee-0-1\",\n \"key\": \"marquee-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#marquee-demo\",\n \"actionHref\": \"#marquee-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"marquee-0-2\",\n \"key\": \"marquee-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#marquee-demo\",\n \"actionHref\": \"#marquee-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Marquee" + description = "Theme-aware, responsive marquee component." + } + view { + +
    +
    + Base component +

    Marquee

    +

    Theme-aware, responsive marquee component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Marquee

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Marquee
+  title="Marquee example"
+  description="A polished default marquee for a modern application."
+  items='[
+    {
+      "id": "marquee-0-1",
+      "key": "marquee-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "marquee-0-2",
+      "key": "marquee-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Marquee
+  title="Marquee example"
+  description="A polished default marquee for a modern application."
+  items='[
+    {
+      "id": "marquee-0-1",
+      "key": "marquee-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "marquee-0-2",
+      "key": "marquee-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Marquee
+  size="sm"
+  title="Compact Marquee"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "marquee-1-1",
+      "key": "marquee-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "marquee-1-2",
+      "key": "marquee-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Marquee
+  size="lg"
+  title="Advanced Marquee"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "marquee-2-1",
+      "key": "marquee-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "marquee-2-2",
+      "key": "marquee-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Marquee"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/mega-menu.wrn b/examples/component-showcase/app/pages/components/mega-menu.wrn new file mode 100644 index 00000000..17e51f0d --- /dev/null +++ b/examples/component-showcase/app/pages/components/mega-menu.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page MegaMenuDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Mega Menu" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"mega-menu-0-1\",\n \"key\": \"mega-menu-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#mega-menu-demo\",\n \"actionHref\": \"#mega-menu-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"mega-menu-0-2\",\n \"key\": \"mega-menu-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#mega-menu-demo\",\n \"actionHref\": \"#mega-menu-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Mega Menu" + description = "Theme-aware, responsive mega menu component." + } + view { + +
    +
    + Navigation component +

    Mega Menu

    +

    Theme-aware, responsive mega menu component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Mega Menu

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <MegaMenu
+  items='[
+    {
+      "id": "mega-menu-0-1",
+      "key": "mega-menu-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "mega-menu-0-2",
+      "key": "mega-menu-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <MegaMenu
+  items='[
+    {
+      "id": "mega-menu-0-1",
+      "key": "mega-menu-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "mega-menu-0-2",
+      "key": "mega-menu-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <MegaMenu
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "mega-menu-1-1",
+      "key": "mega-menu-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "mega-menu-1-2",
+      "key": "mega-menu-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <MegaMenu
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "mega-menu-2-1",
+      "key": "mega-menu-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "mega-menu-2-2",
+      "key": "mega-menu-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Mega Menu"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/modal.wrn b/examples/component-showcase/app/pages/components/modal.wrn new file mode 100644 index 00000000..b6a872c1 --- /dev/null +++ b/examples/component-showcase/app/pages/components/modal.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ModalDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Modal example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default modal for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Modal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Modal" + description = "Theme-aware, responsive modal component." + } + view { + +
    +
    + Overlays component +

    Modal

    +

    Theme-aware, responsive modal component.

    +
    8 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Modal

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Modal
+  title="Modal example"
+  description="A polished default modal for a modern application."
+  open="true"
+  closeLabel="Modal"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Modal
+  title="Modal example"
+  description="A polished default modal for a modern application."
+  open="true"
+  closeLabel="Modal"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Modal
+  size="sm"
+  title="Compact Modal"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Modal
+  size="lg"
+  title="Advanced Modal"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Modal"No
    descriptionstring""No
    openbooleanfalseNo
    placementstring"bottom"No
    closeLabelstring"Close"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/nav.wrn b/examples/component-showcase/app/pages/components/nav.wrn new file mode 100644 index 00000000..133326ad --- /dev/null +++ b/examples/component-showcase/app/pages/components/nav.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page NavDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Nav" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"nav-0-1\",\n \"key\": \"nav-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#nav-demo\",\n \"actionHref\": \"#nav-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"nav-0-2\",\n \"key\": \"nav-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#nav-demo\",\n \"actionHref\": \"#nav-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Nav" + description = "Theme-aware, responsive nav component." + } + view { + +
    +
    + Navigation component +

    Nav

    +

    Theme-aware, responsive nav component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Nav

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Nav
+  items='[
+    {
+      "id": "nav-0-1",
+      "key": "nav-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "nav-0-2",
+      "key": "nav-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Nav
+  items='[
+    {
+      "id": "nav-0-1",
+      "key": "nav-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "nav-0-2",
+      "key": "nav-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Nav
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "nav-1-1",
+      "key": "nav-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "nav-1-2",
+      "key": "nav-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Nav
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "nav-2-1",
+      "key": "nav-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "nav-2-2",
+      "key": "nav-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Nav"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/navbar.wrn b/examples/component-showcase/app/pages/components/navbar.wrn new file mode 100644 index 00000000..ea943f87 --- /dev/null +++ b/examples/component-showcase/app/pages/components/navbar.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page NavbarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Navbar" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"navbar-0-1\",\n \"key\": \"navbar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#navbar-demo\",\n \"actionHref\": \"#navbar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"navbar-0-2\",\n \"key\": \"navbar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#navbar-demo\",\n \"actionHref\": \"#navbar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Navbar" + description = "Theme-aware, responsive navbar component." + } + view { + +
    +
    + Navigation component +

    Navbar

    +

    Theme-aware, responsive navbar component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Navbar

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Navbar
+  items='[
+    {
+      "id": "navbar-0-1",
+      "key": "navbar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "navbar-0-2",
+      "key": "navbar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Navbar
+  items='[
+    {
+      "id": "navbar-0-1",
+      "key": "navbar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "navbar-0-2",
+      "key": "navbar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Navbar
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "navbar-1-1",
+      "key": "navbar-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "navbar-1-2",
+      "key": "navbar-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Navbar
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "navbar-2-1",
+      "key": "navbar-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "navbar-2-2",
+      "key": "navbar-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Navbar"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/pagination.wrn b/examples/component-showcase/app/pages/components/pagination.wrn new file mode 100644 index 00000000..2ac03eca --- /dev/null +++ b/examples/component-showcase/app/pages/components/pagination.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page PaginationDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Pagination" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"pagination-0-1\",\n \"key\": \"pagination-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#pagination-demo\",\n \"actionHref\": \"#pagination-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"pagination-0-2\",\n \"key\": \"pagination-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#pagination-demo\",\n \"actionHref\": \"#pagination-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Pagination" + description = "Theme-aware, responsive pagination component." + } + view { + +
    +
    + Navigation component +

    Pagination

    +

    Theme-aware, responsive pagination component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Pagination

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Pagination
+  items='[
+    {
+      "id": "pagination-0-1",
+      "key": "pagination-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "pagination-0-2",
+      "key": "pagination-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Pagination
+  items='[
+    {
+      "id": "pagination-0-1",
+      "key": "pagination-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "pagination-0-2",
+      "key": "pagination-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Pagination
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "pagination-1-1",
+      "key": "pagination-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "pagination-1-2",
+      "key": "pagination-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Pagination
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "pagination-2-1",
+      "key": "pagination-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "pagination-2-2",
+      "key": "pagination-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Pagination"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/pin-input.wrn b/examples/component-showcase/app/pages/components/pin-input.wrn new file mode 100644 index 00000000..5e818658 --- /dev/null +++ b/examples/component-showcase/app/pages/components/pin-input.wrn @@ -0,0 +1,436 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page PinInputDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default four-digit PIN" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "pin-input-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "" + state playground_length = ctx.url.searchParams.get("pg_length") ?? "4" + state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "[0-9]" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "numeric" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "○" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "one-time-code" + state playground_masked = ctx.url.searchParams.get("pg_masked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_autoFocus = ctx.url.searchParams.get("pg_autoFocus") ?? "false" + state playground_autoSubmit = ctx.url.searchParams.get("pg_autoSubmit") ?? "false" + state playground_allowPaste = ctx.url.searchParams.get("pg_allowPaste") ?? "true" + state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true" + state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear code" + state playground_separator = ctx.url.searchParams.get("pg_separator") ?? "" + state playground_groupSize = ctx.url.searchParams.get("pg_groupSize") ?? "0" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Pin Input" + description = "Secure multi-cell PIN and verification-code input with regex and paste support." + } + view { + +
    +
    + Advanced Forms component +

    Pin Input

    +

    Secure multi-cell PIN and verification-code input with regex and paste support.

    +
    26 props0 slots6 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Pin Input

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <PinInput
+  label="Default four-digit PIN"
+  name="pin-input-1"
+/>
    +
    +
    +
    +
    +
    Component props26 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Entry behavior

    Default four-digit PIN

    Live default four-digit pin example with keyboard navigation, filtering, and copyable component code.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Default four-digit PIN"
+  name="pin-input-1"
+/>
    +
    +
    +
    +
    +
    +
    Entry behavior

    Different lengths

    Live different lengths example with keyboard navigation, filtering, and copyable component code.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="3-digit code"
+  name="pinLength3"
+  length="3"
+/>
+
+<PinInput
+  label="5-digit code"
+  name="pinLength5"
+  length="5"
+/>
+
+<PinInput
+  label="7-digit code"
+  name="pinLength7"
+  length="7"
+/>
    +
    +
    +
    +
    +
    +
    Entry behavior

    Pre-filled verification code

    Live pre-filled verification code example with keyboard navigation, filtering, and copyable component code.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Pre-filled verification code"
+  name="pin-input-3"
+  value="482915"
+  length="6"
+/>
    +
    +
    +
    +
    +
    +
    Entry behavior

    Masked security PIN

    Live masked security pin example with keyboard navigation, filtering, and copyable component code.

    + 04 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Masked security PIN"
+  name="pin-input-4"
+  masked="true"
+/>
    +
    +
    +
    +
    +
    +
    Entry behavior

    Alphanumeric regex

    Live alphanumeric regex example with keyboard navigation, filtering, and copyable component code.

    + 05 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Alphanumeric regex"
+  name="pin-input-5"
+  length="6"
+  pattern="[A-Z0-9]"
+  inputMode="text"
+/>
    +
    +
    +
    +
    +
    +
    Entry behavior

    Grouped code with separator

    Live grouped code with separator example with keyboard navigation, filtering, and copyable component code.

    + 06 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Grouped code with separator"
+  name="pin-input-6"
+  length="6"
+  separator="–"
+  groupSize="3"
+/>
    +
    +
    +
    +
    +
    +
    Entry behavior

    Paste from clipboard

    Live paste from clipboard example with keyboard navigation, filtering, and copyable component code.

    + 07 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Paste from clipboard"
+  name="pin-input-7"
+  length="6"
+/>
    +
    +
    +
    +
    +
    +
    States & design

    Disabled PIN input

    Live disabled pin input example with keyboard navigation, filtering, and copyable component code.

    + 08 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Disabled PIN input"
+  name="pin-input-8"
+  length="6"
+  disabled="true"
+/>
    +
    +
    +
    +
    +
    +
    States & design

    Read-only code

    Live read-only code example with keyboard navigation, filtering, and copyable component code.

    + 09 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Read-only code"
+  name="pin-input-9"
+  value="739204"
+  length="6"
+  readonly="true"
+/>
    +
    +
    +
    +
    +
    +
    States & design

    Validation state

    Live validation state example with keyboard navigation, filtering, and copyable component code.

    + 010 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Validation state"
+  name="pin-input-10"
+  length="6"
+  required="true"
+/>
    +
    +
    +
    +
    +
    +
    States & design

    Supporting help text

    Live supporting help text example with keyboard navigation, filtering, and copyable component code.

    + 011 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Supporting help text"
+  name="pin-input-11"
+  length="6"
+  helpText="Enter the code sent to your registered email address."
+/>
    +
    +
    +
    +
    +
    +
    States & design

    Large PIN cells

    Live large pin cells example with keyboard navigation, filtering, and copyable component code.

    + 012 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  size="lg"
+  label="Large PIN cells"
+  name="pin-input-12"
+  length="6"
+/>
    +
    +
    +
    +
    +
    +
    States & design

    Custom placeholder

    Live custom placeholder example with keyboard navigation, filtering, and copyable component code.

    + 013 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Custom placeholder"
+  name="pin-input-13"
+  length="6"
+  placeholder="•"
+/>
    +
    +
    +
    +
    +
    +
    Automation

    Automatic form submission

    Live automatic form submission example with keyboard navigation, filtering, and copyable component code.

    + 014 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Automatic form submission"
+  name="pin-input-14"
+  length="6"
+  autoSubmit="true"
+/>
    +
    +
    +
    +
    +
    +
    Automation

    Completion events

    Live completion events example with keyboard navigation, filtering, and copyable component code.

    + 015 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="Completion events"
+  name="pin-input-15"
+  length="6"
+/>
    +
    +
    +
    +
    +
    +
    Automation

    JavaScript methods

    Live javascript methods example with keyboard navigation, filtering, and copyable component code.

    + 016 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <PinInput
+  label="JavaScript methods"
+  name="pin-input-16"
+  length="6"
+/>
    +
    +
    +
    +
    Component events

    Respond to every interaction

    Events are declared with @event, bubble from the component root, and expose their state through event.detail.

    @inputFires after any PIN cell input is processed.
    @changeFires when the combined PIN value changes.
    @completeFires when every PIN cell contains an accepted character.
    @pasteFires after clipboard content is filtered and distributed.
    @clearFires after the complete PIN value is cleared.
    @errorFires when component configuration, such as regex, is invalid.
    Event listeners.js
    const component = document.querySelector("[data-wrn-pin-input]")
+
+component.addEventListener("complete", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("paste", (event) => {
+  console.log(event.detail)
+})
    +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Verification code"No
    namestring"pin"No
    valuestring""No
    lengthnumber4No
    patternstring"[0-9]"No
    typestring"text"No
    inputModestring"numeric"No
    placeholderstring"○"No
    autocompletestring"one-time-code"No
    maskedbooleanfalseNo
    disabledbooleanfalseNo
    readonlybooleanfalseNo
    requiredbooleanfalseNo
    autoFocusbooleanfalseNo
    autoSubmitbooleanfalseNo
    allowPastebooleantrueNo
    clearablebooleantrueNo
    clearLabelstring"Clear code"No
    separatorstring""No
    groupSizenumber0No
    helpTextstring""No
    invalidbooleanfalseNo
    validationMessagestring""No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/popover.wrn b/examples/component-showcase/app/pages/components/popover.wrn new file mode 100644 index 00000000..dc04d95c --- /dev/null +++ b/examples/component-showcase/app/pages/components/popover.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page PopoverDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Popover example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default popover for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Popover" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Popover" + description = "Theme-aware, responsive popover component." + } + view { + +
    +
    + Overlays component +

    Popover

    +

    Theme-aware, responsive popover component.

    +
    8 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Popover

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Popover
+  title="Popover example"
+  description="A polished default popover for a modern application."
+  open="true"
+  closeLabel="Popover"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Popover
+  title="Popover example"
+  description="A polished default popover for a modern application."
+  open="true"
+  closeLabel="Popover"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Popover
+  size="sm"
+  title="Compact Popover"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Popover
+  size="lg"
+  title="Advanced Popover"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Popover"No
    descriptionstring""No
    openbooleanfalseNo
    placementstring"bottom"No
    closeLabelstring"Close"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/progress.wrn b/examples/component-showcase/app/pages/components/progress.wrn new file mode 100644 index 00000000..f88510b3 --- /dev/null +++ b/examples/component-showcase/app/pages/components/progress.wrn @@ -0,0 +1,121 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ProgressDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Progress" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "36" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "100" + state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Progress" + description = "Theme-aware, responsive progress component." + } + view { + +
    +
    + Base component +

    Progress

    +

    Theme-aware, responsive progress component.

    +
    7 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Progress

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Progress
+  value="36"
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Progress
+  value="36"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Progress
+  size="sm"
+  label="Compact example"
+  value="60"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Progress
+  size="lg"
+  label="Advanced example"
+  value="84"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Progress"No
    valuenumber50No
    maxnumber100No
    showValuebooleantrueNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/radio.wrn b/examples/component-showcase/app/pages/components/radio.wrn new file mode 100644 index 00000000..688e4987 --- /dev/null +++ b/examples/component-showcase/app/pages/components/radio.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page RadioDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Radio" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Radio" + description = "Theme-aware, responsive radio component." + } + view { + +
    +
    + Forms component +

    Radio

    +

    Theme-aware, responsive radio component.

    +
    8 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Radio

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Radio
+  value="sample-1"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Radio
+  value="sample-1"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Radio
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Radio
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Radio"No
    namestring""No
    valuestring"on"No
    checkedbooleanfalseNo
    disabledbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/range-slider.wrn b/examples/component-showcase/app/pages/components/range-slider.wrn new file mode 100644 index 00000000..9e959684 --- /dev/null +++ b/examples/component-showcase/app/pages/components/range-slider.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page RangeSliderDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "range" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Range Slider" + description = "Theme-aware, responsive range slider component." + } + view { + +
    +
    + Forms component +

    Range Slider

    +

    Theme-aware, responsive range slider component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Range Slider

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <RangeSlider
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <RangeSlider
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <RangeSlider
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <RangeSlider
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Range Slider"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"range"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/rating.wrn b/examples/component-showcase/app/pages/components/rating.wrn new file mode 100644 index 00000000..3df0000f --- /dev/null +++ b/examples/component-showcase/app/pages/components/rating.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page RatingDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Rating example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default rating for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"rating-0-1\",\n \"key\": \"rating-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#rating-demo\",\n \"actionHref\": \"#rating-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"rating-0-2\",\n \"key\": \"rating-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#rating-demo\",\n \"actionHref\": \"#rating-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Rating" + description = "Theme-aware, responsive rating component." + } + view { + +
    +
    + Base component +

    Rating

    +

    Theme-aware, responsive rating component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Rating

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Rating
+  title="Rating example"
+  description="A polished default rating for a modern application."
+  items='[
+    {
+      "id": "rating-0-1",
+      "key": "rating-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "rating-0-2",
+      "key": "rating-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Rating
+  title="Rating example"
+  description="A polished default rating for a modern application."
+  items='[
+    {
+      "id": "rating-0-1",
+      "key": "rating-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "rating-0-2",
+      "key": "rating-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Rating
+  size="sm"
+  title="Compact Rating"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "rating-1-1",
+      "key": "rating-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "rating-1-2",
+      "key": "rating-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Rating
+  size="lg"
+  title="Advanced Rating"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "rating-2-1",
+      "key": "rating-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "rating-2-2",
+      "key": "rating-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Rating"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/scrollspy.wrn b/examples/component-showcase/app/pages/components/scrollspy.wrn new file mode 100644 index 00000000..4694194f --- /dev/null +++ b/examples/component-showcase/app/pages/components/scrollspy.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ScrollspyDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Scrollspy" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"scrollspy-0-1\",\n \"key\": \"scrollspy-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#scrollspy-demo\",\n \"actionHref\": \"#scrollspy-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"scrollspy-0-2\",\n \"key\": \"scrollspy-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#scrollspy-demo\",\n \"actionHref\": \"#scrollspy-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Scrollspy" + description = "Theme-aware, responsive scrollspy component." + } + view { + +
    +
    + Navigation component +

    Scrollspy

    +

    Theme-aware, responsive scrollspy component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Scrollspy

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Scrollspy
+  items='[
+    {
+      "id": "scrollspy-0-1",
+      "key": "scrollspy-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "scrollspy-0-2",
+      "key": "scrollspy-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Scrollspy
+  items='[
+    {
+      "id": "scrollspy-0-1",
+      "key": "scrollspy-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "scrollspy-0-2",
+      "key": "scrollspy-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Scrollspy
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "scrollspy-1-1",
+      "key": "scrollspy-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "scrollspy-1-2",
+      "key": "scrollspy-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Scrollspy
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "scrollspy-2-1",
+      "key": "scrollspy-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "scrollspy-2-2",
+      "key": "scrollspy-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Scrollspy"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/search-box.wrn b/examples/component-showcase/app/pages/components/search-box.wrn new file mode 100644 index 00000000..791f985f --- /dev/null +++ b/examples/component-showcase/app/pages/components/search-box.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SearchBoxDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Search Box" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "search" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Search Box" + description = "Theme-aware, responsive search box component." + } + view { + +
    +
    + Advanced Forms component +

    Search Box

    +

    Theme-aware, responsive search box component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Search Box

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <SearchBox
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <SearchBox
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <SearchBox
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <SearchBox
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Search Box"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"search"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/select.wrn b/examples/component-showcase/app/pages/components/select.wrn new file mode 100644 index 00000000..fc5c60f6 --- /dev/null +++ b/examples/component-showcase/app/pages/components/select.wrn @@ -0,0 +1,667 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SelectDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Select" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"id\": \"select-0-1\",\n \"key\": \"select-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#select-demo\",\n \"actionHref\": \"#select-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"select-0-2\",\n \"key\": \"select-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#select-demo\",\n \"actionHref\": \"#select-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Select" + description = "Theme-aware, responsive select component." + } + view { + +
    +
    + Forms component +

    Select

    +

    Theme-aware, responsive select component.

    +
    10 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Select

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Select
+  value="sample-1"
+  options='[
+    {
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props10 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Select
+  value="sample-1"
+  options='[
+    {
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Select
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  options='[
+    {
+      "id": "select-1-1",
+      "key": "select-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "select-1-2",
+      "key": "select-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Select
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  options='[
+    {
+      "id": "select-2-1",
+      "key": "select-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "select-2-2",
+      "key": "select-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Select"No
    namestring""No
    valuestring""No
    optionsstring[]No
    placeholderstring"Select an option"No
    multiplebooleanfalseNo
    disabledbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/sidebar.wrn b/examples/component-showcase/app/pages/components/sidebar.wrn new file mode 100644 index 00000000..342ca4d0 --- /dev/null +++ b/examples/component-showcase/app/pages/components/sidebar.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SidebarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Sidebar" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"sidebar-0-1\",\n \"key\": \"sidebar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#sidebar-demo\",\n \"actionHref\": \"#sidebar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"sidebar-0-2\",\n \"key\": \"sidebar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#sidebar-demo\",\n \"actionHref\": \"#sidebar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Sidebar" + description = "Theme-aware, responsive sidebar component." + } + view { + +
    +
    + Navigation component +

    Sidebar

    +

    Theme-aware, responsive sidebar component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Sidebar

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Sidebar
+  items='[
+    {
+      "id": "sidebar-0-1",
+      "key": "sidebar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "sidebar-0-2",
+      "key": "sidebar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Sidebar
+  items='[
+    {
+      "id": "sidebar-0-1",
+      "key": "sidebar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "sidebar-0-2",
+      "key": "sidebar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Sidebar
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "sidebar-1-1",
+      "key": "sidebar-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "sidebar-1-2",
+      "key": "sidebar-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Sidebar
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "sidebar-2-1",
+      "key": "sidebar-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "sidebar-2-2",
+      "key": "sidebar-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Sidebar"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/skeleton.wrn b/examples/component-showcase/app/pages/components/skeleton.wrn new file mode 100644 index 00000000..08b01fc2 --- /dev/null +++ b/examples/component-showcase/app/pages/components/skeleton.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SkeletonDetail { + layout = "showcase" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Skeleton" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" + state playground_lines = ctx.url.searchParams.get("pg_lines") ?? "3" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Skeleton" + description = "Theme-aware, responsive skeleton component." + } + view { + +
    +
    + Base component +

    Skeleton

    +

    Theme-aware, responsive skeleton component.

    +
    5 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Skeleton

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Skeleton
+  label="Skeleton"
+/>
    +
    +
    +
    +
    +
    Component props5 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Skeleton
+  label="Skeleton"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Skeleton
+  label="Compact example"
+  size="sm"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Skeleton
+  label="Advanced example"
+  size="lg"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    colorstring"primary"No
    labelstring"Loading"No
    sizestring"md"No
    linesnumber3No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/spinner.wrn b/examples/component-showcase/app/pages/components/spinner.wrn new file mode 100644 index 00000000..54b2a3fe --- /dev/null +++ b/examples/component-showcase/app/pages/components/spinner.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SpinnerDetail { + layout = "showcase" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Spinner" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" + state playground_lines = ctx.url.searchParams.get("pg_lines") ?? "3" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Spinner" + description = "Theme-aware, responsive spinner component." + } + view { + +
    +
    + Base component +

    Spinner

    +

    Theme-aware, responsive spinner component.

    +
    5 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Spinner

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Spinner
+  label="Spinner"
+/>
    +
    +
    +
    +
    +
    Component props5 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Spinner
+  label="Spinner"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Spinner
+  label="Compact example"
+  size="sm"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Spinner
+  label="Advanced example"
+  size="lg"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    colorstring"primary"No
    labelstring"Loading"No
    sizestring"md"No
    linesnumber3No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/stepper.wrn b/examples/component-showcase/app/pages/components/stepper.wrn new file mode 100644 index 00000000..3a372e9d --- /dev/null +++ b/examples/component-showcase/app/pages/components/stepper.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page StepperDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Stepper" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"stepper-0-1\",\n \"key\": \"stepper-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#stepper-demo\",\n \"actionHref\": \"#stepper-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"stepper-0-2\",\n \"key\": \"stepper-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#stepper-demo\",\n \"actionHref\": \"#stepper-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Stepper" + description = "Theme-aware, responsive stepper component." + } + view { + +
    +
    + Navigation component +

    Stepper

    +

    Theme-aware, responsive stepper component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Stepper

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Stepper
+  items='[
+    {
+      "id": "stepper-0-1",
+      "key": "stepper-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "stepper-0-2",
+      "key": "stepper-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Stepper
+  items='[
+    {
+      "id": "stepper-0-1",
+      "key": "stepper-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "stepper-0-2",
+      "key": "stepper-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Stepper
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "stepper-1-1",
+      "key": "stepper-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "stepper-1-2",
+      "key": "stepper-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Stepper
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "stepper-2-1",
+      "key": "stepper-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "stepper-2-2",
+      "key": "stepper-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Stepper"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/strong-password.wrn b/examples/component-showcase/app/pages/components/strong-password.wrn new file mode 100644 index 00000000..d42b1b99 --- /dev/null +++ b/examples/component-showcase/app/pages/components/strong-password.wrn @@ -0,0 +1,216 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page StrongPasswordDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Live strength meter" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "strong-password-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "Northstar!2026" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Create a strong password" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "new-password" + state playground_minLength = ctx.url.searchParams.get("pg_minLength") ?? "8" + state playground_specialCharactersSet = ctx.url.searchParams.get("pg_specialCharactersSet") ?? "!@#$%^&*()_+-=[]{}|;:,.<>?" + state playground_requireLowercase = ctx.url.searchParams.get("pg_requireLowercase") ?? "true" + state playground_requireUppercase = ctx.url.searchParams.get("pg_requireUppercase") ?? "true" + state playground_requireNumber = ctx.url.searchParams.get("pg_requireNumber") ?? "true" + state playground_requireSpecialCharacter = ctx.url.searchParams.get("pg_requireSpecialCharacter") ?? "true" + state playground_showRequirements = ctx.url.searchParams.get("pg_showRequirements") ?? "false" + state playground_presentation = ctx.url.searchParams.get("pg_presentation") ?? "inline" + state playground_hintText = ctx.url.searchParams.get("pg_hintText") ?? "" + state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "Enter a password" + state playground_weakLabel = ctx.url.searchParams.get("pg_weakLabel") ?? "Weak" + state playground_fairLabel = ctx.url.searchParams.get("pg_fairLabel") ?? "Fair" + state playground_goodLabel = ctx.url.searchParams.get("pg_goodLabel") ?? "Good" + state playground_strongLabel = ctx.url.searchParams.get("pg_strongLabel") ?? "Strong" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Strong Password" + description = "Theme-aware, responsive strong password component." + } + view { + +
    +
    + Advanced Forms component +

    Strong Password

    +

    Theme-aware, responsive strong password component.

    +
    27 props0 slots3 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Strong Password

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <StrongPassword
+  label="Live strength meter"
+  name="strong-password-1"
+  value="Northstar!2026"
+  showRequirements="false"
+/>
    +
    +
    +
    +
    +
    Component props27 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Strength feedback

    Live strength meter

    Live live strength meter example with accessible scoring feedback and copyable component code.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StrongPassword
+  label="Live strength meter"
+  name="strong-password-1"
+  value="Northstar!2026"
+  showRequirements="false"
+/>
    +
    +
    +
    +
    +
    +
    Strength feedback

    Requirements and hint text

    Live requirements and hint text example with accessible scoring feedback and copyable component code.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StrongPassword
+  label="Requirements and hint text"
+  name="strong-password-2"
+  hintText="Use a unique password you do not use for another account."
+/>
    +
    +
    +
    +
    +
    +
    Strength feedback

    Requirements in a popover

    Live requirements in a popover example with accessible scoring feedback and copyable component code.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StrongPassword
+  label="Requirements in a popover"
+  name="strong-password-3"
+  presentation="popover"
+/>
    +
    +
    +
    +
    +
    +
    Configuration

    Custom special characters

    Live custom special characters example with accessible scoring feedback and copyable component code.

    + 04 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StrongPassword
+  label="Custom special characters"
+  name="strong-password-4"
+  specialCharactersSet="@#_-."
+/>
    +
    +
    +
    +
    +
    +
    Configuration

    Optional requirements

    Live optional requirements example with accessible scoring feedback and copyable component code.

    + 05 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StrongPassword
+  label="Optional requirements"
+  name="strong-password-5"
+  requireSpecialCharacter="false"
+/>
    +
    +
    +
    +
    +
    +
    Configuration

    Disabled password strength

    Live disabled password strength example with accessible scoring feedback and copyable component code.

    + 06 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StrongPassword
+  label="Disabled password strength"
+  name="strong-password-6"
+  disabled="true"
+/>
    +
    +
    +
    +
    Component events

    Respond to every interaction

    Events are declared with @event, bubble from the component root, and expose their state through event.detail.

    @inputFires as the password value changes.
    @changeFires when the password input commits a change.
    @strengthFires with the current score, percentage, and strength level.
    Event listeners.js
    const component = document.querySelector("[data-wrn-strong-password]")
+
+component.addEventListener("select", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("load", (event) => {
+  console.log(event.detail)
+})
    +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Password"No
    namestring"password"No
    valuestring""No
    placeholderstring"Create a strong password"No
    autocompletestring"new-password"No
    minLengthnumber8No
    specialCharactersSetstring"!@#$%^&*()_+-=[]{}|;:,.<>?"No
    requireLowercasebooleantrueNo
    requireUppercasebooleantrueNo
    requireNumberbooleantrueNo
    requireSpecialCharacterbooleantrueNo
    showRequirementsbooleantrueNo
    presentationstring"inline"No
    hintTextstring"Use a unique password you do not use elsewhere."No
    emptyLabelstring"Enter a password"No
    weakLabelstring"Weak"No
    fairLabelstring"Fair"No
    goodLabelstring"Good"No
    strongLabelstring"Strong"No
    disabledbooleanfalseNo
    readonlybooleanfalseNo
    requiredbooleanfalseNo
    invalidbooleanfalseNo
    validationMessagestring""No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/styled-icon.wrn b/examples/component-showcase/app/pages/components/styled-icon.wrn new file mode 100644 index 00000000..d921cd5c --- /dev/null +++ b/examples/component-showcase/app/pages/components/styled-icon.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page StyledIconDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Styled Icon example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default styled icon for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"styled-icon-0-1\",\n \"key\": \"styled-icon-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#styled-icon-demo\",\n \"actionHref\": \"#styled-icon-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"styled-icon-0-2\",\n \"key\": \"styled-icon-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#styled-icon-demo\",\n \"actionHref\": \"#styled-icon-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Styled Icon" + description = "Theme-aware, responsive styled icon component." + } + view { + +
    +
    + Base component +

    Styled Icon

    +

    Theme-aware, responsive styled icon component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Styled Icon

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <StyledIcon
+  title="Styled Icon example"
+  description="A polished default styled icon for a modern application."
+  items='[
+    {
+      "id": "styled-icon-0-1",
+      "key": "styled-icon-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "styled-icon-0-2",
+      "key": "styled-icon-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StyledIcon
+  title="Styled Icon example"
+  description="A polished default styled icon for a modern application."
+  items='[
+    {
+      "id": "styled-icon-0-1",
+      "key": "styled-icon-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "styled-icon-0-2",
+      "key": "styled-icon-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StyledIcon
+  size="sm"
+  title="Compact Styled Icon"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "styled-icon-1-1",
+      "key": "styled-icon-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "styled-icon-1-2",
+      "key": "styled-icon-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <StyledIcon
+  size="lg"
+  title="Advanced Styled Icon"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "styled-icon-2-1",
+      "key": "styled-icon-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "styled-icon-2-2",
+      "key": "styled-icon-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Styled Icon"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/switch.wrn b/examples/component-showcase/app/pages/components/switch.wrn new file mode 100644 index 00000000..9d2b1dff --- /dev/null +++ b/examples/component-showcase/app/pages/components/switch.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SwitchDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Switch" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Switch" + description = "Theme-aware, responsive switch component." + } + view { + +
    +
    + Forms component +

    Switch

    +

    Theme-aware, responsive switch component.

    +
    8 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Switch

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Switch
+  value="sample-1"
+/>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Switch
+  value="sample-1"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Switch
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Switch
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Switch"No
    namestring""No
    valuestring"on"No
    checkedbooleanfalseNo
    disabledbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/table.wrn b/examples/component-showcase/app/pages/components/table.wrn new file mode 100644 index 00000000..1cfe2812 --- /dev/null +++ b/examples/component-showcase/app/pages/components/table.wrn @@ -0,0 +1,1197 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TableDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_caption = ctx.url.searchParams.get("pg_caption") ?? "Table" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "[\n {\n \"id\": \"table-0-1\",\n \"key\": \"table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"table-0-2\",\n \"key\": \"table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "[\n {\n \"id\": \"table-0-1\",\n \"key\": \"table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"table-0-2\",\n \"key\": \"table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_striped = ctx.url.searchParams.get("pg_striped") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Table" + description = "Theme-aware, responsive table component." + } + view { + +
    +
    + Tables component +

    Table

    +

    Theme-aware, responsive table component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Table

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    NameStatusProductionActiveStagingReady
    +
    +
    Component code
    + 
    <Table
+  columns='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    NameStatusProductionActiveStagingReady
    +
    +
    +
    Component usage.wrn
    + 
    <Table
+  columns='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    NameStatusProductionActiveStagingReady
    +
    +
    +
    Component usage.wrn
    + 
    <Table
+  size="sm"
+  columns='[
+    {
+      "id": "table-1-1",
+      "key": "table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-1-2",
+      "key": "table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-1-1",
+      "key": "table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-1-2",
+      "key": "table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    NameStatusProductionActiveStagingReady
    +
    +
    +
    Component usage.wrn
    + 
    <Table
+  size="lg"
+  columns='[
+    {
+      "id": "table-2-1",
+      "key": "table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "table-2-2",
+      "key": "table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-2-1",
+      "key": "table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "table-2-2",
+      "key": "table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    captionstring"Table"No
    columnsstring[]No
    rowsstring[]No
    stripedbooleantrueNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/tabs.wrn b/examples/component-showcase/app/pages/components/tabs.wrn new file mode 100644 index 00000000..4f48a26a --- /dev/null +++ b/examples/component-showcase/app/pages/components/tabs.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TabsDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Tabs" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"tabs-0-1\",\n \"key\": \"tabs-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#tabs-demo\",\n \"actionHref\": \"#tabs-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"tabs-0-2\",\n \"key\": \"tabs-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#tabs-demo\",\n \"actionHref\": \"#tabs-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Tabs" + description = "Theme-aware, responsive tabs component." + } + view { + +
    +
    + Navigation component +

    Tabs

    +

    Theme-aware, responsive tabs component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Tabs

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Tabs
+  items='[
+    {
+      "id": "tabs-0-1",
+      "key": "tabs-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tabs-0-2",
+      "key": "tabs-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Tabs
+  items='[
+    {
+      "id": "tabs-0-1",
+      "key": "tabs-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tabs-0-2",
+      "key": "tabs-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Tabs
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "tabs-1-1",
+      "key": "tabs-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tabs-1-2",
+      "key": "tabs-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Tabs
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "tabs-2-1",
+      "key": "tabs-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "tabs-2-2",
+      "key": "tabs-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Tabs"No
    itemsstring[]No
    activestring""No
    orientationstring"horizontal"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/textarea.wrn b/examples/component-showcase/app/pages/components/textarea.wrn new file mode 100644 index 00000000..94d76406 --- /dev/null +++ b/examples/component-showcase/app/pages/components/textarea.wrn @@ -0,0 +1,128 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TextareaDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Textarea" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "5" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Textarea" + description = "Theme-aware, responsive textarea component." + } + view { + +
    +
    + Forms component +

    Textarea

    +

    Theme-aware, responsive textarea component.

    +
    10 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Textarea

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Textarea
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props10 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Textarea
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Textarea
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Textarea
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Textarea"No
    namestring""No
    valuestring""No
    placeholderstring""No
    rowsnumber5No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/time-picker.wrn b/examples/component-showcase/app/pages/components/time-picker.wrn new file mode 100644 index 00000000..d7dd8952 --- /dev/null +++ b/examples/component-showcase/app/pages/components/time-picker.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TimePickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Time Picker" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "time" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Time Picker" + description = "Theme-aware, responsive time picker component." + } + view { + +
    +
    + Forms component +

    Time Picker

    +

    Theme-aware, responsive time picker component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Time Picker

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <TimePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TimePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TimePicker
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TimePicker
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Time Picker"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"time"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/timeline.wrn b/examples/component-showcase/app/pages/components/timeline.wrn new file mode 100644 index 00000000..66171849 --- /dev/null +++ b/examples/component-showcase/app/pages/components/timeline.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TimelineDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Timeline example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default timeline for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"timeline-0-1\",\n \"key\": \"timeline-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#timeline-demo\",\n \"actionHref\": \"#timeline-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"timeline-0-2\",\n \"key\": \"timeline-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#timeline-demo\",\n \"actionHref\": \"#timeline-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Timeline" + description = "Theme-aware, responsive timeline component." + } + view { + +
    +
    + Base component +

    Timeline

    +

    Theme-aware, responsive timeline component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Timeline

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Timeline
+  title="Timeline example"
+  description="A polished default timeline for a modern application."
+  items='[
+    {
+      "id": "timeline-0-1",
+      "key": "timeline-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "timeline-0-2",
+      "key": "timeline-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Timeline
+  title="Timeline example"
+  description="A polished default timeline for a modern application."
+  items='[
+    {
+      "id": "timeline-0-1",
+      "key": "timeline-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "timeline-0-2",
+      "key": "timeline-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Timeline
+  size="sm"
+  title="Compact Timeline"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "timeline-1-1",
+      "key": "timeline-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "timeline-1-2",
+      "key": "timeline-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Timeline
+  size="lg"
+  title="Advanced Timeline"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "timeline-2-1",
+      "key": "timeline-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "timeline-2-2",
+      "key": "timeline-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Timeline"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/toast-notifications.wrn b/examples/component-showcase/app/pages/components/toast-notifications.wrn new file mode 100644 index 00000000..7eb69dc2 --- /dev/null +++ b/examples/component-showcase/app/pages/components/toast-notifications.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ToastNotificationsDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Toast Notifications example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default toast notifications for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"toast-notifications-0-1\",\n \"key\": \"toast-notifications-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#toast-notifications-demo\",\n \"actionHref\": \"#toast-notifications-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"toast-notifications-0-2\",\n \"key\": \"toast-notifications-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#toast-notifications-demo\",\n \"actionHref\": \"#toast-notifications-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Toast Notifications" + description = "Theme-aware, responsive toast notifications component." + } + view { + +
    +
    + Integrations component +

    Toast Notifications

    +

    Theme-aware, responsive toast notifications component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Toast Notifications

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ToastNotifications
+  title="Toast Notifications example"
+  description="A polished default toast notifications for a modern application."
+  items='[
+    {
+      "id": "toast-notifications-0-1",
+      "key": "toast-notifications-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-notifications-0-2",
+      "key": "toast-notifications-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ToastNotifications
+  title="Toast Notifications example"
+  description="A polished default toast notifications for a modern application."
+  items='[
+    {
+      "id": "toast-notifications-0-1",
+      "key": "toast-notifications-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-notifications-0-2",
+      "key": "toast-notifications-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ToastNotifications
+  size="sm"
+  title="Compact Toast Notifications"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "toast-notifications-1-1",
+      "key": "toast-notifications-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-notifications-1-2",
+      "key": "toast-notifications-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ToastNotifications
+  size="lg"
+  title="Advanced Toast Notifications"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "toast-notifications-2-1",
+      "key": "toast-notifications-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "toast-notifications-2-2",
+      "key": "toast-notifications-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Toast Notifications"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/toast.wrn b/examples/component-showcase/app/pages/components/toast.wrn new file mode 100644 index 00000000..f2dede96 --- /dev/null +++ b/examples/component-showcase/app/pages/components/toast.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ToastDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Toast example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default toast for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"toast-0-1\",\n \"key\": \"toast-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#toast-demo\",\n \"actionHref\": \"#toast-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"toast-0-2\",\n \"key\": \"toast-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#toast-demo\",\n \"actionHref\": \"#toast-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Toast" + description = "Theme-aware, responsive toast component." + } + view { + +
    +
    + Base component +

    Toast

    +

    Theme-aware, responsive toast component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Toast

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Toast
+  title="Toast example"
+  description="A polished default toast for a modern application."
+  items='[
+    {
+      "id": "toast-0-1",
+      "key": "toast-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-0-2",
+      "key": "toast-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Toast
+  title="Toast example"
+  description="A polished default toast for a modern application."
+  items='[
+    {
+      "id": "toast-0-1",
+      "key": "toast-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-0-2",
+      "key": "toast-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Toast
+  size="sm"
+  title="Compact Toast"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "toast-1-1",
+      "key": "toast-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-1-2",
+      "key": "toast-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Toast
+  size="lg"
+  title="Advanced Toast"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "toast-2-1",
+      "key": "toast-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "toast-2-2",
+      "key": "toast-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Toast"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/toggle-count.wrn b/examples/component-showcase/app/pages/components/toggle-count.wrn new file mode 100644 index 00000000..23c3a447 --- /dev/null +++ b/examples/component-showcase/app/pages/components/toggle-count.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ToggleCountDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Toggle Count" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Toggle Count" + description = "Theme-aware, responsive toggle count component." + } + view { + +
    +
    + Advanced Forms component +

    Toggle Count

    +

    Theme-aware, responsive toggle count component.

    +
    13 props0 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Toggle Count

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <ToggleCount
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    Component props13 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ToggleCount
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ToggleCount
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <ToggleCount
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Toggle Count"No
    namestring""No
    valuestring""No
    placeholderstring""No
    typestring"text"No
    minstring""No
    maxstring""No
    stepstring""No
    disabledbooleanfalseNo
    requiredbooleanfalseNo
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/toggle-password.wrn b/examples/component-showcase/app/pages/components/toggle-password.wrn new file mode 100644 index 00000000..6014ec67 --- /dev/null +++ b/examples/component-showcase/app/pages/components/toggle-password.wrn @@ -0,0 +1,325 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TogglePasswordDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Password" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "toggle-password-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "Northstar!2026" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter your password" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "current-password" + state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? "" + state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? "128" + state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" + state playground_fields = ctx.url.searchParams.get("pg_fields") ?? "[]" + state playground_visible = ctx.url.searchParams.get("pg_visible") ?? "false" + state playground_toggleable = ctx.url.searchParams.get("pg_toggleable") ?? "true" + state playground_toggleMode = ctx.url.searchParams.get("pg_toggleMode") ?? "button" + state playground_checkboxLabel = ctx.url.searchParams.get("pg_checkboxLabel") ?? "Show password" + state playground_showLabel = ctx.url.searchParams.get("pg_showLabel") ?? "Show password" + state playground_hideLabel = ctx.url.searchParams.get("pg_hideLabel") ?? "Hide password" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Toggle Password" + description = "Accessible password field with optional show and hide controls." + } + view { + +
    +
    + Advanced Forms component +

    Toggle Password

    +

    Accessible password field with optional show and hide controls.

    +
    24 props0 slots3 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Toggle Password

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <TogglePassword
+  name="toggle-password-1"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+/>
    +
    +
    +
    +
    +
    Component props24 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Visibility

    Inline visibility button

    Live inline visibility button example with accessible visibility controls and copyable component code.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  name="toggle-password-1"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+/>
    +
    +
    +
    +
    +
    +
    Visibility

    Checkbox-controlled toggle

    Live checkbox-controlled toggle example with accessible visibility controls and copyable component code.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Checkbox-controlled toggle"
+  name="toggle-password-2"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+  toggleMode="checkbox"
+/>
    +
    +
    +
    +
    +
    +
    Visibility

    Synchronized password fields

    Live synchronized password fields example with accessible visibility controls and copyable component code.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Passwords"
+  name="toggle-password-3"
+  maxlength="128"
+  fields='[
+    {
+      "label": "New password",
+      "name": "new-password",
+      "placeholder": "Enter new password",
+      "autocomplete": "new-password"
+    },
+    {
+      "label": "Current password",
+      "name": "current-password",
+      "value": "Northstar!2026",
+      "autocomplete": "current-password"
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Visibility

    Without visibility toggle

    Live without visibility toggle example with accessible visibility controls and copyable component code.

    + 04 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Without visibility toggle"
+  name="toggle-password-4"
+  maxlength="128"
+  fields='[]'
+  toggleable="false"
+/>
    +
    +
    +
    +
    +
    +
    Forms & states

    Supporting help text

    Live supporting help text example with accessible visibility controls and copyable component code.

    + 05 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Supporting help text"
+  name="toggle-password-5"
+  maxlength="128"
+  fields='[]'
+  helpText="Use at least eight characters and avoid passwords used on other sites."
+/>
    +
    +
    +
    +
    +
    +
    Forms & states

    Required validation

    Live required validation example with accessible visibility controls and copyable component code.

    + 06 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Required validation"
+  name="toggle-password-6"
+  minlength="8"
+  maxlength="128"
+  fields='[]'
+  required="true"
+/>
    +
    +
    +
    +
    +
    +
    Forms & states

    Disabled password

    Live disabled password example with accessible visibility controls and copyable component code.

    + 07 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Disabled password"
+  name="toggle-password-7"
+  maxlength="128"
+  fields='[]'
+  disabled="true"
+/>
    +
    +
    +
    +
    +
    +
    Forms & states

    Read-only password

    Live read-only password example with accessible visibility controls and copyable component code.

    + 08 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Read-only password"
+  name="toggle-password-8"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+  readonly="true"
+/>
    +
    +
    +
    +
    +
    +
    Design & events

    Large password field

    Live large password field example with accessible visibility controls and copyable component code.

    + 09 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  size="lg"
+  label="Large password field"
+  name="toggle-password-9"
+  maxlength="128"
+  fields='[]'
+/>
    +
    +
    +
    +
    +
    +
    Design & events

    Toggle events

    Live toggle events example with accessible visibility controls and copyable component code.

    + 010 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TogglePassword
+  label="Toggle events"
+  name="toggle-password-10"
+  maxlength="128"
+  fields='[]'
+/>
    +
    +
    +
    +
    Component events

    Respond to every interaction

    Events are declared with @event, bubble from the component root, and expose their state through event.detail.

    @inputFires whenever the password value receives user input.
    @changeFires when the password field commits a changed value.
    @toggleFires after password visibility changes.
    Event listeners.js
    const component = document.querySelector("[data-wrn-toggle-password]")
+
+component.addEventListener("toggle", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("input", (event) => {
+  console.log(event.detail)
+})
    +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    labelstring"Password"No
    namestring"password"No
    valuestring""No
    placeholderstring"Enter your password"No
    autocompletestring"current-password"No
    minlengthstring""No
    maxlengthstring""No
    patternstring"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"No
    fieldsstring[]No
    visiblebooleanfalseNo
    toggleablebooleantrueNo
    toggleModestring"button"No
    checkboxLabelstring"Show password"No
    showLabelstring"Show password"No
    hideLabelstring"Hide password"No
    disabledbooleanfalseNo
    readonlybooleanfalseNo
    requiredbooleanfalseNo
    invalidbooleanfalseNo
    helpTextstring""No
    validationMessagestring""No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/tooltip.wrn b/examples/component-showcase/app/pages/components/tooltip.wrn new file mode 100644 index 00000000..24eed156 --- /dev/null +++ b/examples/component-showcase/app/pages/components/tooltip.wrn @@ -0,0 +1,136 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TooltipDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Tooltip example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default tooltip for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Tooltip" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Tooltip" + description = "Theme-aware, responsive tooltip component." + } + view { + +
    +
    + Overlays component +

    Tooltip

    +

    Theme-aware, responsive tooltip component.

    +
    8 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Tooltip

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <Tooltip
+  title="Tooltip example"
+  description="A polished default tooltip for a modern application."
+  open="true"
+  closeLabel="Tooltip">
+  <!-- Add default slot content here -->
+</Tooltip>
    +
    +
    +
    +
    +
    Component props8 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Tooltip
+  title="Tooltip example"
+  description="A polished default tooltip for a modern application."
+  open="true"
+  closeLabel="Tooltip">
+  <!-- Add default slot content here -->
+</Tooltip>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Tooltip
+  size="sm"
+  title="Compact Tooltip"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example">
+  <!-- Add default slot content here -->
+</Tooltip>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <Tooltip
+  size="lg"
+  title="Advanced Tooltip"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example">
+  <!-- Add default slot content here -->
+</Tooltip>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Tooltip"No
    descriptionstring""No
    openbooleanfalseNo
    placementstring"bottom"No
    closeLabelstring"Close"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/tree-view.wrn b/examples/component-showcase/app/pages/components/tree-view.wrn new file mode 100644 index 00000000..18271a21 --- /dev/null +++ b/examples/component-showcase/app/pages/components/tree-view.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TreeViewDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Tree View example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default tree view for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"tree-view-0-1\",\n \"key\": \"tree-view-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#tree-view-demo\",\n \"actionHref\": \"#tree-view-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"tree-view-0-2\",\n \"key\": \"tree-view-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#tree-view-demo\",\n \"actionHref\": \"#tree-view-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Tree View" + description = "Theme-aware, responsive tree view component." + } + view { + +
    +
    + Base component +

    Tree View

    +

    Theme-aware, responsive tree view component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Tree View

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <TreeView
+  title="Tree View example"
+  description="A polished default tree view for a modern application."
+  items='[
+    {
+      "id": "tree-view-0-1",
+      "key": "tree-view-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tree-view-0-2",
+      "key": "tree-view-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TreeView
+  title="Tree View example"
+  description="A polished default tree view for a modern application."
+  items='[
+    {
+      "id": "tree-view-0-1",
+      "key": "tree-view-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tree-view-0-2",
+      "key": "tree-view-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TreeView
+  size="sm"
+  title="Compact Tree View"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "tree-view-1-1",
+      "key": "tree-view-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tree-view-1-2",
+      "key": "tree-view-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <TreeView
+  size="lg"
+  title="Advanced Tree View"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "tree-view-2-1",
+      "key": "tree-view-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "tree-view-2-2",
+      "key": "tree-view-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Tree View"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/typography.wrn b/examples/component-showcase/app/pages/components/typography.wrn new file mode 100644 index 00000000..c3aa05cc --- /dev/null +++ b/examples/component-showcase/app/pages/components/typography.wrn @@ -0,0 +1,118 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TypographyDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Typography" + description = "Theme-aware, responsive typography component." + } + view { + +
    +
    + Layout component +

    Typography

    +

    Theme-aware, responsive typography component.

    +
    6 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Typography

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    Component code
    + 
    <Typography>
+  <!-- Add default slot content here -->
+</Typography>
    +
    +
    +
    +
    +
    Component props6 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    +
    Component usage.wrn
    + 
    <Typography>
+  <!-- Add default slot content here -->
+</Typography>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    Composable content area.
    +
    +
    +
    Component usage.wrn
    + 
    <Typography
+  size="sm">
+  <!-- Add default slot content here -->
+</Typography>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    Rich supporting content with additional context.
    +
    +
    +
    Component usage.wrn
    + 
    <Typography
+  size="lg">
+  <!-- Add default slot content here -->
+</Typography>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    columnsnumber2No
    gapstring"md"No
    maxWidthstring"xl"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn new file mode 100644 index 00000000..e7c78b40 --- /dev/null +++ b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page WysiwygEditorDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Wysiwyg Editor example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default wysiwyg editor for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"wysiwyg-editor-0-1\",\n \"key\": \"wysiwyg-editor-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#wysiwyg-editor-demo\",\n \"actionHref\": \"#wysiwyg-editor-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"wysiwyg-editor-0-2\",\n \"key\": \"wysiwyg-editor-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#wysiwyg-editor-demo\",\n \"actionHref\": \"#wysiwyg-editor-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Wysiwyg Editor" + description = "Theme-aware, responsive wysiwyg editor component." + } + view { + +
    +
    + Integrations component +

    Wysiwyg Editor

    +

    Theme-aware, responsive wysiwyg editor component.

    +
    7 props1 slots0 eventsTheme readyResponsive
    +
    +
    +
    +
    +
    Interactive playground

    Configure Wysiwyg Editor

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    +
    +
    Component code
    + 
    <WysiwygEditor
+  title="Wysiwyg Editor example"
+  description="A polished default wysiwyg editor for a modern application."
+  items='[
+    {
+      "id": "wysiwyg-editor-0-1",
+      "key": "wysiwyg-editor-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-0-2",
+      "key": "wysiwyg-editor-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    Component props7 controls
    +
    +
    +
    +
    +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    +
    +
    +
    Recommended

    Production default

    Balanced spacing, hierarchy, and content for the most common product workflow.

    + 01 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <WysiwygEditor
+  title="Wysiwyg Editor example"
+  description="A polished default wysiwyg editor for a modern application."
+  items='[
+    {
+      "id": "wysiwyg-editor-0-1",
+      "key": "wysiwyg-editor-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-0-2",
+      "key": "wysiwyg-editor-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
    +
    +
    +
    +
    +
    +
    Dense UI

    Compact application

    A tighter variation for dashboards, side panels, tables, and operational interfaces.

    + 02 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <WysiwygEditor
+  size="sm"
+  title="Compact Wysiwyg Editor"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "wysiwyg-editor-1-1",
+      "key": "wysiwyg-editor-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-1-2",
+      "key": "wysiwyg-editor-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
    +
    +
    +
    +
    +
    +
    Extended

    Rich configuration

    A more expressive variation using additional data, stronger emphasis, and optional states.

    + 03 +
    +
    +
    +
    Live preview
    +
    +
    +
    +
    Component usage.wrn
    + 
    <WysiwygEditor
+  size="lg"
+  title="Advanced Wysiwyg Editor"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "wysiwyg-editor-2-1",
+      "key": "wysiwyg-editor-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-2-2",
+      "key": "wysiwyg-editor-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
    +
    +
    +
    + +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    PropTypeDefaultRequired
    sizestring"default"No
    colorstring"primary"No
    titlestring"Wysiwyg Editor"No
    descriptionstring""No
    itemsstring[]No
    variantstring"default"No
    classstring""No
    +
    + +
    + + } +} diff --git a/examples/component-showcase/app/pages/dark-mode.wrn b/examples/component-showcase/app/pages/dark-mode.wrn new file mode 100644 index 00000000..98564937 --- /dev/null +++ b/examples/component-showcase/app/pages/dark-mode.wrn @@ -0,0 +1,16 @@ +page DarkModeGuide { + layout = "showcase" + seo { + title = "Dark mode" + description = "Choose light, dark, or system mode. The selection persists and updates every preview." + } + view { +
    + +
    Customization

    Dark mode

    Choose light, dark, or system mode. The selection persists and updates every preview.

    +

    Overview

    Choose light, dark, or system mode. The selection persists and updates every preview.

    Configuration

    Use the design switcher in the header to test this setting live.

    Component behavior

    The setting is inherited by components, blocks, templates, and playground previews.

    + + +
    + } +} diff --git a/examples/component-showcase/app/pages/docs.wrn b/examples/component-showcase/app/pages/docs.wrn new file mode 100644 index 00000000..c1de736b --- /dev/null +++ b/examples/component-showcase/app/pages/docs.wrn @@ -0,0 +1,10 @@ +page Documentation { + layout = "showcase" + seo { title = "Documentation" description = "Install, configure, and use WRNexus UI." } + view { +
    +
    Getting started

    Build with WRNexus UI

    Configure one design system and use it across components, blocks, and complete page templates.

    +

    Explore the documentation

    Every Getting Started and Customization topic now has its own page. Choose a guide from the sidebar to continue.

    +
    + } +} diff --git a/examples/component-showcase/app/pages/fonts.wrn b/examples/component-showcase/app/pages/fonts.wrn new file mode 100644 index 00000000..b8ec3d80 --- /dev/null +++ b/examples/component-showcase/app/pages/fonts.wrn @@ -0,0 +1,16 @@ +page FontsGuide { + layout = "showcase" + seo { + title = "Fonts" + description = "Select a font family globally while components continue to inherit typography correctly." + } + view { +
    + +
    Customization

    Fonts

    Select a font family globally while components continue to inherit typography correctly.

    +

    Overview

    Select a font family globally while components continue to inherit typography correctly.

    Configuration

    Use the design switcher in the header to test this setting live.

    Component behavior

    The setting is inherited by components, blocks, templates, and playground previews.

    + + +
    + } +} diff --git a/examples/component-showcase/app/pages/forms.wrn b/examples/component-showcase/app/pages/forms.wrn new file mode 100644 index 00000000..762d3e59 --- /dev/null +++ b/examples/component-showcase/app/pages/forms.wrn @@ -0,0 +1,127 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FormsShowcase { + layout = "showcase" + seo { + title = "Forms components" + description = "11 forms components from @wrnexus/ui." + } + view { +
    + Component category +

    Forms

    +

    11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    11 componentsMultiple use cases33 live configurations
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Checkbox

    Theme-aware, responsive checkbox component.

    +
    8 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Color Picker

    Theme-aware, responsive color picker component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    File Input

    Theme-aware, responsive file input component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Input

    Theme-aware, responsive input component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Input Group

    Theme-aware, responsive input group component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Radio

    Theme-aware, responsive radio component.

    +
    8 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Range Slider

    Theme-aware, responsive range slider component.

    +
    13 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Select

    Theme-aware, responsive select component.

    +
    10 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Switch

    Theme-aware, responsive switch component.

    +
    8 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Textarea

    Theme-aware, responsive textarea component.

    +
    10 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Forms

    Time Picker

    Theme-aware, responsive time picker component.

    +
    13 props · 0 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/framework-guides.wrn b/examples/component-showcase/app/pages/framework-guides.wrn new file mode 100644 index 00000000..5f579b52 --- /dev/null +++ b/examples/component-showcase/app/pages/framework-guides.wrn @@ -0,0 +1,16 @@ +page FrameworkGuidesGuide { + layout = "showcase" + seo { + title = "Framework guides" + description = "WRNexus components use native HTML semantics and framework component mounts." + } + view { +
    + +
    Getting Started

    Framework guides

    WRNexus components use native HTML semantics and framework component mounts.

    +

    Overview

    WRNexus components use native HTML semantics and framework component mounts.

    Configuration

    Use the design switcher in the header to test this setting live.

    Component behavior

    The setting is inherited by components, blocks, templates, and playground previews.

    + + +
    + } +} diff --git a/examples/component-showcase/app/pages/index.wrn b/examples/component-showcase/app/pages/index.wrn new file mode 100644 index 00000000..f81c20e6 --- /dev/null +++ b/examples/component-showcase/app/pages/index.wrn @@ -0,0 +1,27 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ComponentShowcase { + layout = "showcase" + seo { + title = "WRNexus component system" + description = "Explore every unique @wrnexus/ui component through live, production-quality examples." + } + view { +
    +
    + The UI foundation for WRNexus +

    Build modern products
    at framework speed.

    +

    A complete, accessible component system with 85 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.

    +
    Get started Explore blocks
    +
    $bun add @wrnexus/ui
    +
    +
    +
    +
    85Unique components
    +
    339Live configurations
    +
    0Duplicate implementations
    +
    8Focused categories
    +
    +
    Explore the system

    Everything your product needs

    01
    Advanced Forms

    9 components · 106 live demos

    02
    Base

    27 components · 86 live demos

    03
    Forms

    11 components · 33 live demos

    04
    Integrations

    12 components · 36 live demos

    05
    Layout

    10 components · 30 live demos

    06
    Navigation

    9 components · 27 live demos

    07
    Overlays

    6 components · 18 live demos

    08
    Tables

    1 components · 3 live demos

    +
    + } +} diff --git a/examples/component-showcase/app/pages/installation.wrn b/examples/component-showcase/app/pages/installation.wrn new file mode 100644 index 00000000..552acd11 --- /dev/null +++ b/examples/component-showcase/app/pages/installation.wrn @@ -0,0 +1,16 @@ +page InstallationGuide { + layout = "showcase" + seo { + title = "Installation" + description = "Install the package and import the shared stylesheet once in your application." + } + view { +
    + +
    Getting Started

    Installation

    Install the package and import the shared stylesheet once in your application.

    +

    Overview

    Install the package and import the shared stylesheet once in your application.

    Configuration

    Use the design switcher in the header to test this setting live.

    Component behavior

    The setting is inherited by components, blocks, templates, and playground previews.

    +

    Quick start

    bun add @wrnexus/ui
    + +
    + } +} diff --git a/examples/component-showcase/app/pages/integrations.wrn b/examples/component-showcase/app/pages/integrations.wrn new file mode 100644 index 00000000..62222a63 --- /dev/null +++ b/examples/component-showcase/app/pages/integrations.wrn @@ -0,0 +1,137 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page IntegrationsShowcase { + layout = "showcase" + seo { + title = "Integrations components" + description = "12 integrations components from @wrnexus/ui." + } + view { +
    + Component category +

    Integrations

    +

    12 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    12 componentsMultiple use cases36 live configurations
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Advanced Date Picker

    Theme-aware, responsive advanced date picker component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Advanced Range Slider

    Theme-aware, responsive advanced range slider component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Chart

    Theme-aware, responsive chart component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Clipboard

    Theme-aware, responsive clipboard component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Confetti

    Theme-aware, responsive confetti component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Data Map

    Theme-aware, responsive data map component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Data Table

    Theme-aware, responsive data table component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Drag And Drop

    Theme-aware, responsive drag and drop component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    File Upload

    Theme-aware, responsive file upload component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Map

    Theme-aware, responsive map component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Toast Notifications

    Theme-aware, responsive toast notifications component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Integrations

    Wysiwyg Editor

    Theme-aware, responsive wysiwyg editor component.

    +
    7 props · 1 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/layout.wrn b/examples/component-showcase/app/pages/layout.wrn new file mode 100644 index 00000000..ac5fccfb --- /dev/null +++ b/examples/component-showcase/app/pages/layout.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LayoutShowcase { + layout = "showcase" + seo { + title = "Layout components" + description = "10 layout components from @wrnexus/ui." + } + view { +
    + Component category +

    Layout

    +

    10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    10 componentsMultiple use cases30 live configurations
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Columns

    Theme-aware, responsive columns component.

    +
    6 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    Composable content area.
    +
    +
    +
    Layout

    Container

    Theme-aware, responsive container component.

    +
    6 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Custom Scrollbar

    Theme-aware, responsive custom scrollbar component.

    +
    6 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Divider

    Theme-aware, responsive divider component.

    +
    5 props · 0 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Grid

    Theme-aware, responsive grid component.

    +
    6 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Image

    Theme-aware, responsive image component.

    +
    9 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Kbd

    Theme-aware, responsive kbd component.

    +
    4 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Layout Splitter

    Theme-aware, responsive layout splitter component.

    +
    6 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Layout

    Link

    Theme-aware, responsive link component.

    +
    8 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    Composable content area.
    +
    +
    +
    Layout

    Typography

    Theme-aware, responsive typography component.

    +
    6 props · 1 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/navigation.wrn b/examples/component-showcase/app/pages/navigation.wrn new file mode 100644 index 00000000..ec4cc0d2 --- /dev/null +++ b/examples/component-showcase/app/pages/navigation.wrn @@ -0,0 +1,107 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page NavigationShowcase { + layout = "showcase" + seo { + title = "Navigation components" + description = "9 navigation components from @wrnexus/ui." + } + view { +
    + Component category +

    Navigation

    +

    9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    9 componentsMultiple use cases27 live configurations
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Breadcrumb

    Theme-aware, responsive breadcrumb component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Mega Menu

    Theme-aware, responsive mega menu component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Nav

    Theme-aware, responsive nav component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Navbar

    Theme-aware, responsive navbar component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Pagination

    Theme-aware, responsive pagination component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Scrollspy

    Theme-aware, responsive scrollspy component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Sidebar

    Theme-aware, responsive sidebar component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Stepper

    Theme-aware, responsive stepper component.

    +
    7 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Navigation

    Tabs

    Theme-aware, responsive tabs component.

    +
    7 props · 1 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/overlays.wrn b/examples/component-showcase/app/pages/overlays.wrn new file mode 100644 index 00000000..da31593b --- /dev/null +++ b/examples/component-showcase/app/pages/overlays.wrn @@ -0,0 +1,77 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page OverlaysShowcase { + layout = "showcase" + seo { + title = "Overlays components" + description = "6 overlays components from @wrnexus/ui." + } + view { +
    + Component category +

    Overlays

    +

    6 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    6 componentsMultiple use cases18 live configurations
    +
    +
    +
    +
    + +
    +
    +
    +
    Overlays

    Context Menu

    Theme-aware, responsive context menu component.

    +
    8 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Overlays

    Drawer

    Theme-aware, responsive drawer component.

    +
    8 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Overlays

    Dropdown

    Theme-aware, responsive dropdown component.

    +
    8 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Overlays

    Modal

    Theme-aware, responsive modal component.

    +
    8 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Overlays

    Popover

    Theme-aware, responsive popover component.

    +
    8 props · 1 slotsExplore component
    +
    +
    +
    +
    + +
    +
    +
    +
    Overlays

    Tooltip

    Theme-aware, responsive tooltip component.

    +
    8 props · 1 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/resources.wrn b/examples/component-showcase/app/pages/resources.wrn new file mode 100644 index 00000000..94e522fd --- /dev/null +++ b/examples/component-showcase/app/pages/resources.wrn @@ -0,0 +1,16 @@ +page ResourcesGuide { + layout = "showcase" + seo { + title = "Resources" + description = "Use the component API pages, blocks, and templates as production starting points." + } + view { +
    + +
    Getting Started

    Resources

    Use the component API pages, blocks, and templates as production starting points.

    +

    Overview

    Use the component API pages, blocks, and templates as production starting points.

    Configuration

    Use the design switcher in the header to test this setting live.

    Component behavior

    The setting is inherited by components, blocks, templates, and playground previews.

    + + +
    + } +} diff --git a/examples/component-showcase/app/pages/sizing.wrn b/examples/component-showcase/app/pages/sizing.wrn new file mode 100644 index 00000000..24eb85d4 --- /dev/null +++ b/examples/component-showcase/app/pages/sizing.wrn @@ -0,0 +1,16 @@ +page SizingGuide { + layout = "showcase" + seo { + title = "Sizing" + description = "Compact through large scales adjust the complete component system consistently." + } + view { +
    + +
    Customization

    Sizing

    Compact through large scales adjust the complete component system consistently.

    +

    Component size

    Every component accepts xs, sm, default, md, lg, and xl.

    Global density

    Compact, default, comfortable, and large scale the complete interface.

    Responsive sizing

    Component sizing cooperates with responsive breakpoints.

    + + +
    + } +} diff --git a/examples/component-showcase/app/pages/tables.wrn b/examples/component-showcase/app/pages/tables.wrn new file mode 100644 index 00000000..0429e8b2 --- /dev/null +++ b/examples/component-showcase/app/pages/tables.wrn @@ -0,0 +1,27 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TablesShowcase { + layout = "showcase" + seo { + title = "Tables components" + description = "1 tables components from @wrnexus/ui." + } + view { +
    + Component category +

    Tables

    +

    1 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    1 componentsMultiple use cases3 live configurations
    +
    +
    +
    +
    + +
    NameStatusProductionActiveStagingReady
    +
    +
    +
    Tables

    Table

    Theme-aware, responsive table component.

    +
    7 props · 1 slotsExplore component
    +
    +
    + } +} diff --git a/examples/component-showcase/app/pages/templates.wrn b/examples/component-showcase/app/pages/templates.wrn new file mode 100644 index 00000000..a3b5ddbc --- /dev/null +++ b/examples/component-showcase/app/pages/templates.wrn @@ -0,0 +1,11 @@ +page Templates { + layout = "showcase" + seo { title = "Page templates" description = "Complete pages assembled from WRNexus UI blocks." } + view { +
    + +
    Complete products

    Production-ready templates

    Responsive page systems assembled from WRNexus blocks and components.

    +
    31 pages

    Admin dashboard

    Dashboard & Admin template with consistent navigation, content, forms, and responsive behavior.

    Preview →
    18 pages

    Commerce storefront

    Ecommerce template with consistent navigation, content, forms, and responsive behavior.

    Preview →
    12 pages

    SaaS website

    Websites template with consistent navigation, content, forms, and responsive behavior.

    Preview →
    9 pages

    Support center

    Support template with consistent navigation, content, forms, and responsive behavior.

    Preview →
    14 pages

    Finance workspace

    Finance & Payments template with consistent navigation, content, forms, and responsive behavior.

    Preview →
    +
    + } +} diff --git a/examples/component-showcase/app/pages/themes.wrn b/examples/component-showcase/app/pages/themes.wrn new file mode 100644 index 00000000..d4d1fade --- /dev/null +++ b/examples/component-showcase/app/pages/themes.wrn @@ -0,0 +1,16 @@ +page ThemesGuide { + layout = "showcase" + seo { + title = "Themes" + description = "Theme presets control radius, surface treatment, borders, shadows, and motion." + } + view { +
    + +
    Customization

    Themes

    Theme presets control radius, surface treatment, borders, shadows, and motion.

    +

    Default

    Balanced surfaces, borders, elevation, and radius.

    Soft and sharp

    Choose friendly rounded surfaces or dense operational styling.

    Glass

    Use translucent layered surfaces while retaining semantic tokens.

    + + +
    + } +} diff --git a/examples/component-showcase/app/routes.gen.ts b/examples/component-showcase/app/routes.gen.ts new file mode 100644 index 00000000..998681d4 --- /dev/null +++ b/examples/component-showcase/app/routes.gen.ts @@ -0,0 +1,160 @@ +// AUTO-GENERATED by `wrnexus dev` - do not edit. +// Typed routes support required, optional, and catch-all parameters. + +export interface Routes { + "/": Record; + "/accessibility": Record; + "/advanced-forms": Record; + "/base": Record; + "/blocks": Record; + "/colors": Record; + "/components/accordion": Record; + "/components/advanced-date-picker": Record; + "/components/advanced-range-slider": Record; + "/components/advanced-select": Record; + "/components/alert": Record; + "/components/avatar": Record; + "/components/avatar-group": Record; + "/components/badge": Record; + "/components/blockquote": Record; + "/components/breadcrumb": Record; + "/components/button": Record; + "/components/button-group": Record; + "/components/card": Record; + "/components/carousel": Record; + "/components/chart": Record; + "/components/chat-bubble": Record; + "/components/checkbox": Record; + "/components/clipboard": Record; + "/components/collapse": Record; + "/components/color-picker": Record; + "/components/columns": Record; + "/components/combo-box": Record; + "/components/confetti": Record; + "/components/container": Record; + "/components/context-menu": Record; + "/components/copy-markup": Record; + "/components/custom-scrollbar": Record; + "/components/data-map": Record; + "/components/data-table": Record; + "/components/date-picker": Record; + "/components/device-frame": Record; + "/components/divider": Record; + "/components/drag-and-drop": Record; + "/components/drawer": Record; + "/components/dropdown": Record; + "/components/file-input": Record; + "/components/file-upload": Record; + "/components/file-upload-progress": Record; + "/components/grid": Record; + "/components/image": Record; + "/components/input": Record; + "/components/input-group": Record; + "/components/input-number": Record; + "/components/kbd": Record; + "/components/layout-splitter": Record; + "/components/legend-indicator": Record; + "/components/link": Record; + "/components/list": Record; + "/components/list-group": Record; + "/components/map": Record; + "/components/marquee": Record; + "/components/mega-menu": Record; + "/components/modal": Record; + "/components/nav": Record; + "/components/navbar": Record; + "/components/pagination": Record; + "/components/pin-input": Record; + "/components/popover": Record; + "/components/progress": Record; + "/components/radio": Record; + "/components/range-slider": Record; + "/components/rating": Record; + "/components/scrollspy": Record; + "/components/search-box": Record; + "/components/select": Record; + "/components/sidebar": Record; + "/components/skeleton": Record; + "/components/spinner": Record; + "/components/stepper": Record; + "/components/strong-password": Record; + "/components/styled-icon": Record; + "/components/switch": Record; + "/components/table": Record; + "/components/tabs": Record; + "/components/textarea": Record; + "/components/time-picker": Record; + "/components/timeline": Record; + "/components/toast": Record; + "/components/toast-notifications": Record; + "/components/toggle-count": Record; + "/components/toggle-password": Record; + "/components/tooltip": Record; + "/components/tree-view": Record; + "/components/typography": Record; + "/components/wysiwyg-editor": Record; + "/dark-mode": Record; + "/docs": Record; + "/fonts": Record; + "/forms": Record; + "/framework-guides": Record; + "/installation": Record; + "/integrations": Record; + "/layout": Record; + "/navigation": Record; + "/overlays": Record; + "/resources": Record; + "/sizing": Record; + "/tables": Record; + "/templates": Record; + "/themes": Record; +} + +export type RoutePath = keyof Routes; +type RouteValue = string | readonly string[] | undefined; + +function encodeRouteValue(value: RouteValue, catchAll: boolean): string { + if (value === undefined) return ""; + const values = Array.isArray(value) ? value : catchAll ? String(value).split("/") : [String(value)]; + return values.map((part) => encodeURIComponent(part)).join("/"); +} + +export function href

    ( + path: P, + ...args: keyof Routes[P] extends never + ? [] + : Record extends Routes[P] + ? [params?: Routes[P]] + : [params: Routes[P]] +): string { + const params = (args[0] ?? {}) as Record; + const output: string[] = []; + for (const segment of String(path).split("/").filter(Boolean)) { + let name: string | undefined; + let optional = false; + let catchAll = false; + if (segment.startsWith("[[") && segment.endsWith("]]")) { + optional = true; + name = segment.slice(2, -2); + } else if (segment.startsWith("[") && segment.endsWith("]")) { + name = segment.slice(1, -1); + if (name.endsWith("?")) { + optional = true; + name = name.slice(0, -1); + } + } + if (!name) { + output.push(segment); + continue; + } + if (name.startsWith("...")) { + catchAll = true; + name = name.slice(3); + } + const value = params[name]; + if (value === undefined && optional) continue; + if (value === undefined) throw new Error(`WRN-ROUTE-MISSING-PARAM: Missing route parameter '${name}'.`); + output.push(encodeRouteValue(value, catchAll)); + } + return "/" + output.filter(Boolean).join("/"); +} diff --git a/examples/component-showcase/app/schemas/advanced-select-dynamic-validation.ts b/examples/component-showcase/app/schemas/advanced-select-dynamic-validation.ts new file mode 100644 index 00000000..685e80ca --- /dev/null +++ b/examples/component-showcase/app/schemas/advanced-select-dynamic-validation.ts @@ -0,0 +1,5 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "advanced-select-27": v.string().required("A team selection is required."), +}); diff --git a/examples/component-showcase/app/schemas/advanced-select-validation.ts b/examples/component-showcase/app/schemas/advanced-select-validation.ts new file mode 100644 index 00000000..70546e47 --- /dev/null +++ b/examples/component-showcase/app/schemas/advanced-select-validation.ts @@ -0,0 +1,5 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "advanced-select-26": v.string().required("Choose at least one available team."), +}); diff --git a/examples/component-showcase/app/schemas/combobox-validation.ts b/examples/component-showcase/app/schemas/combobox-validation.ts new file mode 100644 index 00000000..ec8cae97 --- /dev/null +++ b/examples/component-showcase/app/schemas/combobox-validation.ts @@ -0,0 +1,5 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "combobox-15": v.string().required("Choose a valid team from the suggestions."), +}); diff --git a/examples/component-showcase/app/schemas/pin-input-validation.ts b/examples/component-showcase/app/schemas/pin-input-validation.ts new file mode 100644 index 00000000..aeefaa34 --- /dev/null +++ b/examples/component-showcase/app/schemas/pin-input-validation.ts @@ -0,0 +1,8 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "pin-input-10": v + .string() + .required("Enter your six-digit verification code.") + .length(6, "The verification code must contain six digits."), +}); diff --git a/examples/component-showcase/app/schemas/toggle-password-validation.ts b/examples/component-showcase/app/schemas/toggle-password-validation.ts new file mode 100644 index 00000000..d626f3ad --- /dev/null +++ b/examples/component-showcase/app/schemas/toggle-password-validation.ts @@ -0,0 +1,8 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "toggle-password-6": v + .string() + .required("Enter your password.") + .min(8, "Your password must contain at least eight characters."), +}); diff --git a/examples/component-showcase/app/styles/global.css b/examples/component-showcase/app/styles/global.css new file mode 100644 index 00000000..84eac7e2 --- /dev/null +++ b/examples/component-showcase/app/styles/global.css @@ -0,0 +1,2467 @@ +@import "tailwindcss"; +@plugin "@iconify/tailwind4"; +@source "../**/*.wrn"; +@source "../../../packages/ui/components/*.wrn"; + +:root { + color-scheme: light dark; +} + +html[data-ui-palette="violet"] { + --wire-color-primary: #7c3aed; + --wire-color-primary-hover: #6d28d9; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #db2777; + --wire-color-success: #059669; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #2563eb; +} + +html[data-ui-palette="blue"] { + --wire-color-primary: #2563eb; + --wire-color-primary-hover: #1d4ed8; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #475569; + --wire-color-success: #16a34a; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="emerald"] { + --wire-color-primary: #059669; + --wire-color-primary-hover: #047857; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #0f766e; + --wire-color-success: #16a34a; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="rose"] { + --wire-color-primary: #e11d48; + --wire-color-primary-hover: #be123c; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #9333ea; + --wire-color-success: #059669; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #2563eb; +} + +html[data-ui-palette="amber"] { + --wire-color-primary: #d97706; + --wire-color-primary-hover: #b45309; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #92400e; + --wire-color-success: #15803d; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="cyan"] { + --wire-color-primary: #0891b2; + --wire-color-primary-hover: #0e7490; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #2563eb; + --wire-color-success: #16a34a; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="slate"] { + --wire-color-primary: #475569; + --wire-color-primary-hover: #334155; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #0f172a; + --wire-color-success: #15803d; + --wire-color-warning: #b45309; + --wire-color-danger: #b91c1c; + --wire-color-info: #0369a1; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; +} + +html[data-ui-font="system"] body { + font-family: ui-sans-serif, system-ui, sans-serif; +} + +html[data-ui-font="serif"] body { + font-family: Georgia, "Times New Roman", serif; +} + +html[data-ui-font="mono"] body { + font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; +} + +html[data-ui-scale="compact"] { + font-size: 14px; +} + +html[data-ui-scale="comfortable"] { + font-size: 17px; +} + +html[data-ui-scale="large"] { + font-size: 19px; +} + +html[data-ui-style="soft"] { + --wire-radius-sm: 0.85rem; + --wire-radius: 1.35rem; + --wire-shadow-1: 0 16px 40px color-mix(in srgb, var(--wire-color-primary) 10%, transparent); +} + +html[data-ui-style="sharp"] { + --wire-radius-sm: 0.15rem; + --wire-radius: 0.25rem; + --wire-shadow-1: none; +} + +html[data-ui-style="glass"] { + --wire-radius-sm: 0.8rem; + --wire-radius: 1.1rem; + --wire-shadow-1: 0 20px 50px color-mix(in srgb, var(--wire-color-primary) 12%, transparent); +} + +html[data-ui-style="glass"] :is(.wire-next, .showcase-card, .catalog-card) { + background: color-mix(in srgb, var(--wire-color-surface) 76%, transparent); + backdrop-filter: blur(18px); +} + +.showcase-shell { + min-height: 100vh; +} + +.showcase-header { + position: sticky; + top: 0; + z-index: 70; + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem clamp(1rem, 3vw, 2.5rem); + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); + backdrop-filter: blur(16px); +} + +.showcase-header-start, +.showcase-header-end { + display: flex; + align-items: center; + gap: 0.9rem; +} + +.showcase-brand { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 0.5rem; + color: var(--wire-color-text); + font-weight: 800; + text-decoration: none; +} + +.showcase-nav { + display: flex; + flex: 1; + gap: 0.25rem; + overflow-x: auto; + scrollbar-width: thin; +} + +.showcase-nav a, +.showcase-theme { + min-height: 2.5rem; + display: inline-flex; + align-items: center; + white-space: nowrap; + padding: 0.5rem 0.75rem; + border: 0; + border-radius: var(--wire-radius-sm); + color: var(--wire-color-muted); + background: transparent; + font: inherit; + font-size: 0.82rem; + font-weight: 700; + text-decoration: none; + cursor: pointer; +} + +.showcase-nav a:hover, +.showcase-theme:hover { + color: var(--wire-color-primary); + background: var(--wire-color-surface-2); +} + +.showcase-main { + width: min(100% - 2rem, 100rem); + margin-inline: auto; + padding-block: clamp(2rem, 5vw, 4rem); +} + +.docs-shell:has(.page-home, .page-marketplace) .docs-directory { + display: none; +} + +.docs-shell:has(.page-home, .page-marketplace) { + display: block; +} + +.docs-shell:has(.page-home, .page-marketplace) .showcase-main { + width: min(100% - 2rem, 90rem); +} + +.design-panel { + position: fixed; + top: 4.75rem; + right: 1rem; + z-index: 120; + display: grid; + width: min(23rem, calc(100vw - 2rem)); + gap: 1rem; + padding: 1.25rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); + box-shadow: 0 2rem 5rem rgb(0 0 0 / 25%); + opacity: 0; + visibility: hidden; + transform: translateY(-0.75rem); + transition: 180ms ease; +} + +html[data-design-panel-open] .design-panel { + opacity: 1; + visibility: visible; + transform: none; +} + +.design-panel header, +.design-panel label { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.design-panel header div { + display: grid; + gap: 0.2rem; +} + +.design-panel header span { + color: var(--wire-color-muted); + font-size: 0.72rem; +} + +.design-panel header button, +.design-reset { + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-surface-2); + cursor: pointer; +} + +.design-panel header button { + display: grid; + width: 2.25rem; + height: 2.25rem; + place-items: center; +} + +.design-panel label > span { + font-size: 0.82rem; + font-weight: 700; +} + +.design-panel select { + width: 11rem; + padding: 0.55rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: 0.8rem; +} + +.design-reset { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + min-height: 2.6rem; + font: inherit; + font-size: 0.8rem; + font-weight: 700; +} + +.docs-directory-guides > strong { + display: block; + padding-inline: 0.5rem; + color: var(--wire-color-muted); + font-size: 0.65rem; + font-weight: 800; + letter-spacing: 0.09em; + text-transform: uppercase; +} + +.docs-directory-guides small { + margin-left: 0.35rem; + padding: 0.1rem 0.35rem; + border: 1px solid var(--wire-color-success); + border-radius: 999px; + color: var(--wire-color-success); + font-size: 0.58rem; +} + +.page-home { + padding-top: clamp(2rem, 7vw, 6rem); +} + +.showcase-hero--home { + max-width: 62rem; + margin-inline: auto; + text-align: center; +} + +.showcase-hero--home .showcase-description { + margin-inline: auto; +} + +.home-actions, +.home-install { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; +} + +.home-install { + width: fit-content; + margin: 0.5rem auto 0; + padding: 0.7rem 0.8rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); +} + +.home-install span { + color: var(--wire-color-primary); +} + +.home-install button { + display: grid; + border: 0; + color: var(--wire-color-muted); + background: none; + cursor: pointer; +} + +.home-product-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-block: clamp(3rem, 7vw, 6rem); +} + +.home-product-grid article { + display: grid; + gap: 0.8rem; + padding: 1.5rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); +} + +.home-product-grid article > span, +.home-product-grid a { + color: var(--wire-color-primary); +} + +.home-product-grid p { + margin: 0; + color: var(--wire-color-muted); +} + +.home-product-grid a { + font-size: 0.8rem; + font-weight: 800; + text-decoration: none; +} + +.page-docs { + max-width: 52rem; +} + +.docs-intro { + padding-bottom: 2rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.docs-intro h1, +.page-marketplace h1 { + margin: 0.5rem 0; + font-size: clamp(2rem, 4vw, 3.5rem); + letter-spacing: -0.045em; +} + +.docs-intro p, +.page-marketplace > header p, +.guide-section p { + color: var(--wire-color-muted); +} + +.guide-section { + padding-block: 2.4rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.guide-section h2 { + margin: 0 0 0.65rem; +} + +.guide-section pre { + padding: 1rem; + overflow: auto; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface-2); +} + +.guide-next { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + padding-top: 2.5rem; +} + +.guide-next a { + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-surface); + font-size: 0.82rem; + font-weight: 800; + text-decoration: none; +} + +.guide-next a:hover { + border-color: var(--wire-color-primary); + color: var(--wire-color-primary); +} + +.market-tabs { + display: flex; + gap: 2rem; + margin: -1rem 0 4rem; + padding: 1rem 0; + overflow-x: auto; + border-bottom: 1px solid var(--wire-color-border); +} + +.market-tabs a { + flex: 0 0 auto; + color: var(--wire-color-muted); + font-size: 0.78rem; + text-decoration: none; +} + +.market-tabs a:first-child { + color: var(--wire-color-text); + font-weight: 800; +} + +.page-marketplace > header { + max-width: 48rem; + margin-bottom: 2.5rem; +} + +.market-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.4rem; +} + +.market-card { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); +} + +.market-preview { + display: grid; + min-height: 12rem; + place-items: center; + color: var(--wire-color-primary); + background: + radial-gradient( + circle at 50% 100%, + color-mix(in srgb, var(--wire-color-primary) 25%, transparent), + transparent 60% + ), + var(--wire-color-bg); +} + +.market-preview div { + display: grid; + width: 45%; + gap: 0.4rem; +} + +.market-preview i { + height: 0.35rem; + border-radius: 1rem; + background: var(--wire-color-border); +} + +.market-card > div:last-child { + padding: 1.1rem; +} + +.market-card small, +.template-card small { + color: var(--wire-color-primary); + font-weight: 700; +} + +.market-card h2 { + margin: 0.35rem 0; + font-size: 1rem; +} + +.market-card p, +.template-card p { + color: var(--wire-color-muted); + font-size: 0.78rem; +} + +.market-card a, +.template-card a { + color: var(--wire-color-text); + font-size: 0.75rem; + font-weight: 800; + text-decoration: none; +} + +.template-list { + display: grid; + gap: 2rem; +} + +.template-card { + display: grid; + grid-template-columns: minmax(16rem, 0.8fr) minmax(24rem, 1.8fr); + min-height: 20rem; + gap: 2rem; + padding: 2rem; + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface-2); +} + +.template-card h2 { + margin: 1rem 0 0.5rem; + font-size: 1.5rem; +} + +.template-scenes { + position: relative; + min-height: 16rem; +} + +.template-scenes i { + position: absolute; + width: 55%; + height: 85%; + border: 1px solid var(--wire-color-border); + border-radius: 0.6rem; + background: + linear-gradient(90deg, var(--wire-color-surface) 18%, transparent 18%), + repeating-linear-gradient(0deg, transparent 0 1.4rem, var(--wire-color-border) 1.45rem 1.5rem), + var(--wire-color-bg); + box-shadow: var(--wire-shadow-1); +} + +.template-scenes i:nth-child(1) { + left: 0; + top: 8%; +} + +.template-scenes i:nth-child(2) { + left: 27%; + top: 0; +} + +.template-scenes i:nth-child(3) { + right: 0; + top: 12%; +} + +@media (max-width: 980px) { + .market-grid { + grid-template-columns: repeat(2, 1fr); + } + + .template-card { + grid-template-columns: 1fr; + } +} + +@media (max-width: 700px) { + .home-product-grid, + .market-grid { + grid-template-columns: 1fr; + } + + .showcase-header .docs-search { + display: none; + } + + .market-tabs { + margin-bottom: 2rem; + } + + .guide-next { + grid-template-columns: 1fr; + } +} + +.showcase-hero { + display: grid; + gap: 1rem; + margin-bottom: 2rem; +} + +.showcase-eyebrow { + color: var(--wire-color-primary); + font-size: 0.75rem; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.showcase-title { + margin: 0; + font-size: clamp(2rem, 5vw, 4.5rem); + line-height: 0.98; + letter-spacing: -0.05em; +} + +.showcase-description { + max-width: 52rem; + margin: 0; + color: var(--wire-color-muted); + font-size: 1.05rem; +} + +.showcase-stats, +.showcase-category-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); + gap: 1rem; +} + +.showcase-stat, +.showcase-category { + padding: 1.25rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + color: var(--wire-color-text); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + text-decoration: none; +} + +.showcase-stat strong { + display: block; + color: var(--wire-color-primary); + font-size: 2rem; +} + +.showcase-category:hover { + border-color: var(--wire-color-primary); + transform: translateY(-2px); +} + +.showcase-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); + align-items: start; + gap: 1.25rem; +} + +.showcase-card { + min-width: 0; + overflow: clip; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.showcase-card:target { + outline: 3px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent); + outline-offset: 3px; +} + +.showcase-card-header { + display: flex; + align-items: start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.1rem; + border-bottom: 1px solid var(--wire-color-border); + background: var(--wire-color-surface-2); +} + +.showcase-card-title { + margin: 0; + font-size: 1rem; +} + +.showcase-card-purpose { + margin: 0.3rem 0 0; + color: var(--wire-color-muted); + font-size: 0.78rem; +} + +.showcase-card-count { + flex: 0 0 auto; + color: var(--wire-color-primary); + font-size: 0.72rem; + font-weight: 800; +} + +.showcase-stage { + min-height: 10rem; + overflow: auto; + padding: 1.25rem; + background: + linear-gradient(var(--wire-color-border) 1px, transparent 1px), + linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px), var(--wire-color-bg); + background-size: 1.5rem 1.5rem; +} + +.showcase-instance { + max-width: 100%; +} + +/* Keep overlay/fixed components inspectable inside their card instead of + covering the complete catalog page. */ +.showcase-stage .fixed, +.showcase-stage [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 24rem; +} + +.showcase-stage .min-h-screen { + min-height: 14rem !important; +} + +.showcase-slot { + padding: 0.75rem; + border: 1px dashed var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-muted); + background: var(--wire-color-surface-2); + font-size: 0.8rem; +} + +@media (max-width: 720px) { + .showcase-header { + align-items: stretch; + flex-wrap: wrap; + } + + .showcase-brand { + flex: 1; + } + + .showcase-nav { + order: 3; + flex-basis: 100%; + } + + .showcase-main { + width: min(100% - 1rem, 100rem); + } +} + +/* Documentation shell ----------------------------------------------------- */ +.showcase-header { + z-index: 100; + min-height: 4rem; + justify-content: space-between; + padding: 0.65rem 1.25rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-bg) 94%, transparent); + box-shadow: none; +} + +.showcase-header-start, +.showcase-header-end { + display: flex; + align-items: center; + gap: 1rem; +} + +.showcase-brand { + gap: 0.6rem; + font-size: 0.86rem; + font-weight: 850; + letter-spacing: -0.02em; +} + +.showcase-brand-mark { + display: grid; + width: 1.8rem; + height: 1.8rem; + place-items: center; + border-radius: 0.5rem; + color: var(--wire-color-primary-contrast); + background: var(--wire-color-primary); +} + +.showcase-nav { + gap: 0.15rem; +} + +.showcase-nav a { + padding: 0.48rem 0.6rem; + border-radius: 0.45rem; + color: var(--wire-color-muted); + font-size: 0.76rem; + font-weight: 700; +} + +.showcase-nav a:hover { + color: var(--wire-color-text); + background: var(--wire-color-surface-2); +} + +.docs-search { + display: flex; + width: min(18rem, 25vw); + min-height: 2.25rem; + align-items: center; + gap: 0.55rem; + padding: 0.35rem 0.45rem 0.35rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.65rem; + color: var(--wire-color-muted); + background: var(--wire-color-surface-2); +} + +.docs-search input { + min-width: 0; + flex: 1; + border: 0; + outline: 0; + color: var(--wire-color-text); + background: transparent; + font: inherit; + font-size: 0.72rem; +} + +.docs-search kbd { + padding: 0.18rem 0.35rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.35rem; + color: var(--wire-color-muted); + background: var(--wire-color-surface); + font-size: 0.6rem; +} + +.showcase-github, +.showcase-theme, +.docs-menu-toggle { + display: grid; + width: 2.25rem; + height: 2.25rem; + place-items: center; + padding: 0; + border: 1px solid transparent; + border-radius: 0.6rem; + color: var(--wire-color-muted); + background: transparent; +} + +.showcase-github:hover, +.showcase-theme:hover, +.docs-menu-toggle:hover { + color: var(--wire-color-text); + border-color: var(--wire-color-border); + background: var(--wire-color-surface-2); +} + +.docs-menu-toggle { + display: none; +} + +.docs-shell { + display: grid; + min-height: calc(100vh - 4rem); + grid-template-columns: 17rem minmax(0, 1fr); +} + +.docs-directory { + position: sticky; + top: 4rem; + height: calc(100vh - 4rem); + overflow: auto; + padding: 1.5rem 1rem 3rem; + border-right: 1px solid var(--wire-color-border); + background: var(--wire-color-bg); + scrollbar-width: thin; +} + +.docs-directory-intro { + display: grid; + gap: 0.25rem; + margin-bottom: 1.5rem; + padding-inline: 0.45rem; +} + +.docs-directory-intro strong { + font-size: 0.82rem; +} + +.docs-directory-intro span { + color: var(--wire-color-muted); + font-size: 0.66rem; +} + +.docs-directory nav, +.docs-directory-group, +.docs-directory-group > div { + display: grid; +} + +.docs-directory nav { + gap: 1.4rem; +} + +.docs-directory-group { + gap: 0.4rem; +} + +.docs-directory-group > div { + gap: 0.1rem; +} + +.docs-directory-heading { + padding-inline: 0.5rem; + color: var(--wire-color-muted); + font-size: 0.65rem; + font-weight: 800; + letter-spacing: 0.09em; + text-decoration: none; + text-transform: uppercase; +} + +.docs-directory-group > div > a { + overflow: hidden; + padding: 0.42rem 0.55rem; + border-radius: 0.45rem; + color: var(--wire-color-muted); + font-size: 0.72rem; + font-weight: 600; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.docs-directory-group > div > a:hover, +.docs-directory-group > div > a[aria-current="page"] { + color: var(--wire-color-text); + background: var(--wire-color-surface-2); +} + +.docs-directory-group > div > a[aria-current="page"] { + box-shadow: inset 2px 0 var(--wire-color-primary); +} + +.docs-directory-empty { + margin: 1rem 0.5rem; + color: var(--wire-color-muted); + font-size: 0.72rem; +} + +.showcase-main { + width: 100%; + max-width: 100rem; + margin: 0 auto; + padding: clamp(1.5rem, 3vw, 3rem); +} + +.docs-breadcrumbs { + margin-bottom: 1.5rem; +} + +.detail-hero { + grid-template-columns: 1fr; + gap: 1rem; + margin-bottom: 3rem; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.detail-hero-copy { + max-width: 52rem; + gap: 0.85rem; +} + +.detail-hero h1 { + font-size: clamp(2.4rem, 5vw, 4rem); + line-height: 1; + letter-spacing: -0.055em; +} + +.detail-hero p { + font-size: 0.95rem; +} + +.detail-hero-icon { + display: none; +} + +.detail-badges span, +.category-meta span { + padding: 0.32rem 0.55rem; + font-size: 0.64rem; +} + +.detail-layout { + grid-template-columns: minmax(0, 1fr) 11rem; + gap: clamp(2rem, 4vw, 4rem); +} + +.detail-toc { + padding-left: 0; + border-left: 0; +} + +.detail-toc strong { + color: var(--wire-color-muted); + font-size: 0.64rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.detail-toc a { + padding: 0.3rem 0; + font-size: 0.68rem; +} + +.playground-workbench, +.demo-case, +.docs-table-wrap { + border-radius: 0.85rem; + box-shadow: none; +} + +.playground-section { + margin-bottom: 4rem; +} + +.playground-workbench { + grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); +} + +.demo-case-header { + padding: 1.15rem 1.25rem; +} + +.detail-section-heading h2 { + letter-spacing: -0.035em; +} + +@media (max-width: 1180px) { + .showcase-nav { + display: none; + } + + .detail-layout { + grid-template-columns: 1fr; + } + + .detail-aside { + display: none; + } +} + +@media (max-width: 900px) { + .docs-menu-toggle { + display: grid; + } + + .docs-shell { + grid-template-columns: 1fr; + } + + .docs-directory { + position: fixed; + z-index: 90; + inset: 4rem auto 0 0; + width: min(20rem, 86vw); + height: auto; + transform: translateX(-105%); + transition: transform 180ms ease; + box-shadow: var(--wire-shadow-2); + } + + [data-docs-menu-open] .docs-directory { + transform: translateX(0); + } + + .docs-search { + width: min(15rem, 36vw); + } +} + +@media (max-width: 640px) { + .showcase-header { + padding-inline: 0.75rem; + } + + .showcase-brand { + font-size: 0; + } + + .showcase-brand-mark { + font-size: initial; + } + + .docs-search { + width: min(12rem, 44vw); + } + + .docs-search kbd, + .showcase-github { + display: none; + } + + .showcase-main { + padding: 1rem; + } + + .playground-workbench { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } +} + +/* --- Modern documentation experience ----------------------------------- */ + +body { + background: + radial-gradient( + circle at 10% -10%, + color-mix(in srgb, var(--wire-color-primary) 16%, transparent), + transparent 32rem + ), + radial-gradient( + circle at 92% 8%, + color-mix(in srgb, var(--wire-color-info) 12%, transparent), + transparent 28rem + ), + var(--wire-color-bg); +} + +.showcase-header { + min-height: 4.5rem; + padding-inline: clamp(1rem, 4vw, 4rem); + border-color: color-mix(in srgb, var(--wire-color-border) 72%, transparent); + box-shadow: 0 1px 0 color-mix(in srgb, var(--wire-color-surface) 80%, transparent); +} + +.showcase-brand { + font-size: 0.94rem; + letter-spacing: -0.02em; +} + +.showcase-main { + width: min(100% - 2rem, 92rem); + padding-block: clamp(2.5rem, 6vw, 6rem); +} + +.showcase-hero { + position: relative; + max-width: 68rem; + gap: 1.25rem; + margin-bottom: clamp(3rem, 7vw, 6rem); +} + +.showcase-hero--home { + max-width: 76rem; + padding-block: clamp(2rem, 6vw, 5rem); +} + +.showcase-eyebrow, +.demo-case-eyebrow, +.catalog-card-category, +.detail-section-heading > span, +.home-section-heading > span { + display: inline-flex; + width: max-content; + align-items: center; + gap: 0.45rem; + color: var(--wire-color-primary); + font-size: 0.72rem; + font-weight: 850; + letter-spacing: 0.15em; + text-transform: uppercase; +} + +.showcase-eyebrow::before { + width: 1.75rem; + height: 2px; + border-radius: 999px; + background: var(--wire-color-primary); + content: ""; +} + +.showcase-title { + max-width: 72rem; + font-size: clamp(3rem, 8vw, 7.5rem); + font-weight: 850; + line-height: 0.9; + letter-spacing: -0.075em; +} + +.showcase-title em { + color: var(--wire-color-primary); + font-family: Georgia, "Times New Roman", serif; + font-weight: 500; +} + +.showcase-hero--category .showcase-title { + font-size: clamp(3.25rem, 7vw, 6.5rem); +} + +.showcase-description { + max-width: 59rem; + font-size: clamp(1rem, 2vw, 1.25rem); + line-height: 1.75; +} + +.home-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 0.75rem; +} + +.home-primary-action, +.home-secondary-action { + display: inline-flex; + min-height: 3.25rem; + align-items: center; + justify-content: center; + gap: 0.65rem; + padding: 0.8rem 1.2rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.85rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font-size: 0.9rem; + font-weight: 800; + text-decoration: none; + box-shadow: var(--wire-shadow-1); + transition: + transform 180ms ease, + box-shadow 180ms ease; +} + +.home-primary-action { + border-color: var(--wire-color-primary); + color: var(--wire-color-primary-contrast); + background: var(--wire-color-primary); + box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wire-color-primary) 24%, transparent); +} + +.home-primary-action:hover, +.home-secondary-action:hover { + transform: translateY(-2px); + text-decoration: none; +} + +.showcase-stats { + grid-template-columns: repeat(4, 1fr); + gap: 0; + overflow: hidden; + margin-bottom: clamp(4rem, 8vw, 7rem); + border: 1px solid var(--wire-color-border); + border-radius: 1.5rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.showcase-stat { + border: 0; + border-right: 1px solid var(--wire-color-border); + border-radius: 0; + padding: clamp(1.25rem, 3vw, 2rem); + box-shadow: none; +} + +.showcase-stat:last-child { + border-right: 0; +} + +.showcase-stat strong { + font-size: clamp(2rem, 4vw, 3.25rem); + letter-spacing: -0.06em; +} + +.showcase-stat span { + color: var(--wire-color-muted); + font-size: 0.8rem; + font-weight: 700; +} + +.home-categories { + display: grid; + gap: 2rem; +} + +.home-section-heading, +.detail-section-heading { + display: grid; + max-width: 48rem; + gap: 0.6rem; +} + +.home-section-heading h2, +.detail-section-heading h2 { + margin: 0; + font-size: clamp(2rem, 4vw, 3.5rem); + line-height: 1; + letter-spacing: -0.055em; +} + +.detail-section-heading p { + margin: 0; + color: var(--wire-color-muted); +} + +.home-category-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.9rem; +} + +.home-category { + position: relative; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 1.25rem; + min-height: 8rem; + overflow: hidden; + padding: 1.5rem; + border: 1px solid var(--wire-color-border); + border-radius: 1.25rem; + color: var(--wire-color-text); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--wire-color-primary) 7%, var(--wire-color-surface)), + var(--wire-color-surface) + ); + text-decoration: none; + box-shadow: var(--wire-shadow-1); + transition: + transform 180ms ease, + border-color 180ms ease, + box-shadow 180ms ease; +} + +.home-category:hover { + border-color: color-mix(in srgb, var(--wire-color-primary) 55%, var(--wire-color-border)); + transform: translateY(-3px); + box-shadow: var(--wire-shadow-2); + text-decoration: none; +} + +.home-category-index { + color: color-mix(in srgb, var(--wire-color-primary) 65%, var(--wire-color-muted)); + font-family: ui-monospace, monospace; + font-size: 0.72rem; +} + +.home-category strong { + display: block; + font-size: 1.2rem; + letter-spacing: -0.025em; +} + +.home-category p { + margin: 0.3rem 0 0; + color: var(--wire-color-muted); + font-size: 0.8rem; +} + +.category-meta, +.detail-badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.category-meta span, +.detail-badges span { + padding: 0.42rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: 999px; + color: var(--wire-color-muted); + background: color-mix(in srgb, var(--wire-color-surface) 82%, transparent); + font-size: 0.72rem; + font-weight: 750; +} + +.catalog-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: start; + gap: 1.25rem; +} + +.catalog-card { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.4rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + transition: + transform 200ms ease, + border-color 200ms ease, + box-shadow 200ms ease; +} + +.catalog-card:hover { + border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); + transform: translateY(-4px); + box-shadow: var(--wire-shadow-2); +} + +.catalog-card-preview { + position: relative; + display: grid; + min-height: 18rem; + place-items: center; + overflow: hidden; + padding: 2rem; + border-bottom: 1px solid var(--wire-color-border); + color: var(--wire-color-text); + background: + radial-gradient( + circle at 50% 20%, + color-mix(in srgb, var(--wire-color-primary) 14%, transparent), + transparent 58% + ), + linear-gradient(135deg, var(--wire-color-bg), var(--wire-color-surface-2)); + text-decoration: none; +} + +.catalog-card-preview::before { + position: absolute; + inset: 0; + opacity: 0.38; + background-image: + linear-gradient(var(--wire-color-border) 1px, transparent 1px), + linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px); + background-size: 2rem 2rem; + mask-image: linear-gradient(to bottom, black, transparent); + content: ""; +} + +.catalog-card-stage { + position: relative; + z-index: 1; + width: min(100%, 32rem); +} + +.catalog-card-preview .fixed, +.catalog-card-preview [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 16rem; +} + +.catalog-card-body { + display: grid; + min-height: 13rem; + align-content: space-between; + gap: 1.25rem; + padding: 1.35rem; +} + +.catalog-card-body h2 { + margin: 0.45rem 0 0; + font-size: 1.25rem; + letter-spacing: -0.035em; +} + +.catalog-card-body p { + margin: 0.55rem 0 0; + color: var(--wire-color-muted); + font-size: 0.83rem; + line-height: 1.65; +} + +.catalog-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--wire-color-border); + font-size: 0.72rem; +} + +.catalog-card-footer > span { + color: var(--wire-color-muted); +} + +.catalog-card-footer a { + color: var(--wire-color-primary); + font-weight: 800; + text-decoration: none; +} + +.docs-breadcrumbs { + display: flex; + align-items: center; + gap: 0.6rem; + margin-bottom: 2rem; + color: var(--wire-color-muted); + font-size: 0.78rem; +} + +.docs-breadcrumbs a { + color: var(--wire-color-muted); + text-decoration: none; +} + +.docs-breadcrumbs a:hover { + color: var(--wire-color-primary); +} + +.detail-hero { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 3rem; + margin-bottom: clamp(4rem, 8vw, 7rem); + padding: clamp(2rem, 5vw, 4.5rem); + border: 1px solid var(--wire-color-border); + border-radius: 2rem; + background: + radial-gradient( + circle at 86% 15%, + color-mix(in srgb, var(--wire-color-primary) 18%, transparent), + transparent 22rem + ), + linear-gradient(135deg, var(--wire-color-surface), var(--wire-color-surface-2)); + box-shadow: var(--wire-shadow-2); +} + +.detail-hero-copy { + display: grid; + max-width: 60rem; + gap: 1rem; +} + +.detail-hero h1 { + margin: 0; + font-size: clamp(3rem, 7vw, 6rem); + line-height: 0.92; + letter-spacing: -0.07em; +} + +.detail-hero p { + max-width: 50rem; + margin: 0; + color: var(--wire-color-muted); + font-size: 1.05rem; + line-height: 1.7; +} + +.detail-hero-icon { + display: grid; + width: clamp(6rem, 12vw, 10rem); + aspect-ratio: 1; + place-items: center; + border: 1px solid color-mix(in srgb, var(--wire-color-primary) 30%, var(--wire-color-border)); + border-radius: 2rem; + color: var(--wire-color-primary); + background: color-mix(in srgb, var(--wire-color-primary) 10%, var(--wire-color-surface)); + box-shadow: + inset 0 1px 0 color-mix(in srgb, white 35%, transparent), + 0 2rem 4rem color-mix(in srgb, var(--wire-color-primary) 15%, transparent); + transform: rotate(3deg); +} + +.detail-layout { + display: grid; + grid-template-columns: minmax(0, 1fr) 13rem; + align-items: start; + gap: clamp(2rem, 5vw, 5rem); +} + +.playground-section { + margin-bottom: clamp(4rem, 8vw, 7rem); +} + +.playground-workbench { + display: grid; + min-height: 38rem; + grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr); + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.5rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-2); +} + +.playground-preview { + position: relative; + display: grid; + min-width: 0; + grid-template-rows: auto minmax(24rem, 1fr) auto; + border-right: 1px solid var(--wire-color-border); + background: + radial-gradient( + circle at 50% 18%, + color-mix(in srgb, var(--wire-color-primary) 14%, transparent), + transparent 48% + ), + linear-gradient(145deg, var(--wire-color-bg), var(--wire-color-surface-2)); +} + +.playground-preview-source { + display: grid; + min-height: 24rem; + place-items: center; + overflow: auto; + padding: clamp(1.25rem, 5vw, 4rem); + transition: opacity 150ms ease; +} + +.playground-preview-source > * { + width: min(100%, 62rem); +} + +.playground-preview-source > .wire-action:not(.w-full) { + width: fit-content; +} + +.playground-preview-source .fixed, +.playground-preview-source [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 30rem; +} + +.playground-preview-source .min-h-screen { + min-height: 22rem !important; +} + +[data-playground][data-updating="true"] .playground-preview-source { + opacity: 0.55; +} + +.playground-status { + position: absolute; + inset-block-start: 0.85rem; + inset-inline-end: 8rem; + min-height: 1rem; + color: var(--wire-color-muted); + font-size: 0.68rem; + font-weight: 700; +} + +.playground-code { + display: grid; + min-width: 0; + grid-template-rows: auto 1fr; + border-top: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-bg) 84%, black); +} + +.playground-code header { + display: flex; + min-height: 2.75rem; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-inline: 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); +} + +.playground-code header > span, +.playground-code button { + display: inline-flex; + align-items: center; + gap: 0.45rem; + font-size: 0.7rem; + font-weight: 750; +} + +.playground-code header > span { + color: var(--wire-color-muted); +} + +.playground-code button { + padding: 0.42rem 0.6rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.55rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font-family: inherit; + cursor: pointer; +} + +.playground-code button:hover { + color: var(--wire-color-primary); + border-color: color-mix(in srgb, var(--wire-color-primary) 50%, var(--wire-color-border)); +} + +.playground-code pre { + max-width: 100%; + max-height: 15rem; + overflow: auto; + margin: 0; + padding: 1rem; + color: var(--wire-color-text); + font-size: 0.72rem; + line-height: 1.65; + white-space: pre; +} + +.playground-controls { + display: grid; + min-width: 0; + max-height: 48rem; + grid-template-rows: auto 1fr; + background: var(--wire-color-surface); +} + +.playground-controls > header { + display: flex; + min-height: 4.5rem; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.9rem 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: var(--wire-color-surface-2); +} + +.playground-controls > header div, +.playground-field > span, +.playground-toggle > span { + display: grid; + gap: 0.2rem; +} + +.playground-controls > header span { + color: var(--wire-color-primary); + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.playground-controls > header strong { + font-size: 0.84rem; +} + +.playground-controls > header button { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.5rem 0.65rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.65rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font: inherit; + font-size: 0.72rem; + font-weight: 750; + cursor: pointer; +} + +.playground-fields { + display: grid; + align-content: start; + gap: 1rem; + overflow: auto; + padding: 1rem; +} + +.playground-field, +.playground-toggle { + display: grid; + gap: 0.55rem; +} + +.playground-field strong, +.playground-toggle strong { + font-size: 0.78rem; +} + +.playground-field small, +.playground-toggle small { + color: var(--wire-color-muted); + font-size: 0.65rem; +} + +.playground-field input, +.playground-field textarea, +.playground-field select { + width: 100%; + border: 1px solid var(--wire-color-border); + border-radius: 0.7rem; + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: 0.76rem; +} + +.playground-field input { + min-height: 2.5rem; + padding: 0.55rem 0.7rem; +} + +.playground-field select { + min-height: 2.5rem; + padding: 0.55rem 2rem 0.55rem 0.7rem; + cursor: pointer; +} + +.playground-field input[type="color"] { + padding: 0.25rem; +} + +.playground-field textarea { + min-height: 7rem; + padding: 0.7rem; + font-family: ui-monospace, monospace; + line-height: 1.5; + resize: vertical; +} + +.playground-field input:focus, +.playground-field textarea:focus, +.playground-field select:focus { + border-color: var(--wire-color-primary); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 15%, transparent); +} + +.playground-field [aria-invalid="true"] { + border-color: var(--wire-color-danger); +} + +.playground-field em { + min-height: 0.8rem; + color: var(--wire-color-danger); + font-size: 0.65rem; + font-style: normal; +} + +.playground-toggle { + position: relative; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + cursor: pointer; +} + +.playground-toggle input { + position: absolute; + z-index: 1; + inset-block: 0; + inset-inline-end: 0; + width: 2.4rem; + height: 100%; + margin: 0; + opacity: 0; + cursor: pointer; +} + +.playground-toggle i { + position: relative; + width: 2.4rem; + height: 1.4rem; + border: 1px solid var(--wire-color-border); + border-radius: 999px; + background: var(--wire-color-surface-2); + transition: background 150ms ease; +} + +.playground-toggle i::after { + position: absolute; + inset-block-start: 0.19rem; + inset-inline-start: 0.2rem; + width: 0.9rem; + height: 0.9rem; + border-radius: 50%; + background: var(--wire-color-muted); + transition: transform 150ms ease; + content: ""; +} + +.playground-toggle input:checked + i { + background: var(--wire-color-primary); +} + +.playground-toggle input:checked + i::after { + background: var(--wire-color-primary-contrast); + transform: translateX(1rem); +} + +.playground-toggle input:focus-visible + i { + outline: 2px solid var(--wire-color-primary); + outline-offset: 2px; +} + +.playground-empty { + margin: 0; + color: var(--wire-color-muted); + font-size: 0.78rem; + line-height: 1.6; +} + +.detail-content, +.detail-section, +.demo-list { + display: grid; + gap: clamp(2rem, 5vw, 4rem); +} + +.detail-section { + scroll-margin-top: 6rem; +} + +.demo-list { + gap: 2rem; +} + +.pin-length-demo { + display: grid; + width: 100%; + align-content: center; + justify-items: center; + gap: 1rem; +} + +.pin-length-demo .wire-next--pin-input { + width: fit-content; +} + +.pin-length-demo .wire-next__pin-heading { + display: none; +} + +.pin-length-demo .wire-next__pin-cells { + justify-content: center; + overflow: visible; +} + +.detail-events-grid { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.25rem; + background: var(--wire-color-surface); +} + +.detail-events-list { + display: grid; + align-content: start; + padding: 1rem; +} + +.detail-events-list > div { + display: grid; + gap: 0.3rem; + padding: 0.85rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.detail-events-list > div:last-child { + border-bottom: 0; +} + +.detail-events-list code { + width: fit-content; + color: var(--wire-color-primary); + font-size: 0.78rem; + font-weight: 750; +} + +.detail-events-list span { + color: var(--wire-color-muted); + font-size: 0.76rem; + line-height: 1.55; +} + +@media (max-width: 760px) { + .detail-events-grid { + grid-template-columns: 1fr; + } +} + +.demo-case { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.5rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.demo-case-header { + display: flex; + align-items: start; + justify-content: space-between; + gap: 2rem; + padding: 1.5rem; +} + +.demo-case-header h2 { + margin: 0.4rem 0 0; + font-size: 1.4rem; + letter-spacing: -0.035em; +} + +.demo-case-header p { + max-width: 42rem; + margin: 0.45rem 0 0; + color: var(--wire-color-muted); + font-size: 0.84rem; +} + +.demo-case-number { + color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); + font-family: ui-monospace, monospace; + font-size: 1.6rem; + font-weight: 800; +} + +.demo-workbench { + display: grid; + grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr); + border-top: 1px solid var(--wire-color-border); +} + +.demo-canvas { + position: relative; + min-height: 24rem; + overflow: auto; + border-right: 1px solid var(--wire-color-border); + background: + radial-gradient( + circle at 50% 20%, + color-mix(in srgb, var(--wire-color-primary) 12%, transparent), + transparent 48% + ), + var(--wire-color-bg); +} + +.demo-canvas--2 { + background: + radial-gradient( + circle at 20% 20%, + color-mix(in srgb, var(--wire-color-info) 12%, transparent), + transparent 42% + ), + var(--wire-color-bg); +} + +.demo-canvas--3 { + background: + radial-gradient( + circle at 80% 20%, + color-mix(in srgb, var(--wire-color-success) 12%, transparent), + transparent 42% + ), + var(--wire-color-bg); +} + +.demo-browser-chrome { + display: flex; + height: 2.75rem; + align-items: center; + gap: 0.4rem; + padding-inline: 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); +} + +.demo-browser-chrome > span { + width: 0.62rem; + height: 0.62rem; + border-radius: 999px; + background: var(--wire-color-danger); +} + +.demo-browser-chrome > span:nth-child(2) { + background: var(--wire-color-warning); +} + +.demo-browser-chrome > span:nth-child(3) { + background: var(--wire-color-success); +} + +.demo-browser-chrome small { + margin-left: auto; + color: var(--wire-color-muted); + font-size: 0.66rem; + font-weight: 750; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.demo-render { + display: grid; + min-height: 21rem; + place-items: center; + padding: clamp(1.25rem, 5vw, 4rem); +} + +.demo-render > * { + width: min(100%, 58rem); +} + +.demo-render > .wire-action:not(.w-full) { + width: fit-content; +} + +.demo-validation-form { + display: grid; + width: min(100%, 32rem); + gap: 1rem; +} + +.demo-validation-form > .wire-btn { + width: fit-content; +} + +.demo-render .fixed, +.demo-render [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 24rem; +} + +.demo-render .min-h-screen { + min-height: 16rem !important; +} + +.showcase-instance--2 { + max-width: 42rem; +} + +.showcase-instance--3 { + max-width: 58rem; +} + +.demo-code { + display: grid; + min-width: 0; + grid-template-rows: auto 1fr; + background: color-mix(in srgb, var(--wire-color-bg) 82%, black); +} + +.demo-code header { + display: flex; + min-height: 2.75rem; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-inline: 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); +} + +.demo-code header > span { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--wire-color-muted); + font-size: 0.75rem; + font-weight: 750; +} + +.demo-code header small { + color: var(--wire-color-primary); + font-family: ui-monospace, monospace; + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.demo-code pre { + max-width: 100%; + max-height: 24rem; + overflow: auto; + margin: 0; + padding: 1.25rem; + color: var(--wire-color-text); + background: transparent; + font-size: 0.72rem; + line-height: 1.7; + white-space: pre; +} + +.detail-aside { + position: sticky; + top: 6.5rem; +} + +.detail-toc { + display: grid; + gap: 0.25rem; + padding-left: 1rem; + border-left: 1px solid var(--wire-color-border); +} + +.detail-toc strong { + margin-bottom: 0.5rem; + font-size: 0.76rem; +} + +.detail-toc a { + padding-block: 0.35rem; + color: var(--wire-color-muted); + font-size: 0.72rem; + text-decoration: none; +} + +.detail-toc a:hover { + color: var(--wire-color-primary); +} + +.docs-table-wrap { + overflow: auto; + border: 1px solid var(--wire-color-border); + border-radius: 1.25rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.docs-table { + width: 100%; + border-collapse: collapse; + text-align: left; + font-size: 0.78rem; +} + +.docs-table th, +.docs-table td { + padding: 0.85rem 1rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.docs-table th { + color: var(--wire-color-muted); + background: var(--wire-color-surface-2); + font-size: 0.67rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.docs-table tr:last-child td { + border-bottom: 0; +} + +.docs-table code { + padding: 0.18rem 0.38rem; + border-radius: 0.35rem; + color: var(--wire-color-primary); + background: color-mix(in srgb, var(--wire-color-primary) 8%, transparent); + font-size: 0.72rem; +} + +.docs-required { + color: var(--wire-color-danger); + font-weight: 800; +} + +.docs-empty { + display: flex; + align-items: center; + gap: 0.7rem; + padding: 1.25rem; + border: 1px dashed var(--wire-color-border); + border-radius: 1rem; + color: var(--wire-color-muted); +} + +.detail-pagination { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-top: clamp(4rem, 8vw, 7rem); + padding-top: 2rem; + border-top: 1px solid var(--wire-color-border); +} + +.detail-pagination a { + display: grid; + gap: 0.35rem; + padding: 1.15rem; + border: 1px solid var(--wire-color-border); + border-radius: 1rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + text-decoration: none; +} + +.detail-pagination a:last-child { + text-align: right; +} + +.detail-pagination small { + color: var(--wire-color-muted); + font-size: 0.65rem; + text-transform: uppercase; +} + +@media (max-width: 960px) { + .playground-workbench { + grid-template-columns: 1fr; + } + + .playground-preview { + border-right: 0; + border-bottom: 1px solid var(--wire-color-border); + } + + .playground-controls { + max-height: 34rem; + } + + .demo-workbench { + grid-template-columns: 1fr; + } + + .demo-canvas { + border-right: 0; + border-bottom: 1px solid var(--wire-color-border); + } + + .showcase-stats { + grid-template-columns: repeat(2, 1fr); + } + + .showcase-stat:nth-child(2) { + border-right: 0; + } + + .showcase-stat:nth-child(-n + 2) { + border-bottom: 1px solid var(--wire-color-border); + } + + .catalog-grid { + grid-template-columns: 1fr; + } + + .detail-layout { + grid-template-columns: 1fr; + } + + .detail-aside { + display: none; + } +} + +@media (max-width: 720px) { + .showcase-main { + width: min(100% - 1rem, 92rem); + } + + .showcase-title { + font-size: clamp(2.8rem, 15vw, 5rem); + } + + .home-category-grid { + grid-template-columns: 1fr; + } + + .detail-hero { + grid-template-columns: 1fr; + padding: 1.5rem; + border-radius: 1.4rem; + } + + .detail-hero-icon { + display: none; + } + + .detail-hero h1 { + font-size: clamp(2.7rem, 14vw, 4.5rem); + } + + .demo-case-header { + padding: 1.15rem; + } + + .demo-case-number { + display: none; + } + + .demo-render { + min-height: 17rem; + padding: 1rem; + } + + .detail-pagination { + grid-template-columns: 1fr; + } +} diff --git a/examples/component-showcase/package.json b/examples/component-showcase/package.json new file mode 100644 index 00000000..45a019bf --- /dev/null +++ b/examples/component-showcase/package.json @@ -0,0 +1,25 @@ +{ + "name": "component-showcase", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "generate": "node scripts/generate-showcase.mjs", + "dev": "bun run generate && bun run ../../packages/cli/src/index.ts dev .", + "build": "bun run generate && bun run ../../packages/cli/src/index.ts build .", + "typecheck": "tsc --noEmit -p tsconfig.json", + "test": "bun test test", + "check": "bun run generate && bun run typecheck && bun run test && bun run build" + }, + "dependencies": { + "@wrnexus/core": "workspace:*", + "@wrnexus/ui": "workspace:*" + }, + "devDependencies": { + "@iconify-json/lucide": "^1.2.118", + "@iconify/tailwind4": "^1.2.3", + "@tailwindcss/cli": "^4.0.0", + "tailwindcss": "^4.0.0", + "typescript": "^5.5.0" + } +} diff --git a/examples/component-showcase/public/playground.js b/examples/component-showcase/public/playground.js new file mode 100644 index 00000000..5d64f913 --- /dev/null +++ b/examples/component-showcase/public/playground.js @@ -0,0 +1,313 @@ +/* global AbortController, DOMParser, HTMLFormElement, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, Node, URL, URLSearchParams, clearTimeout, document, fetch, navigator, setTimeout, window */ + +(() => { + const SELECTOR = "[data-playground]"; + const DESIGN_DEFAULTS = { + style: "default", + palette: "violet", + mode: "system", + font: "jakarta", + scale: "default", + }; + const htmlPolicy = window.trustedTypes?.createPolicy("wrnexus-playground", { + createHTML: (value) => value, + }); + let request; + let timer; + + function storedDesign() { + const root = document.documentElement.dataset; + return { + style: root.uiStyle || DESIGN_DEFAULTS.style, + palette: root.uiPalette || DESIGN_DEFAULTS.palette, + mode: root.uiMode || DESIGN_DEFAULTS.mode, + font: root.uiFont || DESIGN_DEFAULTS.font, + scale: root.uiScale || DESIGN_DEFAULTS.scale, + }; + } + + function setCookie(name, value) { + document.cookie = `${name}=${encodeURIComponent(value)};path=/;max-age=31536000;samesite=lax`; + } + + function applyDesign(settings, persist = true) { + const root = document.documentElement; + root.dataset.uiStyle = settings.style; + root.dataset.uiPalette = settings.palette; + root.dataset.uiMode = settings.mode; + root.dataset.uiFont = settings.font; + root.dataset.uiScale = settings.scale; + + const dark = + settings.mode === "dark" || + (settings.mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches); + root.dataset.theme = dark ? "dark" : "light"; + + for (const control of document.querySelectorAll("[data-design-setting]")) { + control.value = settings[control.dataset.designSetting] || ""; + } + if (persist) { + setCookie("wrn-ui-style", settings.style); + setCookie("wrn-ui-palette", settings.palette); + setCookie("wrn-ui-mode", settings.mode); + setCookie("wrn-ui-font", settings.font); + setCookie("wrn-ui-scale", settings.scale); + setCookie("wire-theme", dark ? "dark" : "light"); + } + } + + let design = storedDesign(); + applyDesign(design, false); + for (const link of document.querySelectorAll(".docs-directory a[href]")) { + const target = new URL(link.href, window.location.origin); + if (target.pathname === window.location.pathname) link.setAttribute("aria-current", "page"); + } + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => { + if (design.mode === "system") applyDesign(design); + }); + + function sourceAttribute(value) { + return String(value) + .replaceAll("&", "&") + .replaceAll('"', """) + .replaceAll("<", "<") + .replaceAll(">", ">"); + } + + function updateCode(playground) { + const form = playground.querySelector("[data-playground-form]"); + const code = playground.querySelector("[data-playground-code]"); + if (!(form instanceof HTMLFormElement) || !code) return; + + const component = playground.getAttribute("data-playground-component") || "Component"; + const publicTag = playground.getAttribute("data-playground-public-tag") === "true"; + const hasSlot = playground.getAttribute("data-playground-has-slot") === "true"; + const attributes = []; + + for (const field of form.elements) { + if ( + !( + field instanceof HTMLInputElement || + field instanceof HTMLTextAreaElement || + field instanceof HTMLSelectElement + ) || + !field.name.startsWith("pg_") + ) + continue; + + const name = field.name.slice(3); + if (field instanceof HTMLInputElement && field.type === "checkbox") { + if (field.checked) attributes.push(name); + } else if (field.value !== "") { + const value = field.hasAttribute("data-playground-json") + ? `'${field.value.replaceAll("'", "\\'")}'` + : `"${field.value.replaceAll('"', '\\"')}"`; + attributes.push(`${name}=${value}`); + } + } + + const tag = publicTag ? component : "div"; + const mount = publicTag ? [] : [`data-component="${sourceAttribute(component)}"`]; + const lines = [...mount, ...attributes].map((attribute) => ` ${attribute}`).join("\n"); + const opening = lines ? `<${tag}\n${lines}` : `<${tag}`; + code.textContent = hasSlot + ? `${opening}>\n \n` + : `${opening}\n/>`; + } + + function valuesFrom(form) { + const params = new URLSearchParams(); + let valid = true; + + for (const field of form.elements) { + if (!( + field instanceof HTMLInputElement || + field instanceof HTMLTextAreaElement || + field instanceof HTMLSelectElement + )) + continue; + if (!field.name) continue; + + const error = field.closest(".playground-field")?.querySelector("[data-playground-error]"); + if (field.hasAttribute("data-playground-json")) { + try { + JSON.parse(field.value); + field.removeAttribute("aria-invalid"); + if (error) error.textContent = ""; + } catch { + field.setAttribute("aria-invalid", "true"); + if (error) error.textContent = "Enter valid JSON"; + valid = false; + continue; + } + } + + params.set(field.name, field.type === "checkbox" ? String(field.checked) : field.value); + } + + return valid ? params : null; + } + + async function update(playground) { + const form = playground.querySelector("[data-playground-form]"); + const preview = playground.querySelector("[data-playground-preview]"); + const status = playground.querySelector("[data-playground-status]"); + if (!(form instanceof HTMLFormElement) || !preview || !status) return; + + const params = valuesFrom(form); + if (!params) { + status.textContent = "Fix the highlighted JSON value."; + return; + } + + request?.abort(); + request = new AbortController(); + const url = new URL(window.location.href); + for (const key of [...url.searchParams.keys()]) { + if (key.startsWith("pg_")) url.searchParams.delete(key); + } + for (const [key, value] of params) url.searchParams.set(key, value); + + playground.setAttribute("data-updating", "true"); + status.textContent = "Updating preview…"; + + try { + const response = await fetch(url, { + headers: { "x-wrnexus-playground": "1" }, + signal: request.signal, + }); + if (!response.ok) throw new Error(`Preview request failed (${response.status})`); + const responseHtml = await response.text(); + const parsed = new DOMParser().parseFromString( + htmlPolicy ? htmlPolicy.createHTML(responseHtml) : responseHtml, + "text/html", + ); + const next = parsed.querySelector("[data-playground-preview]"); + if (!next) throw new Error("Preview markup was not returned"); + + window.__wrnexusDisposeBehaviors?.(preview); + preview.replaceChildren( + ...Array.from(next.childNodes, (node) => document.importNode(node, true)), + ); + window.__wrnexusHydrateScopes?.(preview); + window.__wrnexusHydrateCsrFetches?.(preview); + status.textContent = "Preview updated"; + } catch (error) { + if (error?.name !== "AbortError") { + status.textContent = error instanceof Error ? error.message : "Unable to update preview"; + } + } finally { + playground.removeAttribute("data-updating"); + } + } + + function schedule(playground) { + updateCode(playground); + clearTimeout(timer); + timer = setTimeout(() => update(playground), 180); + } + + document.addEventListener("input", (event) => { + const playground = event.target.closest?.(SELECTOR); + if (playground) schedule(playground); + }); + + document.addEventListener("change", (event) => { + const playground = event.target.closest?.(SELECTOR); + if (playground) schedule(playground); + }); + + document.addEventListener("reset", (event) => { + const playground = event.target.closest?.(SELECTOR); + if (playground) + setTimeout(() => { + updateCode(playground); + update(playground); + }, 0); + }); + + document.addEventListener("click", async (event) => { + const designToggle = event.target.closest?.("[data-design-panel-toggle]"); + if (designToggle) { + document.documentElement.toggleAttribute("data-design-panel-open"); + return; + } + + if (event.target.closest?.("[data-design-reset]")) { + design = { ...DESIGN_DEFAULTS }; + applyDesign(design); + return; + } + + const copyText = event.target.closest?.("[data-copy-text]"); + if (copyText) { + try { + await navigator.clipboard.writeText(copyText.dataset.copyText || ""); + copyText.setAttribute("data-copied", "true"); + setTimeout(() => copyText.removeAttribute("data-copied"), 1200); + } catch { + // Clipboard access may be blocked in an insecure local context. + } + return; + } + + const menuToggle = event.target.closest?.("[data-docs-menu-toggle]"); + if (menuToggle) { + document.documentElement.toggleAttribute("data-docs-menu-open"); + return; + } + + if (event.target.closest?.("[data-docs-component-link]")) { + document.documentElement.removeAttribute("data-docs-menu-open"); + } + + const copy = event.target.closest?.("[data-playground-copy]"); + if (!copy) return; + const playground = copy.closest(SELECTOR); + const code = playground?.querySelector("[data-playground-code]"); + const status = playground?.querySelector("[data-playground-status]"); + if (!code || !status) return; + + try { + await navigator.clipboard.writeText(code.textContent || ""); + status.textContent = "Component code copied"; + const label = copy.lastChild; + if (label?.nodeType === Node.TEXT_NODE) label.textContent = "Copied"; + setTimeout(() => { + if (label?.nodeType === Node.TEXT_NODE) label.textContent = "Copy"; + }, 1400); + } catch { + status.textContent = "Copy failed. Select the code and copy it manually."; + } + }); + + document.addEventListener("input", (event) => { + const setting = event.target.closest?.("[data-design-setting]"); + if (setting) { + design = { ...design, [setting.dataset.designSetting]: setting.value }; + applyDesign(design); + return; + } + if (!event.target.matches?.("[data-docs-search]")) return; + const query = event.target.value.trim().toLowerCase(); + const links = [...document.querySelectorAll("[data-docs-component-link]")]; + let visible = 0; + for (const link of links) { + const matches = !query || link.textContent.toLowerCase().includes(query); + link.hidden = !matches; + if (matches) visible++; + } + for (const group of document.querySelectorAll(".docs-directory-group")) { + group.hidden = !group.querySelector("[data-docs-component-link]:not([hidden])"); + } + const empty = document.querySelector("[data-docs-empty]"); + if (empty) empty.hidden = visible > 0; + }); + + document.addEventListener("keydown", (event) => { + if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { + event.preventDefault(); + document.querySelector("[data-docs-search]")?.focus(); + } + }); +})(); diff --git a/examples/component-showcase/scripts/generate-showcase.mjs b/examples/component-showcase/scripts/generate-showcase.mjs new file mode 100644 index 00000000..51037a34 --- /dev/null +++ b/examples/component-showcase/scripts/generate-showcase.mjs @@ -0,0 +1,1724 @@ +import { mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from "node:fs"; +import { dirname, join } from "node:path"; +import process from "node:process"; +import { fileURLToPath } from "node:url"; + +const exampleRoot = join(dirname(fileURLToPath(import.meta.url)), ".."); +const workspaceRoot = join(exampleRoot, "..", ".."); +const referencePath = join(workspaceRoot, "packages", "ui", "component-reference.json"); +const uiComponentsPath = join(workspaceRoot, "packages", "ui", "components"); +const pagesDir = join(exampleRoot, "app", "pages"); +const detailPagesDir = join(pagesDir, "components"); +const layoutsDir = join(exampleRoot, "app", "layouts"); +const reference = JSON.parse(readFileSync(referencePath, "utf8")); + +const displayName = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1 $2"); +const baseSlugOf = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(); +const slugCounts = new Map(); +for (const component of reference.components) { + const slug = baseSlugOf(component.name); + slugCounts.set(slug, (slugCounts.get(slug) ?? 0) + 1); +} +const slugOf = (name) => { + const slug = baseSlugOf(name); + if (slugCounts.get(slug) === 1) return slug; + const component = reference.components.find((entry) => entry.name === name); + return `${slug}-${component?.category ?? "component"}`; +}; +const titleCase = (value) => + value + .split("-") + .map((word) => word[0].toUpperCase() + word.slice(1)) + .join(" "); +const identifier = (value) => + value.replace(/(^|[^A-Za-z0-9_])([A-Za-z0-9])/g, (_, _sep, char) => char.toUpperCase()); +const escapeText = (value) => + String(value).replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">"); +// WRN uses braces for reactive expressions. Encode braces inside documentation +// code so hydration keeps them as literal, copyable source text. +const escapeCode = (value) => escapeText(value).replaceAll("{", "{").replaceAll("}", "}"); +const escapeAttribute = (value) => + escapeText(value).replaceAll('"', """).replaceAll("'", "'"); +const jsonAttribute = (value) => escapeAttribute(JSON.stringify(value)); + +function sampleItem(component, index, variation) { + const number = index + 1; + const labels = ["Primary workflow", "Secondary workflow", "Advanced workflow"]; + return { + id: `${slugOf(component.name)}-${variation}-${number}`, + key: `${slugOf(component.name)}-${variation}-${number}`, + value: index === 0 ? "primary" : "secondary", + label: index === 0 ? labels[variation] : "Additional option", + title: index === 0 ? labels[variation] : "Supporting example", + description: + variation === 0 + ? "A clean default configuration for everyday product interfaces." + : variation === 1 + ? "A compact configuration designed for dense application layouts." + : "A richer configuration with more supporting information and actions.", + text: index === 0 ? "A configurable sample message." : "Another configurable message.", + href: `#${slugOf(component.name)}-demo`, + actionHref: `#${slugOf(component.name)}-demo`, + actionLabel: variation === 2 ? "Explore workflow" : "View details", + icon: + variation === 0 + ? "icon-[lucide--sparkles]" + : variation === 1 + ? "icon-[lucide--zap]" + : "icon-[lucide--circle-check]", + iconClass: + variation === 0 + ? "icon-[lucide--sparkles]" + : variation === 1 + ? "icon-[lucide--zap]" + : "icon-[lucide--circle-check]", + variant: variation === 0 ? "primary" : variation === 1 ? "secondary" : "success", + status: variation === 2 ? "Complete" : "Active", + time: variation === 0 ? "09:30" : variation === 1 ? "10:15" : "11:45", + current: index === 0, + selected: index === 0, + checked: index === 0, + disabled: variation === 2 && index === 1, + outgoing: index === 1, + open: true, + number, + count: number * (variation + 2) * 8, + percentage: variation === 0 ? 72 : variation === 1 ? 48 : 91, + color: variation === 0 ? "#7c3aed" : variation === 1 ? "#0284c7" : "#059669", + target: "_self", + ariaLabel: `Open ${labels[variation].toLowerCase()} ${number}`, + items: [ + { label: "Nested option A", value: "nested-a" }, + { label: "Nested option B", value: "nested-b" }, + ], + links: [ + { label: "Documentation", href: "#documentation" }, + { label: "API reference", href: "#api-reference" }, + ], + values: ["Included", variation === 2 ? "Unlimited" : "Standard"], + }; +} + +function sampleArray(prop, component, variation) { + const name = prop.name.toLowerCase(); + if (name.includes("chartlabel") || name === "labels") + return variation === 1 ? ["Q1", "Q2", "Q3", "Q4"] : ["Mon", "Tue", "Wed", "Thu", "Fri"]; + if (name === "data" || name.includes("series")) + return variation === 0 + ? [18, 32, 27, 48, 64] + : variation === 1 + ? [64, 51, 43, 35] + : [24, 46, 72, 88]; + if (name === "pages") + return [ + { number: 1, href: "#page-1", current: variation === 0, ellipsis: false }, + { number: 2, href: "#page-2", current: variation !== 0, ellipsis: false }, + { number: 3, href: "#page-3", current: false, ellipsis: false }, + ]; + if (name === "plans") + return [ + { name: "Starter", label: "Starter", value: "starter" }, + { name: "Pro", label: "Pro", value: "pro" }, + { name: "Scale", label: "Scale", value: "scale" }, + ]; + if (name === "features") + return [ + { label: "Team members", values: ["5", "Unlimited", "Unlimited"] }, + { label: "Support", values: ["Email", "Priority", "Dedicated"] }, + { label: "Audit history", values: ["7 days", "90 days", "Custom"] }, + ]; + if (name === "logos") + return ["Acme", "Northstar", "Vertex", "Orbit"].map((logo, index) => ({ + name: logo, + alt: `${logo} logo`, + href: `#${slugOf(component.name)}-demo`, + external: false, + src: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Crect width='120' height='36' rx='8' fill='%23${variation === 2 ? "059669" : variation === 1 ? "0284c7" : "7c3aed"}'/%3E%3Ctext x='60' y='23' text-anchor='middle' font-family='Arial' font-size='13' fill='white'%3E${logo}%3C/text%3E%3C/svg%3E`, + order: index, + })); + if (name.includes("navigationcolumns")) + return [ + { + title: "Product", + links: [ + { label: "Overview", href: "#overview" }, + { label: "Pricing", href: "#pricing" }, + ], + }, + { + title: "Resources", + links: [ + { label: "Guides", href: "#guides" }, + { label: "Support", href: "#support" }, + ], + }, + ]; + if (name === "sections") + return [ + { + label: "Product", + value: "product", + description: "Product navigation examples.", + items: [ + { label: "Platform", href: "#platform", description: "Explore the platform." }, + { label: "Security", href: "#security", description: "Review security controls." }, + ], + }, + { + label: "Developers", + value: "developers", + description: "Developer resources.", + items: [{ label: "Documentation", href: "#docs", description: "Read the guides." }], + }, + ]; + if (name === "toasts") + return [ + { + title: variation === 2 ? "Deployment complete" : "Changes saved", + description: + variation === 2 + ? "The production release completed successfully." + : "Your settings were saved successfully.", + variant: "success", + icon: "icon-[lucide--circle-check]", + open: true, + dismissible: true, + dismissLabel: "Dismiss notification", + }, + ]; + if (name === "stages") + return [ + { + title: "Event received", + description: "A customer event started the flow.", + icon: "icon-[lucide--webhook]", + }, + { + title: "Delivery", + description: "Eligible channels are selected.", + icon: "icon-[lucide--send]", + items: [{ label: "Email" }, { label: "SMS" }], + }, + ]; + return [sampleItem(component, 0, variation), sampleItem(component, 1, variation)]; +} + +function defaultValue(prop) { + if (prop.default === null) return undefined; + if (prop.default === "true") return true; + if (prop.default === "false") return false; + if (/^-?\d+(?:\.\d+)?$/.test(prop.default ?? "")) return Number(prop.default); + if (/^".*"$/.test(prop.default ?? "")) { + try { + return JSON.parse(prop.default); + } catch { + return undefined; + } + } + return undefined; +} + +function sampleValue(prop, component, variation) { + const name = prop.name.toLowerCase(); + if (component.name === "AdvancedSelect") { + const configuration = advancedSelectConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "ComboBox") { + const configuration = comboboxConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "PinInput") { + const configuration = pinInputConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "StrongPassword") { + const configuration = strongPasswordConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "TogglePassword") { + const configuration = togglePasswordConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + const isArray = prop.default === "[]" || prop.type.includes("[]") || prop.type === "array"; + const isObject = prop.default === "{}" || prop.type === "object"; + if (isArray) return sampleArray(prop, component, variation); + if (isObject) return sampleItem(component, 0, variation); + + if (name === "class") return `showcase-instance showcase-instance--${variation + 1}`; + if (component.name === "Button") { + const configurations = [ + { + label: "Save & Submit", + as: "button", + type: "submit", + }, + { + label: "Learn more", + as: "a", + href: "#button-demo", + variant: "outline", + size: "sm", + icon: "icon-[lucide--arrow-right]", + iconPosition: "end", + }, + { label: "Upgrade plan", as: "button", variant: "secondary", size: "lg", pill: true }, + { + label: "Open settings", + as: "button", + ariaLabel: "Open settings", + variant: "ghost", + size: "icon", + icon: "icon-[lucide--settings]", + }, + { + label: "Delete project", + as: "button", + variant: "destructive", + icon: "icon-[lucide--trash-2]", + }, + { label: "Read documentation", as: "a", href: "#button-demo", variant: "link" }, + { label: "Publish", as: "button", loadingLabel: "Publishing…", loading: true }, + { label: "Unavailable action", as: "button", disabled: true, variant: "outline" }, + ]; + const configuration = configurations[variation] ?? configurations[0]; + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (name === "controlclass") return variation === 2 ? "shadow-xl" : ""; + if (prop.type === "boolean") { + if (name === "compact") return variation === 1; + if (name === "fullwidth") return variation === 2; + if (name === "loading" || name === "disabled") return false; + if (name === "open" || name === "visible" || name === "dismissible" || name.startsWith("show")) + return true; + return defaultValue(prop) ?? variation === 2; + } + if (prop.type === "number") { + if (name === "value") return 36 + variation * 24; + if (name.includes("count") || name.includes("total") || name.includes("page")) + return 3 + variation * 4; + return defaultValue(prop) ?? variation + 1; + } + if (name.includes("arialabel")) return `${displayName(component.name)} ${variation + 1} example`; + if (name === "title" || name.endsWith("title")) + return variation === 0 + ? `${displayName(component.name)} example` + : variation === 1 + ? `Compact ${displayName(component.name)}` + : `Advanced ${displayName(component.name)}`; + if (name.includes("description") || name === "summary") + return variation === 0 + ? `A polished default ${displayName(component.name).toLowerCase()} for a modern application.` + : variation === 1 + ? "A compact configuration for dashboards and dense product surfaces." + : "A richer configuration demonstrating additional content and hierarchy."; + if (name === "label" || name.endsWith("label")) + return variation === 0 + ? displayName(component.name) + : variation === 1 + ? "Compact example" + : "Advanced example"; + if (name.includes("placeholder")) + return variation === 2 ? "Search by name, email, or identifier" : "Enter a sample value"; + if (name.includes("email")) return variation === 2 ? "team@example.com" : "developer@example.com"; + if (name.includes("href") || name === "action") { + if (component.name === "Button" && variation === 0) return ""; + return `#${slugOf(component.name)}-demo`; + } + if (name === "icon") + return variation === 0 + ? "" + : variation === 1 + ? "icon-[lucide--arrow-right]" + : "icon-[lucide--trash-2]"; + if (name === "variant") + if (component.name === "Button") + return variation === 0 ? "primary" : variation === 1 ? "secondary" : "danger"; + if (name === "variant") + return variation === 0 + ? defaultValue(prop) || "primary" + : variation === 1 + ? "secondary" + : "success"; + if (name === "size") + return variation === 0 ? defaultValue(prop) || "md" : variation === 1 ? "sm" : "lg"; + if (name === "align") return variation === 1 ? "center" : variation === 2 ? "end" : "start"; + if (name === "value") return `sample-${variation + 1}`; + if (name.includes("count") || name.includes("total") || name.includes("page")) return undefined; + if (prop.required) { + return `${displayName(component.name)} sample`; + } + return undefined; +} + +function componentAttributes(component, variation, overrides = {}) { + const attributes = [`data-component="${component.mount}"`]; + for (const prop of component.props) { + const value = Object.hasOwn(overrides, prop.name) + ? overrides[prop.name] + : sampleValue(prop, component, variation); + if (value === undefined) continue; + const encoded = + typeof value === "object" ? jsonAttribute(value) : escapeAttribute(String(value)); + attributes.push(`${prop.name}="${encoded}"`); + } + return attributes; +} + +function componentMount(component, variation = 0, overrides = {}) { + const slotMarkup = component.slots + .map((slot) => + slot === "default" + ? defaultSlotMarkup(component, variation) + : `

    ${escapeText(displayName(slot))} slot
    `, + ) + .join(""); + return `
    ${slotMarkup}
    `; +} + +const structuralDefaultSlots = new Set([ + "Accordion", + "AspectRatio", + "AutoGrid", + "card", + "Cluster", + "CodeTabs", + "Container", + "ContentSection", + "FilterBar", + "ScrollArea", + "Section", + "SidebarLayout", + "SplitLayout", + "Stack", + "Sticky", + "StickyLayout", + "Surface", + "Typography", + "VisuallyHidden", + "Well", + "WideContainer", +]); + +function defaultSlotMarkup(component, variation) { + if (component.name === "Select") + return ''; + if (component.name === "Table") + return "NameStatusProductionActiveStagingReady"; + if (component.name === "Tooltip") + return ''; + if (!structuralDefaultSlots.has(component.name)) return ""; + return `
    ${variation === 2 ? "Rich supporting content with additional context." : "Composable content area."}
    `; +} + +function sourceSnippet(component, variation, overrides = {}) { + const attributes = component.props.flatMap((prop) => { + const value = Object.hasOwn(overrides, prop.name) + ? overrides[prop.name] + : sampleValue(prop, component, variation); + if (value === undefined || value === "" || prop.name === "class") return []; + const declaredDefault = defaultValue(prop); + if ( + declaredDefault !== undefined && + typeof value !== "object" && + String(value) === String(declaredDefault) + ) + return []; + if (typeof value === "object") { + const serialized = JSON.stringify(value, null, 2) + .replaceAll("'", "\\'") + .replaceAll("\n", "\n "); + return [`${prop.name}='${serialized}'`]; + } + return [`${prop.name}="${String(value).replaceAll('"', '\\"')}"`]; + }); + const formattedAttributes = attributes.length ? `\n ${attributes.join("\n ")}` : ""; + const hasPublicComponentTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount); + const usesSlot = component.slots.some( + (slot) => slot !== "default" || defaultSlotMarkup(component, variation) !== "", + ); + const slotMarkup = usesSlot + ? `\n \n` + : ""; + + if (hasPublicComponentTag) { + const source = slotMarkup + ? `<${component.mount}${formattedAttributes}>${slotMarkup}` + : formattedAttributes + ? `<${component.mount}${formattedAttributes}\n/>` + : `<${component.mount} />`; + return escapeCode(source); + } + + const mountAttribute = `data-component="${component.mount}"`; + const source = slotMarkup + ? `${slotMarkup}` + : ``; + return escapeCode(source); +} + +function propsTable(component) { + if (component.props.length === 0) + return `
    No props. Compose this component with slots.
    `; + return `
    ${component.props + .map( + (prop) => + ``, + ) + .join("")}
    PropTypeDefaultRequired
    ${escapeCode(prop.name)}${escapeText(prop.type)}${escapeCode(prop.default ?? "—")}${prop.required ? 'Yes' : "No"}
    `; +} + +function playgroundValue(prop, component) { + const sampled = sampleValue(prop, component, 0); + const value = sampled === undefined ? (defaultValue(prop) ?? "") : sampled; + return typeof value === "object" ? JSON.stringify(value, null, 2) : String(value); +} + +function playgroundStateName(prop) { + return `playground_${prop.name.replace(/[^A-Za-z0-9_$]/g, "_")}`; +} + +function playgroundStates(component) { + return component.props + .map((prop) => { + const initial = playgroundValue(prop, component); + return ` state ${playgroundStateName(prop)} = ctx.url.searchParams.get("pg_${prop.name}") ?? ${JSON.stringify(initial)}`; + }) + .join("\n"); +} + +function playgroundMount(component) { + const attributes = [ + `data-component="${component.mount}"`, + ...component.props.map((prop) => `${prop.name}="{${playgroundStateName(prop)}}"`), + ]; + const slotMarkup = component.slots + .map((slot) => + slot === "default" + ? defaultSlotMarkup(component, 0) + : `
    ${escapeText(displayName(slot))} slot
    `, + ) + .join(""); + return `
    ${slotMarkup}
    `; +} + +function playgroundControl(prop, component) { + const value = playgroundValue(prop, component); + const id = `playground-${slugOf(component.name)}-${prop.name}`; + const label = escapeText(displayName(prop.name)); + const meta = `${escapeText(prop.type)}${prop.required ? " · required" : ""}`; + + if (prop.type === "boolean") { + return ``; + } + + const structured = + prop.default === "[]" || + prop.default === "{}" || + prop.type === "array" || + prop.type === "object" || + prop.type.includes("[]"); + if (structured) { + return ``; + } + + const options = playgroundOptions(prop, component, value); + if (options.length > 1) { + return ``; + } + + const inputType = + prop.type === "number" + ? "number" + : prop.name.toLowerCase().includes("color") && /^#[0-9a-f]{6}$/i.test(value) + ? "color" + : "text"; + return ``; +} + +const commonPlaygroundOptions = { + align: ["start", "center", "end"], + alignment: ["start", "center", "end"], + as: ["", "button", "a"], + color: ["primary", "secondary", "success", "warning", "danger", "info"], + direction: ["row", "column"], + iconposition: ["start", "end"], + method: ["get", "post"], + orientation: ["horizontal", "vertical"], + position: ["top", "right", "bottom", "left", "start", "end"], + size: ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"], + target: ["_self", "_blank", "_parent", "_top"], + variant: ["default", "outline", "secondary", "ghost", "destructive", "link"], +}; + +function playgroundOptions(prop, component, currentValue) { + if (prop.type !== "string" || prop.name === "class" || prop.name === "controlClass") return []; + + const discovered = new Set(); + const add = (value) => { + if (typeof value === "string" && value.length <= 40) discovered.add(value); + }; + + const common = commonPlaygroundOptions[prop.name.toLowerCase()] ?? []; + for (const option of common) add(option); + if (component.name === "Button" && prop.name === "type") { + for (const option of ["button", "submit", "reset"]) add(option); + } + + const sourcePath = join(uiComponentsPath, `${component.name}.wrn`); + try { + const source = readFileSync(sourcePath, "utf8"); + const escapedName = prop.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + const patterns = [ + new RegExp(`\\b${escapedName}\\s*={2,3}\\s*["']([^"'\\n]+)["']`, "g"), + new RegExp(`["']([^"'\\n]+)["']\\s*={2,3}\\s*\\b${escapedName}\\b`, "g"), + ]; + for (const pattern of patterns) { + for (const match of source.matchAll(pattern)) add(match[1]); + } + } catch { + // The generated reference can include virtual components without a same-name source file. + } + + if (common.length === 0 && discovered.size < 2) return []; + + const values = new Set(); + if (typeof currentValue === "string" && currentValue.length <= 40) values.add(currentValue); + const declaredDefault = defaultValue(prop); + if (typeof declaredDefault === "string" && declaredDefault.length <= 40) + values.add(declaredDefault); + for (const option of discovered) values.add(option); + + return [...values]; +} + +function playgroundSection(component) { + const controls = component.props.map((prop) => playgroundControl(prop, component)).join(""); + const publicTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount); + return `
    +
    Interactive playground

    Configure ${escapeText(displayName(component.name))}

    Change any prop and inspect the server-rendered component immediately.

    +
    +
    +
    Live preview
    +
    ${playgroundMount(component)}
    +
    +
    Component code
    + 
    ${sourceSnippet(component, 0)}
    +
    +
    +
    +
    +
    Component props${component.props.length} controls
    +
    ${controls || '

    This component has no declared props. Its slot content remains composable.

    '}
    +
    +
    +
    `; +} + +const defaultUses = [ + { + eyebrow: "Recommended", + title: "Production default", + description: "Balanced spacing, hierarchy, and content for the most common product workflow.", + }, + { + eyebrow: "Dense UI", + title: "Compact application", + description: + "A tighter variation for dashboards, side panels, tables, and operational interfaces.", + }, + { + eyebrow: "Extended", + title: "Rich configuration", + description: + "A more expressive variation using additional data, stronger emphasis, and optional states.", + }, +]; + +const buttonUses = [ + { + eyebrow: "Default", + title: "Primary action", + description: "The standard high-emphasis action for forms and product workflows.", + }, + { + eyebrow: "Outline · Small", + title: "Secondary navigation", + description: "A compact link button with an end icon and restrained emphasis.", + }, + { + eyebrow: "Secondary · Large · Pill", + title: "Prominent rounded action", + description: "A large secondary action using the optional pill shape.", + }, + { + eyebrow: "Ghost · Icon", + title: "Accessible icon action", + description: "An icon-only control with its accessible name supplied through props.", + }, + { + eyebrow: "Destructive", + title: "Dangerous action", + description: "A destructive treatment for irreversible or high-risk operations.", + }, + { + eyebrow: "Link", + title: "Inline action", + description: "A low-chrome action that behaves and reads like an inline link.", + }, + { + eyebrow: "Loading", + title: "Pending action", + description: "The button owns its busy state, loading label, spinner, and disabled behavior.", + }, + { + eyebrow: "Disabled", + title: "Unavailable action", + description: "A visibly and semantically disabled control.", + }, +]; + +const advancedSelectTitles = [ + "Default advanced select", + "Grouped options", + "Fixed-position dropdown", + "Placeholder with icon", + "Allow empty selection", + "Multiple selection", + "Multiple selection with optgroups", + "Multiple selection with option templates", + "Multiple selection with counter", + "Multiple selection with conditional counter", + "Counter with option templates", + "Searchable dropdown", + "Minimum search length", + "Search result limit", + "Scroll to selected option", + "Search match mode", + "Search labels and descriptions", + "Tag-style selection", + "Disabled tag selection", + "Option template with icons", + "Option template with avatars", + "Option template with color indicators", + "Advanced select sizes", + "Disabled advanced select", + "Inside a modal", + "Validation states", + "Dynamic validation styling", + "Add or remove options", + "Add or remove options in multiple mode", + "Set a single value programmatically", + "Set multiple values programmatically", + "Remote data source", + "Remote data source (multiple)", + "Remote data tags", + "Option templates with remote data", + "Conditional counter with remote data", + "Avatar template with remote data", + "Preselected values", + "Infinite scroll", + "Inside overflow-hidden containers", + "Destroy and reinitialize", +]; + +const advancedSelectUses = advancedSelectTitles.map((title, index) => ({ + eyebrow: index < 11 ? "Selection" : index < 23 ? "Search & templates" : "Advanced behavior", + title, + description: `Live ${title.toLowerCase()} configuration with copyable component code.`, +})); + +function advancedSelectConfiguration(variation) { + const title = advancedSelectTitles[variation] ?? advancedSelectTitles[0]; + const lower = title.toLowerCase(); + const options = [ + { + value: "design", + label: "Design", + description: "Product and visual design", + icon: "icon-[lucide--palette]", + color: "#8b5cf6", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E", + }, + { + value: "engineering", + label: "Engineering", + description: "Platform and application engineering", + icon: "icon-[lucide--code-2]", + color: "#0ea5e9", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E", + }, + { + value: "growth", + label: "Growth", + description: "Marketing and customer growth", + icon: "icon-[lucide--trending-up]", + color: "#10b981", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E", + }, + { value: "support", label: "Support", description: "Customer operations", disabled: false }, + ]; + const multiple = lower.includes("multiple") || lower.includes("tags"); + const remote = lower.includes("remote") || lower.includes("infinite"); + const grouped = lower.includes("group"); + return { + label: title, + name: `advanced-select-${variation + 1}`, + value: + multiple || lower.includes("placeholder") + ? "" + : lower.includes("preselected") + ? "engineering" + : "design", + values: multiple ? ["design", "engineering"] : [], + options: grouped ? [] : options, + groups: grouped + ? [ + { label: "Product", options: options.slice(0, 2) }, + { label: "Business", options: options.slice(2) }, + ] + : [], + placeholder: lower.includes("placeholder") ? "Choose a workspace" : "Choose a team", + placeholderIcon: lower.includes("placeholder") ? "icon-[lucide--building-2]" : "", + multiple, + searchable: lower.includes("search") || remote || variation === 0, + allowEmpty: lower.includes("empty"), + tags: lower.includes("tag"), + disabled: lower.includes("disabled"), + required: lower.includes("validation"), + invalid: false, + validationMessage: "", + minSearchLength: lower.includes("minimum") ? 3 : remote && !lower.includes("infinite") ? 2 : 0, + searchResultLimit: lower.includes("result limit") ? 3 : 0, + searchMode: lower.includes("match mode") ? "startsWith" : "contains", + showCounter: lower.includes("counter"), + maxSelections: lower.includes("conditional") ? 3 : 0, + optionTemplate: lower.includes("avatar") + ? "avatar" + : lower.includes("color") + ? "color" + : lower.includes("icon") || lower.includes("template") + ? "icon" + : "default", + fixed: lower.includes("fixed") || lower.includes("overflow"), + remote, + remoteUrl: remote ? "/api/teams" : "", + infinite: lower.includes("infinite"), + hasMore: lower.includes("infinite"), + size: lower.includes("sizes") ? "lg" : "default", + }; +} + +const comboboxTitles = [ + "Default autocomplete", + "Local HTML options", + "Grouped suggestions", + "Minimum search length", + "Search result limit", + "Starts-with matching", + "Search labels and descriptions", + "Suggestions with icons", + "Suggestions with avatars", + "Suggestions with color indicators", + "Clearable value", + "Custom text values", + "Preselected value", + "Disabled combobox", + "Validation state", + "Remote data with automatic preload", + "Remote search API", + "Remote query parameters", + "Infinite remote suggestions", + "Fixed-position suggestions", + "JavaScript methods", +]; + +const comboboxUses = comboboxTitles.map((title, index) => ({ + eyebrow: index < 7 ? "Autocomplete" : index < 15 ? "Templates & states" : "Remote & API", + title, + description: `Live ${title.toLowerCase()} combobox with editable autocomplete and copyable component code.`, +})); + +function comboboxConfiguration(variation) { + const title = comboboxTitles[variation] ?? comboboxTitles[0]; + const lower = title.toLowerCase(); + const options = [ + { + value: "design", + label: "Design", + description: "Product and visual design", + icon: "icon-[lucide--palette]", + color: "#8b5cf6", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E", + }, + { + value: "engineering", + label: "Engineering", + description: "Platform and application engineering", + icon: "icon-[lucide--code-2]", + color: "#0ea5e9", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E", + }, + { + value: "growth", + label: "Growth", + description: "Marketing and customer growth", + icon: "icon-[lucide--trending-up]", + color: "#10b981", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E", + }, + { + value: "support", + label: "Support", + description: "Customer operations", + icon: "icon-[lucide--life-buoy]", + color: "#f59e0b", + }, + ]; + const remote = + lower.includes("remote") || lower.includes("infinite") || lower.includes("query parameter"); + const grouped = lower.includes("grouped"); + return { + label: title, + name: `combobox-${variation + 1}`, + value: lower.includes("preselected") ? "engineering" : "", + options: grouped ? [] : options, + groups: grouped + ? [ + { label: "Product", options: options.slice(0, 2) }, + { label: "Business", options: options.slice(2) }, + ] + : [], + placeholder: remote ? "Search remote teams" : "Search teams", + allowCustomValue: lower.includes("custom"), + clearable: true, + disabled: lower.includes("disabled"), + required: lower.includes("validation"), + invalid: false, + validationMessage: "", + minSearchLength: lower.includes("minimum") ? 3 : remote ? 2 : 0, + searchResultLimit: lower.includes("result limit") ? 2 : 0, + searchMode: lower.includes("starts-with") ? "startsWith" : "contains", + optionTemplate: lower.includes("avatar") + ? "avatar" + : lower.includes("color") + ? "color" + : lower.includes("icon") + ? "icon" + : "default", + fixed: lower.includes("fixed"), + remote, + remoteUrl: remote ? "/api/teams" : "", + remoteQueryParam: "q", + remoteAutoLoad: true, + infinite: lower.includes("infinite"), + hasMore: lower.includes("infinite"), + }; +} + +const pinInputTitles = [ + "Default four-digit PIN", + "Different lengths", + "Pre-filled verification code", + "Masked security PIN", + "Alphanumeric regex", + "Grouped code with separator", + "Paste from clipboard", + "Disabled PIN input", + "Read-only code", + "Validation state", + "Supporting help text", + "Large PIN cells", + "Custom placeholder", + "Automatic form submission", + "Completion events", + "JavaScript methods", +]; + +const pinInputUses = pinInputTitles.map((title, index) => ({ + eyebrow: index < 7 ? "Entry behavior" : index < 13 ? "States & design" : "Automation", + title, + description: `Live ${title.toLowerCase()} example with keyboard navigation, filtering, and copyable component code.`, +})); + +function pinInputConfiguration(variation) { + const title = pinInputTitles[variation] ?? pinInputTitles[0]; + const lower = title.toLowerCase(); + const fourDigits = lower.includes("four-digit") || lower.includes("security pin"); + return { + label: title, + name: `pin-input-${variation + 1}`, + value: lower.includes("pre-filled") ? "482915" : lower.includes("read-only") ? "739204" : "", + length: fourDigits ? 4 : 6, + pattern: lower.includes("alphanumeric") ? "[A-Z0-9]" : "[0-9]", + inputMode: lower.includes("alphanumeric") ? "text" : "numeric", + placeholder: lower.includes("custom placeholder") ? "•" : "○", + masked: lower.includes("masked"), + disabled: lower.includes("disabled"), + readonly: lower.includes("read-only"), + required: lower.includes("validation"), + invalid: false, + validationMessage: "", + allowPaste: true, + separator: lower.includes("separator") ? "–" : "", + groupSize: lower.includes("separator") ? 3 : 0, + helpText: lower.includes("help text") + ? "Enter the code sent to your registered email address." + : "", + autoSubmit: lower.includes("automatic"), + size: lower.includes("large") ? "lg" : "default", + }; +} + +const strongPasswordTitles = [ + "Live strength meter", + "Requirements and hint text", + "Requirements in a popover", + "Custom special characters", + "Optional requirements", + "Disabled password strength", +]; + +const strongPasswordUses = strongPasswordTitles.map((title, index) => ({ + eyebrow: index < 3 ? "Strength feedback" : "Configuration", + title, + description: `Live ${title.toLowerCase()} example with accessible scoring feedback and copyable component code.`, +})); + +function strongPasswordConfiguration(variation) { + const title = strongPasswordTitles[variation] ?? strongPasswordTitles[0]; + const lower = title.toLowerCase(); + return { + label: title, + name: `strong-password-${variation + 1}`, + value: lower.includes("live") ? "Northstar!2026" : "", + placeholder: "Create a strong password", + autocomplete: "new-password", + minLength: 8, + specialCharactersSet: lower.includes("custom") ? "@#_-." : "!@#$%^&*()_+-=[]{}|;:,.<>?", + requireLowercase: true, + requireUppercase: true, + requireNumber: true, + requireSpecialCharacter: !lower.includes("optional"), + showRequirements: !lower.includes("live"), + presentation: lower.includes("popover") ? "popover" : "inline", + hintText: lower.includes("hint") + ? "Use a unique password you do not use for another account." + : "", + disabled: lower.includes("disabled"), + readonly: false, + required: false, + invalid: false, + validationMessage: "", + }; +} + +const togglePasswordTitles = [ + "Inline visibility button", + "Checkbox-controlled toggle", + "Synchronized password fields", + "Without visibility toggle", + "Supporting help text", + "Required validation", + "Disabled password", + "Read-only password", + "Large password field", + "Toggle events", +]; + +const togglePasswordUses = togglePasswordTitles.map((title, index) => ({ + eyebrow: index < 4 ? "Visibility" : index < 8 ? "Forms & states" : "Design & events", + title, + description: `Live ${title.toLowerCase()} example with accessible visibility controls and copyable component code.`, +})); + +function togglePasswordConfiguration(variation) { + const title = togglePasswordTitles[variation] ?? togglePasswordTitles[0]; + const lower = title.toLowerCase(); + const checkbox = lower.includes("checkbox"); + const synchronized = lower.includes("synchronized"); + return { + label: synchronized ? "Passwords" : lower.includes("inline") ? "Password" : title, + name: `toggle-password-${variation + 1}`, + value: + lower.includes("inline") || checkbox || lower.includes("read-only") ? "Northstar!2026" : "", + placeholder: "Enter your password", + autocomplete: "current-password", + minlength: lower.includes("validation") ? "8" : "", + maxlength: "128", + pattern: "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", + fields: synchronized + ? [ + { + label: "New password", + name: "new-password", + placeholder: "Enter new password", + autocomplete: "new-password", + }, + { + label: "Current password", + name: "current-password", + value: "Northstar!2026", + autocomplete: "current-password", + }, + ] + : [], + visible: false, + toggleable: !lower.includes("without"), + toggleMode: checkbox ? "checkbox" : "button", + checkboxLabel: "Show password", + disabled: lower.includes("disabled"), + readonly: lower.includes("read-only"), + required: lower.includes("validation"), + helpText: lower.includes("help text") + ? "Use at least eight characters and avoid passwords used on other sites." + : "", + validationMessage: "", + invalid: false, + size: lower.includes("large") ? "lg" : "default", + }; +} + +const demoUses = (component) => + component.name === "Button" + ? buttonUses + : component.name === "AdvancedSelect" + ? advancedSelectUses + : component.name === "ComboBox" + ? comboboxUses + : component.name === "PinInput" + ? pinInputUses + : component.name === "StrongPassword" + ? strongPasswordUses + : component.name === "TogglePassword" + ? togglePasswordUses + : defaultUses; + +function eventDocumentation(component) { + if ( + !["AdvancedSelect", "ComboBox", "PinInput", "StrongPassword", "TogglePassword"].includes( + component.name, + ) + ) + return ""; + const selector = + component.name === "ComboBox" + ? "[data-wrn-combobox]" + : component.name === "PinInput" + ? "[data-wrn-pin-input]" + : component.name === "StrongPassword" + ? "[data-wrn-strong-password]" + : component.name === "TogglePassword" + ? "[data-wrn-toggle-password]" + : "[data-wrn-select]"; + const events = + component.name === "PinInput" + ? [ + ["input", "Fires after any PIN cell input is processed."], + ["change", "Fires when the combined PIN value changes."], + ["complete", "Fires when every PIN cell contains an accepted character."], + ["paste", "Fires after clipboard content is filtered and distributed."], + ["clear", "Fires after the complete PIN value is cleared."], + ["error", "Fires when component configuration, such as regex, is invalid."], + ] + : component.name === "StrongPassword" + ? [ + ["input", "Fires as the password value changes."], + ["change", "Fires when the password input commits a change."], + ["strength", "Fires with the current score, percentage, and strength level."], + ] + : component.name === "TogglePassword" + ? [ + ["input", "Fires whenever the password value receives user input."], + ["change", "Fires when the password field commits a changed value."], + ["toggle", "Fires after password visibility changes."], + ] + : [ + ["search", "Fires whenever the autocomplete query changes."], + ["select", "Fires after an option is selected by pointer or keyboard."], + ["change", "Fires when the selected value changes or is cleared."], + ["clear", "Fires after the current selection is cleared."], + ["open", "Fires when the suggestion dropdown opens."], + ["close", "Fires when the suggestion dropdown closes."], + ["load", "Fires after a remote request succeeds."], + ["error", "Fires when a remote request fails."], + ]; + const primaryEvent = + component.name === "PinInput" + ? "complete" + : component.name === "TogglePassword" + ? "toggle" + : "select"; + const secondaryEvent = + component.name === "PinInput" + ? "paste" + : component.name === "TogglePassword" + ? "input" + : "load"; + const listenerCode = `const component = document.querySelector("${selector}") + +component.addEventListener("${primaryEvent}", (event) => { + console.log(event.detail.value) + console.log(event.detail.complete) +}) + +component.addEventListener("${secondaryEvent}", (event) => { + console.log(event.detail) +})`; + return `
    Component events

    Respond to every interaction

    Events are declared with @event, bubble from the component root, and expose their state through event.detail.

    ${events.map(([name, description]) => `
    @${name}${description}
    `).join("")}
    Event listeners.js
    ${escapeCode(listenerCode)}
    `; +} + +function detailPage(component, categoryComponents) { + const index = categoryComponents.findIndex((item) => item.name === component.name); + const previous = categoryComponents[index - 1]; + const next = categoryComponents[index + 1]; + const uses = demoUses(component); + const demos = uses + .map((useCase, variation) => { + const isPinLengthDemo = component.name === "PinInput" && variation === 1; + const pinLengths = [3, 5, 7]; + const mount = isPinLengthDemo + ? `
    ${pinLengths + .map((length) => + componentMount(component, variation, { + label: `${length}-digit code`, + name: `pin-length-${length}`, + length, + }), + ) + .join("")}
    ` + : componentMount(component, variation); + const snippet = isPinLengthDemo + ? pinLengths + .map((length) => + sourceSnippet(component, variation, { + label: `${length}-digit code`, + name: `pinLength${length}`, + length, + }), + ) + .join("\n\n") + : sourceSnippet(component, variation); + const validationSchema = + component.name === "AdvancedSelect" && variation === 25 + ? "advanced-select-validation" + : component.name === "AdvancedSelect" && variation === 26 + ? "advanced-select-dynamic-validation" + : component.name === "ComboBox" && variation === 14 + ? "combobox-validation" + : component.name === "PinInput" && variation === 9 + ? "pin-input-validation" + : component.name === "TogglePassword" && variation === 5 + ? "toggle-password-validation" + : ""; + const preview = validationSchema + ? `
    ${mount}
    ` + : mount; + return ` +
    +
    +
    ${useCase.eyebrow}

    ${useCase.title}

    ${useCase.description}

    + 0${variation + 1} +
    +
    +
    +
    Live preview
    +
    ${preview}
    +
    +
    +
    Component usage.wrn
    + 
    ${snippet}
    +
    +
    +
    `; + }) + .join(""); + + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ${component.name.replace(/[^A-Za-z0-9_]/g, "")}Detail { + layout = "showcase" +${playgroundStates(component)} + seo { + title = "${escapeAttribute(displayName(component.name))}" + description = "${escapeAttribute(component.purpose)}" + } + view { + +
    +
    + ${titleCase(component.category)} component +

    ${escapeText(displayName(component.name))}

    +

    ${escapeText(component.purpose)}

    +
    ${component.props.length} props${component.slots.length} slots${component.events.length} eventsTheme readyResponsive
    +
    +
    +
    + ${playgroundSection(component)} +
    +
    +
    Live examples

    Designed for real product surfaces

    Compare configurations and resize the browser to check responsive behavior.

    ${demos}
    + ${eventDocumentation(component)} +
    Component API

    Props and configuration

    All content and behavior shown above is supplied through these props and slots.

    ${propsTable(component)}
    +
    + +
    + + } +} +`; +} + +function categoryPage(category, components) { + const liveDemoCount = components.reduce( + (total, component) => total + demoUses(component).length, + 0, + ); + const cards = components + .map( + (component) => ` +
    +
    + +
    ${componentMount(component, 0)}
    +
    +
    +
    ${titleCase(category)}

    ${escapeText(displayName(component.name))}

    ${escapeText(component.purpose)}

    +
    ${component.props.length} props · ${component.slots.length} slotsExplore component
    +
    +
    `, + ) + .join(""); + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ${identifier(category)}Showcase { + layout = "showcase" + seo { + title = "${titleCase(category)} components" + description = "${components.length} ${category} components from @wrnexus/ui." + } + view { +
    + Component category +

    ${titleCase(category)}

    +

    ${components.length} unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

    +
    ${components.length} componentsMultiple use cases${liveDemoCount} live configurations
    +
    +
    ${cards}
    + } +} +`; +} + +const categories = Object.groupBy(reference.components, (component) => component.category); +const categoryEntries = Object.entries(categories).sort(([left], [right]) => + left.localeCompare(right), +); +const totalDemoCount = reference.components.reduce( + (total, component) => total + demoUses(component).length, + 0, +); + +function showcaseLayout() { + const directory = categoryEntries + .map( + ([category, components]) => ` +
    + ${titleCase(category)} +
    ${components + .map( + (component) => + `${escapeText(displayName(component.name))}`, + ) + .join("")}
    +
    `, + ) + .join(""); + + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Showcase { + view { +
    +
    +
    + + WRNexus UI + +
    +
    + + +
    +
    + +
    + +
    +
    +
    + } +} +`; +} + +function documentLayout() { + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Document { + props { + cookies = {} + theme = "light" + language = "en" + url = "" + pathname = "/" + } + view { + + +
    + + } +} +`; +} + +mkdirSync(pagesDir, { recursive: true }); +mkdirSync(detailPagesDir, { recursive: true }); +mkdirSync(layoutsDir, { recursive: true }); +writeFileSync(join(layoutsDir, "showcase.wrn"), showcaseLayout(), "utf8"); +writeFileSync(join(layoutsDir, "document.wrn"), documentLayout(), "utf8"); +for (const file of readdirSync(pagesDir).filter((entry) => entry.endsWith(".wrn"))) { + unlinkSync(join(pagesDir, file)); +} +for (const file of readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn"))) { + unlinkSync(join(detailPagesDir, file)); +} + +for (const [category, components] of categoryEntries) { + writeFileSync(join(pagesDir, `${category}.wrn`), categoryPage(category, components), "utf8"); + for (const component of components) { + writeFileSync( + join(detailPagesDir, `${slugOf(component.name)}.wrn`), + detailPage(component, components), + "utf8", + ); + } +} + +const categoryCards = categoryEntries + .map( + ([category, components], index) => + `0${index + 1}
    ${titleCase(category)}

    ${components.length} components · ${components.reduce((total, component) => total + demoUses(component).length, 0)} live demos

    `, + ) + .join(""); + +writeFileSync( + join(pagesDir, "index.wrn"), + `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ComponentShowcase { + layout = "showcase" + seo { + title = "WRNexus component system" + description = "Explore every unique @wrnexus/ui component through live, production-quality examples." + } + view { +
    +
    + The UI foundation for WRNexus +

    Build modern products
    at framework speed.

    +

    A complete, accessible component system with ${reference.count} primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.

    +
    Get started Explore blocks
    +
    $bun add @wrnexus/ui
    +
    +
    +
    +
    ${reference.count}Unique components
    +
    ${totalDemoCount}Live configurations
    +
    0Duplicate implementations
    +
    ${categoryEntries.length}Focused categories
    +
    +
    Explore the system

    Everything your product needs

    ${categoryCards}
    +
    + } +} +`, + "utf8", +); + +const docsSections = [ + [ + "installation", + "Installation", + "Install the package and import the shared stylesheet once in your application.", + "bun add @wrnexus/ui", + ], + [ + "framework-guides", + "Framework guides", + "WRNexus components use native HTML semantics and framework component mounts.", + ], + [ + "accessibility", + "Accessibility", + "Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.", + ], + [ + "dark-mode", + "Dark mode", + "Choose light, dark, or system mode. The selection persists and updates every preview.", + ], + [ + "themes", + "Themes", + "Theme presets control radius, surface treatment, borders, shadows, and motion.", + ], + [ + "colors", + "Colors", + "Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.", + ], + [ + "fonts", + "Fonts", + "Select a font family globally while components continue to inherit typography correctly.", + ], + [ + "sizing", + "Sizing", + "Compact through large scales adjust the complete component system consistently.", + ], + [ + "resources", + "Resources", + "Use the component API pages, blocks, and templates as production starting points.", + ], +]; +writeFileSync( + join(pagesDir, "docs.wrn"), + `page Documentation { + layout = "showcase" + seo { title = "Documentation" description = "Install, configure, and use WRNexus UI." } + view { +
    +
    Getting started

    Build with WRNexus UI

    Configure one design system and use it across components, blocks, and complete page templates.

    +

    Explore the documentation

    Every Getting Started and Customization topic now has its own page. Choose a guide from the sidebar to continue.

    +
    + } +} +`, + "utf8", +); + +const customizationGuides = new Set(["dark-mode", "themes", "colors", "fonts", "sizing"]); +for (const [slug, title, description, code] of docsSections) { + const section = customizationGuides.has(slug) ? "Customization" : "Getting Started"; + const examples = + slug === "colors" + ? [ + ["Brand colors", "Primary and secondary tokens communicate brand hierarchy."], + [ + "Status colors", + "Success, warning, danger, and info preserve their semantic meaning in every palette.", + ], + [ + "Component override", + 'Pass color="success" or another semantic color to any component.', + ], + ] + : slug === "sizing" + ? [ + ["Component size", "Every component accepts xs, sm, default, md, lg, and xl."], + [ + "Global density", + "Compact, default, comfortable, and large scale the complete interface.", + ], + ["Responsive sizing", "Component sizing cooperates with responsive breakpoints."], + ] + : slug === "themes" + ? [ + ["Default", "Balanced surfaces, borders, elevation, and radius."], + ["Soft and sharp", "Choose friendly rounded surfaces or dense operational styling."], + ["Glass", "Use translucent layered surfaces while retaining semantic tokens."], + ] + : [ + ["Overview", description], + ["Configuration", "Use the design switcher in the header to test this setting live."], + [ + "Component behavior", + "The setting is inherited by components, blocks, templates, and playground previews.", + ], + ]; + writeFileSync( + join(pagesDir, `${slug}.wrn`), + `page ${identifier(slug)}Guide { + layout = "showcase" + seo { + title = "${escapeAttribute(title)}" + description = "${escapeAttribute(description)}" + } + view { +
    + +
    ${section}

    ${escapeText(title)}

    ${escapeText(description)}

    + ${examples.map(([heading, copy]) => `

    ${escapeText(heading)}

    ${escapeText(copy)}

    `).join("")} + ${code ? `

    Quick start

    ${escapeCode(code)}
    ` : ""} + +
    + } +} +`, + "utf8", + ); +} + +const blockCards = [ + [ + "Hero sections", + "Marketing", + "layout-template", + "Hero, actions, product proof, and visual stage.", + ], + [ + "Feature grids", + "Marketing", + "grid-2x2", + "Responsive benefits and product capability sections.", + ], + ["Pricing sections", "Marketing", "badge-dollar-sign", "Tier cards, comparison grids, and CTAs."], + [ + "Application shells", + "Application UI", + "panel-left", + "Headers, sidebars, content, and command areas.", + ], + [ + "Dashboard stats", + "Application UI", + "chart-no-axes-combined", + "Metrics, trends, filters, and summaries.", + ], + ["Checkout panels", "Ecommerce", "shopping-cart", "Cart, address, payment, and order summary."], + [ + "Article layouts", + "Blog & Articles", + "newspaper", + "Editorial headers, content, author, and sharing.", + ], + [ + "Authentication", + "Application UI", + "shield-check", + "Sign in, registration, recovery, and verification.", + ], +]; +writeFileSync( + join(pagesDir, "blocks.wrn"), + `page Blocks { + layout = "showcase" + seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." } + view { +
    + +
    Composable sections

    Ready-to-use UI blocks

    Complete responsive sections composed exclusively from the components in this library.

    +
    ${blockCards.map(([title, category, icon, description], index) => ``).join("")}
    +
    + } +} +`, + "utf8", +); + +const templates = [ + [ + "Admin dashboard", + "Dashboard & Admin", + "31 pages", + "Analytics, teams, settings, billing, and operational workflows.", + ], + [ + "Commerce storefront", + "Ecommerce", + "18 pages", + "Catalog, product, cart, checkout, and customer account pages.", + ], + [ + "SaaS website", + "Websites", + "12 pages", + "Landing, pricing, about, blog, contact, and legal pages.", + ], + [ + "Support center", + "Support", + "9 pages", + "Knowledge base, ticketing, status, and customer help experiences.", + ], + [ + "Finance workspace", + "Finance & Payments", + "14 pages", + "Accounts, transactions, reporting, transfers, and controls.", + ], +]; +writeFileSync( + join(pagesDir, "templates.wrn"), + `page Templates { + layout = "showcase" + seo { title = "Page templates" description = "Complete pages assembled from WRNexus UI blocks." } + view { +
    + +
    Complete products

    Production-ready templates

    Responsive page systems assembled from WRNexus blocks and components.

    +
    ${templates.map(([title, category, count], index) => `
    ${count}

    ${title}

    ${category} template with consistent navigation, content, forms, and responsive behavior.

    Preview →
    `).join("")}
    +
    + } +} +`, + "utf8", +); + +process.stdout.write( + `Generated ${reference.count} component detail pages, ${totalDemoCount} live demos, and ${categoryEntries.length} category pages.\n`, +); diff --git a/examples/component-showcase/test/showcase.test.ts b/examples/component-showcase/test/showcase.test.ts new file mode 100644 index 00000000..aff74e88 --- /dev/null +++ b/examples/component-showcase/test/showcase.test.ts @@ -0,0 +1,231 @@ +import { expect, test } from "bun:test"; +import { readFileSync, readdirSync } from "node:fs"; +import { join } from "node:path"; +import { compileWireFile } from "../../../packages/compiler/src/index.ts"; + +const root = join(import.meta.dir, ".."); +const pagesDir = join(root, "app", "pages"); +const detailPagesDir = join(pagesDir, "components"); +const reference = JSON.parse( + readFileSync(join(root, "..", "..", "packages", "ui", "component-reference.json"), "utf8"), +) as { + count: number; + components: Array<{ mount: string; category: string }>; +}; + +test("showcase configures local Lucide icon generation", () => { + const packageJson = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as { + devDependencies: Record; + }; + const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8"); + + expect(packageJson.devDependencies["@iconify/tailwind4"]).toBeTruthy(); + expect(packageJson.devDependencies["@iconify-json/lucide"]).toBeTruthy(); + expect(styles).toContain('@plugin "@iconify/tailwind4";'); + expect(styles).toContain(".playground-preview-source > .wire-action:not(.w-full)"); + expect(styles).toContain("width: fit-content;"); +}); + +test("showcase uses a searchable three-column documentation shell", () => { + const layout = readFileSync(join(root, "app", "layouts", "showcase.wrn"), "utf8"); + const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8"); + const runtime = readFileSync(join(root, "public", "playground.js"), "utf8"); + + expect(layout).toContain("data-docs-directory"); + expect(layout).toContain("data-docs-search"); + expect(layout.match(/data-docs-component-link/g)).toHaveLength(reference.count); + expect(styles).toContain("grid-template-columns: 17rem minmax(0, 1fr)"); + expect(runtime).toContain("data-docs-menu-toggle"); + expect(runtime).toContain('event.key.toLowerCase() === "k"'); +}); + +test("showcase SSR document layout maps persisted design cookies to html attributes", () => { + const source = readFileSync(join(root, "app", "layouts", "document.wrn"), "utf8"); + expect(source).toContain(""); + expect(source).toContain('
    '); + for (const setting of ["style", "palette", "mode", "font", "scale"]) { + expect(source).toContain(`data-ui-${setting}`); + expect(source).toContain(`cookies['wrn-ui-${setting}']`); + } +}); + +test("advanced select demos use validation schemas and a real remote API", () => { + const page = readFileSync( + join(root, "app", "pages", "components", "advanced-select.wrn"), + "utf8", + ); + expect(page).toContain('data-schema="advanced-select-validation"'); + expect(page).toContain('data-schema="advanced-select-dynamic-validation"'); + expect(readFileSync(join(root, "app", "api", "teams.ts"), "utf8")).toContain("export const GET"); +}); + +test("category pages preview every UI component exactly once", () => { + const categoryPages = readdirSync(pagesDir) + .filter((file) => file !== "index.wrn" && file.endsWith(".wrn")) + .map((file) => readFileSync(join(pagesDir, file), "utf8")) + .join("\n"); + + const mounts = [...categoryPages.matchAll(/
    match[1], + ); + + expect(mounts).toHaveLength(reference.count); + expect(new Set(mounts).size).toBe(reference.count); + expect(mounts.sort()).toEqual(reference.components.map((component) => component.mount).sort()); +}); + +test("every component has a detail page with its expected live use cases", () => { + const files = readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn")); + + expect(files).toHaveLength(reference.count); + + const detailMounts = files.flatMap((file) => { + const source = readFileSync(join(detailPagesDir, file), "utf8"); + return [...source.matchAll(/
    match[1]); + }); + + // Every detail page has one playground plus three standard demos. Button, + // AdvancedSelect, ComboBox, PinInput, and TogglePassword add specialized capability demos. + expect(detailMounts).toHaveLength(reference.count * 4 + 83); + for (const component of reference.components) { + const expectedMounts = + component.mount === "Button" + ? 9 + : component.mount === "AdvancedSelect" + ? 42 + : component.mount === "ComboBox" + ? 22 + : component.mount === "PinInput" + ? 19 + : component.mount === "TogglePassword" + ? 11 + : 4; + expect(detailMounts.filter((mount) => mount === component.mount)).toHaveLength(expectedMounts); + } +}, 15_000); + +test("every detail page has a type-aware realtime playground", () => { + const files = readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn")); + for (const file of files) { + const source = readFileSync(join(detailPagesDir, file), "utf8"); + expect(source).toContain("data-playground-preview"); + expect(source).toContain("data-playground-form"); + expect(source).toContain("data-playground-code"); + expect(source).toContain("data-playground-copy"); + expect(source).toContain('href="#playground"'); + } + + const runtime = readFileSync(join(root, "public", "playground.js"), "utf8"); + expect(runtime).toContain("fetch(url"); + expect(runtime).toContain("HTMLSelectElement"); + expect(runtime).toContain("navigator.clipboard.writeText"); + expect(runtime).toContain("updateCode(playground)"); + expect(runtime).toContain("__wrnexusHydrateScopes"); + expect(runtime).toContain("data-playground-json"); + expect(runtime).toContain('createPolicy("wrnexus-playground"'); + expect(runtime).toContain("preview.replaceChildren"); + expect(runtime).not.toContain("preview.innerHTML"); +}); + +test("detail pages show component syntax beside each live preview", () => { + const buttonPage = readFileSync(join(detailPagesDir, "button.wrn"), "utf8"); + + expect(buttonPage).toContain('name="pg_label" type="text"'); + expect(buttonPage).toContain('name="pg_variant"'); + expect(buttonPage).toContain(''); + expect(buttonPage).not.toContain(''); + expect(buttonPage).toContain('name="pg_color"'); + expect(buttonPage).toContain(''); + expect(buttonPage).toContain('name="pg_size"'); + expect(buttonPage).toContain(''); + expect(buttonPage.match(/class="demo-workbench"/g)).toHaveLength(8); + expect(buttonPage.match(/<Button/g)).toHaveLength(9); + expect(buttonPage).not.toContain("<div data-component="Button""); + expect(buttonPage).not.toContain('
    '); +}); + +test("advanced select and combobox document their complete event contract", () => { + for (const slug of ["advanced-select", "combo-box"]) { + const source = readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8"); + for (const event of ["search", "select", "change", "clear", "open", "close", "load", "error"]) { + expect(source).toContain(`@${event}`); + } + expect(source).toContain('id="events"'); + expect(source).toContain("event.detail"); + } +}); + +test("pin input documents verification events", () => { + const source = readFileSync(join(detailPagesDir, "pin-input.wrn"), "utf8"); + for (const event of ["input", "change", "complete", "paste", "clear", "error"]) { + expect(source).toContain(`@${event}`); + } + expect(source).toContain('id="events"'); + expect(source).toContain("event.detail"); + expect(source).toContain("Different lengths"); + expect(source).toContain('length="3"'); + expect(source).toContain('length="5"'); + expect(source).toContain('length="7"'); +}); + +test("toggle password documents visibility states, validation, and declared events", () => { + const source = readFileSync(join(detailPagesDir, "toggle-password.wrn"), "utf8"); + for (const event of ["input", "change", "toggle"]) { + expect(source).toContain(`@${event}`); + } + expect(source).toContain("Checkbox-controlled toggle"); + expect(source).toContain("Synchronized password fields"); + expect(source).toContain("Without visibility toggle"); + expect(source).toContain("fields='[\n {"); + expect(source).toContain('"label": "New password"'); + expect(source).toContain('"name": "current-password"'); + expect(source).not.toContain("fields='[..]'"); + expect(source).toContain('data-schema="toggle-password-validation"'); +}); + +test("strong password documents live scoring, requirements, popover, and custom characters", () => { + const source = readFileSync(join(detailPagesDir, "strong-password.wrn"), "utf8"); + expect(source).toContain("Live strength meter"); + expect(source).toContain("Requirements and hint text"); + expect(source).toContain("Requirements in a popover"); + expect(source).toContain("Custom special characters"); + expect(source).toContain('presentation="popover"'); + expect(source).toContain('specialCharactersSet="@#_-."'); + for (const event of ["input", "change", "strength"]) { + expect(source).toContain(`@${event}`); + } +}); + +test("complex component props are shown as complete readable multiline values", () => { + for (const slug of ["advanced-select", "combo-box", "select", "toggle-password"]) { + const source = readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8"); + expect(source).not.toMatch(/\b(?:options|groups|items|fields)='\[\.\.\.\]'/); + } + + const advancedSelect = readFileSync(join(detailPagesDir, "advanced-select.wrn"), "utf8"); + expect(advancedSelect).toContain("options='[\n {"); + expect(advancedSelect).toContain('"value": "design"'); +}); + +test("code examples preserve literal object braces after client hydration", () => { + const source = readFileSync(join(detailPagesDir, "toggle-password.wrn"), "utf8"); + expect(source).toContain("{"); + expect(source).toContain("}"); + expect(source).not.toContain('fields=\'[\n {\n "label"'); +}); + +test("every generated showcase page compiles", () => { + const paths = [ + ...readdirSync(pagesDir) + .filter((entry) => entry.endsWith(".wrn")) + .map((entry) => join(pagesDir, entry)), + ...readdirSync(detailPagesDir) + .filter((entry) => entry.endsWith(".wrn")) + .map((entry) => join(detailPagesDir, entry)), + ]; + + for (const path of paths) { + expect(() => compileWireFile(readFileSync(path, "utf8"), path)).not.toThrow(); + } +}); diff --git a/examples/component-showcase/tsconfig.json b/examples/component-showcase/tsconfig.json new file mode 100644 index 00000000..2b53376a --- /dev/null +++ b/examples/component-showcase/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "noEmit": true + }, + "include": ["wrnexus.config.ts", "test/**/*.ts"] +} diff --git a/examples/component-showcase/wrnexus.config.ts b/examples/component-showcase/wrnexus.config.ts new file mode 100644 index 00000000..7ecc5d77 --- /dev/null +++ b/examples/component-showcase/wrnexus.config.ts @@ -0,0 +1,30 @@ +import type { AppConfig } from "@wrnexus/styles"; + +const config: AppConfig = { + head: [''], + seo: { + title: "WRNexus UI Component Showcase", + titleTemplate: "%s | UI Showcase", + description: "A generated, exhaustive showcase of every component in @wrnexus/ui.", + robots: "noindex,nofollow", + themeColor: "#7c3aed", + }, + theme: { + palette: "violet", + default: "light", + }, + fonts: { + sans: '"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif', + google: [{ family: "Plus Jakarta Sans", weights: [400, 500, 600, 700, 800] }], + }, + styles: { + entry: "app/styles/global.css", + process: async ({ entryPath, appRoot, mode }) => { + const args = ["@tailwindcss/cli", "-i", entryPath!]; + if (mode === "production") args.push("--minify"); + return await Bun.$.cwd(appRoot)`bunx ${args}`.text(); + }, + }, +}; + +export default config; diff --git a/packages/ai/package.json b/packages/ai/package.json index 55fda26b..d57ec51f 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ai", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.", diff --git a/packages/authz/package.json b/packages/authz/package.json index 84c5338a..8ac59dfb 100644 --- a/packages/authz/package.json +++ b/packages/authz/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/authz", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/cli/package.json b/packages/cli/package.json index 20cde5bb..6d8b0885 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/cli", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/cli/src/create.ts b/packages/cli/src/create.ts index ff832030..3f49a12f 100644 --- a/packages/cli/src/create.ts +++ b/packages/cli/src/create.ts @@ -95,6 +95,8 @@ Thumbs.db "devDependencies": { "@wrnexus/cli": "${frameworkVersion}", "@eslint/js": "^9.0.0", + "@iconify-json/lucide": "^1.2.118", + "@iconify/tailwind4": "^1.2.3", "@tailwindcss/cli": "^4.0.0", "@types/bun": "latest", "eslint": "^9.0.0", @@ -292,6 +294,7 @@ Allow: / * @source tells Tailwind which files to scan for class names. */ @import "tailwindcss"; +@plugin "@iconify/tailwind4"; @source "../**/*.wrn"; @source "../**/*.tsx"; @@ -309,6 +312,29 @@ body { Roboto, sans-serif; } +`, + "app/layouts/document.wrn": `// Global document layout. The framework renders this once around the selected +// page layout and merges SEO metadata, styles, and scripts into /. +// Request cookies, resolved theme, language, URL, and pathname are available +// as SSR props, so document attributes do not need a client-side correction. +layout Document { + props { + cookies = {} + theme = "light" + language = "en" + url = "" + pathname = "/" + } + + view { + + + +
    + + + } +} `, "app/pages/index.wrn": `// Home page (route: /). SSR-first: the view is server-rendered, then components // (.wrn files under app/components) hydrate in the browser. Styled with Tailwind. diff --git a/packages/cli/src/update.ts b/packages/cli/src/update.ts index 25c21919..589ce05b 100644 --- a/packages/cli/src/update.ts +++ b/packages/cli/src/update.ts @@ -985,6 +985,14 @@ const MIGRATIONS: Migration[] = [ // Compiler-only fix. Existing WRN source files require no migration. }, }, + { + version: "0.3.5", + id: "new-component-added", + description: "UI component Added.", + apply() { + // Compiler-only fix. Existing WRN source files require no migration. + }, + }, ]; /** Release tooling uses this to require an explicit migration entry per version. */ @@ -1023,21 +1031,34 @@ function appVersion(appRoot: string, pkg: Record): string { } /** Refresh pure framework-owned reference files. Never touches user-edited CLAUDE.md. */ -function refreshFrameworkFiles(appRoot: string, dryRun: boolean, log: (m: string) => void): void { - // Public llms.txt is generated and web-visible, so it is safe to refresh. - const llms = join(appRoot, "public", "llms.txt"); - if (!existsSync(llms) || readFileSync(llms, "utf8") !== AI_GUIDE) { - log("~ public/llms.txt refreshed"); +function refreshFrameworkFiles( + appRoot: string, + dryRun: boolean, + log: (message: string) => void, +): void { + const publicDir = join(appRoot, "public"); + const llms = join(publicDir, "llms.txt"); + + if (!existsSync(llms)) { + log("+ public/llms.txt created"); + if (!dryRun) { - mkdirSync(join(appRoot, "public"), { recursive: true }); + mkdirSync(publicDir, { + recursive: true, + }); + writeFileSync(llms, AI_GUIDE, "utf8"); } } - // CLAUDE.md is often user-edited — only create it when absent. + const claude = join(appRoot, "CLAUDE.md"); + if (!existsSync(claude)) { log("+ CLAUDE.md created"); - if (!dryRun) writeFileSync(claude, CLAUDE_MD, "utf8"); + + if (!dryRun) { + writeFileSync(claude, CLAUDE_MD, "utf8"); + } } } diff --git a/packages/cli/test/create.test.ts b/packages/cli/test/create.test.ts index bead6d81..3d5c50ac 100644 --- a/packages/cli/test/create.test.ts +++ b/packages/cli/test/create.test.ts @@ -67,6 +67,11 @@ test("scaffoldApp pins the current framework and exposes llms.txt publicly", () expect(dependency).toBe(version); } expect(pkg.devDependencies["@wrnexus/cli"]).toBe(version); + expect(pkg.devDependencies["@iconify/tailwind4"]).toBe("^1.2.3"); + expect(pkg.devDependencies["@iconify-json/lucide"]).toBe("^1.2.118"); + expect(readFileSync(join(root, "app", "styles", "global.css"), "utf8")).toContain( + '@plugin "@iconify/tailwind4";', + ); expect(existsSync(join(root, "public", "llms.txt"))).toBe(true); expect(existsSync(join(root, "llms.txt"))).toBe(false); expect(readFileSync(join(root, ".prettierignore"), "utf8")).toContain("CLAUDE.md"); diff --git a/packages/compiler/README.md b/packages/compiler/README.md index e41d34de..141d0023 100644 --- a/packages/compiler/README.md +++ b/packages/compiler/README.md @@ -163,6 +163,7 @@ A file opens with `page ` or `component ` followed by a `{ ... }` bo - `layout = ""` — selects `app/layouts/.wrn` (pages only). - `types { }` — reusable interfaces and aliases for the current file. - `props { name: Type = ... }` — typed component props. Omit `= ` to make a prop required. Legacy inferred props remain supported. +- `@event name = function` inside `props` — declares a public component event. Emit it from component behavior with `name(detail)` or `$emit("name", detail)`, and consume it with ``. - `state : Type = ` — typed reactive state seeded from a raw JS expression. The annotation is optional for backward compatibility. - `view { }` — plain HTML with `{expr}` interpolation in text and attributes, hyphenated attributes, boolean attributes, `@event="..."` client bindings, and ``. Attribute expressions that reference `state` keep an SSR value and update reactively in the browser. - `seo { key = "value" ... }` — metadata merged into the generated `meta`. diff --git a/packages/compiler/package.json b/packages/compiler/package.json index 34e200b1..1bf763dc 100644 --- a/packages/compiler/package.json +++ b/packages/compiler/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/compiler", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/compiler/src/codegen.ts b/packages/compiler/src/codegen.ts index 0277471c..d64168ec 100644 --- a/packages/compiler/src/codegen.ts +++ b/packages/compiler/src/codegen.ts @@ -43,6 +43,38 @@ function isComponentTag(tag: string): boolean { return /^[A-Z][A-Za-z0-9_$]*$/.test(tag); } +const HTML_BOOLEAN_ATTRIBUTES = new Set([ + "allowfullscreen", + "async", + "autofocus", + "autoplay", + "checked", + "controls", + "default", + "defer", + "disabled", + "formnovalidate", + "hidden", + "inert", + "ismap", + "itemscope", + "loop", + "multiple", + "muted", + "nomodule", + "novalidate", + "open", + "playsinline", + "readonly", + "required", + "reversed", + "selected", +]); + +function isHtmlBooleanAttribute(name: string): boolean { + return HTML_BOOLEAN_ATTRIBUTES.has(name.toLowerCase()); +} + /** Escape a value placed inside a double-quoted HTML attribute. */ function attrEscape(value: string): string { return value @@ -116,13 +148,29 @@ function reactiveAttrValue(raw: string, reactive: PageReactive): string | null { return found ? value : null; } -function renderAttrs(attrs: Attr[], csrId?: string, reactive: PageReactive | null = null): string { +function renderAttrs( + attrs: Attr[], + csrId?: string, + reactive: PageReactive | null = null, + dynamicExpressions?: string[], +): string { let bindIndex = 0; const rendered = attrs .map((attr) => { const base = renderAttr(attr); if (!reactive || attr.event || attr.boolean || !base || !attr.value.includes("{")) return base; + const expression = wholeAttributeExpression(attr.value); + if ( + expression && + exprRefsState(expression, reactive.runtimeStateNames) && + dynamicExpressions + ) { + dynamicExpressions.push(`\${__wrnexusPropAttr(${expression})}`); + const sentinel = `\x00WRNEACH${dynamicExpressions.length - 1}\x00`; + const marker = JSON.stringify([attr.name, attr.value]); + return ` ${attr.name}="${sentinel}" data-wrn-bind-${bindIndex++}="${attrEscape(marker)}"`; + } const initial = reactiveAttrValue(attr.value, reactive); if (initial === null) return base; const marker = JSON.stringify([attr.name, attr.value]); @@ -151,6 +199,7 @@ function htmlTextEscape(value: string): string { /** Reactive page context: state names + their initial (SSR) values. */ interface PageReactive { stateNames: Set; + runtimeStateNames: Set; scope: Record; } @@ -401,7 +450,7 @@ function renderNode( // Void elements (
    , , …) have no closing tag and no children. if (VOID_ELEMENTS.has(node.tag.toLowerCase())) { - return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive)}>`; + return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive, loops)}>`; } const inner = @@ -420,7 +469,7 @@ function renderNode( ) .join(""); - return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive)}>${inner}`; + return `<${node.tag}${renderAttrs(node.attrs, csrId, reactive, loops)}>${inner}`; } function renderPageComponentInvocation( @@ -452,6 +501,11 @@ function renderNestedComponentInvocation( const attrs = node.attrs .filter((attr) => attr.name !== "data-component") .map((attr) => { + const spread = /^\{\.\.\.([A-Za-z_$][\w$]*)\}$/.exec(attr.name); + if (spread) { + return `\${__wireSpreadAttrs(${ctx.resolveExpr(spread[1]!)})}`; + } + if (attr.event) { return ( escLit(` ${eventAttribute(attr.name)}="`) + escLit(attrEscape(attr.value)) + escLit(`"`) @@ -490,13 +544,18 @@ function renderNestedComponentInvocation( loops.length > 0 ? { ...ctx, + forwardRestAttrs: false, loopVars: new Set([...(ctx.loopVars ?? []), ...loops]), } - : ctx; + : { ...ctx, forwardRestAttrs: false }; const inner = node.children.map((child) => renderComponentNode(child, childCtx)).join(""); - return `
    ${inner}
    `; + return ( + `
    ${inner}
    ` + ); } function ssrMarker(bindings: SsrBinding[], binding: RenderBinding): string { @@ -668,6 +727,7 @@ function hydrationId(ast: PageAst): string { kind: ast.kind, name: ast.name, props: ast.props.map((entry) => entry.name), + events: ast.events.map((entry) => entry.name), states: ast.states.map((entry) => entry.name), computed: ast.computed.map((entry) => entry.name), view: ast.view, @@ -744,8 +804,13 @@ export function generate(ast: PageAst): string { ...ast.states.map((entry) => entry.name), ...ast.computed.map((entry) => entry.name), ]; + const runtimeStateNames = new Set( + ast.states.filter((entry) => /\bctx\b/.test(entry.expr)).map((entry) => entry.name), + ); const reactive: PageReactive | null = - reactiveNames.length > 0 ? { stateNames: new Set(reactiveNames), scope: seedScope } : null; + reactiveNames.length > 0 + ? { stateNames: new Set(reactiveNames), runtimeStateNames, scope: seedScope } + : null; const loops: string[] = []; let html = ast.view .map((node) => renderNode(node, ssrBindings, csrBindings, apiBindings, loops, reactive)) @@ -955,6 +1020,10 @@ interface CompCtx { loopVars?: Set; /** Local identifiers introduced by server-rendered `{#each}` blocks. */ serverLocals?: Set; + /** Forward undeclared component attributes to this element only. */ + forwardRestAttrs?: boolean; + /** Public component events exposed from the component root. */ + eventNames?: string[]; } interface ComponentBehavior { @@ -1138,6 +1207,22 @@ function viewHasServerEach(nodes: ViewNode[]): boolean { }); } +function viewHasRestAttributeSpread(nodes: ViewNode[]): boolean { + return nodes.some((node) => { + if (node.type === "text") return false; + if (node.type === "each") { + return viewHasRestAttributeSpread(node.body) || viewHasRestAttributeSpread(node.empty); + } + if (node.type === "if") { + return node.branches.some((branch) => viewHasRestAttributeSpread(branch.body)); + } + return ( + node.attrs.some((attr) => /^\{\.\.\.([A-Za-z_$][\w$]*)\}$/.test(attr.name)) || + viewHasRestAttributeSpread(node.children) + ); + }); +} + /** * Compile a text node. Interpolations that reference state stay as client * mustaches (`{expr}`, hydrated by the reactive runtime); interpolations of @@ -1318,13 +1403,13 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string { const loopVariables = loopVarsOf(node); - const elementContext = - loopVariables.length > 0 - ? { - ...ctx, - loopVars: new Set([...(ctx.loopVars ?? []), ...loopVariables]), - } - : ctx; + const elementContext = { + ...ctx, + forwardRestAttrs: false, + ...(loopVariables.length > 0 + ? { loopVars: new Set([...(ctx.loopVars ?? []), ...loopVariables]) } + : {}), + }; let bindIndex = 0; const staticClasses: string[] = []; @@ -1349,6 +1434,11 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string { const attrs = node.attrs .filter((a) => a.name !== "class" && !a.name.startsWith("class:")) .map((a) => { + const spread = /^\{\.\.\.([A-Za-z_$][\w$]*)\}$/.exec(a.name); + if (spread) { + return `\${__wireSpreadAttrs(${elementContext.resolveExpr(spread[1]!)})}`; + } + if (a.event) { return ` ${eventAttribute(a.name)}="${escLit(attrEscape(a.value))}"`; } @@ -1357,6 +1447,29 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string { return ` ${a.name}`; } + if (isHtmlBooleanAttribute(a.name)) { + const expression = wholeAttributeExpression(a.value); + if (expression) { + const referencesState = exprRefsState(a.value, ctx.stateNames); + const referencesLoopVariable = elementContext.loopVars + ? exprRefsState(a.value, elementContext.loopVars) + : false; + const referencesServerLocal = ctx.serverLocals + ? exprRefsState(a.value, ctx.serverLocals) + : false; + const marker = + referencesState || referencesLoopVariable || referencesServerLocal + ? ` data-wrn-bind-${bindIndex++}="${escLit( + attrEscape(JSON.stringify([a.name, a.value])), + )}"` + : ""; + return `\${__wireBooleanAttr(${JSON.stringify(a.name)}, ${elementContext.resolveExpr(expression)})}${marker}`; + } + + if (a.value === "false") return ""; + if (a.value === "true" || a.value === "") return ` ${a.name}`; + } + const rendered = ` ${a.name}="${compileAttrValue(a.value, elementContext)}"`; const referencesState = exprRefsState(a.value, ctx.stateNames); @@ -1433,6 +1546,10 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string { const allAttrs = `${loopLocalsAttribute}` + + `${ctx.forwardRestAttrs ? "${__wireSpreadAttrs(__attrs)}" : ""}` + + `${ + ctx.eventNames?.length ? ` data-wrn-events="${attrEscape(ctx.eventNames.join(","))}"` : "" + }` + `${classAttribute}` + `${classReactiveBinding}` + `${classBindings}` + @@ -1477,6 +1594,9 @@ function generateComponent(ast: PageAst): string { for (const p of effectiveProps) { nameRefs.set(p.name, safeRef(p.name)); } + if (!nameRefs.has("attrs")) { + nameRefs.set("attrs", "__attrs"); + } for (const s of ast.states) nameRefs.set(s.name, safeRef(s.name)); for (const entry of ast.computed) nameRefs.set(entry.name, safeRef(entry.name)); const resolveExpr = (expr: string): string => { @@ -1486,14 +1606,33 @@ function generateComponent(ast: PageAst): string { } return result; }; - const ctx: CompCtx = { stateNames, resolveExpr }; + const ctx: CompCtx = { + stateNames, + resolveExpr, + eventNames: ast.events.map((event) => event.name), + }; const serverFunctions = ast.functions .map((body) => body.trim()) .filter(Boolean) .join("\n\n"); - const viewCode = ast.view.map((node) => renderComponentNode(node, ctx)).join(""); + const hasExplicitRestSpread = viewHasRestAttributeSpread(ast.view); + const rootElementIndex = ast.view.findIndex((node) => node.type === "element"); + const automaticallyForwardRootAttrs = + !hasExplicitRestSpread && + !effectiveProps.some((prop) => prop.name === "attrs") && + rootElementIndex >= 0; + const viewCode = ast.view + .map((node, index) => + renderComponentNode( + node, + automaticallyForwardRootAttrs && index === rootElementIndex + ? { ...ctx, forwardRestAttrs: true } + : ctx, + ), + ) + .join(""); const styles = ast.styles.map((body) => body.trim()).filter(Boolean); const styleTag = styles.length > 0 @@ -1534,6 +1673,11 @@ function generateComponent(ast: PageAst): string { ` const ${nameRefs.get(prop.name)}: ${prop.valueType ?? "any"} = __coerce(__p[${JSON.stringify(prop.name)}], (${resolveExpr(prop.default)}), ${JSON.stringify(runtimeTypeOf(prop.valueType))});`, ); } + if (!effectiveProps.some((prop) => prop.name === "attrs")) { + decls.push( + ` const __attrs = __restProps(__p, new Set(${JSON.stringify(effectiveProps.map((prop) => prop.name))}));`, + ); + } for (const state of ast.states) { decls.push( ` let ${nameRefs.get(state.name)}${state.valueType ? `: ${state.valueType}` : ""} = (${resolveExpr(state.expr)});`, @@ -1584,7 +1728,7 @@ function generateComponent(ast: PageAst): string { if (effectiveProps.length > 0) { out.push( - `export interface ${ast.name}Props {\n${effectiveProps + `export interface ${ast.name}Props {\n [attribute: string]: unknown;\n${effectiveProps .map( (prop) => ` ${JSON.stringify(prop.name)}${prop.required ? "" : "?"}: ${prop.valueType ?? "unknown"};`, @@ -1664,6 +1808,15 @@ function generateComponent(ast: PageAst): string { return declared === "unknown" && def === undefined ? v : String(v); } +function __restProps( + props: Record, + declared: Set, +): Record { + return Object.fromEntries( + Object.entries(props).filter(([name]) => !declared.has(name)), + ); +} + function __wireHtml(v: any): string { return String(v == null ? "" : v).replace( /[&<>]/g, @@ -1690,6 +1843,48 @@ function __wireAttr(v: any): string { ); } +function __wireBooleanAttr(name: string, value: any): string { + return value === true || + value === "true" || + value === "" || + value === 1 || + value === "1" || + value === name + ? " " + name + : ""; +} + +function __wireSpreadAttrs(value: any): string { + if (value === null || typeof value !== "object" || Array.isArray(value)) return ""; + + const booleanAttributes = new Set(${JSON.stringify([...HTML_BOOLEAN_ATTRIBUTES])}); + const attributes: string[] = []; + + for (const [name, raw] of Object.entries(value)) { + const lowerName = name.toLowerCase(); + if ( + !/^[A-Za-z_:][A-Za-z0-9_.:-]*$/.test(name) || + lowerName.startsWith("on") || + lowerName === "style" || + lowerName === "slot" || + lowerName === "data-component" || + lowerName.startsWith("data-wrn") + ) { + continue; + } + + if (booleanAttributes.has(lowerName)) { + attributes.push(__wireBooleanAttr(name, raw)); + continue; + } + + if (raw === false || raw === null || raw === undefined) continue; + attributes.push(" " + name + '="' + __wireAttr(raw) + '"'); + } + + return attributes.join(""); +} + function __wireProp(v: any): string { const value = v !== null && typeof v === "object" diff --git a/packages/compiler/src/index.ts b/packages/compiler/src/index.ts index 4b0ccf3c..6bda3f1e 100644 --- a/packages/compiler/src/index.ts +++ b/packages/compiler/src/index.ts @@ -38,6 +38,7 @@ export type { DataApiBlock, DataMode, EffectBlock, + EventDecl, LoadBlock, ModeFunctionsBlock, PageAst, diff --git a/packages/compiler/test/compiler.test.ts b/packages/compiler/test/compiler.test.ts index 7ee0ec2f..ffdaebde 100644 --- a/packages/compiler/test/compiler.test.ts +++ b/packages/compiler/test/compiler.test.ts @@ -80,6 +80,24 @@ test("parses a component with props and state", () => { expect(ast.states.map((s) => s.name)).toEqual(["count"]); }); +test("component event declarations compile to public root metadata", async () => { + const source = `component EventButton { + props { + label = "Save" + @event complete = function + } + view { } + }`; + const ast = parse(source); + const output = generate(ast); + const mod = await compileAndImport(source); + const render = mod.render as (props: Record) => string; + + expect(ast.events).toEqual([{ name: "complete" }]); + expect(output).toContain('data-wrn-events="complete"'); + expect(render({})).toContain('data-wrn-events="complete"'); +}); + test("typed props, required props, state, custom types, and function parameters compile", () => { const source = `component TypedPicker { types { @@ -169,6 +187,89 @@ test("HTML view: void elements, boolean attrs, comments, lone <", () => { void ast; }); +test("dynamic HTML boolean attributes are omitted when false", async () => { + const mod = await compileAndImport(`component BooleanAttributes { + props { + disabled = false + checked = false + required = false + loading = false + } + view { + + + } + }`); + const render = mod.render as (props?: Record) => string; + + const enabled = render(); + expect(enabled).not.toContain(" disabled"); + expect(enabled).not.toContain(" checked"); + expect(enabled).not.toContain(" required"); + + const disabled = render({ disabled: "true", checked: "true", required: "true" }); + expect(disabled).toContain(" + } + }`); + const render = mod.render as (props?: Record) => string; + const html = render({ + label: "Save", + variant: "primary", + formaction: "/submit-form", + formenctype: "application/x-www-form-urlencoded", + formmethod: "post", + popovertarget: "myPopover", + "aria-describedby": "save-help", + "data-testid": "save", + onclick: "alert(1)", + style: "display:none", + "data-wrn-bind-0": "unsafe", + }); + + expect(html).toContain('formaction="/submit-form"'); + expect(html).toContain('formenctype="application/x-www-form-urlencoded"'); + expect(html).toContain('formmethod="post"'); + expect(html).toContain('popovertarget="myPopover"'); + expect(html).toContain('aria-describedby="save-help"'); + expect(html).toContain('data-testid="save"'); + expect(html).not.toContain("variant="); + expect(html).not.toContain("onclick="); + expect(html).not.toContain("style="); + expect(html).not.toContain("data-wrn-bind"); +}); + +test("an explicit attrs spread overrides automatic root forwarding", async () => { + const mod = await compileAndImport(`component WrappedControl { + props { + label = "Control" + class = "" + } + view { + + + + } + }`); + const render = mod.render as (props?: Record) => string; + const html = render({ label: "Save", class: "wrapper", formaction: "/save" }); + + expect(html).toContain(''); + expect(html).not.toContain('Save'); +}); + test("stateless component bakes props into server HTML (zero JS)", async () => { const mod = await compileAndImport( `component Button {\n props {\n label = "Button"\n variant = "default"\n class = ""\n }\n view { }\n}`, @@ -260,6 +361,24 @@ test("page state attributes bake their initial value and retain a reactive bindi expect(page).toContain("show ? 'text' : 'password'"); }); +test("request-dependent page state attributes resolve during server rendering", async () => { + const mod = await compileAndImport(`page Playground { + state label = ctx.url.searchParams.get("label") ?? "Default" + state loading = ctx.url.searchParams.get("loading") ?? "false" + view { +
    + } +}`); + const render = mod.default as (ctx: { url: URL }) => Promise; + const html = await render({ + url: new URL("https://example.test/playground?label=Visible&loading=false"), + }); + + expect(html).toContain('label="Visible"'); + expect(html).toContain('loading="false"'); + expect(html).not.toContain('label=""'); +}); + test("data-for: loop-variable mustaches stay literal (not baked server-side)", () => { const comp = compileWireFile( `component TodoList {\n state todos = []\n view {
    • {t.text}
    }\n}`, diff --git a/packages/core/package.json b/packages/core/package.json index 8cda5adb..2ed586ab 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/core", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/csr/package.json b/packages/csr/package.json index d6e007fa..f491bbe5 100644 --- a/packages/csr/package.json +++ b/packages/csr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/csr", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/csr/src/reactive-runtime.ts b/packages/csr/src/reactive-runtime.ts index 08781b95..94666164 100644 --- a/packages/csr/src/reactive-runtime.ts +++ b/packages/csr/src/reactive-runtime.ts @@ -618,15 +618,34 @@ export const REACTIVE_RUNTIME = String.raw` } var behaviorFunctions = {}; + var componentEventTarget = el.querySelector("[data-wrn-events]") || el; + var declaredEvents = new Set( + String(componentEventTarget.getAttribute("data-wrn-events") || "") + .split(",") + .map(function (name) { return name.trim(); }) + .filter(Boolean), + ); var stateWatchers = {}; var anyStateListeners = new Set(); var cleanupCallbacks = []; var disposed = false; function readGlobal(name) { + if (declaredEvents.has(name)) { + return function (detail) { + return dispatchComponentEvent(componentEventTarget, name, detail); + }; + } + if (name === "$emit") { + return function (eventName, detail) { + return dispatchComponentEvent(componentEventTarget, eventName, detail); + }; + } if (name === "window") return window; if (name === "document") return document; if (name === "console") return console; + if (name === "Array") return Array; + if (name === "Number") return Number; if (name === "Math") return Math; if (name === "JSON") return JSON; if (name === "Date") return Date; @@ -1489,6 +1508,10 @@ export const REACTIVE_RUNTIME = String.raw` // Keep visible when evaluation is unavailable. } + node.setAttribute( + "data-show", + visible ? "true" : "false", + ); node.style.display = visible ? "" : "none"; }); }); @@ -1718,6 +1741,19 @@ export const REACTIVE_RUNTIME = String.raw` if (behavior) { installBehaviorFunctions(behavior.functions); + var publicScopeApi = { + get: peekScope, + set: writeScope, + call: function (name) { + var fn = behaviorFunctions[name]; + if (typeof fn !== "function") return undefined; + return fn.apply(null, Array.prototype.slice.call(arguments, 1)); + }, + }; + el.__wrnexusScopeApi = publicScopeApi; + el.querySelectorAll("[data-wrn-select]").forEach(function (select) { + select.__wrnexusScopeApi = publicScopeApi; + }); (behavior.effects || []).forEach(function (source) { if (typeof source !== "string" || !source.trim()) return; @@ -1774,6 +1810,10 @@ export const REACTIVE_RUNTIME = String.raw` } mountedBehaviorRoots.delete(el); behaviorInstances.delete(el); + delete el.__wrnexusScopeApi; + el.querySelectorAll("[data-wrn-select]").forEach(function (select) { + delete select.__wrnexusScopeApi; + }); el.__wrnexusScope = false; }, }; @@ -1909,6 +1949,602 @@ export const REACTIVE_RUNTIME = String.raw` } ensureBehaviorObserver(); + hydrateSelectControllers(host); + hydratePinInputControllers(host); + } + + var selectOutsideClickBound = false; + + function selectScopeApi(root) { + var scope = root; + while (scope) { + if (scope.__wrnexusScopeApi) return scope.__wrnexusScopeApi; + scope = scope.parentElement; + } + return null; + } + + function selectPayloadOptions(payload) { + if (Array.isArray(payload)) return payload; + if (!payload || typeof payload !== "object") return []; + if (Array.isArray(payload.options)) return payload.options; + if (Array.isArray(payload.items)) return payload.items; + if (Array.isArray(payload.results)) return payload.results; + if (Array.isArray(payload.data)) return payload.data; + return []; + } + + function syncComboboxInput(root) { + if (!root || !root.hasAttribute("data-wrn-combobox")) return; + var input = root.querySelector(".wire-next__combobox-input"); + var api = selectScopeApi(root); + if (!input || !api) return; + var value = api.call("inputText") || ""; + input.value = String(value); + input.setAttribute("value", String(value)); + } + + function selectEventDetail(root, extra) { + var api = selectScopeApi(root); + var multiple = !!(api && api.get("multiple")); + var detail = { + component: root.hasAttribute("data-wrn-combobox") ? "ComboBox" : "AdvancedSelect", + query: api ? (api.get("query") || "") : "", + value: api ? (api.get("selectedValue") || "") : "", + values: api && Array.isArray(api.get("selectedValues")) ? api.get("selectedValues") : [], + multiple: multiple, + selectedOptions: api ? (api.call("selectedOptions") || []) : [], + }; + if (extra && typeof extra === "object") { + Object.keys(extra).forEach(function (key) { detail[key] = extra[key]; }); + } + return detail; + } + + function emitSelectEvent(root, name, extra) { + try { + dispatchComponentEvent(root, name, selectEventDetail(root, extra)); + } catch (_) { + // CustomEvent can be unavailable in minimal DOM environments. + } + } + + function renderRemoteSelectOptions(root, options) { + var list = root.querySelector(".wire-next__select-list"); + if (!list) return; + + list.querySelectorAll(".wire-next__option-group, .wire-next__select-option, .wire-next__select-message") + .forEach(function (node) { node.remove(); }); + + options.forEach(function (option) { + if (!option || option.value == null) return; + var button = document.createElement("button"); + button.type = "button"; + button.className = "wire-next__select-option"; + button.setAttribute("role", "option"); + button.setAttribute("data-option-value", String(option.value)); + button.disabled = !!option.disabled; + + if (option.icon) { + var icon = document.createElement("i"); + icon.className = String(option.icon); + icon.setAttribute("aria-hidden", "true"); + button.appendChild(icon); + } else if (option.avatar) { + var avatar = document.createElement("img"); + avatar.src = String(option.avatar); + avatar.alt = ""; + button.appendChild(avatar); + } else if (option.color) { + var dot = document.createElement("i"); + dot.className = "wire-next__color-dot"; + dot.style.setProperty("--option-color", String(option.color)); + button.appendChild(dot); + } + + var copy = document.createElement("span"); + var label = document.createElement("strong"); + label.textContent = String(option.label == null ? option.value : option.label); + copy.appendChild(label); + if (option.description) { + var description = document.createElement("small"); + description.textContent = String(option.description); + copy.appendChild(description); + } + button.appendChild(copy); + + var check = document.createElement("i"); + check.className = "wire-next__check icon-[lucide--check]"; + check.setAttribute("aria-hidden", "true"); + check.style.display = "none"; + button.appendChild(check); + + button.addEventListener("click", function () { + var api = selectScopeApi(root); + if (!api || button.disabled) return; + api.call("chooseOption", option); + window.setTimeout(function () { + var selected = api.call("isSelected", option); + button.classList.toggle("wire-next__select-option--selected", !!selected); + button.setAttribute("aria-selected", selected ? "true" : "false"); + check.style.display = selected ? "" : "none"; + syncComboboxInput(root); + }, 0); + }); + list.appendChild(button); + }); + } + + function setupSelectController(root) { + if (!root || root.__wrnexusSelectController) return; + root.__wrnexusSelectController = { attempts: 0 }; + + var remote = root.getAttribute("data-remote") === "true"; + var remoteUrl = root.getAttribute("data-remote-url") || ""; + var input = root.querySelector(".wire-next__select-search input, .wire-next__combobox-input"); + var list = root.querySelector(".wire-next__select-list"); + var loadMore = root.querySelector("[data-wrn-select-load-more]"); + var timer = 0; + var requestId = 0; + var loadedOptions = []; + var retainedSelections = []; + var currentPage = Number(root.getAttribute("data-page") || 1); + + function setLoading(loading) { + root.setAttribute("data-loading", loading ? "true" : "false"); + if (list) list.setAttribute("aria-busy", loading ? "true" : "false"); + var api = selectScopeApi(root); + if (api) api.set("loading", loading); + } + + function load(append, allowEmptyQuery) { + root.__wrnexusSelectController.attempts++; + if (!remote || !remoteUrl) return; + var api = selectScopeApi(root); + if (!api) return; + var query = input ? input.value : ""; + var minimum = Number(api.get("minSearchLength") || 0); + if (!allowEmptyQuery && query.length < minimum) return; + + var url; + try { + url = new URL(remoteUrl, window.location.href); + } catch (_) { + return; + } + var parameter = root.getAttribute("data-remote-query-param") || "q"; + if (query) url.searchParams.set(parameter, query); + var nextPage = append ? currentPage + 1 : 1; + url.searchParams.set("page", String(nextPage)); + + var thisRequest = ++requestId; + setLoading(true); + fetch(url.toString(), { headers: { accept: "application/json" } }) + .then(function (response) { + if (!response.ok) throw new Error("HTTP " + response.status); + return response.json(); + }) + .then(function (payload) { + if (thisRequest !== requestId) return; + var nextOptions = selectPayloadOptions(payload); + loadedOptions = append ? loadedOptions.concat(nextOptions) : nextOptions; + currentPage = nextPage; + var selectedValues = api.get("selectedValues"); + var selectedValue = api.get("selectedValue"); + var selectedKeys = api.get("multiple") + ? (Array.isArray(selectedValues) ? selectedValues : []) + : (selectedValue ? [selectedValue] : []); + var previousOptions = api.call("allOptions") || []; + retainedSelections = retainedSelections + .concat(previousOptions) + .concat(loadedOptions) + .filter(function (option, index, list) { + return option && selectedKeys.includes(option.value) && + list.findIndex(function (item) { return item && item.value === option.value; }) === index; + }); + var stateOptions = retainedSelections.concat(loadedOptions).filter(function (option, index, list) { + return option && list.findIndex(function (item) { return item && item.value === option.value; }) === index; + }); + api.set("options", stateOptions); + api.set("groups", []); + api.set("page", currentPage); + api.set("hasMore", !!(payload && (payload.hasMore || payload.nextPage || payload.next))); + renderRemoteSelectOptions(root, loadedOptions); + emitSelectEvent(root, "load", { + options: nextOptions, + page: currentPage, + hasMore: !!(payload && (payload.hasMore || payload.nextPage || payload.next)), + append: !!append, + url: url.toString(), + payload: payload, + }); + }) + .catch(function (error) { + console.error("[wrnexus] advanced select remote request failed", error); + emitSelectEvent(root, "error", { + error: error, + message: error && error.message ? error.message : String(error), + url: url.toString(), + }); + }) + .then(function () { + if (thisRequest === requestId) setLoading(false); + }); + } + + if (input) { + input.addEventListener("input", function () { + emitSelectEvent(root, "search", { query: input.value }); + if (!remote) return; + window.clearTimeout(timer); + var debounce = Number(root.getAttribute("data-remote-debounce") || 250); + timer = window.setTimeout(function () { load(false); }, debounce); + }); + } + + if (loadMore) { + loadMore.addEventListener("click", function () { load(true); }); + } + + if (list && root.getAttribute("data-infinite") === "true") { + list.addEventListener("scroll", function () { + if (list.scrollTop + list.clientHeight < list.scrollHeight - 24) return; + var api = selectScopeApi(root); + if (api && api.get("hasMore") && root.getAttribute("data-loading") !== "true") load(true); + }); + } + + root.addEventListener("click", function (event) { + if (!remote || !remoteUrl) return; + if (!event.target.closest(".wire-next__select-trigger")) return; + if (loadedOptions.length === 0) load(false); + }); + root.__wrnexusSelectController.load = load; + + var dropdown = root.querySelector(".wire-next__select-dropdown"); + var lastOpen = !!(selectScopeApi(root) && selectScopeApi(root).get("open")); + function emitOpenStateIfChanged() { + var api = selectScopeApi(root); + var nextOpen = !!(api && api.get("open")); + if (nextOpen === lastOpen) return; + lastOpen = nextOpen; + emitSelectEvent(root, nextOpen ? "open" : "close"); + } + var ObserverConstructor = + root.ownerDocument && + root.ownerDocument.defaultView && + root.ownerDocument.defaultView.MutationObserver + ? root.ownerDocument.defaultView.MutationObserver + : (typeof MutationObserver !== "undefined" ? MutationObserver : null); + if (ObserverConstructor) { + new ObserverConstructor(function () { + emitOpenStateIfChanged(); + }).observe(dropdown || root, { + attributes: true, + attributeFilter: dropdown ? ["data-show", "style"] : ["class"], + }); + } + + root.addEventListener("click", function (event) { + var optionButton = event.target.closest(".wire-next__select-option"); + if (optionButton) { + window.setTimeout(function () { + var api = selectScopeApi(root); + var optionValue = optionButton.getAttribute("data-option-value"); + var options = api ? (api.call("allOptions") || []) : []; + var option = options.find(function (item) { + return item && String(item.value) === String(optionValue); + }); + emitSelectEvent(root, "select", { option: option || null }); + emitSelectEvent(root, "change", { option: option || null, reason: "select" }); + emitOpenStateIfChanged(); + }, 0); + } + if (event.target.closest(".wire-next__clear-select")) { + window.setTimeout(function () { + emitSelectEvent(root, "clear"); + emitSelectEvent(root, "change", { reason: "clear" }); + }, 0); + } + }, true); + root.addEventListener("keydown", function (event) { + if (event.key !== "Enter") return; + var before = selectEventDetail(root); + window.setTimeout(function () { + var after = selectEventDetail(root); + var beforeSelection = before.multiple ? JSON.stringify(before.values) : before.value; + var afterSelection = after.multiple ? JSON.stringify(after.values) : after.value; + if (afterSelection === beforeSelection) return; + syncComboboxInput(root); + emitSelectEvent(root, "select", { source: "keyboard" }); + emitSelectEvent(root, "change", { reason: "select", source: "keyboard" }); + emitOpenStateIfChanged(); + }, 0); + }, true); + + if (root.hasAttribute("data-wrn-combobox")) { + root.wrnexusCombobox = { + open: function () { + var api = selectScopeApi(root); + if (api) api.call("openDropdown"); + emitOpenStateIfChanged(); + }, + close: function () { + var api = selectScopeApi(root); + if (api) api.call("closeDropdown"); + emitOpenStateIfChanged(); + }, + clear: function () { + var api = selectScopeApi(root); + if (api) api.call("clearValue"); + syncComboboxInput(root); + emitSelectEvent(root, "clear", { source: "method" }); + emitSelectEvent(root, "change", { reason: "clear", source: "method" }); + }, + setValue: function (value) { + var api = selectScopeApi(root); + if (api) api.call("setValue", value); + syncComboboxInput(root); + emitSelectEvent(root, "change", { reason: "setValue", source: "method" }); + }, + reload: function () { + load(false, true); + }, + }; + root.addEventListener("click", function (event) { + if (!event.target.closest(".wire-next__select-option, .wire-next__clear-select")) return; + window.setTimeout(function () { syncComboboxInput(root); }, 0); + }); + if (input) { + input.addEventListener("keydown", function (event) { + if (event.key === "Enter") { + window.setTimeout(function () { syncComboboxInput(root); }, 0); + } + }); + } + } + + if (remote && remoteUrl && root.getAttribute("data-remote-auto-load") !== "false") { + load(false, true); + } + } + + function hydrateSelectControllers(root) { + var host = root || document; + var selects = []; + if (host.nodeType === 1 && host.matches && host.matches("[data-wrn-select]")) selects.push(host); + if (host.querySelectorAll) { + Array.prototype.push.apply(selects, host.querySelectorAll("[data-wrn-select]")); + } + selects.forEach(setupSelectController); + + if (!selectOutsideClickBound) { + selectOutsideClickBound = true; + document.addEventListener("pointerdown", function (event) { + document.querySelectorAll("[data-wrn-select].wire-next--open").forEach(function (select) { + if (select.contains(event.target)) return; + var api = selectScopeApi(select); + if (api) api.set("open", false); + }); + }); + } + } + + function dispatchComponentEvent(root, name, detail) { + if (!root || !name) return null; + var EventConstructor = + root.ownerDocument && + root.ownerDocument.defaultView && + root.ownerDocument.defaultView.CustomEvent + ? root.ownerDocument.defaultView.CustomEvent + : CustomEvent; + var event = new EventConstructor(String(name), { + bubbles: true, + detail: detail || {}, + }); + root.dispatchEvent(event); + // Compatibility for applications using the former prefixed contract. + root.dispatchEvent(new EventConstructor("wrnexus:" + String(name), { + bubbles: true, + detail: detail || {}, + })); + return event; + } + + function emitPinInputEvent(root, name, extra) { + var hidden = root.querySelector("[data-pin-value]"); + var cells = Array.prototype.slice.call(root.querySelectorAll("[data-pin-cell]")); + var value = hidden ? hidden.value : ""; + var detail = { + component: "PinInput", + value: value, + digits: cells.map(function (cell) { return cell.value; }), + complete: value.length === cells.length, + length: cells.length, + }; + if (extra && typeof extra === "object") { + Object.keys(extra).forEach(function (key) { detail[key] = extra[key]; }); + } + try { + dispatchComponentEvent(root, name, detail); + } catch (_) { + // CustomEvent can be unavailable in minimal DOM environments. + } + } + + function setupPinInputController(root) { + if (!root || root.__wrnexusPinInputController) return; + var cells = Array.prototype.slice.call(root.querySelectorAll("[data-pin-cell]")); + var hidden = root.querySelector("[data-pin-value]"); + var clearButton = root.querySelector("[data-pin-clear]"); + var patternSource = root.getAttribute("data-pattern") || "[0-9]"; + var allowPaste = root.getAttribute("data-allow-paste") !== "false"; + var autoSubmit = root.getAttribute("data-auto-submit") === "true"; + var matcher; + var exactMatcher; + var NativeEventConstructor = + root.ownerDocument && + root.ownerDocument.defaultView && + root.ownerDocument.defaultView.Event + ? root.ownerDocument.defaultView.Event + : Event; + + try { + exactMatcher = new RegExp("^(?:" + patternSource + ")$"); + matcher = new RegExp("^(?:" + patternSource + ")$", "i"); + } catch (error) { + matcher = /$a/; + emitPinInputEvent(root, "error", { + error: error, + message: "Invalid PIN pattern: " + patternSource, + }); + } + + function acceptedCharacters(value) { + return Array.from(String(value || "")).map(function (character) { + matcher.lastIndex = 0; + if (!matcher.test(character)) return ""; + exactMatcher.lastIndex = 0; + if (exactMatcher.test(character)) return character; + var upper = character.toUpperCase(); + exactMatcher.lastIndex = 0; + if (exactMatcher.test(upper)) return upper; + var lower = character.toLowerCase(); + exactMatcher.lastIndex = 0; + return exactMatcher.test(lower) ? lower : character; + }).filter(Boolean); + } + + function currentValue() { + return cells.map(function (cell) { return cell.value; }).join(""); + } + + function updateClearButton(value) { + if (!clearButton) return; + clearButton.style.display = value ? "" : "none"; + } + + function syncValue(reason, index) { + var previous = hidden ? hidden.value : ""; + var value = currentValue(); + if (hidden) { + hidden.value = value; + hidden.setAttribute("value", value); + hidden.dispatchEvent(new NativeEventConstructor("input", { bubbles: true })); + hidden.dispatchEvent(new NativeEventConstructor("change", { bubbles: true })); + } + root.setAttribute("data-value", value); + root.setAttribute("data-complete", value.length === cells.length ? "true" : "false"); + updateClearButton(value); + emitPinInputEvent(root, "input", { reason: reason, index: index }); + if (value !== previous) { + emitPinInputEvent(root, "change", { reason: reason, index: index }); + } + if (value.length === cells.length && previous.length !== cells.length) { + emitPinInputEvent(root, "complete", { reason: reason, index: index }); + if (autoSubmit) { + var form = root.closest("form"); + if (form && typeof form.requestSubmit === "function") form.requestSubmit(); + } + } + } + + function setValue(value, reason) { + var characters = acceptedCharacters(value).slice(0, cells.length); + cells.forEach(function (cell, index) { + cell.value = characters[index] || ""; + cell.setAttribute("value", cell.value); + }); + syncValue(reason || "setValue", characters.length ? characters.length - 1 : -1); + } + + function focusCell(index) { + var cell = cells[Math.max(0, Math.min(cells.length - 1, index))]; + if (cell && !cell.disabled) { + cell.focus(); + if (typeof cell.select === "function") cell.select(); + } + } + + cells.forEach(function (cell, index) { + cell.addEventListener("focus", function () { + if (typeof cell.select === "function") cell.select(); + }); + cell.addEventListener("input", function () { + var characters = acceptedCharacters(cell.value); + cell.value = characters.length ? characters[characters.length - 1] : ""; + cell.setAttribute("value", cell.value); + syncValue("input", index); + if (cell.value && index < cells.length - 1) focusCell(index + 1); + }); + cell.addEventListener("keydown", function (event) { + if (event.key === "Backspace" && !cell.value && index > 0) { + event.preventDefault(); + cells[index - 1].value = ""; + cells[index - 1].setAttribute("value", ""); + syncValue("backspace", index - 1); + focusCell(index - 1); + } else if (event.key === "ArrowLeft" && index > 0) { + event.preventDefault(); + focusCell(index - 1); + } else if (event.key === "ArrowRight" && index < cells.length - 1) { + event.preventDefault(); + focusCell(index + 1); + } else if (event.key === "Home") { + event.preventDefault(); + focusCell(0); + } else if (event.key === "End") { + event.preventDefault(); + focusCell(cells.length - 1); + } + }); + cell.addEventListener("paste", function (event) { + if (!allowPaste) return; + var clipboard = event.clipboardData; + if (!clipboard) return; + event.preventDefault(); + var characters = acceptedCharacters(clipboard.getData("text")).slice(0, cells.length - index); + characters.forEach(function (character, offset) { + cells[index + offset].value = character; + cells[index + offset].setAttribute("value", character); + }); + syncValue("paste", index); + emitPinInputEvent(root, "paste", { index: index, pasted: characters.join("") }); + focusCell(Math.min(index + characters.length, cells.length - 1)); + }); + }); + + if (clearButton) { + clearButton.addEventListener("click", function () { + setValue("", "clear"); + emitPinInputEvent(root, "clear"); + focusCell(0); + }); + } + + root.wrnexusPinInput = { + focus: function (index) { focusCell(Number(index || 0)); }, + clear: function () { + setValue("", "clear"); + emitPinInputEvent(root, "clear", { source: "method" }); + }, + setValue: function (value) { setValue(value, "setValue"); }, + getValue: function () { return currentValue(); }, + }; + root.__wrnexusPinInputController = root.wrnexusPinInput; + setValue(hidden ? hidden.value : root.getAttribute("data-value"), "initial"); + } + + function hydratePinInputControllers(root) { + var host = root || document; + var inputs = []; + if (host.nodeType === 1 && host.matches && host.matches("[data-wrn-pin-input]")) { + inputs.push(host); + } + if (host.querySelectorAll) { + Array.prototype.push.apply(inputs, host.querySelectorAll("[data-wrn-pin-input]")); + } + inputs.forEach(setupPinInputController); } function parseScopeDecl(decl) { @@ -2392,7 +3028,7 @@ export const REACTIVE_RUNTIME = String.raw` * trying to parse the callback in the same regex. */ var methodMatch = - /^([\s\S]+)\.(filter|map|some|every|find|findIndex)\(\s*([\s\S]*)\s*\)$/.exec( + /^([\s\S]+)\.(filter|map|flatMap|some|every|find|findIndex)\(\s*([\s\S]*)\s*\)$/.exec( source, ); @@ -2503,6 +3139,11 @@ export const REACTIVE_RUNTIME = String.raw` ) { result = collection.map(callback); + } else if ( + method === "flatMap" + ) { + result = + collection.flatMap(callback); } else if ( method === "some" ) { @@ -2561,11 +3202,13 @@ export const REACTIVE_RUNTIME = String.raw` function next() { return tokens[index++]; } function is(v) { return peek() && peek().value === v; } function match(v) { if (is(v)) { index++; return true; } return false; } - function expect(v) { if (!match(v)) throw new Error("Expected '" + v + "'"); } + function expect(v) { + if (!match(v)) throw new Error("Expected '" + v + "' in '" + expr + "'"); + } function parsePrimary() { var t = next(); - if (!t) throw new Error("Unexpected end of expression"); + if (!t) throw new Error("Unexpected end of expression in '" + expr + "'"); if (t.type === "number" || t.type === "string") return { value: t.value }; if (t.type === "ident") { if (t.value === "true") return { value: true }; @@ -2659,12 +3302,18 @@ export const REACTIVE_RUNTIME = String.raw` } function parseAnd() { var l = parseEq(); - while (match("&&")) l = l && parseEq(); + while (match("&&")) { + var r = parseEq(); + l = l && r; + } return l; } function parseOr() { var l = parseAnd(); - while (match("||")) l = l || parseAnd(); + while (match("||")) { + var r = parseAnd(); + l = l || r; + } return l; } function parseTernary() { diff --git a/packages/csr/test/reactive.test.ts b/packages/csr/test/reactive.test.ts index 0f14014a..4362006e 100644 --- a/packages/csr/test/reactive.test.ts +++ b/packages/csr/test/reactive.test.ts @@ -41,6 +41,23 @@ test("@event (data-on-click) mutates a signal and re-renders", () => { expect(btn.textContent).toBe("2"); }); +test("declared component events emit through the generic $emit function", () => { + const win = mount( + `
    + +
    `, + ); + const root = win.document.querySelector("[data-wrn-events]")!; + let detail: Record | undefined; + root.addEventListener("complete", (event) => { + detail = (event as unknown as CustomEvent).detail; + }); + + win.document.querySelector("button")!.click(); + + expect(detail).toEqual({ value: "4829" }); +}); + test("nested scopes don't clobber each other (regression)", () => { // An empty outer scope must not touch inner scopes' values. const win = mount( @@ -131,6 +148,26 @@ test("expression evaluator: member access, ternary, comparison, calls", () => { expect(win.document.getElementById("c")!.textContent).toBe("3"); }); +test("logical expressions consume their right-hand side when the result short-circuits", () => { + const win = mount( + `
    + + +
    `, + ); + expect(win.document.getElementById("and")!.textContent).toBe("false"); + expect(win.document.getElementById("or")!.textContent).toBe("true"); +}); + +test("expression evaluator supports flatMap callbacks", () => { + const win = mount( + `
    + +
    `, + ); + expect(win.document.querySelector("span")!.textContent).toBe("1,2,3"); +}); + test("data-show toggles visibility on a reactive expression (tabs pattern)", () => { const win = mount( `
    @@ -143,9 +180,13 @@ test("data-show toggles visibility on a reactive expression (tabs pattern)", () (win.document.getElementById(id) as unknown as HTMLElement).style.display; expect(disp("a")).toBe(""); expect(disp("b")).toBe("none"); + expect(win.document.getElementById("a")!.getAttribute("data-show")).toBe("true"); + expect(win.document.getElementById("b")!.getAttribute("data-show")).toBe("false"); (win.document.querySelector("button") as unknown as HTMLElement).click(); expect(disp("a")).toBe("none"); expect(disp("b")).toBe(""); + expect(win.document.getElementById("a")!.getAttribute("data-show")).toBe("false"); + expect(win.document.getElementById("b")!.getAttribute("data-show")).toBe("true"); }); test("reactive attribute bindings update input and accessibility attributes", () => { diff --git a/packages/db/package.json b/packages/db/package.json index e34b289f..8e6d4381 100644 --- a/packages/db/package.json +++ b/packages/db/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/db", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json index 6a66c525..5bc27919 100644 --- a/packages/dev-server/package.json +++ b/packages/dev-server/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-server", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/dev-server/src/runtime.ts b/packages/dev-server/src/runtime.ts index 794129c7..748fc6a3 100644 --- a/packages/dev-server/src/runtime.ts +++ b/packages/dev-server/src/runtime.ts @@ -1195,6 +1195,11 @@ export function createHandlers(deps: RuntimeDeps): Handlers { }; pageCtx.__wrnexusCallApi = (path, method = "GET") => callApiFromContext(ctx, path, method); let body = await renderComponents(String(await component(pageCtx)), ctx.t); + const resolvedTheme = deps.theme + ? resolveThemeName(ctx.cookies.get(THEME_COOKIE), deps.theme) + : ""; + const language = deps.i18n && ctx.lang ? ctx.lang : (meta.lang ?? deps.seo?.lang ?? "en"); + let documentTemplate: string | undefined; // Page layout: a page selects one by exporting `layout = ""` // (app/layouts/.wrn), else falls back to a `default` layout if one @@ -1229,6 +1234,46 @@ export function createHandlers(deps: RuntimeDeps): Handlers { } } + // A conventional app/layouts/document.wrn is a request-aware, top-level + // document shell. It wraps the selected page layout and may own html, head, + // body, and #app. The SSR renderer still merges framework metadata/assets. + const documentLayout = + layoutName === "document" + ? undefined + : router.layouts.find((item) => item.name === "document"); + if (documentLayout) { + try { + const documentMod = await loadModule(documentLayout.file); + const documentRender = ( + documentMod as { render?: (props: Record) => string } + ).render; + if (typeof documentRender === "function") { + const rendered = String( + documentRender({ + cookies: ctx.cookies.getAll(), + theme: resolvedTheme, + language, + url: ctx.url.toString(), + pathname: ctx.url.pathname, + }), + ); + documentTemplate = await renderComponents(fillSlots(rendered, body), ctx.t); + body = documentTemplate; + } + } catch (err) { + console.error("[wrnexus] document layout failed to render", err); + deps.devToolbar?.collector.add( + issueFromError(err, { + ruleId: "server/document-layout-render-error", + category: "server", + title: "Document layout failed to render", + pathname: ctx.url.pathname, + source: { file: documentLayout.file }, + }), + ); + } + } + if (isMobileRequest) body = revealMobileOnlyHtml(body); // i18n: resolve `{t:key}` / `t:attr` markers against the request language. @@ -1243,9 +1288,7 @@ export function createHandlers(deps: RuntimeDeps): Handlers { // attributes: no-flash theme (from cookie, validated) + active lang. const attrs: string[] = []; - if (deps.theme) - attrs.push(`data-theme="${resolveThemeName(ctx.cookies.get(THEME_COOKIE), deps.theme)}"`); - const language = deps.i18n && ctx.lang ? ctx.lang : (meta.lang ?? deps.seo?.lang ?? "en"); + if (deps.theme) attrs.push(`data-theme="${resolvedTheme}"`); attrs.push(`lang="${safeLanguageTag(language)}"`); const htmlAttrs = attrs.length ? ` ${attrs.join(" ")}` : undefined; @@ -1271,6 +1314,7 @@ export function createHandlers(deps: RuntimeDeps): Handlers { .filter(Boolean) .join("\n") || undefined, htmlAttrs, + documentTemplate, }); // Conditional GET: hash the page CONTENT (`body`), not the assembled shell — // the shell carries a per-request CSP nonce in dev, which would otherwise make @@ -1392,12 +1436,21 @@ export function createHandlers(deps: RuntimeDeps): Handlers { * attribute values, so component props arrive as the author wrote them. */ function decodeHtmlEntities(value: string): string { - return value - .replace(/"/g, '"') - .replace(/'/g, "'") - .replace(/</g, "<") - .replace(/>/g, ">") - .replace(/&/g, "&"); + let decoded = value; + // Static page attributes can be escaped by their author/generator and then + // escaped again by the page compiler. Decode both layers so structured + // component props arrive as valid JSON instead of `"` text. + for (let pass = 0; pass < 2; pass += 1) { + const next = decoded + .replace(/"/g, '"') + .replace(/'/g, "'") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/&/g, "&"); + if (next === decoded) break; + decoded = next; + } + return decoded; } /** Content types worth gzipping (text + text-like application types). */ @@ -1554,10 +1607,10 @@ export function fillSlots(html: string, inner: string): string { */ export function parseComponentProps(attrStr: string): Record { const props: Record = {}; - for (const m of attrStr.matchAll(/([A-Za-z_][\w-]*)="([^"]*)"/g)) { + for (const m of attrStr.matchAll(/([A-Za-z_][\w-]*)(?:="([^"]*)")?/g)) { const key = m[1]!; if (key === "data-component") continue; - props[key] = decodeHtmlEntities(m[2]!); + props[key] = decodeHtmlEntities(m[2] ?? ""); } return props; } diff --git a/packages/dev-server/test/props.test.ts b/packages/dev-server/test/props.test.ts index 1f36bf3f..3402b263 100644 --- a/packages/dev-server/test/props.test.ts +++ b/packages/dev-server/test/props.test.ts @@ -2,8 +2,18 @@ import { test, expect } from "bun:test"; import { parseComponentProps, resolveTProps } from "../src/runtime.ts"; test("parseComponentProps extracts quoted attrs, skips data-component", () => { - const props = parseComponentProps('data-component="badge" label="New" count="3"'); - expect(props).toEqual({ label: "New", count: "3" }); + const props = parseComponentProps( + 'data-component="badge" label="New" count="3" disabled autofocus', + ); + expect(props).toEqual({ label: "New", count: "3", disabled: "", autofocus: "" }); +}); + +test("parseComponentProps decodes compiler-escaped structured props", () => { + const props = parseComponentProps( + 'data-component="list" items="[{&quot;label&quot;:&quot;First&quot;}]"', + ); + expect(props.items).toBe('[{"label":"First"}]'); + expect(JSON.parse(props.items!)).toEqual([{ label: "First" }]); }); test("resolveTProps translates {t:key} markers via the active language", () => { diff --git a/packages/dev-toolbar/package.json b/packages/dev-toolbar/package.json index 480e3428..8a8670cd 100644 --- a/packages/dev-toolbar/package.json +++ b/packages/dev-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-toolbar", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "sideEffects": false, diff --git a/packages/encryption/package.json b/packages/encryption/package.json index af6aa82e..85bb5b99 100644 --- a/packages/encryption/package.json +++ b/packages/encryption/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/encryption", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/helpers/package.json b/packages/helpers/package.json index 53257653..d0ac053f 100644 --- a/packages/helpers/package.json +++ b/packages/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/helpers", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "description": "Safe convenience helpers for WrNexus request contexts and common application flows.", diff --git a/packages/i18n/package.json b/packages/i18n/package.json index d45cdab6..886b9e5d 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/i18n", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/jwt/package.json b/packages/jwt/package.json index 5b0b7198..cef79e38 100644 --- a/packages/jwt/package.json +++ b/packages/jwt/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/jwt", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/mobile/package.json b/packages/mobile/package.json index be8835bd..05dd7a41 100644 --- a/packages/mobile/package.json +++ b/packages/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/mobile", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/native/package.json b/packages/native/package.json index 217547c3..772c6cf3 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/native", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/oauth/package.json b/packages/oauth/package.json index 9a234802..140a37e5 100644 --- a/packages/oauth/package.json +++ b/packages/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/oauth", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 2c491ce3..b80abe95 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/plugin", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/pubsub/package.json b/packages/pubsub/package.json index 85531a56..48e53937 100644 --- a/packages/pubsub/package.json +++ b/packages/pubsub/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/pubsub", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/queue/package.json b/packages/queue/package.json index a184a140..788a559b 100644 --- a/packages/queue/package.json +++ b/packages/queue/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/queue", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/reactive/package.json b/packages/reactive/package.json index d2064ff7..d34981e9 100644 --- a/packages/reactive/package.json +++ b/packages/reactive/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/reactive", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/router/package.json b/packages/router/package.json index 959dc0a0..94f90e42 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/router", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/ssr/package.json b/packages/ssr/package.json index 7a5e3ed0..7dd88923 100644 --- a/packages/ssr/package.json +++ b/packages/ssr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ssr", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/ssr/src/index.ts b/packages/ssr/src/index.ts index f55944bd..a18eb77a 100644 --- a/packages/ssr/src/index.ts +++ b/packages/ssr/src/index.ts @@ -31,6 +31,12 @@ export interface RenderOptions { extraBody?: string; /** Attributes for the `` element, e.g. ` data-theme="dark"` (trusted). */ htmlAttrs?: string; + /** + * Optional application-authored full document shell. It must contain + * ``, ``, and ``. Framework metadata, assets, and scripts + * are merged into it instead of wrapping the rendered body again. + */ + documentTemplate?: string; } /** @@ -59,6 +65,25 @@ export function renderDocument(opts: RenderOptions): string { ? (opts.htmlAttrs ?? "") : `${opts.htmlAttrs ?? ""} lang="en"`; + if (opts.documentTemplate) { + let document = opts.documentTemplate.trim(); + if (!/^/i.test(document)) document = `\n${document}`; + document = document.replace(/]*)>/i, (_match, existing: string) => { + const language = /(?:^|\s)lang\s*=/.test(`${existing}${opts.htmlAttrs ?? ""}`) + ? "" + : ' lang="en"'; + return ``; + }); + const headContent = ` + + + + ${title}${seoTags}${preloadTags}${extraHead}`; + document = document.replace(/]*)>/i, `${headContent}`); + document = document.replace(/<\/body>/i, `${scriptTags}${extraBody}\n `); + return `${document}\n`; + } + return ` diff --git a/packages/ssr/test/ssr.test.ts b/packages/ssr/test/ssr.test.ts index bf48b96f..f724e08e 100644 --- a/packages/ssr/test/ssr.test.ts +++ b/packages/ssr/test/ssr.test.ts @@ -36,6 +36,24 @@ test("always emits a document language and preserves an explicit language", () = expect(explicit).not.toContain('lang="en"'); }); +test("merges framework head and scripts into an application document template", () => { + const html = renderDocument({ + meta: { title: "Document layout" }, + body: "", + htmlAttrs: ' data-theme="dark"', + scripts: ["/page.js"], + documentTemplate: + '
    Page
    ', + }); + expect(html).toStartWith(""); + expect(html).toContain(''); + expect(html).toContain("Document layout"); + expect(html).toContain(''); + expect(html).toContain(''); + expect(html.match(/ { async function* body() { yield "

    Shell

    "; diff --git a/packages/styles/package.json b/packages/styles/package.json index cfa7d127..61c25608 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/styles", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/syntax/package.json b/packages/syntax/package.json index 0a30139c..2f0cdd7e 100644 --- a/packages/syntax/package.json +++ b/packages/syntax/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/syntax", - "version": "0.3.4", + "version": "0.3.5", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/syntax/src/index.ts b/packages/syntax/src/index.ts index 5c7ccaee..9270f5f6 100644 --- a/packages/syntax/src/index.ts +++ b/packages/syntax/src/index.ts @@ -8,6 +8,7 @@ export type { DataApiBlock, DataMode, EffectBlock, + EventDecl, LifecycleBlock, LoadBlock, ModeFunctionsBlock, diff --git a/packages/syntax/src/parser.ts b/packages/syntax/src/parser.ts index 453b7f63..0d1d072e 100644 --- a/packages/syntax/src/parser.ts +++ b/packages/syntax/src/parser.ts @@ -165,6 +165,11 @@ export interface PropDecl { default: string; } +export interface EventDecl { + /** Public event name used by consumers as `@name="handler(event)"`. */ + name: string; +} + export interface PageAst { type: "page"; /** Static ES module imports declared before the WRN root declaration. */ @@ -183,6 +188,8 @@ export interface PageAst { hydrate?: string; /** Declared component props (empty for pages). */ props: PropDecl[]; + /** Public events exposed by a reusable component. */ + events: EventDecl[]; /** Raw declarations from `types { ... }`, emitted as TypeScript. */ types: string[]; states: StateDecl[]; @@ -289,6 +296,7 @@ export function parse(source: string): PageAst { let runtime: PageAst["runtime"]; let hydrate: string | undefined; const props: PropDecl[] = []; + const events: EventDecl[] = []; const types: string[] = []; const states: StateDecl[] = []; const computed: ComputedDecl[] = []; @@ -341,12 +349,31 @@ export function parse(source: string): PageAst { break; } case "props": { - // props { name: Type = } — omit the default for required props. + // props { name: Type = ; @event name = function } lx.next(); expect("lbrace"); while (lx.peek().type !== "rbrace") { const t = lx.peek(); if (t.type === "eof") throw new ParseError("Unexpected end of input inside props"); + if (t.type === "at") { + lx.next(); + const declarationKind = expect("ident"); + if (declarationKind.value !== "event") { + throw new ParseError( + `Expected '@event' but got '@${declarationKind.value}' at offset ${declarationKind.pos}`, + ); + } + const eventName = expect("ident").value; + expect("eq"); + const marker = lx.readPropInitializer(); + if (marker !== "function") { + throw new ParseError( + `Event '${eventName}' must be declared as '@event ${eventName} = function'`, + ); + } + events.push({ name: eventName }); + continue; + } if (t.type !== "ident") { throw new ParseError(`Expected a prop name at offset ${t.pos}`); } @@ -627,6 +654,7 @@ export function parse(source: string): PageAst { runtime, hydrate, props, + events, types, states, computed, diff --git a/packages/syntax/test/syntax.test.ts b/packages/syntax/test/syntax.test.ts index d0d48c41..37d963c6 100644 --- a/packages/syntax/test/syntax.test.ts +++ b/packages/syntax/test/syntax.test.ts @@ -92,3 +92,17 @@ test("parses keyed each blocks without changing legacy loop syntax", () => { expect.objectContaining({ type: "each", key: undefined }), ); }); + +test("parses public component event declarations inside props", () => { + const ast = parse(`component SearchBox { + props { + value = "" + @event search = function + @event clear = function + } + view { } + }`); + + expect(ast.props.map((prop) => prop.name)).toEqual(["value"]); + expect(ast.events).toEqual([{ name: "search" }, { name: "clear" }]); +}); diff --git a/packages/test/package.json b/packages/test/package.json index 7748ca16..7772b71c 100644 --- a/packages/test/package.json +++ b/packages/test/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/test", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/test/src/index.ts b/packages/test/src/index.ts index f52fdd02..177b9e70 100644 --- a/packages/test/src/index.ts +++ b/packages/test/src/index.ts @@ -95,6 +95,10 @@ export function mountHtml(html: string): { g.window = win; g.document = win.document; g.NodeFilter = win.NodeFilter; + g.HTMLInputElement = win.HTMLInputElement; + g.HTMLOptionElement = win.HTMLOptionElement; + g.HTMLSelectElement = win.HTMLSelectElement; + g.HTMLTextAreaElement = win.HTMLTextAreaElement; (0, eval)(getReactiveRuntime()); (win as { __wrnexusHydrateScopes?: (root: unknown) => void }).__wrnexusHydrateScopes?.( win.document, diff --git a/packages/tracking/package.json b/packages/tracking/package.json index 4a404fe6..e4c90fd0 100644 --- a/packages/tracking/package.json +++ b/packages/tracking/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/tracking", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md index 3b2817cd..c45638be 100644 --- a/packages/ui/COMPONENTS.md +++ b/packages/ui/COMPONENTS.md @@ -1,8139 +1,784 @@ # WRNexus UI component reference -This reference is generated from the 902 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. +This reference is generated from the 85 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. -## Actions +## Advanced-forms -### AcceptAllCookiesButton +### AdvancedSelect -Reusable accept all cookies button component. +Theme-aware, responsive advanced select component. -- Mount: `data-component="AcceptAllCookiesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleNewsletterCTA - -Reusable article newsletter c t a component. - -- Mount: `data-component="ArticleNewsletterCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleShareActions - -Reusable article share actions component. - -- Mount: `data-component="ArticleShareActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### BackButton - -Reusable back button component. - -- Mount: `data-component="BackButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### Button - -Reusable button component. - -- Mount: `data-component="Button"` -- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `fullWidth: boolean = false`, `className: string = ""` -- Slots: `default` -- Events: None - -### CenteredCTA - -Reusable centered c t a component. - -- Mount: `data-component="CenteredCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ClearFiltersButton - -Reusable clear filters button component. - -- Mount: `data-component="ClearFiltersButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CloseButton - -Reusable close button component. - -- Mount: `data-component="CloseButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeCopyButton - -Reusable code copy button component. - -- Mount: `data-component="CodeCopyButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactCTA - -Reusable contact c t a component. - -- Mount: `data-component="ContactCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactSalesButton - -Reusable contact sales button component. - -- Mount: `data-component="ContactSalesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CopyButton - -Reusable copy button component. - -- Mount: `data-component="CopyButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CopyCodeButton - -Reusable copy code button component. - -- Mount: `data-component="CopyCodeButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DangerButton - -Reusable danger button component. - -- Mount: `data-component="DangerButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeveloperCTA - -Reusable developer c t a component. - -- Mount: `data-component="DeveloperCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DoNotSellLink - -Reusable do not sell link component. - -- Mount: `data-component="DoNotSellLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadAction - -Reusable download action component. - -- Mount: `data-component="DownloadAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadButton - -Reusable download button component. - -- Mount: `data-component="DownloadButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadPolicyButton - -Reusable download policy button component. - -- Mount: `data-component="DownloadPolicyButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnterpriseCTA - -Reusable enterprise c t a component. - -- Mount: `data-component="EnterpriseCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorActions - -Reusable error actions component. - -- Mount: `data-component="ErrorActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorSupportLink - -Reusable error support link component. - -- Mount: `data-component="ErrorSupportLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExternalLink - -Reusable external link component. - -- Mount: `data-component="ExternalLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FieldActions - -Reusable field actions component. - -- Mount: `data-component="FieldActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FinalCTA - -Reusable final c t a component. - -- Mount: `data-component="FinalCTA"` -- Props: `label: string = "Get started"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormActions - -Reusable form actions component. - -- Mount: `data-component="FormActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### GhostButton - -Reusable ghost button component. - -- Mount: `data-component="GhostButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### GradientCTA - -Reusable gradient c t a component. - -- Mount: `data-component="GradientCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeaderActions - -Reusable header actions component. - -- Mount: `data-component="HeaderActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroActions - -Reusable hero actions component. - -- Mount: `data-component="HeroActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroPrimaryAction - -Reusable hero primary action component. - -- Mount: `data-component="HeroPrimaryAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroSecondaryAction - -Reusable hero secondary action component. - -- Mount: `data-component="HeroSecondaryAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### IconButton - -Reusable icon button component. - -- Mount: `data-component="IconButton"` -- Props: `class: string = ""`, `label: string = "Action"`, `icon: string = "•"`, `variant: string = "ghost"`, `disabled: boolean = false` -- Slots: None -- Events: None - -### LegalPrintButton - -Reusable legal print button component. - -- Mount: `data-component="LegalPrintButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LinkButton - -Reusable link button component. - -- Mount: `data-component="LinkButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LoadingButton - -Reusable loading button component. - -- Mount: `data-component="LoadingButton"` -- Props: `label: string = "Continue"`, `loadingLabel: string = "Loading…"`, `loading: boolean = false`, `disabled: boolean = false`, `type: string = "button"`, `variant: string = "primary"`, `class: string = ""` -- Slots: None -- Events: None - -### LocalizedRouteLink - -Reusable localized route link component. - -- Mount: `data-component="LocalizedRouteLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileMenuButton - -Reusable mobile menu button component. - -- Mount: `data-component="MobileMenuButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewsletterCTA - -Reusable newsletter c t a component. - -- Mount: `data-component="NewsletterCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### OpenAPICTA - -Reusable open a p i c t a component. - -- Mount: `data-component="OpenAPICTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PasskeyButton - -Reusable passkey button component. - -- Mount: `data-component="PasskeyButton"` -- Props: `label: string = "Continue with a passkey"`, `description: string = "Use fingerprint, face recognition, or device PIN"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### PlanCTA - -Reusable plan c t a component. - -- Mount: `data-component="PlanCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PostmanCTA - -Reusable postman c t a component. - -- Mount: `data-component="PostmanCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrimaryButton - -Reusable primary button component. - -- Mount: `data-component="PrimaryButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrintAction - -Reusable print action component. - -- Mount: `data-component="PrintAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrintPolicyButton - -Reusable print policy button component. - -- Mount: `data-component="PrintPolicyButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductCTA - -Reusable product c t a component. - -- Mount: `data-component="ProductCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### RejectOptionalCookiesButton - -Reusable reject optional cookies button component. - -- Mount: `data-component="RejectOptionalCookiesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ReopenCookieSettingsButton - -Reusable reopen cookie settings button component. - -- Mount: `data-component="ReopenCookieSettingsButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResponsibleDisclosureCTA - -Reusable responsible disclosure c t a component. - -- Mount: `data-component="ResponsibleDisclosureCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SaveCookiePreferencesButton - -Reusable save cookie preferences button component. - -- Mount: `data-component="SaveCookiePreferencesButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchButton - -Reusable search button component. - -- Mount: `data-component="SearchButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecondaryButton - -Reusable secondary button component. - -- Mount: `data-component="SecondaryButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SectionActions - -Reusable section actions component. - -- Mount: `data-component="SectionActions"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ShareAction - -Reusable share action component. - -- Mount: `data-component="ShareAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ShareButton - -Reusable share button component. - -- Mount: `data-component="ShareButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SignInLink - -Reusable sign in link component. - -- Mount: `data-component="SignInLink"` -- Props: `label: string = "Sign in with password"`, `description: string = "Use your username or email and password"`, `href: string = ""`, `type: string = "button"`, `variant: string = "secondary"`, `disabled: boolean = false`, `icon: string = "icon-[lucide--lock-keyhole]"`, `tone: string = "password"`, `class: string = ""` -- Slots: None -- Events: None - -### SkipLink - -Reusable skip link component. - -- Mount: `data-component="SkipLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitButton - -Reusable split button component. - -- Mount: `data-component="SplitButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitCTA - -Reusable split c t a component. - -- Mount: `data-component="SplitCTA"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### StartFreeButton - -Reusable start free button component. - -- Mount: `data-component="StartFreeButton"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### TertiaryButton - -Reusable tertiary button component. - -- Mount: `data-component="TertiaryButton"` -- Props: `label: string = "Action"`, `type: string = "button"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### TextLink - -Reusable text link component. - -- Mount: `data-component="TextLink"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ToastAction - -Reusable toast action component. - -- Mount: `data-component="ToastAction"` -- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -## Content - -### AccessibleAccordion - -Reusable accessible accordion component. - -- Mount: `data-component="AccessibleAccordion"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleCarousel - -Reusable accessible carousel component. - -- Mount: `data-component="AccessibleCarousel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleChartSummary - -Reusable accessible chart summary component. - -- Mount: `data-component="AccessibleChartSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleErrorSummary - -Reusable accessible error summary component. - -- Mount: `data-component="AccessibleErrorSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleIcon - -Reusable accessible icon component. - -- Mount: `data-component="AccessibleIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleTabs - -Reusable accessible tabs component. - -- Mount: `data-component="AccessibleTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleTooltip - -Reusable accessible tooltip component. - -- Mount: `data-component="AccessibleTooltip"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Accordion - -Reusable accordion component. - -- Mount: `data-component="Accordion"` -- Props: `class: string = ""`, `title: string = "Question"`, `open: boolean = false` -- Slots: `default` -- Events: `click` - -### AddOnCard - -Reusable add on card component. - -- Mount: `data-component="AddOnCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AddressPreview - -Reusable address preview component. - -- Mount: `data-component="AddressPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AdvancedFilterBuilder - -Reusable advanced filter builder component. - -- Mount: `data-component="AdvancedFilterBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AnalyticsDashboardPreview - -Reusable analytics dashboard preview component. - -- Mount: `data-component="AnalyticsDashboardPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiEndpointCard - -Reusable api endpoint card component. - -- Mount: `data-component="ApiEndpointCard"` -- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "View endpoint"` -- Slots: `default` -- Events: None - -### ApiErrorExample - -Reusable api error example component. - -- Mount: `data-component="ApiErrorExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiKeyDisplay - -Reusable api key display component. - -- Mount: `data-component="ApiKeyDisplay"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiRequestExample - -Reusable api request example component. - -- Mount: `data-component="ApiRequestExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiResponseExample - -Reusable api response example component. - -- Mount: `data-component="ApiResponseExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiSchemaViewer - -Reusable api schema viewer component. - -- Mount: `data-component="ApiSchemaViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AssetCard - -Reusable asset card component. - -- Mount: `data-component="AssetCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AttachmentUpload - -Reusable attachment upload component. - -- Mount: `data-component="AttachmentUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AudioUpload - -Reusable audio upload component. - -- Mount: `data-component="AudioUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuditLogPreview - -Reusable audit log preview component. - -- Mount: `data-component="AuditLogPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthorAvatar - -Reusable author avatar component. - -- Mount: `data-component="AuthorAvatar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthorCard - -Reusable author card component. - -- Mount: `data-component="AuthorCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthorizedApplicationCard - -Reusable authorized application card component. - -- Mount: `data-component="AuthorizedApplicationCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AutomationExampleCard - -Reusable automation example card component. - -- Mount: `data-component="AutomationExampleCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AvailabilityCalendar - -Reusable availability calendar component. - -- Mount: `data-component="AvailabilityCalendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Avatar - -Reusable avatar component. - -- Mount: `data-component="Avatar"` -- Props: `class: string = ""`, `src: string = ""`, `alt: string = ""`, `initials: string = "WR"`, `size: string = "md"` -- Slots: None -- Events: None - -### AvatarUpload - -Reusable avatar upload component. - -- Mount: `data-component="AvatarUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BankTransferDetails - -Reusable bank transfer details component. - -- Mount: `data-component="BankTransferDetails"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BillingAddressForm - -Reusable billing address form component. - -- Mount: `data-component="BillingAddressForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BillingExample - -Reusable billing example component. - -- Mount: `data-component="BillingExample"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlogCard - -Reusable blog card component. - -- Mount: `data-component="BlogCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlogSearch - -Reusable blog search component. - -- Mount: `data-component="BlogSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BodyText - -Reusable body text component. - -- Mount: `data-component="BodyText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### BudgetRangeSlider - -Reusable budget range slider component. - -- Mount: `data-component="BudgetRangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Calendar - -Reusable calendar component. - -- Mount: `data-component="Calendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CampaignCard - -Reusable campaign card component. - -- Mount: `data-component="CampaignCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--send]"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CampaignPerformancePreview - -Reusable campaign performance preview component. - -- Mount: `data-component="CampaignPerformancePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CardPaymentForm - -Reusable card payment form component. - -- Mount: `data-component="CardPaymentForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CareerApplicationForm - -Reusable career application form component. - -- Mount: `data-component="CareerApplicationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Carousel - -Reusable carousel component. - -- Mount: `data-component="Carousel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaseStudyCard - -Reusable case study card component. - -- Mount: `data-component="CaseStudyCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaseStudyPreview - -Reusable case study preview component. - -- Mount: `data-component="CaseStudyPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CertificateUpload - -Reusable certificate upload component. - -- Mount: `data-component="CertificateUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelCard - -Reusable channel card component. - -- Mount: `data-component="ChannelCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = ""`, `actionLabel: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelIcon - -Reusable channel icon component. - -- Mount: `data-component="ChannelIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChartTooltip - -Reusable chart tooltip component. - -- Mount: `data-component="ChartTooltip"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Checklist - -Reusable checklist component. - -- Mount: `data-component="Checklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ClickableCard - -Reusable clickable card component. - -- Mount: `data-component="ClickableCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Code - -Reusable code component. - -- Mount: `data-component="Code"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeBlock - -Reusable code block component. - -- Mount: `data-component="CodeBlock"` -- Props: `language: string = "text"`, `title: string = ""`, `code: string = ""`, `copyable: boolean = true`, `class: string = ""` -- Slots: None -- Events: None - -### CodeTabs - -Reusable code tabs component. - -- Mount: `data-component="CodeTabs"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### CodeText - -Reusable code text component. - -- Mount: `data-component="CodeText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorSwatch - -Reusable color swatch component. - -- Mount: `data-component="ColorSwatch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CommandBlock - -Reusable command block component. - -- Mount: `data-component="CommandBlock"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComplianceProgramCard - -Reusable compliance program card component. - -- Mount: `data-component="ComplianceProgramCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConnectedAccountCard - -Reusable connected account card component. - -- Mount: `data-component="ConnectedAccountCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConnectionCard - -Reusable connection card component. - -- Mount: `data-component="ConnectionCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConsentTimelinePreview - -Reusable consent timeline preview component. - -- Mount: `data-component="ConsentTimelinePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactCard - -Reusable contact card component. - -- Mount: `data-component="ContactCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactForm - -Reusable contact form component. - -- Mount: `data-component="ContactForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactSalesForm - -Reusable contact sales form component. - -- Mount: `data-component="ContactSalesForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContextSwitcher - -Reusable context switcher component. - -- Mount: `data-component="ContextSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConversationPreview - -Reusable conversation preview component. - -- Mount: `data-component="ConversationPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CostSummary - -Reusable cost summary component. - -- Mount: `data-component="CostSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CronBuilder - -Reusable cron builder component. - -- Mount: `data-component="CronBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CsvUpload - -Reusable csv upload component. - -- Mount: `data-component="CsvUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CustomerLogo - -Reusable customer logo component. - -- Mount: `data-component="CustomerLogo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CustomerStoryCard - -Reusable customer story card component. - -- Mount: `data-component="CustomerStoryCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DataProtectionCard - -Reusable data protection card component. - -- Mount: `data-component="DataProtectionCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DateRangeCalendar - -Reusable date range calendar component. - -- Mount: `data-component="DateRangeCalendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DateRangeSlider - -Reusable date range slider component. - -- Mount: `data-component="DateRangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeliveryPreview - -Reusable delivery preview component. - -- Mount: `data-component="DeliveryPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DemoRequestForm - -Reusable demo request form component. - -- Mount: `data-component="DemoRequestForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeveloperSearch - -Reusable developer search component. - -- Mount: `data-component="DeveloperSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeviceCard - -Reusable device card component. - -- Mount: `data-component="DeviceCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DocumentPreview - -Reusable document preview component. - -- Mount: `data-component="DocumentPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DocumentUpload - -Reusable document upload component. - -- Mount: `data-component="DocumentUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadGateForm - -Reusable download gate form component. - -- Mount: `data-component="DownloadGateForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DownloadResourceForm - -Reusable download resource form component. - -- Mount: `data-component="DownloadResourceForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DurationSlider - -Reusable duration slider component. - -- Mount: `data-component="DurationSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ElevatedCard - -Reusable elevated card component. - -- Mount: `data-component="ElevatedCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmailComposer - -Reusable email composer component. - -- Mount: `data-component="EmailComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnterprisePricingCard - -Reusable enterprise pricing card component. - -- Mount: `data-component="EnterprisePricingCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnvironmentSwitcher - -Reusable environment switcher component. - -- Mount: `data-component="EnvironmentSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorCard - -Reusable error card component. - -- Mount: `data-component="ErrorCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorCode - -Reusable error code component. - -- Mount: `data-component="ErrorCode"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorIllustration - -Reusable error illustration component. - -- Mount: `data-component="ErrorIllustration"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorPage - -Reusable error page component. - -- Mount: `data-component="ErrorPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EstimatedCostSummary - -Reusable estimated cost summary component. - -- Mount: `data-component="EstimatedCostSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExpandableText - -Reusable expandable text component. - -- Mount: `data-component="ExpandableText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EyebrowText - -Reusable eyebrow text component. - -- Mount: `data-component="EyebrowText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FactorCard - -Reusable factor card component. - -- Mount: `data-component="FactorCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FallbackRouteBuilder - -Reusable fallback route builder component. - -- Mount: `data-component="FallbackRouteBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FaviconUpload - -Reusable favicon upload component. - -- Mount: `data-component="FaviconUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureCard - -Reusable feature card component. - -- Mount: `data-component="FeatureCard"` -- Props: `class: string = ""`, `icon: string = "icon-[lucide--sparkles]"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""` -- Slots: None -- Events: None - -### FeatureChecklist - -Reusable feature checklist component. - -- Mount: `data-component="FeatureChecklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeaturedBlogCard - -Reusable featured blog card component. - -- Mount: `data-component="FeaturedBlogCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureIconCard - -Reusable feature icon card component. - -- Mount: `data-component="FeatureIconCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureTabs - -Reusable feature tabs component. - -- Mount: `data-component="FeatureTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileSizeLabel - -Reusable file size label component. - -- Mount: `data-component="FileSizeLabel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileUpload - -Reusable file upload component. - -- Mount: `data-component="FileUpload"` -- Props: `class: string = ""`, `id: string = "file"`, `name: string = "file"`, `label: string = "Upload file"`, `accept: string = ""`, `multiple: boolean = false`, `help: string = "Drag and drop or browse"` -- Slots: None -- Events: None - -### FooterLanguageSwitcher - -Reusable footer language switcher component. - -- Mount: `data-component="FooterLanguageSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ForbiddenPage - -Reusable forbidden page component. - -- Mount: `data-component="ForbiddenPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ForgotPasswordForm - -Reusable forgot password form component. - -- Mount: `data-component="ForgotPasswordForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Form - -Reusable form component. - -- Mount: `data-component="Form"` -- Props: `action: string = ""`, `method: string = "post"`, `name: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormErrorSummary - -Reusable form error summary component. - -- Mount: `data-component="FormErrorSummary"` -- Props: `class: string = ""`, `title: string = "Please fix the following"`, `visible: boolean = true` -- Slots: `default` -- Events: None - -### FormHelpText - -Reusable form help text component. - -- Mount: `data-component="FormHelpText"` -- Props: `id: string = ""`, `text: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormLabel - -Reusable form label component. - -- Mount: `data-component="FormLabel"` -- Props: `for: string = ""`, `label: string = "Label"`, `required: boolean = false`, `optional: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### GlassCard - -Reusable glass card component. - -- Mount: `data-component="GlassCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GlobalSearch - -Reusable global search component. - -- Mount: `data-component="GlobalSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideCard - -Reusable guide card component. - -- Mount: `data-component="GuideCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideChecklist - -Reusable guide checklist component. - -- Mount: `data-component="GuideChecklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideStep - -Reusable guide step component. - -- Mount: `data-component="GuideStep"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroGradientText - -Reusable hero gradient text component. - -- Mount: `data-component="HeroGradientText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroProductPreview - -Reusable hero product preview component. - -- Mount: `data-component="HeroProductPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HeroTrustText - -Reusable hero trust text component. - -- Mount: `data-component="HeroTrustText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HighlightText - -Reusable highlight text component. - -- Mount: `data-component="HighlightText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HolidayCalendar - -Reusable holiday calendar component. - -- Mount: `data-component="HolidayCalendar"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HumanApprovalStep - -Reusable human approval step component. - -- Mount: `data-component="HumanApprovalStep"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Icon - -Reusable icon component. - -- Mount: `data-component="Icon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Illustration - -Reusable illustration component. - -- Mount: `data-component="Illustration"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageCompressionPreview - -Reusable image compression preview component. - -- Mount: `data-component="ImageCompressionPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageUpload - -Reusable image upload component. - -- Mount: `data-component="ImageUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentCard - -Reusable incident card component. - -- Mount: `data-component="IncidentCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InfoCard - -Reusable info card component. - -- Mount: `data-component="InfoCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InlineCode - -Reusable inline code component. - -- Mount: `data-component="InlineCode"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IntegrationCard - -Reusable integration card component. - -- Mount: `data-component="IntegrationCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--plug-zap]"`, `class: string = ""` -- Slots: `default` -- Events: None - -### InvoiceLineItem - -Reusable invoice line item component. - -- Mount: `data-component="InvoiceLineItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InvoiceSummary - -Reusable invoice summary component. - -- Mount: `data-component="InvoiceSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JobCard - -Reusable job card component. - -- Mount: `data-component="JobCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JsonViewer - -Reusable json viewer component. - -- Mount: `data-component="JsonViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### KycDocumentUpload - -Reusable kyc document upload component. - -- Mount: `data-component="KycDocumentUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LanguageSwitcher - -Reusable language switcher component. - -- Mount: `data-component="LanguageSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LeadText - -Reusable lead text component. - -- Mount: `data-component="LeadText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalContactBlock - -Reusable legal contact block component. - -- Mount: `data-component="LegalContactBlock"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalSummary - -Reusable legal summary component. - -- Mount: `data-component="LegalSummary"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Logo - -Reusable logo component. - -- Mount: `data-component="Logo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LogoUpload - -Reusable logo upload component. - -- Mount: `data-component="LogoUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceCard - -Reusable maintenance card component. - -- Mount: `data-component="MaintenanceCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenancePage - -Reusable maintenance page component. - -- Mount: `data-component="MaintenancePage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageComposer - -Reusable message composer component. - -- Mount: `data-component="MessageComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageComposerPreview - -Reusable message composer preview component. - -- Mount: `data-component="MessageComposerPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessagePreview - -Reusable message preview component. - -- Mount: `data-component="MessagePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageVolumeSlider - -Reusable message volume slider component. - -- Mount: `data-component="MessageVolumeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MetricCard - -Reusable metric card component. - -- Mount: `data-component="MetricCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MetricText - -Reusable metric text component. - -- Mount: `data-component="MetricText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileTableCard - -Reusable mobile table card component. - -- Mount: `data-component="MobileTableCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MultiFileUpload - -Reusable multi file upload component. - -- Mount: `data-component="MultiFileUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MutedText - -Reusable muted text component. - -- Mount: `data-component="MutedText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NavigationItem - -Reusable navigation item component. - -- Mount: `data-component="NavigationItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewsletterForm - -Reusable newsletter form component. - -- Mount: `data-component="NewsletterForm"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Stay up to date"`, `description: string = ""`, `placeholder: string = "Enter your email"`, `buttonLabel: string = "Subscribe"`, `action: string = "/newsletter/subscribe"`, `method: string = "post"`, `emailName: string = "email"`, `privacyLabel: string = ""`, `privacyHref: string = "/privacy"`, `successMessage: string = "You are subscribed."`, `errorMessage: string = "Something went wrong. Please try again."`, `iconClass: string = "icon-[lucide--mail]"`, `centered: boolean = false`, `compact: boolean = false`, `showIcon: boolean = true`, `showPrivacy: boolean = true`, `fullWidth: boolean = false` -- Slots: None -- Events: `submit`, `input` - -### NotFoundPage - -Reusable not found page component. - -- Mount: `data-component="NotFoundPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NotificationCard - -Reusable notification card component. - -- Mount: `data-component="NotificationCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OfficeCard - -Reusable office card component. - -- Mount: `data-component="OfficeCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OfflinePage - -Reusable offline page component. - -- Mount: `data-component="OfflinePage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OneTimeSecretDisplay - -Reusable one time secret display component. - -- Mount: `data-component="OneTimeSecretDisplay"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OpacitySlider - -Reusable opacity slider component. - -- Mount: `data-component="OpacitySlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OtpVerificationForm - -Reusable otp verification form component. - -- Mount: `data-component="OtpVerificationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### OutlinedCard - -Reusable outlined card component. - -- Mount: `data-component="OutlinedCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PartnerApplicationForm - -Reusable partner application form component. - -- Mount: `data-component="PartnerApplicationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PartnerProgramCard - -Reusable partner program card component. - -- Mount: `data-component="PartnerProgramCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PaymentMethodCard - -Reusable payment method card component. - -- Mount: `data-component="PaymentMethodCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PdfPreview - -Reusable pdf preview component. - -- Mount: `data-component="PdfPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlatformPillarCard - -Reusable platform pillar card component. - -- Mount: `data-component="PlatformPillarCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PressReleaseCard - -Reusable press release card component. - -- Mount: `data-component="PressReleaseCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PriceRangeSlider - -Reusable price range slider component. - -- Mount: `data-component="PriceRangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PriceText - -Reusable price text component. - -- Mount: `data-component="PriceText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingCard - -Reusable pricing card component. - -- Mount: `data-component="PricingCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingContactForm - -Reusable pricing contact form component. - -- Mount: `data-component="PricingContactForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingPlanCard - -Reusable pricing plan card component. - -- Mount: `data-component="PricingPlanCard"` -- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `badgeLabel: string = "Most popular"`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"` -- Slots: `default` -- Events: None - -### ProductCard - -Reusable product card component. - -- Mount: `data-component="ProductCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### ProductIcon - -Reusable product icon component. - -- Mount: `data-component="ProductIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductLogo - -Reusable product logo component. - -- Mount: `data-component="ProductLogo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductMiniCard - -Reusable product mini card component. - -- Mount: `data-component="ProductMiniCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductNavigationCard - -Reusable product navigation card component. - -- Mount: `data-component="ProductNavigationCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProgressSlider - -Reusable progress slider component. - -- Mount: `data-component="ProgressSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProjectCard - -Reusable project card component. - -- Mount: `data-component="ProjectCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProjectSwitcher - -Reusable project switcher component. - -- Mount: `data-component="ProjectSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PublicHeaderLogo - -Reusable public header logo component. - -- Mount: `data-component="PublicHeaderLogo"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PushComposer - -Reusable push composer component. - -- Mount: `data-component="PushComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QrCode - -Reusable qr code component. - -- Mount: `data-component="QrCode"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuantityStepper - -Reusable quantity stepper component. - -- Mount: `data-component="QuantityStepper"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuoteText - -Reusable quote text component. - -- Mount: `data-component="QuoteText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RangeSlider - -Reusable range slider component. - -- Mount: `data-component="RangeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RateLimitPage - -Reusable rate limit page component. - -- Mount: `data-component="RateLimitPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RatingSlider - -Reusable rating slider component. - -- Mount: `data-component="RatingSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecoveryCodeForm - -Reusable recovery code form component. - -- Mount: `data-component="RecoveryCodeForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecurrenceRuleBuilder - -Reusable recurrence rule builder component. - -- Mount: `data-component="RecurrenceRuleBuilder"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ReportCard - -Reusable report card component. - -- Mount: `data-component="ReportCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RequestResponseViewer - -Reusable request response viewer component. - -- Mount: `data-component="RequestResponseViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RequestViewer - -Reusable request viewer component. - -- Mount: `data-component="RequestViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResetPasswordForm - -Reusable reset password form component. - -- Mount: `data-component="ResetPasswordForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceCard - -Reusable resource card component. - -- Mount: `data-component="ResourceCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceDownloadCard - -Reusable resource download card component. - -- Mount: `data-component="ResourceDownloadCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceSearch - -Reusable resource search component. - -- Mount: `data-component="ResourceSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResponseViewer - -Reusable response viewer component. - -- Mount: `data-component="ResponseViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SDKCard - -Reusable s d k card component. - -- Mount: `data-component="SDKCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SDKLanguageTabs - -Reusable s d k language tabs component. - -- Mount: `data-component="SDKLanguageTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchCategoryTabs - -Reusable search category tabs component. - -- Mount: `data-component="SearchCategoryTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchResultItem - -Reusable search result item component. - -- Mount: `data-component="SearchResultItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecretDisplay - -Reusable secret display component. - -- Mount: `data-component="SecretDisplay"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityContactCard - -Reusable security contact card component. - -- Mount: `data-component="SecurityContactCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityFeatureCard - -Reusable security feature card component. - -- Mount: `data-component="SecurityFeatureCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityReportForm - -Reusable security report form component. - -- Mount: `data-component="SecurityReportForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServerErrorPage - -Reusable server error page component. - -- Mount: `data-component="ServerErrorPage"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SessionCard - -Reusable session card component. - -- Mount: `data-component="SessionCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SetupChecklist - -Reusable setup checklist component. - -- Mount: `data-component="SetupChecklist"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SignInForm - -Reusable sign in form component. - -- Mount: `data-component="SignInForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SignUpForm - -Reusable sign up form component. - -- Mount: `data-component="SignUpForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SiteSearch - -Reusable site search component. - -- Mount: `data-component="SiteSearch"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Slider - -Reusable slider component. - -- Mount: `data-component="Slider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmallText - -Reusable small text component. - -- Mount: `data-component="SmallText"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmsComposer - -Reusable sms composer component. - -- Mount: `data-component="SmsComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatCard - -Reusable stat card component. - -- Mount: `data-component="StatCard"` -- Props: `class: string = ""`, `label: string = "Metric"`, `value: string = "0"`, `change: string = ""`, `trend: string = "neutral"` -- Slots: None -- Events: None - -### StatusSubscribeForm - -Reusable status subscribe form component. - -- Mount: `data-component="StatusSubscribeForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Stepper - -Reusable stepper component. - -- Mount: `data-component="Stepper"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SuccessCard - -Reusable success card component. - -- Mount: `data-component="SuccessCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SupportRequestForm - -Reusable support request form component. - -- Mount: `data-component="SupportRequestForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Tabs - -Reusable tabs component. - -- Mount: `data-component="Tabs"` -- Props: `class: string = ""`, `active: string = "first"` -- Slots: `first`, `second` -- Events: `click` - -### TeamMemberCard - -Reusable team member card component. - -- Mount: `data-component="TeamMemberCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TemplateCard - -Reusable template card component. - -- Mount: `data-component="TemplateCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TerminalBlock - -Reusable terminal block component. - -- Mount: `data-component="TerminalBlock"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TestimonialCard - -Reusable testimonial card component. - -- Mount: `data-component="TestimonialCard"` -- Props: `class: string = ""`, `quote: string = "Great product."`, `name: string = "Customer"`, `role: string = ""`, `company: string = ""`, `avatar: string = ""` -- Slots: None -- Events: None - -### TestimonialCarousel - -Reusable testimonial carousel component. - -- Mount: `data-component="TestimonialCarousel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ThemeSwitcher - -Reusable theme switcher component. - -- Mount: `data-component="ThemeSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimelineItem - -Reusable timeline item component. - -- Mount: `data-component="TimelineItem"` -- Props: `class: string = ""`, `title: string = "Event"`, `date: string = ""`, `description: string = ""`, `status: string = "default"` -- Slots: None -- Events: None - -### ToastIcon - -Reusable toast icon component. - -- Mount: `data-component="ToastIcon"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Tooltip - -Reusable tooltip component. - -- Mount: `data-component="Tooltip"` -- Props: `class: string = ""`, `text: string = "Helpful information"`, `position: string = "top"` -- Slots: `default` -- Events: None - -### TotpVerificationForm - -Reusable totp verification form component. - -- Mount: `data-component="TotpVerificationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TranslatedText - -Reusable translated text component. - -- Mount: `data-component="TranslatedText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TruncatedText - -Reusable truncated text component. - -- Mount: `data-component="TruncatedText"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UnifiedTimelinePreview - -Reusable unified timeline preview component. - -- Mount: `data-component="UnifiedTimelinePreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UploadItem - -Reusable upload item component. - -- Mount: `data-component="UploadItem"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UploadPreview - -Reusable upload preview component. - -- Mount: `data-component="UploadPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UserCard - -Reusable user card component. - -- Mount: `data-component="UserCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ValueCard - -Reusable value card component. - -- Mount: `data-component="ValueCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VerticalTabs - -Reusable vertical tabs component. - -- Mount: `data-component="VerticalTabs"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VideoCard - -Reusable video card component. - -- Mount: `data-component="VideoCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VideoUpload - -Reusable video upload component. - -- Mount: `data-component="VideoUpload"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VoiceScriptComposer - -Reusable voice script composer component. - -- Mount: `data-component="VoiceScriptComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VolumeSlider - -Reusable volume slider component. - -- Mount: `data-component="VolumeSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WarningCard - -Reusable warning card component. - -- Mount: `data-component="WarningCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebhookEventCard - -Reusable webhook event card component. - -- Mount: `data-component="WebhookEventCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebhookPayloadViewer - -Reusable webhook payload viewer component. - -- Mount: `data-component="WebhookPayloadViewer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebinarCard - -Reusable webinar card component. - -- Mount: `data-component="WebinarCard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebinarRegistrationForm - -Reusable webinar registration form component. - -- Mount: `data-component="WebinarRegistrationForm"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WhatsAppComposer - -Reusable whats app composer component. - -- Mount: `data-component="WhatsAppComposer"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### Wizard - -Reusable wizard component. - -- Mount: `data-component="Wizard"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkflowCanvasPreview - -Reusable workflow canvas preview component. - -- Mount: `data-component="WorkflowCanvasPreview"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkspaceCard - -Reusable workspace card component. - -- Mount: `data-component="WorkspaceCard"` -- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkspaceSwitcher - -Reusable workspace switcher component. - -- Mount: `data-component="WorkspaceSwitcher"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ZoomSlider - -Reusable zoom slider component. - -- Mount: `data-component="ZoomSlider"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -## Core - -### alert - -Reusable alert component. - -- Mount: `data-component="alert"` -- Props: `class: string = ""`, `title: string = "Notice"`, `description: string = ""`, `variant: string = "info"`, `dismissible: boolean = false` -- Slots: `default` -- Events: `click` - -### AnnouncementBar - -Reusable announcement bar component. - -- Mount: `data-component="AnnouncementBar"` -- Props: `class: string = ""`, `badge: string = "New"`, `message: string = "WrNexus Organizations is now available."`, `description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."`, `href: string = "/organizations"`, `actionLabel: string = "Explore organizations"`, `ariaLabel: string = "Announcement"`, `badgeIcon: string = "icon-[lucide--sparkles]"`, `actionIcon: string = "icon-[lucide--arrow-right]"`, `dismissLabel: string = "Dismiss announcement"`, `showBadge: boolean = true`, `showDescription: boolean = true`, `showAction: boolean = true`, `dismissible: boolean = true` -- Slots: None -- Events: `click` - -### AspectRatio - -Reusable aspect ratio component. - -- Mount: `data-component="AspectRatio"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### BackToTop - -Reusable back to top component. - -- Mount: `data-component="BackToTop"` -- Props: `class: string = ""`, `label: string = "Back to top"`, `assistiveLabel: string = "Return to the top of the page"`, `threshold: number = 500` -- Slots: None -- Events: `click` - -### Breadcrumbs - -Reusable breadcrumbs component. - -- Mount: `data-component="Breadcrumbs"` -- Props: `class: string = ""`, `items: string = []`, `centered: boolean = false`, `compact: boolean = false`, `showHome: boolean = true`, `homeLabel: string = "Home"`, `homeHref: string = "/"` -- Slots: None -- Events: None - -### card - -Reusable card component. - -- Mount: `data-component="card"` -- Props: `variant: string = "default"`, `padding: string = "md"`, `interactive: boolean = false`, `className: string = ""` -- Slots: `default` -- Events: None - -### Checkbox - -Reusable checkbox component. - -- Mount: `data-component="Checkbox"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `description: string = ""`, `checked: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: None - -### Chip - -Reusable chip component. - -- Mount: `data-component="Chip"` -- Props: `label: string = "Chip"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Cluster - -Reusable cluster component. - -- Mount: `data-component="Cluster"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### Combobox - -Reusable combobox component. - -- Mount: `data-component="Combobox"` -- Props: `id: string = "combobox"`, `name: string = ""`, `label: string = "Choose an option"`, `placeholder: string = "Search options"`, `options: string = []`, `required: boolean = false`, `disabled: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### ContactSalesBanner - -Reusable contact sales banner component. - -- Mount: `data-component="ContactSalesBanner"` -- Props: `class: string = ""`, `eyebrow: string = "Enterprise identity"`, `title: string = "Ready to secure your next application?"`, `description: string = ""`, `primaryLabel: string = "Contact sales"`, `primaryHref: string = "/contact"`, `secondaryLabel: string = "Start free"`, `secondaryHref: string = "/sign-up"`, `iconClass: string = "icon-[lucide--messages-square]"`, `centered: boolean = false`, `compact: boolean = false`, `points: string = []`, `trustPoints: string = []` -- Slots: None -- Events: None - -### Container - -Reusable container component. - -- Mount: `data-component="Container"` -- Props: `size: string = "default"`, `className: string = ""` -- Slots: `default` -- Events: None - -### CookieConsent - -Reusable cookie consent component. - -- Mount: `data-component="CookieConsent"` -- Props: `class: string = ""` -- Slots: None -- Events: `click`, `change` - -### DevelopersMegaMenu - -Reusable developers mega menu component. - -- Mount: `data-component="DevelopersMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### disclosure - -Reusable disclosure component. - -- Mount: `data-component="disclosure"` -- Props: `summary: string = "Details"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DisplayHeading - -Reusable display heading component. - -- Mount: `data-component="DisplayHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Divider - -Reusable divider component. - -- Mount: `data-component="Divider"` -- Props: `className: string = ""` -- Slots: `default` -- Events: None - -### Drawer - -Reusable drawer component. - -- Mount: `data-component="Drawer"` -- Props: `class: string = ""`, `title: string = "Panel"`, `open: boolean = false`, `side: string = "right"` -- Slots: `default` -- Events: `click` - -### FAQ - -Reusable faq component. - -- Mount: `data-component="FAQ"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Frequently asked questions"`, `description: string = ""`, `items: string = []`, `centered: boolean = true`, `allowMultiple: boolean = false`, `defaultOpenIndex: number = 0` -- Slots: None -- Events: None - -### FAQAccordion - -Reusable faqaccordion component. - -- Mount: `data-component="FAQAccordion"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Frequently asked questions"`, `description: string = ""`, `items: string = []`, `centered: boolean = true`, `compact: boolean = false`, `allowMultiple: boolean = false`, `defaultOpenIndex: number = 0`, `showContact: boolean = false`, `contactText: string = "Still have questions?"`, `contactLabel: string = "Contact support"`, `contactHref: string = "/support"` -- Slots: None -- Events: `click` - -### file-upload - -Reusable file-upload component. - -- Mount: `data-component="file-upload"` -- Props: `store: string = "public"`, `endpoint: string = "/api/upload"`, `accept: string = ""`, `multiple: boolean = false`, `max: number = 0`, `label: string = "Drag files here or click to browse"`, `class: string = ""` -- Slots: None -- Events: None - -### FilterBar - -Reusable filter bar component. - -- Mount: `data-component="FilterBar"` -- Props: `label: string = "Filters"`, `clearLabel: string = "Clear filters"`, `showClear: boolean = true`, `class: string = ""` -- Slots: `default` -- Events: None - -### Flex - -Reusable flex component. - -- Mount: `data-component="Flex"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### FormError - -Reusable form error component. - -- Mount: `data-component="FormError"` -- Props: `id: string = ""`, `message: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FullBleed - -Reusable full bleed component. - -- Mount: `data-component="FullBleed"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### hstack - -Reusable hstack component. - -- Mount: `data-component="hstack"` -- Props: `gap: string = "4"`, `align: string = "center"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Inline - -Reusable inline component. - -- Mount: `data-component="Inline"` -- Props: `gap: string = "4"`, `className: string = ""` -- Slots: `default` -- Events: None - -### input - -Reusable input component. - -- Mount: `data-component="input"` -- Props: `type: string = "text"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### LegalTableOfContents - -Reusable legal table of contents component. - -- Mount: `data-component="LegalTableOfContents"` -- Props: `title: string = "On this page"`, `items: string = []`, `class: string = ""` -- Slots: None -- Events: None - -### Link - -Reusable link component. - -- Mount: `data-component="Link"` -- Props: `href: string = "#"`, `label: string = "Link"`, `external: boolean = false`, `className: string = ""` -- Slots: None -- Events: None - -### LogoCloud - -Reusable logo cloud component. - -- Mount: `data-component="LogoCloud"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Trusted by teams building modern products"`, `description: string = ""`, `logos: string = []`, `centered: boolean = true`, `compact: boolean = false`, `variant: string = "strip"`, `grayscale: boolean = true`, `showNames: boolean = false`, `maxItems: number = 8` -- Slots: None -- Events: None - -### Modal - -Reusable modal component. - -- Mount: `data-component="Modal"` -- Props: `class: string = ""`, `title: string = "Dialog"`, `description: string = ""`, `open: boolean = false`, `size: string = "md"`, `closeLabel: string = "Close"` -- Slots: `default` -- Events: `click` - -### MultiSelect - -Reusable multi select component. - -- Mount: `data-component="MultiSelect"` -- Props: `id: string = "multi-select"`, `name: string = ""`, `label: string = "Choose options"`, `options: string = []`, `required: boolean = false`, `disabled: boolean = false`, `size: number = 5`, `class: string = ""` -- Slots: None -- Events: None - -### NarrowContainer - -Reusable narrow container component. - -- Mount: `data-component="NarrowContainer"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### NotificationDot - -Reusable notification dot component. - -- Mount: `data-component="NotificationDot"` -- Props: `label: string = "Notification"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageHeader - -Reusable page header component. - -- Mount: `data-component="PageHeader"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `icon: string = "sparkles"`, `centered: boolean = false`, `compact: boolean = false`, `showBreadcrumbs: boolean = false`, `breadcrumbParent: string = ""`, `breadcrumbParentHref: string = ""`, `breadcrumbCurrent: string = ""`, `highlights: string = []` -- Slots: None -- Events: None - -### PageHeading - -Reusable page heading component. - -- Mount: `data-component="PageHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageShell - -Reusable page shell component. - -- Mount: `data-component="PageShell"` -- Props: `className: string = ""` -- Slots: `default` -- Events: None - -### Pagination - -Reusable pagination component. - -- Mount: `data-component="Pagination"` -- Props: `class: string = ""`, `currentPage: number = 1`, `totalPages: number = 1`, `previousHref: string = ""`, `nextHref: string = ""`, `pages: string = []`, `showNumbers: boolean = true`, `showSummary: boolean = true`, `totalItems: number = 0`, `pageSize: number = 10`, `compact: boolean = false`, `centered: boolean = false` -- Slots: None -- Events: None - -### Pill - -Reusable pill component. - -- Mount: `data-component="Pill"` -- Props: `label: string = "Pill"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductMegaMenu - -Reusable product mega menu component. - -- Mount: `data-component="ProductMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### progress - -Reusable progress component. - -- Mount: `data-component="progress"` -- Props: `value: number = 0`, `max: number = 100`, `class: string = ""` -- Slots: None -- Events: None - -### ProgressBar - -Reusable progress bar component. - -- Mount: `data-component="ProgressBar"` -- Props: `class: string = ""`, `value: number = 0`, `max: number = 100`, `label: string = "Progress"`, `showValue: boolean = true` -- Slots: None -- Events: None - -### PublicFooter - -Reusable public footer component. - -- Mount: `data-component="PublicFooter"` -- Props: `class: string = ""`, `homeHref: string = "/"`, `brandName: string = "WrNexus"`, `brandTagline: string = "Identity Cloud"`, `brandAriaLabel: string = "WrNexus home"`, `brandIcon: string = "icon-[lucide--blocks]"`, `brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications."`, `statusLabel: string = "All systems operational"`, `statusHref: string = "/status"`, `newsletterEyebrow: string = "WrNexus updates"`, `newsletterTitle: string = "Identity insights delivered to your inbox"`, `newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources."`, `newsletterAction: string = "/api/newsletter/subscribe"`, `newsletterButtonLabel: string = "Subscribe"`, `newsletterPlaceholder: string = "Enter your work email"`, `newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription."`, `newsletterPrivacyLabel: string = "privacy policy"`, `newsletterPrivacyHref: string = "/privacy"`, `newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our"`, `newsletterFinePrintSuffix: string = "."`, `newsletterEmailLabel: string = "Work email address"`, `newsletterEmailName: string = "email"`, `copyrightText: string = "© 2026 WrNexus. All rights reserved."`, `attributionText: string = "Built by WorkRoot Workspace."`, `showNewsletter: boolean = true`, `showSocialLinks: boolean = true`, `showThemeToggle: boolean = true`, `showStatus: boolean = true`, `showCookiePreferences: boolean = true`, `cookiePreferencesLabel: string = "Cookie preferences"`, `themeLabel: string = "Theme"`, `themeToggleLabel: string = "Toggle color theme"`, `legalTitle: string = "Legal"`, `socialLinks: PublicFooterLink[] = []`, `navigationColumns: PublicFooterColumn[] = []`, `legalLinks: PublicFooterLink[] = []`, `navigationAriaLabel: string = "Footer navigation"` -- Slots: `navigation` -- Events: `submit` - -### PublicMobileNavigation - -Reusable public mobile navigation component. - -- Mount: `data-component="PublicMobileNavigation"` -- Props: `class: string = ""` -- Slots: None -- Events: `click` - -### PublicSearch - -Reusable public search component. - -- Mount: `data-component="PublicSearch"` -- Props: `class: string = ""`, `query: string = ""`, `placeholder: string = "Search..."`, `label: string = "Search"`, `action: string = ""`, `method: string = "get"`, `name: string = "q"`, `buttonLabel: string = ""`, `clearLabel: string = "Clear search"`, `size: string = "default"`, `centered: boolean = false`, `fullWidth: boolean = false`, `showShortcut: boolean = false`, `shortcutLabel: string = "⌘ K"`, `suggestions: string = []` -- Slots: None -- Events: `input`, `focus`, `blur`, `click` - -### Radio - -Reusable radio component. - -- Mount: `data-component="Radio"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = "choice"`, `value: string = ""`, `label: string = "Option"`, `description: string = ""`, `checked: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: None - -### ScrollArea - -Reusable scroll area component. - -- Mount: `data-component="ScrollArea"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SDKTabs - -Reusable sdktabs component. - -- Mount: `data-component="SDKTabs"` -- Props: `label: string = "SDK languages"`, `tabs: string = []`, `defaultIndex: number = 0`, `class: string = ""` -- Slots: None -- Events: `click` - -### SectionHeading - -Reusable section heading component. - -- Mount: `data-component="SectionHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SegmentedButtonGroup - -Reusable segmented button group component. - -- Mount: `data-component="SegmentedButtonGroup"` -- Props: `label: string = "Options"`, `items: string = []`, `active: string = ""`, `size: string = "md"`, `fullWidth: boolean = false`, `class: string = ""` -- Slots: None -- Events: `click` - -### Select - -Reusable select component. - -- Mount: `data-component="Select"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false` -- Slots: `default` -- Events: None - -### SocialShare - -Reusable social share component. - -- Mount: `data-component="SocialShare"` -- Props: `class: string = ""`, `title: string = "Share this page"`, `description: string = ""`, `url: string = ""`, `shareText: string = ""`, `centered: boolean = false`, `compact: boolean = false`, `showTitle: boolean = true`, `showCopy: boolean = true`, `networks: string = []` -- Slots: None -- Events: `click` - -### spacer - -Reusable spacer component. - -- Mount: `data-component="spacer"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### Spinner - -Reusable spinner component. - -- Mount: `data-component="Spinner"` -- Props: `class: string = ""`, `label: string = "Loading"`, `size: string = "md"` -- Slots: None -- Events: None - -### Stack - -Reusable stack component. - -- Mount: `data-component="Stack"` -- Props: `gap: string = "4"`, `className: string = ""` -- Slots: `default` -- Events: None - -### StatusBanner - -Reusable status banner component. - -- Mount: `data-component="StatusBanner"` -- Props: `class: string = ""`, `type: string = "info"`, `title: string = ""`, `description: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `dismissible: boolean = true`, `compact: boolean = false`, `details: string = []` -- Slots: None -- Events: `click` - -### Sticky - -Reusable sticky component. - -- Mount: `data-component="Sticky"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SubsectionHeading - -Reusable subsection heading component. - -- Mount: `data-component="SubsectionHeading"` -- Props: `text: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Surface - -Reusable surface component. - -- Mount: `data-component="Surface"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### Switch - -Reusable switch component. - -- Mount: `data-component="Switch"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `description: string = ""`, `checked: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: `click` - -### tag - -Reusable tag component. - -- Mount: `data-component="tag"` -- Props: `label: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Textarea - -Reusable textarea component. - -- Mount: `data-component="Textarea"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Message"`, `value: string = ""`, `placeholder: string = ""`, `rows: number = 5`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false` -- Slots: None -- Events: None - -### theme-toggle - -Reusable theme-toggle component. - -- Mount: `data-component="theme-toggle"` -- Props: `label: string = "Toggle theme"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Toast - -Reusable toast component. - -- Mount: `data-component="Toast"` -- Props: `class: string = ""`, `title: string = "Saved"`, `description: string = ""`, `variant: string = "success"`, `duration: number = 5000` -- Slots: None -- Events: `click` - -### ToastHost - -Reusable toast host component. - -- Mount: `data-component="ToastHost"` -- Props: `class: string = ""` -- Slots: None -- Events: `click` - -### Typography - -Reusable typography component. - -- Mount: `data-component="Typography"` -- Props: `as: string = "p"`, `variant: string = "body"`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VisuallyHidden - -Reusable visually hidden component. - -- Mount: `data-component="VisuallyHidden"` -- Props: `className: string = ""` -- Slots: `default` -- Events: None - -### Well - -Reusable well component. - -- Mount: `data-component="Well"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### WideContainer - -Reusable wide container component. - -- Mount: `data-component="WideContainer"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -## Data - -### ActiveFilterList - -Reusable active filter list component. - -- Mount: `data-component="ActiveFilterList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ActivityList - -Reusable activity list component. - -- Mount: `data-component="ActivityList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiHeaderTable - -Reusable api header table component. - -- Mount: `data-component="ApiHeaderTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiParameterTable - -Reusable api parameter table component. - -- Mount: `data-component="ApiParameterTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiSchemaTable - -Reusable api schema table component. - -- Mount: `data-component="ApiSchemaTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuditTable - -Reusable audit table component. - -- Mount: `data-component="AuditTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### AutoGrid - -Reusable auto grid component. - -- Mount: `data-component="AutoGrid"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### BlogGrid - -Reusable blog grid component. - -- Mount: `data-component="BlogGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlogList - -Reusable blog list component. - -- Mount: `data-component="BlogList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CalendarGrid - -Reusable calendar grid component. - -- Mount: `data-component="CalendarGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CapabilityGrid - -Reusable capability grid component. - -- Mount: `data-component="CapabilityGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CareerBenefitsGrid - -Reusable career benefits grid component. - -- Mount: `data-component="CareerBenefitsGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelComparisonTable - -Reusable channel comparison table component. - -- Mount: `data-component="ChannelComparisonTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelRateTable - -Reusable channel rate table component. - -- Mount: `data-component="ChannelRateTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorGrid - -Reusable color grid component. - -- Mount: `data-component="ColorGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComparisonTable - -Reusable comparison table component. - -- Mount: `data-component="ComparisonTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComplianceBadgeList - -Reusable compliance badge list component. - -- Mount: `data-component="ComplianceBadgeList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConversationList - -Reusable conversation list component. - -- Mount: `data-component="ConversationList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieCategoryList - -Reusable cookie category list component. - -- Mount: `data-component="CookieCategoryList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieDetailsTable - -Reusable cookie details table component. - -- Mount: `data-component="CookieDetailsTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieTable - -Reusable cookie table component. - -- Mount: `data-component="CookieTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### DataRetentionTable - -Reusable data retention table component. - -- Mount: `data-component="DataRetentionTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### DataTable - -Reusable data table component. - -- Mount: `data-component="DataTable"` -- Props: `caption: string = "Data table"`, `columns: string = []`, `rows: string = []`, `emptyMessage: string = "No data available."`, `striped: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### DefinitionList - -Reusable definition list component. - -- Mount: `data-component="DefinitionList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### DescriptionList - -Reusable description list component. - -- Mount: `data-component="DescriptionList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### EventTable - -Reusable event table component. - -- Mount: `data-component="EventTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureComparisonTable - -Reusable feature comparison table component. - -- Mount: `data-component="FeatureComparisonTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureGrid - -Reusable feature grid component. - -- Mount: `data-component="FeatureGrid"` -- Props: `columns: number = 3`, `className: string = ""` -- Slots: `default` -- Events: None - -### FeatureList - -Reusable feature list component. - -- Mount: `data-component="FeatureList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileList - -Reusable file list component. - -- Mount: `data-component="FileList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FilterableTable - -Reusable filterable table component. - -- Mount: `data-component="FilterableTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormGrid - -Reusable form grid component. - -- Mount: `data-component="FormGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormRow - -Reusable form row component. - -- Mount: `data-component="FormRow"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### Grid - -Reusable grid component. - -- Mount: `data-component="Grid"` -- Props: `gap: string = "4"`, `className: string = ""` -- Slots: `default` -- Events: None - -### GuideGrid - -Reusable guide grid component. - -- Mount: `data-component="GuideGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentList - -Reusable incident list component. - -- Mount: `data-component="IncidentList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### KeyValueTable - -Reusable key value table component. - -- Mount: `data-component="KeyValueTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LeadershipGrid - -Reusable leadership grid component. - -- Mount: `data-component="LeadershipGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalBulletList - -Reusable legal bullet list component. - -- Mount: `data-component="LegalBulletList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalDefinitionList - -Reusable legal definition list component. - -- Mount: `data-component="LegalDefinitionList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalTable - -Reusable legal table component. - -- Mount: `data-component="LegalTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### List - -Reusable list component. - -- Mount: `data-component="List"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### LogTable - -Reusable log table component. - -- Mount: `data-component="LogTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### MemberList - -Reusable member list component. - -- Mount: `data-component="MemberList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### MetricGrid - -Reusable metric grid component. - -- Mount: `data-component="MetricGrid"` -- Props: `label: string = "Platform metrics"`, `metrics: string = []`, `compact: boolean = false`, `columns: number = 4`, `class: string = ""` -- Slots: None -- Events: None - -### NotificationList - -Reusable notification list component. - -- Mount: `data-component="NotificationList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PartnerLogoGrid - -Reusable partner logo grid component. - -- Mount: `data-component="PartnerLogoGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PasswordRequirementList - -Reusable password requirement list component. - -- Mount: `data-component="PasswordRequirementList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlanFeatureList - -Reusable plan feature list component. - -- Mount: `data-component="PlanFeatureList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlanLimitList - -Reusable plan limit list component. - -- Mount: `data-component="PlanLimitList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PolicyVersionTable - -Reusable policy version table component. - -- Mount: `data-component="PolicyVersionTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingComparisonTable - -Reusable pricing comparison table component. - -- Mount: `data-component="PricingComparisonTable"` -- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `featuredPlan: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### PricingGrid - -Reusable pricing grid component. - -- Mount: `data-component="PricingGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingTable - -Reusable pricing table component. - -- Mount: `data-component="PricingTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductFeatureList - -Reusable product feature list component. - -- Mount: `data-component="ProductFeatureList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductGrid - -Reusable product grid component. - -- Mount: `data-component="ProductGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductIntegrationList - -Reusable product integration list component. - -- Mount: `data-component="ProductIntegrationList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductList - -Reusable product list component. - -- Mount: `data-component="ProductList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductUseCaseList - -Reusable product use case list component. - -- Mount: `data-component="ProductUseCaseList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### RateTable - -Reusable rate table component. - -- Mount: `data-component="RateTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionAvailabilityTable - -Reusable region availability table component. - -- Mount: `data-component="RegionAvailabilityTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResponsiveTable - -Reusable responsive table component. - -- Mount: `data-component="ResponsiveTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### RetentionTable - -Reusable retention table component. - -- Mount: `data-component="RetentionTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityPillarGrid - -Reusable security pillar grid component. - -- Mount: `data-component="SecurityPillarGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityPracticeList - -Reusable security practice list component. - -- Mount: `data-component="SecurityPracticeList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceLevelTable - -Reusable service level table component. - -- Mount: `data-component="ServiceLevelTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceStatusList - -Reusable service status list component. - -- Mount: `data-component="ServiceStatusList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceStatusRow - -Reusable service status row component. - -- Mount: `data-component="ServiceStatusRow"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SlaTable - -Reusable sla table component. - -- Mount: `data-component="SlaTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SortableTable - -Reusable sortable table component. - -- Mount: `data-component="SortableTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusTable - -Reusable status table component. - -- Mount: `data-component="StatusTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### SubprocessorTable - -Reusable subprocessor table component. - -- Mount: `data-component="SubprocessorTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### Table - -Reusable table component. - -- Mount: `data-component="Table"` -- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`, `striped: boolean = false`, `hoverable: boolean = true`, `compact: boolean = false` -- Slots: `default` -- Events: None - -### TableRow - -Reusable table row component. - -- Mount: `data-component="TableRow"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### TreeTable - -Reusable tree table component. - -- Mount: `data-component="TreeTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### TrustBadgeList - -Reusable trust badge list component. - -- Mount: `data-component="TrustBadgeList"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### UsagePricingTable - -Reusable usage pricing table component. - -- Mount: `data-component="UsagePricingTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### ValuesGrid - -Reusable values grid component. - -- Mount: `data-component="ValuesGrid"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -### VirtualizedTable - -Reusable virtualized table component. - -- Mount: `data-component="VirtualizedTable"` -- Props: `title: string = ""`, `description: string = ""`, `empty: boolean = false`, `emptyText: string = "No items available."`, `class: string = ""` -- Slots: `default` -- Events: None - -## Feedback - -### AccountStatusBanner - -Reusable account status banner component. - -- Mount: `data-component="AccountStatusBanner"` -- Props: `label: string = "AccountStatus"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiAuthenticationNotice - -Reusable api authentication notice component. - -- Mount: `data-component="ApiAuthenticationNotice"` -- Props: `label: string = "ApiAuthentication"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiMethodBadge - -Reusable api method badge component. - -- Mount: `data-component="ApiMethodBadge"` -- Props: `label: string = "ApiMethod"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiRateLimitNotice - -Reusable api rate limit notice component. - -- Mount: `data-component="ApiRateLimitNotice"` -- Props: `label: string = "ApiRateLimit"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiVersionBadge - -Reusable api version badge component. - -- Mount: `data-component="ApiVersionBadge"` -- Props: `label: string = "ApiVersion"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Badge - -Reusable badge component. - -- Mount: `data-component="Badge"` -- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`, `size: string = "md"` -- Slots: `default` -- Events: None - -### Banner - -Reusable banner component. - -- Mount: `data-component="Banner"` -- Props: `class: string = ""`, `text: string = "Announcement"`, `href: string = ""`, `actionLabel: string = "Learn more"`, `variant: string = "brand"` -- Slots: None -- Events: None - -### BetaBadge - -Reusable beta badge component. - -- Mount: `data-component="BetaBadge"` -- Props: `label: string = "Beta"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CardSkeleton - -Reusable card skeleton component. - -- Mount: `data-component="CardSkeleton"` -- Props: `label: string = "Card"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CertificationBadge - -Reusable certification badge component. - -- Mount: `data-component="CertificationBadge"` -- Props: `label: string = "Certification"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelBadge - -Reusable channel badge component. - -- Mount: `data-component="ChannelBadge"` -- Props: `label: string = "Channel"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CharacterCounter - -Reusable character counter component. - -- Mount: `data-component="CharacterCounter"` -- Props: `label: string = "Character"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChartEmptyState - -Reusable chart empty state component. - -- Mount: `data-component="ChartEmptyState"` -- Props: `label: string = "ChartEmpty"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeLanguageBadge - -Reusable code language badge component. - -- Mount: `data-component="CodeLanguageBadge"` -- Props: `label: string = "CodeLanguage"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComingSoonBadge - -Reusable coming soon badge component. - -- Mount: `data-component="ComingSoonBadge"` -- Props: `label: string = "ComingSoon"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComingSoonState - -Reusable coming soon state component. - -- Mount: `data-component="ComingSoonState"` -- Props: `label: string = "ComingSoon"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieBanner - -Reusable cookie banner component. - -- Mount: `data-component="CookieBanner"` -- Props: `class: string = ""`, `title: string = "We use cookies"`, `description: string = "We use essential cookies and optional analytics to improve your experience."`, `privacyHref: string = "/privacy"` -- Slots: None -- Events: `click` - -### Counter - -Reusable counter component. - -- Mount: `data-component="Counter"` -- Props: `label: string = "Status"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeprecatedFeatureAlert - -Reusable deprecated feature alert component. - -- Mount: `data-component="DeprecatedFeatureAlert"` -- Props: `label: string = "DeprecatedFeature"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmptyState - -Reusable empty state component. - -- Mount: `data-component="EmptyState"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Nothing found"`, `description: string = ""`, `iconClass: string = "icon-[lucide--inbox]"`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `compact: boolean = false`, `centered: boolean = true`, `suggestions: string = []` -- Slots: None -- Events: None - -### ErrorState - -Reusable error state component. - -- Mount: `data-component="ErrorState"` -- Props: `class: string = ""`, `type: string = "error"`, `eyebrow: string = ""`, `title: string = "Something went wrong"`, `description: string = ""`, `errorCode: string = ""`, `iconClass: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `retryLabel: string = ""`, `retryAction: string = ""`, `centered: boolean = true`, `compact: boolean = false`, `details: string = []` -- Slots: None -- Events: `click` - -### FeatureUnavailableState - -Reusable feature unavailable state component. - -- Mount: `data-component="FeatureUnavailableState"` -- Props: `label: string = "FeatureUnavailable"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileTypeBadge - -Reusable file type badge component. - -- Mount: `data-component="FileTypeBadge"` -- Props: `label: string = "FileType"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FooterStatusIndicator - -Reusable footer status indicator component. - -- Mount: `data-component="FooterStatusIndicator"` -- Props: `label: string = "FooterStatus"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ForbiddenState - -Reusable forbidden state component. - -- Mount: `data-component="ForbiddenState"` -- Props: `label: string = "Forbidden"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormAlert - -Reusable form alert component. - -- Mount: `data-component="FormAlert"` -- Props: `label: string = "Form"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### GuideDifficultyBadge - -Reusable guide difficulty badge component. - -- Mount: `data-component="GuideDifficultyBadge"` -- Props: `label: string = "GuideDifficulty"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### HealthIndicator - -Reusable health indicator component. - -- Mount: `data-component="HealthIndicator"` -- Props: `label: string = "Health"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentAlert - -Reusable incident alert component. - -- Mount: `data-component="IncidentAlert"` -- Props: `label: string = "Incident"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentBanner - -Reusable incident banner component. - -- Mount: `data-component="IncidentBanner"` -- Props: `label: string = "Incident"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentSeverityBadge - -Reusable incident severity badge component. - -- Mount: `data-component="IncidentSeverityBadge"` -- Props: `label: string = "IncidentSeverity"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### IndustryBadge - -Reusable industry badge component. - -- Mount: `data-component="IndustryBadge"` -- Props: `label: string = "Industry"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### InlineAlert - -Reusable inline alert component. - -- Mount: `data-component="InlineAlert"` -- Props: `label: string = "Inline"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalAcceptanceNotice - -Reusable legal acceptance notice component. - -- Mount: `data-component="LegalAcceptanceNotice"` -- Props: `label: string = "LegalAcceptance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalNotice - -Reusable legal notice component. - -- Mount: `data-component="LegalNotice"` -- Props: `label: string = "Legal"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalVersionBadge - -Reusable legal version badge component. - -- Mount: `data-component="LegalVersionBadge"` -- Props: `label: string = "LegalVersion"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceAlert - -Reusable maintenance alert component. - -- Mount: `data-component="MaintenanceAlert"` -- Props: `label: string = "Maintenance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceBanner - -Reusable maintenance banner component. - -- Mount: `data-component="MaintenanceBanner"` -- Props: `label: string = "Maintenance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceState - -Reusable maintenance state component. - -- Mount: `data-component="MaintenanceState"` -- Props: `label: string = "Maintenance"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageCharacterCounter - -Reusable message character counter component. - -- Mount: `data-component="MessageCharacterCounter"` -- Props: `label: string = "MessageCharacter"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewBadge - -Reusable new badge component. - -- Mount: `data-component="NewBadge"` -- Props: `label: string = "New"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NoResultsState - -Reusable no results state component. - -- Mount: `data-component="NoResultsState"` -- Props: `label: string = "NoResults"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### NotFoundState - -Reusable not found state component. - -- Mount: `data-component="NotFoundState"` -- Props: `label: string = "NotFound"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### OfflineState - -Reusable offline state component. - -- Mount: `data-component="OfflineState"` -- Props: `label: string = "Offline"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### OnlineIndicator - -Reusable online indicator component. - -- Mount: `data-component="OnlineIndicator"` -- Props: `label: string = "Online"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### OptionalIndicator - -Reusable optional indicator component. - -- Mount: `data-component="OptionalIndicator"` -- Props: `label: string = "Optional"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageAlert - -Reusable page alert component. - -- Mount: `data-component="PageAlert"` -- Props: `label: string = "Page"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PageSkeleton - -Reusable page skeleton component. - -- Mount: `data-component="PageSkeleton"` -- Props: `label: string = "Page"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PreviewBadge - -Reusable preview badge component. - -- Mount: `data-component="PreviewBadge"` -- Props: `label: string = "Preview"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrivacyNotice - -Reusable privacy notice component. - -- Mount: `data-component="PrivacyNotice"` -- Props: `label: string = "Privacy"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductStatusBadge - -Reusable product status badge component. - -- Mount: `data-component="ProductStatusBadge"` -- Props: `label: string = "Available"`, `status: string = ""`, `class: string = ""` -- Slots: None -- Events: None - -### RateLimitedState - -Reusable rate limited state component. - -- Mount: `data-component="RateLimitedState"` -- Props: `label: string = "RateLimited"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionalPrivacyBanner - -Reusable regional privacy banner component. - -- Mount: `data-component="RegionalPrivacyBanner"` -- Props: `label: string = "RegionalPrivacy"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionUnavailableAlert - -Reusable region unavailable alert component. - -- Mount: `data-component="RegionUnavailableAlert"` -- Props: `label: string = "RegionUnavailable"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RegionUnavailableState - -Reusable region unavailable state component. - -- Mount: `data-component="RegionUnavailableState"` -- Props: `label: string = "RegionUnavailable"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### RequiredIndicator - -Reusable required indicator component. - -- Mount: `data-component="RequiredIndicator"` -- Props: `label: string = "Required"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourceTypeBadge - -Reusable resource type badge component. - -- Mount: `data-component="ResourceTypeBadge"` -- Props: `label: string = "ResourceType"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchEmptyState - -Reusable search empty state component. - -- Mount: `data-component="SearchEmptyState"` -- Props: `label: string = "SearchEmpty"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SearchLoadingState - -Reusable search loading state component. - -- Mount: `data-component="SearchLoadingState"` -- Props: `label: string = "SearchLoading"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecurityAlert - -Reusable security alert component. - -- Mount: `data-component="SecurityAlert"` -- Props: `label: string = "Security"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ServiceStatusBadge - -Reusable service status badge component. - -- Mount: `data-component="ServiceStatusBadge"` -- Props: `label: string = "ServiceStatus"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Skeleton - -Reusable skeleton component. - -- Mount: `data-component="Skeleton"` -- Props: `height: string = "4"`, `rounded: string = "lg"`, `className: string = ""` -- Slots: None -- Events: None - -### SmsSegmentCounter - -Reusable sms segment counter component. - -- Mount: `data-component="SmsSegmentCounter"` -- Props: `label: string = "SmsSegment"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusBadge - -Reusable status badge component. - -- Mount: `data-component="StatusBadge"` -- Props: `class: string = ""`, `status: string = "operational"` -- Slots: None -- Events: None - -### SuccessState - -Reusable success state component. - -- Mount: `data-component="SuccessState"` -- Props: `label: string = "Success"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TableSkeleton - -Reusable table skeleton component. - -- Mount: `data-component="TableSkeleton"` -- Props: `label: string = "Table"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TaxNotice - -Reusable tax notice component. - -- Mount: `data-component="TaxNotice"` -- Props: `label: string = "Tax"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TextSkeleton - -Reusable text skeleton component. - -- Mount: `data-component="TextSkeleton"` -- Props: `label: string = "Text"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TrendIndicator - -Reusable trend indicator component. - -- Mount: `data-component="TrendIndicator"` -- Props: `label: string = "Trend"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### UnavailableRegionState - -Reusable unavailable region state component. - -- Mount: `data-component="UnavailableRegionState"` -- Props: `label: string = "UnavailableRegion"`, `title: string = ""`, `description: string = ""`, `value: string = ""`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VerifiedBadge - -Reusable verified badge component. - -- Mount: `data-component="VerifiedBadge"` -- Props: `label: string = "Verified"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None - -## Forms - -### AddressInput - -Reusable address input component. - -- Mount: `data-component="AddressInput"` -- Props: `label: string = "Address"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AmountInput - -Reusable amount input component. - -- Mount: `data-component="AmountInput"` -- Props: `label: string = "Amount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApartmentInput - -Reusable apartment input component. - -- Mount: `data-component="ApartmentInput"` -- Props: `label: string = "Apartment"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiKeyInput - -Reusable api key input component. - -- Mount: `data-component="ApiKeyInput"` -- Props: `label: string = "ApiKey"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AttachmentPicker - -Reusable attachment picker component. - -- Mount: `data-component="AttachmentPicker"` -- Props: `label: string = "Attachment"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AuthenticatorCodeInput - -Reusable authenticator code input component. - -- Mount: `data-component="AuthenticatorCodeInput"` -- Props: `label: string = "AuthenticatorCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### AvatarGroup - -Reusable avatar group component. - -- Mount: `data-component="AvatarGroup"` -- Props: `label: string = "Avatar"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BillingPeriodToggle - -Reusable billing period toggle component. - -- Mount: `data-component="BillingPeriodToggle"` -- Props: `label: string = "BillingPeriod"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BlackoutDatePicker - -Reusable blackout date picker component. - -- Mount: `data-component="BlackoutDatePicker"` -- Props: `label: string = "BlackoutDate"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BorderRadiusPicker - -Reusable border radius picker component. - -- Mount: `data-component="BorderRadiusPicker"` -- Props: `label: string = "BorderRadius"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BrandColorPicker - -Reusable brand color picker component. - -- Mount: `data-component="BrandColorPicker"` -- Props: `label: string = "BrandColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BrandSelector - -Reusable brand selector component. - -- Mount: `data-component="BrandSelector"` -- Props: `label: string = "Brand"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BudgetSelector - -Reusable budget selector component. - -- Mount: `data-component="BudgetSelector"` -- Props: `label: string = "Budget"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### BusinessHoursPicker - -Reusable business hours picker component. - -- Mount: `data-component="BusinessHoursPicker"` -- Props: `label: string = "BusinessHours"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ButtonGroup - -Reusable button group component. - -- Mount: `data-component="ButtonGroup"` -- Props: `label: string = "Button"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ButtonSelector - -Reusable button selector component. - -- Mount: `data-component="ButtonSelector"` -- Props: `label: string = "Button"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CallbackUrlInput - -Reusable callback url input component. - -- Mount: `data-component="CallbackUrlInput"` -- Props: `label: string = "CallbackUrl"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaptchaField - -Reusable captcha field component. - -- Mount: `data-component="CaptchaField"` -- Props: `label: string = "Captcha"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CardSelector - -Reusable card selector component. - -- Mount: `data-component="CardSelector"` -- Props: `label: string = "Card"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelSelector - -Reusable channel selector component. - -- Mount: `data-component="ChannelSelector"` -- Props: `label: string = "Channel"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CheckboxGroup - -Reusable checkbox group component. - -- Mount: `data-component="CheckboxGroup"` -- Props: `label: string = "Checkbox"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChipInput - -Reusable chip input component. - -- Mount: `data-component="ChipInput"` -- Props: `label: string = "Chip"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CitySelector - -Reusable city selector component. - -- Mount: `data-component="CitySelector"` -- Props: `label: string = "City"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeInput - -Reusable code input component. - -- Mount: `data-component="CodeInput"` -- Props: `label: string = "Code"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorHexInput - -Reusable color hex input component. - -- Mount: `data-component="ColorHexInput"` -- Props: `label: string = "ColorHex"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorPicker - -Reusable color picker component. - -- Mount: `data-component="ColorPicker"` -- Props: `label: string = "Color"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ColorSelector - -Reusable color selector component. - -- Mount: `data-component="ColorSelector"` -- Props: `label: string = "Color"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CommandSearchInput - -Reusable command search input component. - -- Mount: `data-component="CommandSearchInput"` -- Props: `label: string = "CommandSearch"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanyNameInput - -Reusable company name input component. - -- Mount: `data-component="CompanyNameInput"` -- Props: `label: string = "CompanyName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanySizeSelector - -Reusable company size selector component. - -- Mount: `data-component="CompanySizeSelector"` -- Props: `label: string = "CompanySize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ComparisonDateRangePicker - -Reusable comparison date range picker component. - -- Mount: `data-component="ComparisonDateRangePicker"` -- Props: `label: string = "ComparisonDateRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConfirmPasswordInput - -Reusable confirm password input component. - -- Mount: `data-component="ConfirmPasswordInput"` -- Props: `label: string = "ConfirmPassword"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookieCategoryToggle - -Reusable cookie category toggle component. - -- Mount: `data-component="CookieCategoryToggle"` -- Props: `label: string = "CookieCategory"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CoordinatesInput - -Reusable coordinates input component. - -- Mount: `data-component="CoordinatesInput"` -- Props: `label: string = "Coordinates"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CoordinatesPicker - -Reusable coordinates picker component. - -- Mount: `data-component="CoordinatesPicker"` -- Props: `label: string = "Coordinates"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CopySecretField - -Reusable copy secret field component. - -- Mount: `data-component="CopySecretField"` -- Props: `label: string = "CopySecret"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CountryCallingCodeInput - -Reusable country calling code input component. - -- Mount: `data-component="CountryCallingCodeInput"` -- Props: `label: string = "CountryCallingCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CountryCallingCodeSelector - -Reusable country calling code selector component. - -- Mount: `data-component="CountryCallingCodeSelector"` -- Props: `label: string = "CountryCallingCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CountrySelector - -Reusable country selector component. - -- Mount: `data-component="CountrySelector"` -- Props: `label: string = "Country"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CouponInput - -Reusable coupon input component. - -- Mount: `data-component="CouponInput"` -- Props: `label: string = "Coupon"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CreditAmountInput - -Reusable credit amount input component. - -- Mount: `data-component="CreditAmountInput"` -- Props: `label: string = "CreditAmount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CronInput - -Reusable cron input component. - -- Mount: `data-component="CronInput"` -- Props: `label: string = "Cron"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CurrencyInput - -Reusable currency input component. - -- Mount: `data-component="CurrencyInput"` -- Props: `label: string = "Currency"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CurrencySelector - -Reusable currency selector component. - -- Mount: `data-component="CurrencySelector"` -- Props: `label: string = "Currency"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### CurrentPasswordInput - -Reusable current password input component. - -- Mount: `data-component="CurrentPasswordInput"` -- Props: `label: string = "CurrentPassword"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DateInput - -Reusable date input component. - -- Mount: `data-component="DateInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Date"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` -- Slots: None -- Events: None - -### DatePicker - -Reusable date picker component. - -- Mount: `data-component="DatePicker"` -- Props: `class: string = ""`, `id: string = "date"`, `name: string = "date"`, `label: string = "Date"`, `value: string = ""`, `min: string = ""`, `max: string = ""`, `required: boolean = false` -- Slots: None -- Events: None - -### DateRangePicker - -Reusable date range picker component. - -- Mount: `data-component="DateRangePicker"` -- Props: `class: string = ""`, `label: string = "Date range"`, `startName: string = "startDate"`, `endName: string = "endDate"` -- Slots: None -- Events: None - -### DateTimeInput - -Reusable date time input component. - -- Mount: `data-component="DateTimeInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "DateTime"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` -- Slots: None -- Events: None - -### DateTimePicker - -Reusable date time picker component. - -- Mount: `data-component="DateTimePicker"` -- Props: `id: string = "datetime-picker"`, `name: string = "datetime"`, `label: string = "Date and time"`, `value: string = ""`, `min: string = ""`, `max: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `class: string = ""` -- Slots: None -- Events: None - -### DateTimeRangePicker - -Reusable date time range picker component. - -- Mount: `data-component="DateTimeRangePicker"` -- Props: `label: string = "DateTimeRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DecimalInput - -Reusable decimal input component. - -- Mount: `data-component="DecimalInput"` -- Props: `label: string = "Decimal"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DepartmentInput - -Reusable department input component. - -- Mount: `data-component="DepartmentInput"` -- Props: `label: string = "Department"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DiscountInput - -Reusable discount input component. - -- Mount: `data-component="DiscountInput"` -- Props: `label: string = "Discount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DisplayNameInput - -Reusable display name input component. - -- Mount: `data-component="DisplayNameInput"` -- Props: `label: string = "DisplayName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DomainInput - -Reusable domain input component. - -- Mount: `data-component="DomainInput"` -- Props: `label: string = "Domain"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DurationInput - -Reusable duration input component. - -- Mount: `data-component="DurationInput"` -- Props: `label: string = "Duration"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### DurationPicker - -Reusable duration picker component. - -- Mount: `data-component="DurationPicker"` -- Props: `label: string = "Duration"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmailBodyEditor - -Reusable email body editor component. - -- Mount: `data-component="EmailBodyEditor"` -- Props: `label: string = "EmailBody"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EmailInput - -Reusable email input component. - -- Mount: `data-component="EmailInput"` -- Props: `class: string = ""`, `id: string = "email"`, `name: string = "email"`, `label: string = "Email"`, `value: string = ""`, `placeholder: string = "you@company.com"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = "email"` -- Slots: None -- Events: None - -### EmojiPicker - -Reusable emoji picker component. - -- Mount: `data-component="EmojiPicker"` -- Props: `label: string = "Emoji"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnvironmentSelector - -Reusable environment selector component. - -- Mount: `data-component="EnvironmentSelector"` -- Props: `label: string = "Environment"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExpiryDateTimePicker - -Reusable expiry date time picker component. - -- Mount: `data-component="ExpiryDateTimePicker"` -- Props: `label: string = "ExpiryDateTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FaxInput - -Reusable fax input component. - -- Mount: `data-component="FaxInput"` -- Props: `label: string = "Fax"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileInput - -Reusable file input component. - -- Mount: `data-component="FileInput"` -- Props: `label: string = "File"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FileSizeInput - -Reusable file size input component. - -- Mount: `data-component="FileSizeInput"` -- Props: `label: string = "FileSize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FilterSearchInput - -Reusable filter search input component. - -- Mount: `data-component="FilterSearchInput"` -- Props: `label: string = "FilterSearch"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FirstNameInput - -Reusable first name input component. - -- Mount: `data-component="FirstNameInput"` -- Props: `label: string = "FirstName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FontPicker - -Reusable font picker component. - -- Mount: `data-component="FontPicker"` -- Props: `label: string = "Font"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FontSizePicker - -Reusable font size picker component. - -- Mount: `data-component="FontSizePicker"` -- Props: `label: string = "FontSize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FontWeightPicker - -Reusable font weight picker component. - -- Mount: `data-component="FontWeightPicker"` -- Props: `label: string = "FontWeight"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormField - -Reusable form field component. - -- Mount: `data-component="FormField"` -- Props: `class: string = ""`, `label: string = "Field"`, `help: string = ""`, `error: string = ""`, `required: boolean = false` -- Slots: `default` -- Events: None - -### FormGroup - -Reusable form group component. - -- Mount: `data-component="FormGroup"` -- Props: `label: string = "Form"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GeofenceEditor - -Reusable geofence editor component. - -- Mount: `data-component="GeofenceEditor"` -- Props: `label: string = "Geofence"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GradientPicker - -Reusable gradient picker component. - -- Mount: `data-component="GradientPicker"` -- Props: `label: string = "Gradient"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### GradientStopEditor - -Reusable gradient stop editor component. - -- Mount: `data-component="GradientStopEditor"` -- Props: `label: string = "GradientStop"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HexColorInput - -Reusable hex color input component. - -- Mount: `data-component="HexColorInput"` -- Props: `label: string = "HexColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HiddenField - -Reusable hidden field component. - -- Mount: `data-component="HiddenField"` -- Props: `label: string = "Hidden"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HostnameInput - -Reusable hostname input component. - -- Mount: `data-component="HostnameInput"` -- Props: `label: string = "Hostname"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HourPicker - -Reusable hour picker component. - -- Mount: `data-component="HourPicker"` -- Props: `label: string = "Hour"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HslColorInput - -Reusable hsl color input component. - -- Mount: `data-component="HslColorInput"` -- Props: `label: string = "HslColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### HtmlEditor - -Reusable html editor component. - -- Mount: `data-component="HtmlEditor"` -- Props: `label: string = "Html"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IconPicker - -Reusable icon picker component. - -- Mount: `data-component="IconPicker"` -- Props: `label: string = "Icon"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IconSelector - -Reusable icon selector component. - -- Mount: `data-component="IconSelector"` -- Props: `label: string = "Icon"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IdentifierInput - -Reusable identifier input component. - -- Mount: `data-component="IdentifierInput"` -- Props: `label: string = "Identifier"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageEditor - -Reusable image editor component. - -- Mount: `data-component="ImageEditor"` -- Props: `label: string = "Image"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImageSelector - -Reusable image selector component. - -- Mount: `data-component="ImageSelector"` -- Props: `label: string = "Image"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IndustrySelector - -Reusable industry selector component. - -- Mount: `data-component="IndustrySelector"` -- Props: `label: string = "Industry"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### InputGroup - -Reusable input group component. - -- Mount: `data-component="InputGroup"` -- Props: `label: string = "Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IntegerInput - -Reusable integer input component. - -- Mount: `data-component="IntegerInput"` -- Props: `label: string = "Integer"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### IpAddressInput - -Reusable ip address input component. - -- Mount: `data-component="IpAddressInput"` -- Props: `label: string = "IpAddress"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JobTitleInput - -Reusable job title input component. - -- Mount: `data-component="JobTitleInput"` -- Props: `label: string = "JobTitle"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### JsonInput - -Reusable json input component. - -- Mount: `data-component="JsonInput"` -- Props: `label: string = "Json"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LanguageSelector - -Reusable language selector component. - -- Mount: `data-component="LanguageSelector"` -- Props: `label: string = "Language"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LastNameInput - -Reusable last name input component. - -- Mount: `data-component="LastNameInput"` -- Props: `label: string = "LastName"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LatitudeInput - -Reusable latitude input component. - -- Mount: `data-component="LatitudeInput"` -- Props: `label: string = "Latitude"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalLanguageSelector - -Reusable legal language selector component. - -- Mount: `data-component="LegalLanguageSelector"` -- Props: `label: string = "LegalLanguage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalRegionSelector - -Reusable legal region selector component. - -- Mount: `data-component="LegalRegionSelector"` -- Props: `label: string = "LegalRegion"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LetterSpacingPicker - -Reusable letter spacing picker component. - -- Mount: `data-component="LetterSpacingPicker"` -- Props: `label: string = "LetterSpacing"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LicenseKeyInput - -Reusable license key input component. - -- Mount: `data-component="LicenseKeyInput"` -- Props: `label: string = "LicenseKey"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LineHeightPicker - -Reusable line height picker component. - -- Mount: `data-component="LineHeightPicker"` -- Props: `label: string = "LineHeight"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LocaleSelector - -Reusable locale selector component. - -- Mount: `data-component="LocaleSelector"` -- Props: `label: string = "Locale"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LocationPicker - -Reusable location picker component. - -- Mount: `data-component="LocationPicker"` -- Props: `label: string = "Location"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### LongitudeInput - -Reusable longitude input component. - -- Mount: `data-component="LongitudeInput"` -- Props: `label: string = "Longitude"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaintenanceWindowPicker - -Reusable maintenance window picker component. - -- Mount: `data-component="MaintenanceWindowPicker"` -- Props: `label: string = "MaintenanceWindow"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MapPicker - -Reusable map picker component. - -- Mount: `data-component="MapPicker"` -- Props: `label: string = "Map"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MarkdownEditor - -Reusable markdown editor component. - -- Mount: `data-component="MarkdownEditor"` -- Props: `label: string = "Markdown"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MaskedSecretField - -Reusable masked secret field component. - -- Mount: `data-component="MaskedSecretField"` -- Props: `label: string = "MaskedSecret"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MentionInput - -Reusable mention input component. - -- Mount: `data-component="MentionInput"` -- Props: `label: string = "Mention"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MessageLimitInput - -Reusable message limit input component. - -- Mount: `data-component="MessageLimitInput"` -- Props: `label: string = "MessageLimit"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MinutePicker - -Reusable minute picker component. - -- Mount: `data-component="MinutePicker"` -- Props: `label: string = "Minute"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileInput - -Reusable mobile input component. - -- Mount: `data-component="MobileInput"` -- Props: `label: string = "Mobile"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MonthlyVolumeSelector - -Reusable monthly volume selector component. - -- Mount: `data-component="MonthlyVolumeSelector"` -- Props: `label: string = "MonthlyVolume"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MonthPicker - -Reusable month picker component. - -- Mount: `data-component="MonthPicker"` -- Props: `label: string = "Month"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MonthYearPicker - -Reusable month year picker component. - -- Mount: `data-component="MonthYearPicker"` -- Props: `label: string = "MonthYear"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### MultipleEmailInput - -Reusable multiple email input component. - -- Mount: `data-component="MultipleEmailInput"` -- Props: `label: string = "MultipleEmail"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NameInput - -Reusable name input component. - -- Mount: `data-component="NameInput"` -- Props: `label: string = "Name"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NewPasswordInput - -Reusable new password input component. - -- Mount: `data-component="NewPasswordInput"` -- Props: `label: string = "NewPassword"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### NumberInput - -Reusable number input component. - -- Mount: `data-component="NumberInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Number"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="AdvancedSelect"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: string = []`, `options: string = []`, `groups: string = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""` - Slots: None -- Events: None - -### OrganizationSelector - -Reusable organization selector component. - -- Mount: `data-component="OrganizationSelector"` -- Props: `label: string = "Organization"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None +- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` -### OtpInput +### ComboBox -Reusable otp input component. +Editable autocomplete combobox with local and remote suggestions. -- Mount: `data-component="OtpInput"` -- Props: `class: string = ""`, `name: string = "otp"`, `length: number = 6`, `label: string = "Verification code"` +- Mount: `data-component="ComboBox"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `groups: string = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""` - Slots: None -- Events: None +- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` -### PasswordInput +### CopyMarkup -Reusable password input component. +Theme-aware, responsive copy markup component. -- Mount: `data-component="PasswordInput"` -- Props: `class: string = ""`, `id: string = "password"`, `name: string = "password"`, `label: string = "Password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = "current-password"`, `revealable: boolean = true` +- Mount: `data-component="CopyMarkup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `click` - -### PasswordVisibilityToggle - -Reusable password visibility toggle component. - -- Mount: `data-component="PasswordVisibilityToggle"` -- Props: `label: string = "PasswordVisibility"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PathInput - -Reusable path input component. - -- Mount: `data-component="PathInput"` -- Props: `label: string = "Path"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PercentageInput - -Reusable percentage input component. - -- Mount: `data-component="PercentageInput"` -- Props: `label: string = "Percentage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PermissionSelector - -Reusable permission selector component. - -- Mount: `data-component="PermissionSelector"` -- Props: `label: string = "Permission"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` - Events: None -### PhoneInput +### InputNumber -Reusable phone input component. +Theme-aware, responsive input number component. -- Mount: `data-component="PhoneInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Phone"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="InputNumber"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input Number"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "number"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None ### PinInput -Reusable pin input component. +Secure multi-cell PIN and verification-code input with regex and paste support. - Mount: `data-component="PinInput"` -- Props: `label: string = "Pin"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Verification code"`, `name: string = "pin"`, `value: string = ""`, `length: number = 4`, `pattern: string = "[0-9]"`, `type: string = "text"`, `inputMode: string = "numeric"`, `placeholder: string = "○"`, `autocomplete: string = "one-time-code"`, `masked: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `autoFocus: boolean = false`, `autoSubmit: boolean = false`, `allowPaste: boolean = true`, `clearable: boolean = true`, `clearLabel: string = "Clear code"`, `separator: string = ""`, `groupSize: number = 0`, `helpText: string = ""`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` +- Slots: None +- Events: `input`, `change`, `complete`, `paste`, `clear`, `error` -### PlainTextEditor +### SearchBox -Reusable plain text editor component. +Theme-aware, responsive search box component. -- Mount: `data-component="PlainTextEditor"` -- Props: `label: string = "PlainText"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PlanSelector - -Reusable plan selector component. - -- Mount: `data-component="PlanSelector"` -- Props: `label: string = "Plan"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PortInput - -Reusable port input component. - -- Mount: `data-component="PortInput"` -- Props: `label: string = "Port"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PortNumberInput - -Reusable port number input component. - -- Mount: `data-component="PortNumberInput"` -- Props: `label: string = "PortNumber"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PositiveNumberInput - -Reusable positive number input component. - -- Mount: `data-component="PositiveNumberInput"` -- Props: `label: string = "PositiveNumber"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PostalCodeInput - -Reusable postal code input component. - -- Mount: `data-component="PostalCodeInput"` -- Props: `label: string = "PostalCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PresetDateRangePicker - -Reusable preset date range picker component. - -- Mount: `data-component="PresetDateRangePicker"` -- Props: `label: string = "PresetDateRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PriceInput - -Reusable price input component. - -- Mount: `data-component="PriceInput"` -- Props: `label: string = "Price"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingFeatureGroup - -Reusable pricing feature group component. - -- Mount: `data-component="PricingFeatureGroup"` -- Props: `label: string = "PricingFeature"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingToggle - -Reusable pricing toggle component. - -- Mount: `data-component="PricingToggle"` -- Props: `label: string = "Pricing"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PrioritySelector - -Reusable priority selector component. - -- Mount: `data-component="PrioritySelector"` -- Props: `label: string = "Priority"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductSelector - -Reusable product selector component. - -- Mount: `data-component="ProductSelector"` -- Props: `label: string = "Product"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProjectSelector - -Reusable project selector component. - -- Mount: `data-component="ProjectSelector"` -- Props: `label: string = "Project"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PromoCodeInput - -Reusable promo code input component. - -- Mount: `data-component="PromoCodeInput"` -- Props: `label: string = "PromoCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProviderSelector - -Reusable provider selector component. - -- Mount: `data-component="ProviderSelector"` -- Props: `label: string = "Provider"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PublishDateTimePicker - -Reusable publish date time picker component. - -- Mount: `data-component="PublishDateTimePicker"` -- Props: `label: string = "PublishDateTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### PushNotificationEditor - -Reusable push notification editor component. - -- Mount: `data-component="PushNotificationEditor"` -- Props: `label: string = "PushNotification"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuantityInput - -Reusable quantity input component. - -- Mount: `data-component="QuantityInput"` -- Props: `label: string = "Quantity"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### QuietHoursPicker - -Reusable quiet hours picker component. - -- Mount: `data-component="QuietHoursPicker"` -- Props: `label: string = "Quiet hours"`, `startName: string = "quietStart"`, `endName: string = "quietEnd"`, `start: string = "22:00"`, `end: string = "08:00"`, `timezone: string = "UTC"`, `disabled: boolean = false`, `class: string = ""` +- Mount: `data-component="SearchBox"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None -### RadioGroup +### StrongPassword -Reusable radio group component. +Theme-aware, responsive strong password component. -- Mount: `data-component="RadioGroup"` -- Props: `class: string = ""`, `label: string = "Choose one"`, `name: string = "choice"` -- Slots: `default` -- Events: None +- Mount: `data-component="StrongPassword"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` +- Slots: None +- Events: `input`, `change`, `strength` -### RangeInput +### ToggleCount -Reusable range input component. +Theme-aware, responsive toggle count component. -- Mount: `data-component="RangeInput"` -- Props: `label: string = "Range"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RateLimitInput - -Reusable rate limit input component. - -- Mount: `data-component="RateLimitInput"` -- Props: `label: string = "RateLimit"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecipientSelector - -Reusable recipient selector component. - -- Mount: `data-component="RecipientSelector"` -- Props: `label: string = "Recipient"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecoveryCodeInput - -Reusable recovery code input component. - -- Mount: `data-component="RecoveryCodeInput"` -- Props: `label: string = "RecoveryCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### RecurringSchedulePicker - -Reusable recurring schedule picker component. - -- Mount: `data-component="RecurringSchedulePicker"` -- Props: `id: string = "recurring-schedule"`, `name: string = "recurrence"`, `label: string = "Repeat"`, `value: string = "none"`, `disabled: boolean = false`, `class: string = ""` +- Mount: `data-component="ToggleCount"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Toggle Count"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None -### RedirectUriInput +### TogglePassword -Reusable redirect uri input component. +Accessible password field with optional show and hide controls. -- Mount: `data-component="RedirectUriInput"` -- Props: `label: string = "RedirectUri"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="TogglePassword"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: string = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""` +- Slots: None +- Events: `input`, `change`, `toggle` + +## Base + +### Accordion + +Theme-aware, responsive accordion component. + +- Mount: `data-component="Accordion"` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""` - Slots: `default` - Events: None -### ReferenceInput +### Alert -Reusable reference input component. +Theme-aware, responsive alert component. -- Mount: `data-component="ReferenceInput"` -- Props: `label: string = "Reference"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Alert"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RegexInput +### Avatar -Reusable regex input component. +Theme-aware, responsive avatar component. -- Mount: `data-component="RegexInput"` -- Props: `label: string = "Regex"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Avatar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RegionSelector +### AvatarGroup -Reusable region selector component. +Theme-aware, responsive avatar group component. -- Mount: `data-component="RegionSelector"` -- Props: `label: string = "Region"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="AvatarGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RetryCountInput +### Badge -Reusable retry count input component. +Theme-aware, responsive badge component. -- Mount: `data-component="RetryCountInput"` -- Props: `label: string = "RetryCount"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Badge"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Badge"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RgbColorInput +### Blockquote -Reusable rgb color input component. +Theme-aware, responsive blockquote component. -- Mount: `data-component="RgbColorInput"` -- Props: `label: string = "RgbColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Blockquote"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Blockquote"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RichTextEditor +### Button -Reusable rich text editor component. +Theme-aware, responsive button component. -- Mount: `data-component="RichTextEditor"` -- Props: `label: string = "RichText"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Button"` +- Props: `label: string = "Button"`, `loadingLabel: string = "Loading…"`, `description: string = ""`, `as: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `type: string = "button"`, `variant: string = "default"`, `color: string = "primary"`, `size: string = "default"`, `disabled: boolean = false`, `loading: boolean = false`, `pill: boolean = false`, `fullWidth: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `ariaLabel: string = ""`, `ariaPressed: string = ""`, `ariaExpanded: string = ""`, `ariaControls: string = ""`, `title: string = ""`, `autofocus: boolean = false`, `controlClass: string = ""`, `class: string = ""` - Slots: `default` - Events: None -### RichTextInput +### ButtonGroup -Reusable rich text input component. +Theme-aware, responsive button group component. -- Mount: `data-component="RichTextInput"` -- Props: `label: string = "RichText"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="ButtonGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Button Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RoleSelector +### Card -Reusable role selector component. +Theme-aware, responsive card component. -- Mount: `data-component="RoleSelector"` -- Props: `label: string = "Role"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Card"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Card"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### RollingDateRangePicker +### Carousel -Reusable rolling date range picker component. +Theme-aware, responsive carousel component. -- Mount: `data-component="RollingDateRangePicker"` -- Props: `label: string = "RollingDateRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Carousel"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Carousel"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SavedFilterSelector +### ChatBubble -Reusable saved filter selector component. +Theme-aware, responsive chat bubble component. -- Mount: `data-component="SavedFilterSelector"` -- Props: `label: string = "SavedFilter"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="ChatBubble"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chat Bubble"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### ScheduledDateTimePicker +### Collapse -Reusable scheduled date time picker component. +Theme-aware, responsive collapse component. -- Mount: `data-component="ScheduledDateTimePicker"` -- Props: `label: string = "ScheduledDateTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Collapse"` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""` - Slots: `default` - Events: None -### ScheduleMessagePicker +### DatePicker -Reusable schedule message picker component. +Theme-aware, responsive date picker component. -- Mount: `data-component="ScheduleMessagePicker"` -- Props: `label: string = "ScheduleMessage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SchedulePicker - -Reusable schedule picker component. - -- Mount: `data-component="SchedulePicker"` -- Props: `class: string = ""`, `label: string = "Schedule"` +- Mount: `data-component="DatePicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None - Events: None -### SdkLanguageSelector +### DeviceFrame -Reusable sdk language selector component. +Theme-aware, responsive device frame component. -- Mount: `data-component="SdkLanguageSelector"` -- Props: `label: string = "SdkLanguage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="DeviceFrame"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SearchInput +### FileUploadProgress -Reusable search input component. +Theme-aware, responsive file upload progress component. -- Mount: `data-component="SearchInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Search"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="FileUploadProgress"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""` - Slots: None - Events: None -### SecondPicker +### LegendIndicator -Reusable second picker component. +Theme-aware, responsive legend indicator component. -- Mount: `data-component="SecondPicker"` -- Props: `label: string = "Second"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="LegendIndicator"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SecretInput +### List -Reusable secret input component. +Theme-aware, responsive list component. -- Mount: `data-component="SecretInput"` -- Props: `label: string = "Secret"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="List"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SenderIdInput +### ListGroup -Reusable sender id input component. +Theme-aware, responsive list group component. -- Mount: `data-component="SenderIdInput"` -- Props: `label: string = "SenderId"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="ListGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### SeveritySelector +### Marquee -Reusable severity selector component. +Theme-aware, responsive marquee component. -- Mount: `data-component="SeveritySelector"` -- Props: `label: string = "Severity"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Marquee"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### ShadowPicker +### Progress -Reusable shadow picker component. +Theme-aware, responsive progress component. -- Mount: `data-component="ShadowPicker"` -- Props: `label: string = "Shadow"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SlugInput - -Reusable slug input component. - -- Mount: `data-component="SlugInput"` -- Props: `label: string = "Slug"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmsMessageEditor - -Reusable sms message editor component. - -- Mount: `data-component="SmsMessageEditor"` -- Props: `label: string = "SmsMessage"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StateSelector - -Reusable state selector component. - -- Mount: `data-component="StateSelector"` -- Props: `label: string = "State"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusSelector - -Reusable status selector component. - -- Mount: `data-component="StatusSelector"` -- Props: `label: string = "Status"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StepperInput - -Reusable stepper input component. - -- Mount: `data-component="StepperInput"` -- Props: `label: string = "Stepper"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StickerPicker - -Reusable sticker picker component. - -- Mount: `data-component="StickerPicker"` -- Props: `label: string = "Sticker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### StreetAddressInput - -Reusable street address input component. - -- Mount: `data-component="StreetAddressInput"` -- Props: `label: string = "StreetAddress"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SubdomainInput - -Reusable subdomain input component. - -- Mount: `data-component="SubdomainInput"` -- Props: `label: string = "Subdomain"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### SubjectInput - -Reusable subject input component. - -- Mount: `data-component="SubjectInput"` -- Props: `label: string = "Subject"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TagInput - -Reusable tag input component. - -- Mount: `data-component="TagInput"` -- Props: `label: string = "Tag"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TaxRateInput - -Reusable tax rate input component. - -- Mount: `data-component="TaxRateInput"` -- Props: `label: string = "TaxRate"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TeamSizeSelector - -Reusable team size selector component. - -- Mount: `data-component="TeamSizeSelector"` -- Props: `label: string = "TeamSize"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TemplateSelector - -Reusable template selector component. - -- Mount: `data-component="TemplateSelector"` -- Props: `label: string = "Template"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TemplateVariableInput - -Reusable template variable input component. - -- Mount: `data-component="TemplateVariableInput"` -- Props: `label: string = "TemplateVariable"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TextInput - -Reusable text input component. - -- Mount: `data-component="TextInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Text"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="Progress"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""` - Slots: None - Events: None -### ThemeColorPicker +### Rating -Reusable theme color picker component. +Theme-aware, responsive rating component. -- Mount: `data-component="ThemeColorPicker"` -- Props: `label: string = "ThemeColor"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` +- Mount: `data-component="Rating"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### TimeInput +### Skeleton -Reusable time input component. +Theme-aware, responsive skeleton component. -- Mount: `data-component="TimeInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Time"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` +- Mount: `data-component="Skeleton"` +- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None - Events: None -### TimeoutInput +### Spinner -Reusable timeout input component. +Theme-aware, responsive spinner component. -- Mount: `data-component="TimeoutInput"` -- Props: `label: string = "Timeout"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimePicker - -Reusable time picker component. - -- Mount: `data-component="TimePicker"` -- Props: `id: string = "time-picker"`, `name: string = "time"`, `label: string = "Time"`, `value: string = ""`, `min: string = ""`, `max: string = ""`, `step: number = 60`, `required: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Mount: `data-component="Spinner"` +- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None - Events: None -### TimeRangePicker +### StyledIcon -Reusable time range picker component. +Theme-aware, responsive styled icon component. -- Mount: `data-component="TimeRangePicker"` -- Props: `label: string = "TimeRange"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimezoneAwareTimePicker - -Reusable timezone aware time picker component. - -- Mount: `data-component="TimezoneAwareTimePicker"` -- Props: `label: string = "TimezoneAwareTime"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TimezoneSelector - -Reusable timezone selector component. - -- Mount: `data-component="TimezoneSelector"` -- Props: `class: string = ""`, `id: string = "timezone"`, `name: string = "timezone"`, `label: string = "Timezone"` -- Slots: None -- Events: None - -### Toggle - -Reusable toggle component. - -- Mount: `data-component="Toggle"` -- Props: `label: string = ""`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### ToggleGroup - -Reusable toggle group component. - -- Mount: `data-component="ToggleGroup"` -- Props: `label: string = "Toggle"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### TokenInput - -Reusable token input component. - -- Mount: `data-component="TokenInput"` -- Props: `label: string = "Token"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UrlInput - -Reusable url input component. - -- Mount: `data-component="UrlInput"` -- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Url"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""` -- Slots: None -- Events: None - -### UseCaseSelector - -Reusable use case selector component. - -- Mount: `data-component="UseCaseSelector"` -- Props: `label: string = "UseCase"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### UsernameInput - -Reusable username input component. - -- Mount: `data-component="UsernameInput"` -- Props: `label: string = "Username"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VerificationCodeInput - -Reusable verification code input component. - -- Mount: `data-component="VerificationCodeInput"` -- Props: `label: string = "VerificationCode"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VersionSelector - -Reusable version selector component. - -- Mount: `data-component="VersionSelector"` -- Props: `label: string = "Version"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VoiceScriptEditor - -Reusable voice script editor component. - -- Mount: `data-component="VoiceScriptEditor"` -- Props: `label: string = "VoiceScript"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### VolumeInput - -Reusable volume input component. - -- Mount: `data-component="VolumeInput"` -- Props: `label: string = "Volume"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WebhookUrlInput - -Reusable webhook url input component. - -- Mount: `data-component="WebhookUrlInput"` -- Props: `label: string = "WebhookUrl"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WhatsAppNumberInput - -Reusable whats app number input component. - -- Mount: `data-component="WhatsAppNumberInput"` -- Props: `label: string = "WhatsAppNumber"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WhatsAppTemplateEditor - -Reusable whats app template editor component. - -- Mount: `data-component="WhatsAppTemplateEditor"` -- Props: `label: string = "WhatsAppTemplate"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### WorkspaceSelector - -Reusable workspace selector component. - -- Mount: `data-component="WorkspaceSelector"` -- Props: `label: string = "Workspace"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -### YearPicker - -Reusable year picker component. - -- Mount: `data-component="YearPicker"` -- Props: `label: string = "Year"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `help: string = ""`, `error: string = ""`, `class: string = ""` -- Slots: `default` -- Events: None - -## Layout - -### AnchorNavigation - -Reusable anchor navigation component. - -- Mount: `data-component="AnchorNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AppHeader - -Reusable app header component. - -- Mount: `data-component="AppHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArchitectureSection - -Reusable architecture section component. - -- Mount: `data-component="ArchitectureSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleHero - -Reusable article hero component. - -- Mount: `data-component="ArticleHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticleLayout - -Reusable article layout component. - -- Mount: `data-component="ArticleLayout"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ArticlePageShell - -Reusable article page shell component. - -- Mount: `data-component="ArticlePageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### BottomNavigation - -Reusable bottom navigation component. - -- Mount: `data-component="BottomNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### BrowserFrame - -Reusable browser frame component. - -- Mount: `data-component="BrowserFrame"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CalendarHeader - -Reusable calendar header component. - -- Mount: `data-component="CalendarHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CalendarNavigation - -Reusable calendar navigation component. - -- Mount: `data-component="CalendarNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CaseStudyHero - -Reusable case study hero component. - -- Mount: `data-component="CaseStudyHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CenteredHero - -Reusable centered hero component. - -- Mount: `data-component="CenteredHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CenteredSectionHeader - -Reusable centered section header component. - -- Mount: `data-component="CenteredSectionHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChallengeSection - -Reusable challenge section component. - -- Mount: `data-component="ChallengeSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CodeHeader - -Reusable code header component. - -- Mount: `data-component="CodeHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanyHero - -Reusable company hero component. - -- Mount: `data-component="CompanyHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompanyPageShell - -Reusable company page shell component. - -- Mount: `data-component="CompanyPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactHero - -Reusable contact hero component. - -- Mount: `data-component="ContactHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ContactPageShell - -Reusable contact page shell component. - -- Mount: `data-component="ContactPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CTASection - -Reusable c t a section component. - -- Mount: `data-component="CTASection"` -- Props: `class: string = ""`, `eyebrow: string = "Ready?"`, `title: string = "Start building today"`, `description: string = ""`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `secondaryLabel: string = "Contact sales"`, `secondaryHref: string = "#"` -- Slots: None -- Events: None - -### DesktopNavigation - -Reusable desktop navigation component. - -- Mount: `data-component="DesktopNavigation"` -- Props: `label: string = "Primary navigation"`, `items: string = []`, `class: string = ""` -- Slots: None -- Events: None - -### DeveloperHero - -Reusable developer hero component. - -- Mount: `data-component="DeveloperHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeveloperPageShell - -Reusable developer page shell component. - -- Mount: `data-component="DeveloperPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DropdownNavigation - -Reusable dropdown navigation component. - -- Mount: `data-component="DropdownNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### EnterpriseHero - -Reusable enterprise hero component. - -- Mount: `data-component="EnterpriseHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorHero - -Reusable error hero component. - -- Mount: `data-component="ErrorHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ErrorPageShell - -Reusable error page shell component. - -- Mount: `data-component="ErrorPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureDetailsPanel - -Reusable feature details panel component. - -- Mount: `data-component="FeatureDetailsPanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormSection - -Reusable form section component. - -- Mount: `data-component="FormSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Header - -Reusable header component. - -- Mount: `data-component="Header"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Hero - -Reusable hero component. - -- Mount: `data-component="Hero"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Build faster with WRNexusJS"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `secondaryLabel: string = "Learn more"`, `secondaryHref: string = "#"`, `align: string = "center"` -- Slots: `default` -- Events: None - -### HeroCodePanel - -Reusable hero code panel component. - -- Mount: `data-component="HeroCodePanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### InsetPanel - -Reusable inset panel component. - -- Mount: `data-component="InsetPanel"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### LegalDocumentHeader - -Reusable legal document header component. - -- Mount: `data-component="LegalDocumentHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalDocumentLayout - -Reusable legal document layout component. - -- Mount: `data-component="LegalDocumentLayout"` -- Props: `class: string = ""`, `title: string = "Legal document"`, `effectiveDate: string = ""`, `updatedDate: string = ""` -- Slots: `toc`, `default` -- Events: None - -### LegalHero - -Reusable legal hero component. - -- Mount: `data-component="LegalHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LegalPageShell - -Reusable legal page shell component. - -- Mount: `data-component="LegalPageShell"` -- Props: `class: string = ""` -- Slots: `navigation`, `default` -- Events: None - -### LegalSection - -Reusable legal section component. - -- Mount: `data-component="LegalSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MarketingPageShell - -Reusable marketing page shell component. - -- Mount: `data-component="MarketingPageShell"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### MarketingSectionHeader - -Reusable marketing section header component. - -- Mount: `data-component="MarketingSectionHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MissionSection - -Reusable mission section component. - -- Mount: `data-component="MissionSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileDeviceFrame - -Reusable mobile device frame component. - -- Mount: `data-component="MobileDeviceFrame"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MobileNavigation - -Reusable mobile navigation component. - -- Mount: `data-component="MobileNavigation"` -- Props: `label: string = "Menu"`, `closeLabel: string = "Close menu"`, `items: string = []`, `class: string = ""` -- Slots: None -- Events: `click` - -### Navigation - -Reusable navigation component. - -- Mount: `data-component="Navigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Panel - -Reusable panel component. - -- Mount: `data-component="Panel"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### PreviousNextNavigation - -Reusable previous next navigation component. - -- Mount: `data-component="PreviousNextNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### PricingHero - -Reusable pricing hero component. - -- Mount: `data-component="PricingHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductCategorySection - -Reusable product category section component. - -- Mount: `data-component="ProductCategorySection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductHero - -Reusable product hero component. - -- Mount: `data-component="ProductHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductPageShell - -Reusable product page shell component. - -- Mount: `data-component="ProductPageShell"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### PublicHeader - -Reusable public header component. - -- Mount: `data-component="PublicHeader"` -- Props: `class: string = ""`, `homeHref: string = "/"`, `brandName: string = "WrNexus"`, `brandTagline: string = "Identity Cloud"`, `brandAriaLabel: string = "WrNexus home"`, `brandIcon: string = "icon-[lucide--blocks]"`, `pricingLabel: string = "Pricing"`, `pricingHref: string = "/pricing"`, `statusLabel: string = "All systems operational"`, `statusHref: string = "/status"`, `signInLabel: string = "Sign in"`, `signInHref: string = "/sign-in"`, `primaryLabel: string = "Start free"`, `primaryHref: string = "/sign-up"`, `showStatus: boolean = true`, `showThemeToggle: boolean = true`, `showSignIn: boolean = true`, `showPrimaryAction: boolean = true`, `productLabel: string = "Product"`, `solutionsLabel: string = "Solutions"`, `developersLabel: string = "Developers"`, `resourcesLabel: string = "Resources"`, `navigationAriaLabel: string = "Main navigation"`, `themeToggleLabel: string = "Toggle color theme"`, `mobileMenuOpenLabel: string = "Open navigation menu"`, `mobileMenuCloseLabel: string = "Close navigation menu"`, `navigationItems: PublicHeaderNavigationItem[] = []`, `actionItems: PublicHeaderActionItem[] = []`, `showNavigation: boolean = true`, `showMobileThemeToggle: boolean = true` -- Slots: `navigation`, `actions` -- Events: `click` - -### PublicPageShell - -Reusable public page shell component. - -- Mount: `data-component="PublicPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResizablePanel - -Reusable resizable panel component. - -- Mount: `data-component="ResizablePanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourcePageShell - -Reusable resource page shell component. - -- Mount: `data-component="ResourcePageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResultsSection - -Reusable results section component. - -- Mount: `data-component="ResultsSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ScreenshotFrame - -Reusable screenshot frame component. - -- Mount: `data-component="ScreenshotFrame"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Section - -Reusable section component. - -- Mount: `data-component="Section"` -- Props: `id: string = ""`, `size: string = "default"`, `surface: string = "default"`, `className: string = ""` -- Slots: `default` -- Events: None - -### SectionHeader - -Reusable section header component. - -- Mount: `data-component="SectionHeader"` -- Props: `class: string = ""`, `eyebrow: string = ""`, `title: string = "Section title"`, `description: string = ""`, `align: string = "left"` -- Slots: `default` -- Events: None - -### SecurityHero - -Reusable security hero component. - -- Mount: `data-component="SecurityHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SidebarLayout - -Reusable sidebar layout component. - -- Mount: `data-component="SidebarLayout"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SidePanel - -Reusable side panel component. - -- Mount: `data-component="SidePanel"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionHero - -Reusable solution hero component. - -- Mount: `data-component="SolutionHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionPageShell - -Reusable solution page shell component. - -- Mount: `data-component="SolutionPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionSection - -Reusable solution section component. - -- Mount: `data-component="SolutionSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitHero - -Reusable split hero component. - -- Mount: `data-component="SplitHero"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SplitLayout - -Reusable split layout component. - -- Mount: `data-component="SplitLayout"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### SplitSectionHeader - -Reusable split section header component. - -- Mount: `data-component="SplitSectionHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StatusPageShell - -Reusable status page shell component. - -- Mount: `data-component="StatusPageShell"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StepNavigation - -Reusable step navigation component. - -- Mount: `data-component="StepNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### StickyLayout - -Reusable sticky layout component. - -- Mount: `data-component="StickyLayout"` -- Props: `class: string = ""` -- Slots: `default` -- Events: None - -### TableHeader - -Reusable table header component. - -- Mount: `data-component="TableHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VisionSection - -Reusable vision section component. - -- Mount: `data-component="VisionSection"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### WizardHeader - -Reusable wizard header component. - -- Mount: `data-component="WizardHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -### WizardNavigation - -Reusable wizard navigation component. - -- Mount: `data-component="WizardNavigation"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "start"`, `class: string = ""` -- Slots: `default` -- Events: None - -## Overlays - -### AccessibleDialog - -Reusable accessible dialog component. - -- Mount: `data-component="AccessibleDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccessibleMenu - -Reusable accessible menu component. - -- Mount: `data-component="AccessibleMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AccountMenu - -Reusable account menu component. - -- Mount: `data-component="AccountMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ActionMenu - -Reusable action menu component. - -- Mount: `data-component="ActionMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### AlertDialog - -Reusable alert dialog component. - -- Mount: `data-component="AlertDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ApiKeyCreateDialog - -Reusable api key create dialog component. - -- Mount: `data-component="ApiKeyCreateDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CommandMenu - -Reusable command menu component. - -- Mount: `data-component="CommandMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConfirmationDialog - -Reusable confirmation dialog component. - -- Mount: `data-component="ConfirmationDialog"` -- Props: `title: string = "Confirm action"`, `description: string = "Are you sure you want to continue?"`, `confirmLabel: string = "Confirm"`, `cancelLabel: string = "Cancel"`, `danger: boolean = false`, `open: boolean = false`, `class: string = ""` -- Slots: `confirm` -- Events: `click` - -### ContextMenu - -Reusable context menu component. - -- Mount: `data-component="ContextMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### CookiePreferencesDialog - -Reusable cookie preferences dialog component. - -- Mount: `data-component="CookiePreferencesDialog"` -- Props: `title: string = "Cookie preferences"`, `description: string = "Choose which optional cookies you allow. Essential cookies are always enabled."`, `saveLabel: string = "Save preferences"`, `acceptLabel: string = "Accept all"`, `rejectLabel: string = "Reject optional"`, `open: boolean = false`, `class: string = ""` -- Slots: None -- Events: `change`, `click` - -### DeleteConfirmationDialog - -Reusable delete confirmation dialog component. - -- Mount: `data-component="DeleteConfirmationDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DevelopersMenu - -Reusable developers menu component. - -- Mount: `data-component="DevelopersMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### DropdownMenu - -Reusable dropdown menu component. - -- Mount: `data-component="DropdownMenu"` -- Props: `class: string = ""`, `label: string = "Menu"` -- Slots: `default` -- Events: `click` - -### FilterMenu - -Reusable filter menu component. - -- Mount: `data-component="FilterMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormDialog - -Reusable form dialog component. - -- Mount: `data-component="FormDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### FullscreenDialog - -Reusable fullscreen dialog component. - -- Mount: `data-component="FullscreenDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImagePreviewDialog - -Reusable image preview dialog component. - -- Mount: `data-component="ImagePreviewDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Lightbox - -Reusable lightbox component. - -- Mount: `data-component="Lightbox"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### LogoutDialog - -Reusable logout dialog component. - -- Mount: `data-component="LogoutDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### MegaMenu - -Reusable mega menu component. - -- Mount: `data-component="MegaMenu"` -- Props: `label: string = "Explore"`, `sections: string = []`, `class: string = ""` -- Slots: None -- Events: `click` - -### NavigationMegaMenu - -Reusable navigation mega menu component. - -- Mount: `data-component="NavigationMegaMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### Popover - -Reusable popover component. - -- Mount: `data-component="Popover"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductsMegaMenu - -Reusable products mega menu component. - -- Mount: `data-component="ProductsMegaMenu"` -- Props: `label: string = "Products"`, `sections: string = []`, `class: string = ""` -- Slots: None -- Events: None - -### PromptDialog - -Reusable prompt dialog component. - -- Mount: `data-component="PromptDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### ResourcesMegaMenu - -Reusable resources mega menu component. - -- Mount: `data-component="ResourcesMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### SearchDialog - -Reusable search dialog component. - -- Mount: `data-component="SearchDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SecretRevealDialog - -Reusable secret reveal dialog component. - -- Mount: `data-component="SecretRevealDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SessionExpiredDialog - -Reusable session expired dialog component. - -- Mount: `data-component="SessionExpiredDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### SolutionsMegaMenu - -Reusable solutions mega menu component. - -- Mount: `data-component="SolutionsMegaMenu"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### StepUpAuthenticationDialog - -Reusable step up authentication dialog component. - -- Mount: `data-component="StepUpAuthenticationDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### TestMessageDialog - -Reusable test message dialog component. - -- Mount: `data-component="TestMessageDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### UnsavedChangesDialog - -Reusable unsaved changes dialog component. - -- Mount: `data-component="UnsavedChangesDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -### VideoPreviewDialog - -Reusable video preview dialog component. - -- Mount: `data-component="VideoPreviewDialog"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: None - -## Visualization - -### AreaChart - -Reusable area chart component. - -- Mount: `data-component="AreaChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### BarChart - -Reusable bar chart component. - -- Mount: `data-component="BarChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CampaignProgress - -Reusable campaign progress component. - -- Mount: `data-component="CampaignProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelComparisonChart - -Reusable channel comparison chart component. - -- Mount: `data-component="ChannelComparisonChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelFallbackDiagram - -Reusable channel fallback diagram component. - -- Mount: `data-component="ChannelFallbackDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ChannelFlow - -Reusable channel flow component. - -- Mount: `data-component="ChannelFlow"` -- Props: `class: string = ""` -- Slots: None -- Events: None - -### ChecklistProgress - -Reusable checklist progress component. - -- Mount: `data-component="ChecklistProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CircularProgress - -Reusable circular progress component. - -- Mount: `data-component="CircularProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CohortChart - -Reusable cohort chart component. - -- Mount: `data-component="CohortChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CompletionMeter - -Reusable completion meter component. - -- Mount: `data-component="CompletionMeter"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ConversionChart - -Reusable conversion chart component. - -- Mount: `data-component="ConversionChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### CostBreakdownChart - -Reusable cost breakdown chart component. - -- Mount: `data-component="CostBreakdownChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeliveryStatusChart - -Reusable delivery status chart component. - -- Mount: `data-component="DeliveryStatusChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DeliveryStatusTimeline - -Reusable delivery status timeline component. - -- Mount: `data-component="DeliveryStatusTimeline"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### DonutChart - -Reusable donut chart component. - -- Mount: `data-component="DonutChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### EncryptionDiagram - -Reusable encryption diagram component. - -- Mount: `data-component="EncryptionDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ExportProgress - -Reusable export progress component. - -- Mount: `data-component="ExportProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FallbackRouteDiagram - -Reusable fallback route diagram component. - -- Mount: `data-component="FallbackRouteDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FeatureTimeline - -Reusable feature timeline component. - -- Mount: `data-component="FeatureTimeline"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FormProgress - -Reusable form progress component. - -- Mount: `data-component="FormProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### FunnelChart - -Reusable funnel chart component. - -- Mount: `data-component="FunnelChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### GeoChart - -Reusable geo chart component. - -- Mount: `data-component="GeoChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ImportProgress - -Reusable import progress component. - -- Mount: `data-component="ImportProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentResponseFlow - -Reusable incident response flow component. - -- Mount: `data-component="IncidentResponseFlow"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### IncidentTimeline - -Reusable incident timeline component. - -- Mount: `data-component="IncidentTimeline"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### JobProgress - -Reusable job progress component. - -- Mount: `data-component="JobProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LatencyMetric - -Reusable latency metric component. - -- Mount: `data-component="LatencyMetric"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### LineChart - -Reusable line chart component. - -- Mount: `data-component="LineChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### Metric - -Reusable metric component. - -- Mount: `data-component="Metric"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### OnboardingProgress - -Reusable onboarding progress component. - -- Mount: `data-component="OnboardingProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PasswordStrengthMeter - -Reusable password strength meter component. - -- Mount: `data-component="PasswordStrengthMeter"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### PieChart - -Reusable pie chart component. - -- Mount: `data-component="PieChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProductArchitectureDiagram - -Reusable product architecture diagram component. - -- Mount: `data-component="ProductArchitectureDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProgressChart - -Reusable progress chart component. - -- Mount: `data-component="ProgressChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### ProgressRing - -Reusable progress ring component. - -- Mount: `data-component="ProgressRing"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### RevenueChart - -Reusable revenue chart component. - -- Mount: `data-component="RevenueChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### SmartRouteDiagram - -Reusable smart route diagram component. - -- Mount: `data-component="SmartRouteDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` -- Slots: `default` -- Events: None - -### TenantIsolationDiagram - -Reusable tenant isolation diagram component. - -- Mount: `data-component="TenantIsolationDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="StyledIcon"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None ### Timeline -Reusable timeline component. +Theme-aware, responsive timeline component. - Mount: `data-component="Timeline"` -- Props: `class: string = ""`, `title: string = "Timeline"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### TimelineChart +### Toast -Reusable timeline chart component. +Theme-aware, responsive toast component. -- Mount: `data-component="TimelineChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Toast"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### ToastProgress +### TreeView -Reusable toast progress component. +Theme-aware, responsive tree view component. -- Mount: `data-component="ToastProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="TreeView"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### UploadProgress +## Forms -Reusable upload progress component. +### Checkbox -- Mount: `data-component="UploadProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +Theme-aware, responsive checkbox component. + +- Mount: `data-component="Checkbox"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Checkbox"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### ColorPicker + +Theme-aware, responsive color picker component. + +- Mount: `data-component="ColorPicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Color Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "color"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### FileInput + +Theme-aware, responsive file input component. + +- Mount: `data-component="FileInput"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "File Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "file"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Input + +Theme-aware, responsive input component. + +- Mount: `data-component="Input"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### InputGroup + +Theme-aware, responsive input group component. + +- Mount: `data-component="InputGroup"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input Group"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Radio + +Theme-aware, responsive radio component. + +- Mount: `data-component="Radio"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Radio"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### RangeSlider + +Theme-aware, responsive range slider component. + +- Mount: `data-component="RangeSlider"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Range Slider"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "range"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Select + +Theme-aware, responsive select component. + +- Mount: `data-component="Select"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Select"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `placeholder: string = "Select an option"`, `multiple: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Switch + +Theme-aware, responsive switch component. + +- Mount: `data-component="Switch"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Switch"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### Textarea + +Theme-aware, responsive textarea component. + +- Mount: `data-component="Textarea"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Textarea"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `rows: number = 5`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +### TimePicker + +Theme-aware, responsive time picker component. + +- Mount: `data-component="TimePicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Time Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "time"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Events: None + +## Integrations + +### AdvancedDatePicker + +Theme-aware, responsive advanced date picker component. + +- Mount: `data-component="AdvancedDatePicker"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### UptimeChart +### AdvancedRangeSlider -Reusable uptime chart component. +Theme-aware, responsive advanced range slider component. -- Mount: `data-component="UptimeChart"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="AdvancedRangeSlider"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### UptimeMetric +### Chart -Reusable uptime metric component. +Theme-aware, responsive chart component. -- Mount: `data-component="UptimeMetric"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Chart"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### WebhookFlowDiagram +### Clipboard -Reusable webhook flow diagram component. +Theme-aware, responsive clipboard component. -- Mount: `data-component="WebhookFlowDiagram"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Clipboard"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` - Events: None -### WorkflowProgress +### Confetti -Reusable workflow progress component. +Theme-aware, responsive confetti component. -- Mount: `data-component="WorkflowProgress"` -- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""` +- Mount: `data-component="Confetti"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### DataMap + +Theme-aware, responsive data map component. + +- Mount: `data-component="DataMap"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### DataTable + +Theme-aware, responsive data table component. + +- Mount: `data-component="DataTable"` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` +- Slots: `default` +- Events: None + +### DragAndDrop + +Theme-aware, responsive drag and drop component. + +- Mount: `data-component="DragAndDrop"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### FileUpload + +Theme-aware, responsive file upload component. + +- Mount: `data-component="FileUpload"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Map + +Theme-aware, responsive map component. + +- Mount: `data-component="Map"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### ToastNotifications + +Theme-aware, responsive toast notifications component. + +- Mount: `data-component="ToastNotifications"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +### WysiwygEditor + +Theme-aware, responsive wysiwyg editor component. + +- Mount: `data-component="WysiwygEditor"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Layout + +### Columns + +Theme-aware, responsive columns component. + +- Mount: `data-component="Columns"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Container + +Theme-aware, responsive container component. + +- Mount: `data-component="Container"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### CustomScrollbar + +Theme-aware, responsive custom scrollbar component. + +- Mount: `data-component="CustomScrollbar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Divider + +Theme-aware, responsive divider component. + +- Mount: `data-component="Divider"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: None +- Events: None + +### Grid + +Theme-aware, responsive grid component. + +- Mount: `data-component="Grid"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Image + +Theme-aware, responsive image component. + +- Mount: `data-component="Image"` +- Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""` +- Slots: `default` +- Events: None + +### Kbd + +Theme-aware, responsive kbd component. + +- Mount: `data-component="Kbd"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "⌘ K"`, `class: string = ""` +- Slots: `default` +- Events: None + +### LayoutSplitter + +Theme-aware, responsive layout splitter component. + +- Mount: `data-component="LayoutSplitter"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Link + +Theme-aware, responsive link component. + +- Mount: `data-component="Link"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""` +- Slots: `default` +- Events: None + +### Typography + +Theme-aware, responsive typography component. + +- Mount: `data-component="Typography"` +- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Navigation + +### Breadcrumb + +Theme-aware, responsive breadcrumb component. + +- Mount: `data-component="Breadcrumb"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### MegaMenu + +Theme-aware, responsive mega menu component. + +- Mount: `data-component="MegaMenu"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Nav + +Theme-aware, responsive nav component. + +- Mount: `data-component="Nav"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Navbar + +Theme-aware, responsive navbar component. + +- Mount: `data-component="Navbar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Navbar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Pagination + +Theme-aware, responsive pagination component. + +- Mount: `data-component="Pagination"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Scrollspy + +Theme-aware, responsive scrollspy component. + +- Mount: `data-component="Scrollspy"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Sidebar + +Theme-aware, responsive sidebar component. + +- Mount: `data-component="Sidebar"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Stepper + +Theme-aware, responsive stepper component. + +- Mount: `data-component="Stepper"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Tabs + +Theme-aware, responsive tabs component. + +- Mount: `data-component="Tabs"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Overlays + +### ContextMenu + +Theme-aware, responsive context menu component. + +- Mount: `data-component="ContextMenu"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Context Menu"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Drawer + +Theme-aware, responsive drawer component. + +- Mount: `data-component="Drawer"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drawer"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Dropdown + +Theme-aware, responsive dropdown component. + +- Mount: `data-component="Dropdown"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Dropdown"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Modal + +Theme-aware, responsive modal component. + +- Mount: `data-component="Modal"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Modal"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Popover + +Theme-aware, responsive popover component. + +- Mount: `data-component="Popover"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Popover"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +### Tooltip + +Theme-aware, responsive tooltip component. + +- Mount: `data-component="Tooltip"` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tooltip"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` +- Slots: `default` +- Events: None + +## Tables + +### Table + +Theme-aware, responsive table component. + +- Mount: `data-component="Table"` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` - Slots: `default` - Events: None diff --git a/packages/ui/component-catalog.json b/packages/ui/component-catalog.json index ce5051a0..a0744d62 100644 --- a/packages/ui/component-catalog.json +++ b/packages/ui/component-catalog.json @@ -1,4178 +1,434 @@ { - "sourceDocuments": [ - "WRNexus Essential Component Inventory v1.0", - "WRNexus Public SaaS Component System Checklist v1.0" - ], + "sourceDocuments": ["Screenshot-directed WRNexus UI catalog reset"], "components": [ { - "name": "AcceptAllCookiesButton", - "category": "actions", - "purpose": "Reusable accept all cookies button component." - }, - { - "name": "AccessibleAccordion", - "category": "content", - "purpose": "Reusable accessible accordion component." - }, - { - "name": "AccessibleCarousel", - "category": "content", - "purpose": "Reusable accessible carousel component." - }, - { - "name": "AccessibleChartSummary", - "category": "content", - "purpose": "Reusable accessible chart summary component." - }, - { - "name": "AccessibleDialog", - "category": "overlays", - "purpose": "Reusable accessible dialog component." - }, - { - "name": "AccessibleErrorSummary", - "category": "content", - "purpose": "Reusable accessible error summary component." - }, - { - "name": "AccessibleIcon", - "category": "content", - "purpose": "Reusable accessible icon component." - }, - { - "name": "AccessibleMenu", - "category": "overlays", - "purpose": "Reusable accessible menu component." - }, - { - "name": "AccessibleTabs", - "category": "content", - "purpose": "Reusable accessible tabs component." - }, - { - "name": "AccessibleTooltip", - "category": "content", - "purpose": "Reusable accessible tooltip component." - }, - { - "name": "Accordion", - "category": "content", - "purpose": "Reusable accordion component." - }, - { - "name": "AccountMenu", - "category": "overlays", - "purpose": "Reusable account menu component." - }, - { - "name": "AccountStatusBanner", - "category": "feedback", - "purpose": "Reusable account status banner component." - }, - { - "name": "ActionMenu", - "category": "overlays", - "purpose": "Reusable action menu component." - }, - { - "name": "ActiveFilterList", - "category": "data", - "purpose": "Reusable active filter list component." - }, - { - "name": "ActivityList", - "category": "data", - "purpose": "Reusable activity list component." - }, - { - "name": "AddOnCard", - "category": "content", - "purpose": "Reusable add on card component." - }, - { - "name": "AddressInput", - "category": "forms", - "purpose": "Reusable address input component." - }, - { - "name": "AddressPreview", - "category": "content", - "purpose": "Reusable address preview component." - }, - { - "name": "AdvancedFilterBuilder", - "category": "content", - "purpose": "Reusable advanced filter builder component." - }, - { - "name": "Alert", - "category": "feedback", - "purpose": "Reusable alert component." - }, - { - "name": "AlertDialog", - "category": "overlays", - "purpose": "Reusable alert dialog component." - }, - { - "name": "AmountInput", - "category": "forms", - "purpose": "Reusable amount input component." - }, - { - "name": "AnalyticsDashboardPreview", - "category": "content", - "purpose": "Reusable analytics dashboard preview component." - }, - { - "name": "AnchorNavigation", + "name": "Container", "category": "layout", - "purpose": "Reusable anchor navigation component." + "purpose": "Theme-aware, responsive container component." }, { - "name": "ApartmentInput", - "category": "forms", - "purpose": "Reusable apartment input component." - }, - { - "name": "ApiAuthenticationNotice", - "category": "feedback", - "purpose": "Reusable api authentication notice component." - }, - { - "name": "ApiEndpointCard", - "category": "content", - "purpose": "Reusable api endpoint card component." - }, - { - "name": "ApiErrorExample", - "category": "content", - "purpose": "Reusable api error example component." - }, - { - "name": "ApiHeaderTable", - "category": "data", - "purpose": "Reusable api header table component." - }, - { - "name": "ApiKeyCreateDialog", - "category": "overlays", - "purpose": "Reusable api key create dialog component." - }, - { - "name": "ApiKeyDisplay", - "category": "content", - "purpose": "Reusable api key display component." - }, - { - "name": "ApiKeyInput", - "category": "forms", - "purpose": "Reusable api key input component." - }, - { - "name": "ApiMethodBadge", - "category": "feedback", - "purpose": "Reusable api method badge component." - }, - { - "name": "ApiParameterTable", - "category": "data", - "purpose": "Reusable api parameter table component." - }, - { - "name": "ApiRateLimitNotice", - "category": "feedback", - "purpose": "Reusable api rate limit notice component." - }, - { - "name": "ApiRequestExample", - "category": "content", - "purpose": "Reusable api request example component." - }, - { - "name": "ApiResponseExample", - "category": "content", - "purpose": "Reusable api response example component." - }, - { - "name": "ApiSchemaTable", - "category": "data", - "purpose": "Reusable api schema table component." - }, - { - "name": "ApiSchemaViewer", - "category": "content", - "purpose": "Reusable api schema viewer component." - }, - { - "name": "ApiVersionBadge", - "category": "feedback", - "purpose": "Reusable api version badge component." - }, - { - "name": "AppHeader", + "name": "Columns", "category": "layout", - "purpose": "Reusable app header component." - }, - { - "name": "ArchitectureSection", - "category": "layout", - "purpose": "Reusable architecture section component." - }, - { - "name": "AreaChart", - "category": "visualization", - "purpose": "Reusable area chart component." - }, - { - "name": "ArticleHero", - "category": "layout", - "purpose": "Reusable article hero component." - }, - { - "name": "ArticleLayout", - "category": "layout", - "purpose": "Reusable article layout component." - }, - { - "name": "ArticleNewsletterCTA", - "category": "actions", - "purpose": "Reusable article newsletter c t a component." - }, - { - "name": "ArticlePageShell", - "category": "layout", - "purpose": "Reusable article page shell component." - }, - { - "name": "ArticleShareActions", - "category": "actions", - "purpose": "Reusable article share actions component." - }, - { - "name": "AssetCard", - "category": "content", - "purpose": "Reusable asset card component." - }, - { - "name": "AttachmentPicker", - "category": "forms", - "purpose": "Reusable attachment picker component." - }, - { - "name": "AttachmentUpload", - "category": "content", - "purpose": "Reusable attachment upload component." - }, - { - "name": "AudioUpload", - "category": "content", - "purpose": "Reusable audio upload component." - }, - { - "name": "AuditLogPreview", - "category": "content", - "purpose": "Reusable audit log preview component." - }, - { - "name": "AuditTable", - "category": "data", - "purpose": "Reusable audit table component." - }, - { - "name": "AuthenticatorCodeInput", - "category": "forms", - "purpose": "Reusable authenticator code input component." - }, - { - "name": "AuthorAvatar", - "category": "content", - "purpose": "Reusable author avatar component." - }, - { - "name": "AuthorCard", - "category": "content", - "purpose": "Reusable author card component." - }, - { - "name": "AuthorizedApplicationCard", - "category": "content", - "purpose": "Reusable authorized application card component." - }, - { - "name": "AutoGrid", - "category": "data", - "purpose": "Reusable auto grid component." - }, - { - "name": "AutomationExampleCard", - "category": "content", - "purpose": "Reusable automation example card component." - }, - { - "name": "AvailabilityCalendar", - "category": "content", - "purpose": "Reusable availability calendar component." - }, - { - "name": "Avatar", - "category": "content", - "purpose": "Reusable avatar component." - }, - { - "name": "AvatarGroup", - "category": "forms", - "purpose": "Reusable avatar group component." - }, - { - "name": "AvatarUpload", - "category": "content", - "purpose": "Reusable avatar upload component." - }, - { - "name": "BackButton", - "category": "actions", - "purpose": "Reusable back button component." - }, - { - "name": "Badge", - "category": "feedback", - "purpose": "Reusable badge component." - }, - { - "name": "BankTransferDetails", - "category": "content", - "purpose": "Reusable bank transfer details component." - }, - { - "name": "Banner", - "category": "feedback", - "purpose": "Reusable banner component." - }, - { - "name": "BarChart", - "category": "visualization", - "purpose": "Reusable bar chart component." - }, - { - "name": "BetaBadge", - "category": "feedback", - "purpose": "Reusable beta badge component." - }, - { - "name": "BillingAddressForm", - "category": "content", - "purpose": "Reusable billing address form component." - }, - { - "name": "BillingExample", - "category": "content", - "purpose": "Reusable billing example component." - }, - { - "name": "BillingPeriodToggle", - "category": "forms", - "purpose": "Reusable billing period toggle component." - }, - { - "name": "BlackoutDatePicker", - "category": "forms", - "purpose": "Reusable blackout date picker component." - }, - { - "name": "BlogCard", - "category": "content", - "purpose": "Reusable blog card component." - }, - { - "name": "BlogGrid", - "category": "data", - "purpose": "Reusable blog grid component." - }, - { - "name": "BlogList", - "category": "data", - "purpose": "Reusable blog list component." - }, - { - "name": "BlogSearch", - "category": "content", - "purpose": "Reusable blog search component." - }, - { - "name": "BodyText", - "category": "content", - "purpose": "Reusable body text component." - }, - { - "name": "BorderRadiusPicker", - "category": "forms", - "purpose": "Reusable border radius picker component." - }, - { - "name": "BottomNavigation", - "category": "layout", - "purpose": "Reusable bottom navigation component." - }, - { - "name": "BrandColorPicker", - "category": "forms", - "purpose": "Reusable brand color picker component." - }, - { - "name": "BrandSelector", - "category": "forms", - "purpose": "Reusable brand selector component." - }, - { - "name": "BrowserFrame", - "category": "layout", - "purpose": "Reusable browser frame component." - }, - { - "name": "BudgetRangeSlider", - "category": "content", - "purpose": "Reusable budget range slider component." - }, - { - "name": "BudgetSelector", - "category": "forms", - "purpose": "Reusable budget selector component." - }, - { - "name": "BusinessHoursPicker", - "category": "forms", - "purpose": "Reusable business hours picker component." - }, - { - "name": "Button", - "category": "actions", - "purpose": "Reusable button component." - }, - { - "name": "ButtonGroup", - "category": "forms", - "purpose": "Reusable button group component." - }, - { - "name": "ButtonSelector", - "category": "forms", - "purpose": "Reusable button selector component." - }, - { - "name": "CTASection", - "category": "layout", - "purpose": "Reusable c t a section component." - }, - { - "name": "Calendar", - "category": "content", - "purpose": "Reusable calendar component." - }, - { - "name": "CalendarGrid", - "category": "data", - "purpose": "Reusable calendar grid component." - }, - { - "name": "CalendarHeader", - "category": "layout", - "purpose": "Reusable calendar header component." - }, - { - "name": "CalendarNavigation", - "category": "layout", - "purpose": "Reusable calendar navigation component." - }, - { - "name": "CallbackUrlInput", - "category": "forms", - "purpose": "Reusable callback url input component." - }, - { - "name": "CampaignCard", - "category": "content", - "purpose": "Reusable campaign card component." - }, - { - "name": "CampaignPerformancePreview", - "category": "content", - "purpose": "Reusable campaign performance preview component." - }, - { - "name": "CampaignProgress", - "category": "visualization", - "purpose": "Reusable campaign progress component." - }, - { - "name": "CapabilityGrid", - "category": "data", - "purpose": "Reusable capability grid component." - }, - { - "name": "CaptchaField", - "category": "forms", - "purpose": "Reusable captcha field component." - }, - { - "name": "Card", - "category": "content", - "purpose": "Reusable card component." - }, - { - "name": "CardPaymentForm", - "category": "content", - "purpose": "Reusable card payment form component." - }, - { - "name": "CardSelector", - "category": "forms", - "purpose": "Reusable card selector component." - }, - { - "name": "CardSkeleton", - "category": "feedback", - "purpose": "Reusable card skeleton component." - }, - { - "name": "CareerApplicationForm", - "category": "content", - "purpose": "Reusable career application form component." - }, - { - "name": "CareerBenefitsGrid", - "category": "data", - "purpose": "Reusable career benefits grid component." - }, - { - "name": "Carousel", - "category": "content", - "purpose": "Reusable carousel component." - }, - { - "name": "CaseStudyCard", - "category": "content", - "purpose": "Reusable case study card component." - }, - { - "name": "CaseStudyHero", - "category": "layout", - "purpose": "Reusable case study hero component." - }, - { - "name": "CaseStudyPreview", - "category": "content", - "purpose": "Reusable case study preview component." - }, - { - "name": "CenteredCTA", - "category": "actions", - "purpose": "Reusable centered c t a component." - }, - { - "name": "CenteredHero", - "category": "layout", - "purpose": "Reusable centered hero component." - }, - { - "name": "CenteredSectionHeader", - "category": "layout", - "purpose": "Reusable centered section header component." - }, - { - "name": "CertificateUpload", - "category": "content", - "purpose": "Reusable certificate upload component." - }, - { - "name": "CertificationBadge", - "category": "feedback", - "purpose": "Reusable certification badge component." - }, - { - "name": "ChallengeSection", - "category": "layout", - "purpose": "Reusable challenge section component." - }, - { - "name": "ChannelBadge", - "category": "feedback", - "purpose": "Reusable channel badge component." - }, - { - "name": "ChannelCard", - "category": "content", - "purpose": "Reusable channel card component." - }, - { - "name": "ChannelComparisonChart", - "category": "visualization", - "purpose": "Reusable channel comparison chart component." - }, - { - "name": "ChannelComparisonTable", - "category": "data", - "purpose": "Reusable channel comparison table component." - }, - { - "name": "ChannelFallbackDiagram", - "category": "visualization", - "purpose": "Reusable channel fallback diagram component." - }, - { - "name": "ChannelFlow", - "category": "visualization", - "purpose": "Reusable channel flow component." - }, - { - "name": "ChannelIcon", - "category": "content", - "purpose": "Reusable channel icon component." - }, - { - "name": "ChannelRateTable", - "category": "data", - "purpose": "Reusable channel rate table component." - }, - { - "name": "ChannelSelector", - "category": "forms", - "purpose": "Reusable channel selector component." - }, - { - "name": "CharacterCounter", - "category": "feedback", - "purpose": "Reusable character counter component." - }, - { - "name": "ChartEmptyState", - "category": "feedback", - "purpose": "Reusable chart empty state component." - }, - { - "name": "ChartTooltip", - "category": "content", - "purpose": "Reusable chart tooltip component." - }, - { - "name": "CheckboxGroup", - "category": "forms", - "purpose": "Reusable checkbox group component." - }, - { - "name": "Checklist", - "category": "content", - "purpose": "Reusable checklist component." - }, - { - "name": "ChecklistProgress", - "category": "visualization", - "purpose": "Reusable checklist progress component." - }, - { - "name": "ChipInput", - "category": "forms", - "purpose": "Reusable chip input component." - }, - { - "name": "CircularProgress", - "category": "visualization", - "purpose": "Reusable circular progress component." - }, - { - "name": "CitySelector", - "category": "forms", - "purpose": "Reusable city selector component." - }, - { - "name": "ClearFiltersButton", - "category": "actions", - "purpose": "Reusable clear filters button component." - }, - { - "name": "ClickableCard", - "category": "content", - "purpose": "Reusable clickable card component." - }, - { - "name": "CloseButton", - "category": "actions", - "purpose": "Reusable close button component." - }, - { - "name": "Code", - "category": "content", - "purpose": "Reusable code component." - }, - { - "name": "CodeBlock", - "category": "content", - "purpose": "Reusable code block component." - }, - { - "name": "CodeCopyButton", - "category": "actions", - "purpose": "Reusable code copy button component." - }, - { - "name": "CodeHeader", - "category": "layout", - "purpose": "Reusable code header component." - }, - { - "name": "CodeInput", - "category": "forms", - "purpose": "Reusable code input component." - }, - { - "name": "CodeLanguageBadge", - "category": "feedback", - "purpose": "Reusable code language badge component." - }, - { - "name": "CodeTabs", - "category": "content", - "purpose": "Reusable code tabs component." - }, - { - "name": "CodeText", - "category": "content", - "purpose": "Reusable code text component." - }, - { - "name": "CohortChart", - "category": "visualization", - "purpose": "Reusable cohort chart component." - }, - { - "name": "ColorGrid", - "category": "data", - "purpose": "Reusable color grid component." - }, - { - "name": "ColorHexInput", - "category": "forms", - "purpose": "Reusable color hex input component." - }, - { - "name": "ColorPicker", - "category": "forms", - "purpose": "Reusable color picker component." - }, - { - "name": "ColorSelector", - "category": "forms", - "purpose": "Reusable color selector component." - }, - { - "name": "ColorSwatch", - "category": "content", - "purpose": "Reusable color swatch component." - }, - { - "name": "ComingSoonBadge", - "category": "feedback", - "purpose": "Reusable coming soon badge component." - }, - { - "name": "ComingSoonState", - "category": "feedback", - "purpose": "Reusable coming soon state component." - }, - { - "name": "CommandBlock", - "category": "content", - "purpose": "Reusable command block component." - }, - { - "name": "CommandMenu", - "category": "overlays", - "purpose": "Reusable command menu component." - }, - { - "name": "CommandSearchInput", - "category": "forms", - "purpose": "Reusable command search input component." - }, - { - "name": "CompanyHero", - "category": "layout", - "purpose": "Reusable company hero component." - }, - { - "name": "CompanyNameInput", - "category": "forms", - "purpose": "Reusable company name input component." - }, - { - "name": "CompanyPageShell", - "category": "layout", - "purpose": "Reusable company page shell component." - }, - { - "name": "CompanySizeSelector", - "category": "forms", - "purpose": "Reusable company size selector component." - }, - { - "name": "ComparisonDateRangePicker", - "category": "forms", - "purpose": "Reusable comparison date range picker component." - }, - { - "name": "ComparisonTable", - "category": "data", - "purpose": "Reusable comparison table component." - }, - { - "name": "CompletionMeter", - "category": "visualization", - "purpose": "Reusable completion meter component." - }, - { - "name": "ComplianceBadgeList", - "category": "data", - "purpose": "Reusable compliance badge list component." - }, - { - "name": "ComplianceProgramCard", - "category": "content", - "purpose": "Reusable compliance program card component." - }, - { - "name": "ConfirmPasswordInput", - "category": "forms", - "purpose": "Reusable confirm password input component." - }, - { - "name": "ConfirmationDialog", - "category": "overlays", - "purpose": "Reusable confirmation dialog component." - }, - { - "name": "ConnectedAccountCard", - "category": "content", - "purpose": "Reusable connected account card component." - }, - { - "name": "ConnectionCard", - "category": "content", - "purpose": "Reusable connection card component." - }, - { - "name": "ConsentTimelinePreview", - "category": "content", - "purpose": "Reusable consent timeline preview component." - }, - { - "name": "ContactCTA", - "category": "actions", - "purpose": "Reusable contact c t a component." - }, - { - "name": "ContactCard", - "category": "content", - "purpose": "Reusable contact card component." - }, - { - "name": "ContactForm", - "category": "content", - "purpose": "Reusable contact form component." - }, - { - "name": "ContactHero", - "category": "layout", - "purpose": "Reusable contact hero component." - }, - { - "name": "ContactPageShell", - "category": "layout", - "purpose": "Reusable contact page shell component." - }, - { - "name": "ContactSalesButton", - "category": "actions", - "purpose": "Reusable contact sales button component." - }, - { - "name": "ContactSalesForm", - "category": "content", - "purpose": "Reusable contact sales form component." - }, - { - "name": "ContextMenu", - "category": "overlays", - "purpose": "Reusable context menu component." - }, - { - "name": "ContextSwitcher", - "category": "content", - "purpose": "Reusable context switcher component." - }, - { - "name": "ConversationList", - "category": "data", - "purpose": "Reusable conversation list component." - }, - { - "name": "ConversationPreview", - "category": "content", - "purpose": "Reusable conversation preview component." - }, - { - "name": "ConversionChart", - "category": "visualization", - "purpose": "Reusable conversion chart component." - }, - { - "name": "CookieBanner", - "category": "feedback", - "purpose": "Reusable cookie banner component." - }, - { - "name": "CookieCategoryList", - "category": "data", - "purpose": "Reusable cookie category list component." - }, - { - "name": "CookieCategoryToggle", - "category": "forms", - "purpose": "Reusable cookie category toggle component." - }, - { - "name": "CookieDetailsTable", - "category": "data", - "purpose": "Reusable cookie details table component." - }, - { - "name": "CookiePreferencesDialog", - "category": "overlays", - "purpose": "Reusable cookie preferences dialog component." - }, - { - "name": "CookieTable", - "category": "data", - "purpose": "Reusable cookie table component." - }, - { - "name": "CoordinatesInput", - "category": "forms", - "purpose": "Reusable coordinates input component." - }, - { - "name": "CoordinatesPicker", - "category": "forms", - "purpose": "Reusable coordinates picker component." - }, - { - "name": "CopyButton", - "category": "actions", - "purpose": "Reusable copy button component." - }, - { - "name": "CopyCodeButton", - "category": "actions", - "purpose": "Reusable copy code button component." - }, - { - "name": "CopySecretField", - "category": "forms", - "purpose": "Reusable copy secret field component." - }, - { - "name": "CostBreakdownChart", - "category": "visualization", - "purpose": "Reusable cost breakdown chart component." - }, - { - "name": "CostSummary", - "category": "content", - "purpose": "Reusable cost summary component." - }, - { - "name": "Counter", - "category": "feedback", - "purpose": "Reusable counter component." - }, - { - "name": "CountryCallingCodeInput", - "category": "forms", - "purpose": "Reusable country calling code input component." - }, - { - "name": "CountryCallingCodeSelector", - "category": "forms", - "purpose": "Reusable country calling code selector component." - }, - { - "name": "CountrySelector", - "category": "forms", - "purpose": "Reusable country selector component." - }, - { - "name": "CouponInput", - "category": "forms", - "purpose": "Reusable coupon input component." - }, - { - "name": "CreditAmountInput", - "category": "forms", - "purpose": "Reusable credit amount input component." - }, - { - "name": "CronBuilder", - "category": "content", - "purpose": "Reusable cron builder component." - }, - { - "name": "CronInput", - "category": "forms", - "purpose": "Reusable cron input component." - }, - { - "name": "CsvUpload", - "category": "content", - "purpose": "Reusable csv upload component." - }, - { - "name": "CurrencyInput", - "category": "forms", - "purpose": "Reusable currency input component." - }, - { - "name": "CurrencySelector", - "category": "forms", - "purpose": "Reusable currency selector component." - }, - { - "name": "CurrentPasswordInput", - "category": "forms", - "purpose": "Reusable current password input component." - }, - { - "name": "CustomerLogo", - "category": "content", - "purpose": "Reusable customer logo component." - }, - { - "name": "CustomerStoryCard", - "category": "content", - "purpose": "Reusable customer story card component." - }, - { - "name": "DangerButton", - "category": "actions", - "purpose": "Reusable danger button component." - }, - { - "name": "DataProtectionCard", - "category": "content", - "purpose": "Reusable data protection card component." - }, - { - "name": "DataRetentionTable", - "category": "data", - "purpose": "Reusable data retention table component." - }, - { - "name": "DataTable", - "category": "data", - "purpose": "Reusable data table component." - }, - { - "name": "DateInput", - "category": "forms", - "purpose": "Reusable date input component." - }, - { - "name": "DatePicker", - "category": "forms", - "purpose": "Reusable date picker component." - }, - { - "name": "DateRangeCalendar", - "category": "content", - "purpose": "Reusable date range calendar component." - }, - { - "name": "DateRangePicker", - "category": "forms", - "purpose": "Reusable date range picker component." - }, - { - "name": "DateRangeSlider", - "category": "content", - "purpose": "Reusable date range slider component." - }, - { - "name": "DateTimeInput", - "category": "forms", - "purpose": "Reusable date time input component." - }, - { - "name": "DateTimePicker", - "category": "forms", - "purpose": "Reusable date time picker component." - }, - { - "name": "DateTimeRangePicker", - "category": "forms", - "purpose": "Reusable date time range picker component." - }, - { - "name": "DecimalInput", - "category": "forms", - "purpose": "Reusable decimal input component." - }, - { - "name": "DefinitionList", - "category": "data", - "purpose": "Reusable definition list component." - }, - { - "name": "DeleteConfirmationDialog", - "category": "overlays", - "purpose": "Reusable delete confirmation dialog component." - }, - { - "name": "DeliveryPreview", - "category": "content", - "purpose": "Reusable delivery preview component." - }, - { - "name": "DeliveryStatusChart", - "category": "visualization", - "purpose": "Reusable delivery status chart component." - }, - { - "name": "DeliveryStatusTimeline", - "category": "visualization", - "purpose": "Reusable delivery status timeline component." - }, - { - "name": "DemoRequestForm", - "category": "content", - "purpose": "Reusable demo request form component." - }, - { - "name": "DepartmentInput", - "category": "forms", - "purpose": "Reusable department input component." - }, - { - "name": "DeprecatedFeatureAlert", - "category": "feedback", - "purpose": "Reusable deprecated feature alert component." - }, - { - "name": "DescriptionList", - "category": "data", - "purpose": "Reusable description list component." - }, - { - "name": "DesktopNavigation", - "category": "layout", - "purpose": "Reusable desktop navigation component." - }, - { - "name": "DeveloperCTA", - "category": "actions", - "purpose": "Reusable developer c t a component." - }, - { - "name": "DeveloperHero", - "category": "layout", - "purpose": "Reusable developer hero component." - }, - { - "name": "DeveloperPageShell", - "category": "layout", - "purpose": "Reusable developer page shell component." - }, - { - "name": "DeveloperSearch", - "category": "content", - "purpose": "Reusable developer search component." - }, - { - "name": "DevelopersMenu", - "category": "overlays", - "purpose": "Reusable developers menu component." - }, - { - "name": "DeviceCard", - "category": "content", - "purpose": "Reusable device card component." - }, - { - "name": "DiscountInput", - "category": "forms", - "purpose": "Reusable discount input component." - }, - { - "name": "DisplayNameInput", - "category": "forms", - "purpose": "Reusable display name input component." - }, - { - "name": "DoNotSellLink", - "category": "actions", - "purpose": "Reusable do not sell link component." - }, - { - "name": "DocumentPreview", - "category": "content", - "purpose": "Reusable document preview component." - }, - { - "name": "DocumentUpload", - "category": "content", - "purpose": "Reusable document upload component." - }, - { - "name": "DomainInput", - "category": "forms", - "purpose": "Reusable domain input component." - }, - { - "name": "DonutChart", - "category": "visualization", - "purpose": "Reusable donut chart component." - }, - { - "name": "DownloadAction", - "category": "actions", - "purpose": "Reusable download action component." - }, - { - "name": "DownloadButton", - "category": "actions", - "purpose": "Reusable download button component." - }, - { - "name": "DownloadGateForm", - "category": "content", - "purpose": "Reusable download gate form component." - }, - { - "name": "DownloadPolicyButton", - "category": "actions", - "purpose": "Reusable download policy button component." - }, - { - "name": "DownloadResourceForm", - "category": "content", - "purpose": "Reusable download resource form component." - }, - { - "name": "DropdownMenu", - "category": "overlays", - "purpose": "Reusable dropdown menu component." - }, - { - "name": "DropdownNavigation", - "category": "layout", - "purpose": "Reusable dropdown navigation component." - }, - { - "name": "DurationInput", - "category": "forms", - "purpose": "Reusable duration input component." - }, - { - "name": "DurationPicker", - "category": "forms", - "purpose": "Reusable duration picker component." - }, - { - "name": "DurationSlider", - "category": "content", - "purpose": "Reusable duration slider component." - }, - { - "name": "ElevatedCard", - "category": "content", - "purpose": "Reusable elevated card component." - }, - { - "name": "EmailBodyEditor", - "category": "forms", - "purpose": "Reusable email body editor component." - }, - { - "name": "EmailComposer", - "category": "content", - "purpose": "Reusable email composer component." - }, - { - "name": "EmailInput", - "category": "forms", - "purpose": "Reusable email input component." - }, - { - "name": "EmojiPicker", - "category": "forms", - "purpose": "Reusable emoji picker component." - }, - { - "name": "EmptyState", - "category": "feedback", - "purpose": "Reusable empty state component." - }, - { - "name": "EncryptionDiagram", - "category": "visualization", - "purpose": "Reusable encryption diagram component." - }, - { - "name": "EnterpriseCTA", - "category": "actions", - "purpose": "Reusable enterprise c t a component." - }, - { - "name": "EnterpriseHero", - "category": "layout", - "purpose": "Reusable enterprise hero component." - }, - { - "name": "EnterprisePricingCard", - "category": "content", - "purpose": "Reusable enterprise pricing card component." - }, - { - "name": "EnvironmentSelector", - "category": "forms", - "purpose": "Reusable environment selector component." - }, - { - "name": "EnvironmentSwitcher", - "category": "content", - "purpose": "Reusable environment switcher component." - }, - { - "name": "ErrorActions", - "category": "actions", - "purpose": "Reusable error actions component." - }, - { - "name": "ErrorCard", - "category": "content", - "purpose": "Reusable error card component." - }, - { - "name": "ErrorCode", - "category": "content", - "purpose": "Reusable error code component." - }, - { - "name": "ErrorHero", - "category": "layout", - "purpose": "Reusable error hero component." - }, - { - "name": "ErrorIllustration", - "category": "content", - "purpose": "Reusable error illustration component." - }, - { - "name": "ErrorPage", - "category": "content", - "purpose": "Reusable error page component." - }, - { - "name": "ErrorPageShell", - "category": "layout", - "purpose": "Reusable error page shell component." - }, - { - "name": "ErrorState", - "category": "feedback", - "purpose": "Reusable error state component." - }, - { - "name": "ErrorSupportLink", - "category": "actions", - "purpose": "Reusable error support link component." - }, - { - "name": "EstimatedCostSummary", - "category": "content", - "purpose": "Reusable estimated cost summary component." - }, - { - "name": "EventTable", - "category": "data", - "purpose": "Reusable event table component." - }, - { - "name": "ExpandableText", - "category": "content", - "purpose": "Reusable expandable text component." - }, - { - "name": "ExpiryDateTimePicker", - "category": "forms", - "purpose": "Reusable expiry date time picker component." - }, - { - "name": "ExportProgress", - "category": "visualization", - "purpose": "Reusable export progress component." - }, - { - "name": "ExternalLink", - "category": "actions", - "purpose": "Reusable external link component." - }, - { - "name": "EyebrowText", - "category": "content", - "purpose": "Reusable eyebrow text component." - }, - { - "name": "FactorCard", - "category": "content", - "purpose": "Reusable factor card component." - }, - { - "name": "FallbackRouteBuilder", - "category": "content", - "purpose": "Reusable fallback route builder component." - }, - { - "name": "FallbackRouteDiagram", - "category": "visualization", - "purpose": "Reusable fallback route diagram component." - }, - { - "name": "FaviconUpload", - "category": "content", - "purpose": "Reusable favicon upload component." - }, - { - "name": "FaxInput", - "category": "forms", - "purpose": "Reusable fax input component." - }, - { - "name": "FeatureCard", - "category": "content", - "purpose": "Reusable feature card component." - }, - { - "name": "FeatureChecklist", - "category": "content", - "purpose": "Reusable feature checklist component." - }, - { - "name": "FeatureComparisonTable", - "category": "data", - "purpose": "Reusable feature comparison table component." - }, - { - "name": "FeatureDetailsPanel", - "category": "layout", - "purpose": "Reusable feature details panel component." - }, - { - "name": "FeatureGrid", - "category": "data", - "purpose": "Reusable feature grid component." - }, - { - "name": "FeatureIconCard", - "category": "content", - "purpose": "Reusable feature icon card component." - }, - { - "name": "FeatureList", - "category": "data", - "purpose": "Reusable feature list component." - }, - { - "name": "FeatureTabs", - "category": "content", - "purpose": "Reusable feature tabs component." - }, - { - "name": "FeatureTimeline", - "category": "visualization", - "purpose": "Reusable feature timeline component." - }, - { - "name": "FeatureUnavailableState", - "category": "feedback", - "purpose": "Reusable feature unavailable state component." - }, - { - "name": "FeaturedBlogCard", - "category": "content", - "purpose": "Reusable featured blog card component." - }, - { - "name": "FieldActions", - "category": "actions", - "purpose": "Reusable field actions component." - }, - { - "name": "FileInput", - "category": "forms", - "purpose": "Reusable file input component." - }, - { - "name": "FileList", - "category": "data", - "purpose": "Reusable file list component." - }, - { - "name": "FileSizeInput", - "category": "forms", - "purpose": "Reusable file size input component." - }, - { - "name": "FileSizeLabel", - "category": "content", - "purpose": "Reusable file size label component." - }, - { - "name": "FileTypeBadge", - "category": "feedback", - "purpose": "Reusable file type badge component." - }, - { - "name": "FileUpload", - "category": "content", - "purpose": "Reusable file upload component." - }, - { - "name": "FilterMenu", - "category": "overlays", - "purpose": "Reusable filter menu component." - }, - { - "name": "FilterSearchInput", - "category": "forms", - "purpose": "Reusable filter search input component." - }, - { - "name": "FilterableTable", - "category": "data", - "purpose": "Reusable filterable table component." - }, - { - "name": "FinalCTA", - "category": "actions", - "purpose": "Reusable final c t a component." - }, - { - "name": "FirstNameInput", - "category": "forms", - "purpose": "Reusable first name input component." - }, - { - "name": "FontPicker", - "category": "forms", - "purpose": "Reusable font picker component." - }, - { - "name": "FontSizePicker", - "category": "forms", - "purpose": "Reusable font size picker component." - }, - { - "name": "FontWeightPicker", - "category": "forms", - "purpose": "Reusable font weight picker component." - }, - { - "name": "FooterLanguageSwitcher", - "category": "content", - "purpose": "Reusable footer language switcher component." - }, - { - "name": "FooterStatusIndicator", - "category": "feedback", - "purpose": "Reusable footer status indicator component." - }, - { - "name": "ForbiddenPage", - "category": "content", - "purpose": "Reusable forbidden page component." - }, - { - "name": "ForbiddenState", - "category": "feedback", - "purpose": "Reusable forbidden state component." - }, - { - "name": "ForgotPasswordForm", - "category": "content", - "purpose": "Reusable forgot password form component." - }, - { - "name": "Form", - "category": "content", - "purpose": "Reusable form component." - }, - { - "name": "FormActions", - "category": "actions", - "purpose": "Reusable form actions component." - }, - { - "name": "FormAlert", - "category": "feedback", - "purpose": "Reusable form alert component." - }, - { - "name": "FormDialog", - "category": "overlays", - "purpose": "Reusable form dialog component." - }, - { - "name": "FormErrorSummary", - "category": "content", - "purpose": "Reusable form error summary component." - }, - { - "name": "FormField", - "category": "forms", - "purpose": "Reusable form field component." - }, - { - "name": "FormGrid", - "category": "data", - "purpose": "Reusable form grid component." - }, - { - "name": "FormGroup", - "category": "forms", - "purpose": "Reusable form group component." - }, - { - "name": "FormHelpText", - "category": "content", - "purpose": "Reusable form help text component." - }, - { - "name": "FormLabel", - "category": "content", - "purpose": "Reusable form label component." - }, - { - "name": "FormProgress", - "category": "visualization", - "purpose": "Reusable form progress component." - }, - { - "name": "FormRow", - "category": "data", - "purpose": "Reusable form row component." - }, - { - "name": "FormSection", - "category": "layout", - "purpose": "Reusable form section component." - }, - { - "name": "FullscreenDialog", - "category": "overlays", - "purpose": "Reusable fullscreen dialog component." - }, - { - "name": "FunnelChart", - "category": "visualization", - "purpose": "Reusable funnel chart component." - }, - { - "name": "GeoChart", - "category": "visualization", - "purpose": "Reusable geo chart component." - }, - { - "name": "GeofenceEditor", - "category": "forms", - "purpose": "Reusable geofence editor component." - }, - { - "name": "GhostButton", - "category": "actions", - "purpose": "Reusable ghost button component." - }, - { - "name": "GlassCard", - "category": "content", - "purpose": "Reusable glass card component." - }, - { - "name": "GlobalSearch", - "category": "content", - "purpose": "Reusable global search component." - }, - { - "name": "GradientCTA", - "category": "actions", - "purpose": "Reusable gradient c t a component." - }, - { - "name": "GradientPicker", - "category": "forms", - "purpose": "Reusable gradient picker component." - }, - { - "name": "GradientStopEditor", - "category": "forms", - "purpose": "Reusable gradient stop editor component." + "purpose": "Theme-aware, responsive columns component." }, { "name": "Grid", - "category": "data", - "purpose": "Reusable grid component." - }, - { - "name": "GuideCard", - "category": "content", - "purpose": "Reusable guide card component." - }, - { - "name": "GuideChecklist", - "category": "content", - "purpose": "Reusable guide checklist component." - }, - { - "name": "GuideDifficultyBadge", - "category": "feedback", - "purpose": "Reusable guide difficulty badge component." - }, - { - "name": "GuideGrid", - "category": "data", - "purpose": "Reusable guide grid component." - }, - { - "name": "GuideStep", - "category": "content", - "purpose": "Reusable guide step component." - }, - { - "name": "Header", "category": "layout", - "purpose": "Reusable header component." + "purpose": "Theme-aware, responsive grid component." }, { - "name": "HeaderActions", - "category": "actions", - "purpose": "Reusable header actions component." - }, - { - "name": "HealthIndicator", - "category": "feedback", - "purpose": "Reusable health indicator component." - }, - { - "name": "Hero", + "name": "LayoutSplitter", "category": "layout", - "purpose": "Reusable hero component." + "purpose": "Theme-aware, responsive layout splitter component." }, { - "name": "HeroActions", - "category": "actions", - "purpose": "Reusable hero actions component." - }, - { - "name": "HeroCodePanel", + "name": "Typography", "category": "layout", - "purpose": "Reusable hero code panel component." + "purpose": "Theme-aware, responsive typography component." }, { - "name": "HeroGradientText", - "category": "content", - "purpose": "Reusable hero gradient text component." + "name": "Image", + "category": "layout", + "purpose": "Theme-aware, responsive image component." }, { - "name": "HeroPrimaryAction", - "category": "actions", - "purpose": "Reusable hero primary action component." + "name": "Link", + "category": "layout", + "purpose": "Theme-aware, responsive link component." }, { - "name": "HeroProductPreview", - "category": "content", - "purpose": "Reusable hero product preview component." + "name": "Divider", + "category": "layout", + "purpose": "Theme-aware, responsive divider component." }, { - "name": "HeroSecondaryAction", - "category": "actions", - "purpose": "Reusable hero secondary action component." + "name": "Kbd", + "category": "layout", + "purpose": "Theme-aware, responsive kbd component." }, { - "name": "HeroTrustText", - "category": "content", - "purpose": "Reusable hero trust text component." + "name": "CustomScrollbar", + "category": "layout", + "purpose": "Theme-aware, responsive custom scrollbar component." }, { - "name": "HexColorInput", + "name": "Accordion", + "category": "base", + "purpose": "Theme-aware, responsive accordion component." + }, + { + "name": "Alert", + "category": "base", + "purpose": "Theme-aware, responsive alert component." + }, + { + "name": "Avatar", + "category": "base", + "purpose": "Theme-aware, responsive avatar component." + }, + { + "name": "AvatarGroup", + "category": "base", + "purpose": "Theme-aware, responsive avatar group component." + }, + { + "name": "Badge", + "category": "base", + "purpose": "Theme-aware, responsive badge component." + }, + { + "name": "Blockquote", + "category": "base", + "purpose": "Theme-aware, responsive blockquote component." + }, + { + "name": "Button", + "category": "base", + "purpose": "Theme-aware, responsive button component." + }, + { + "name": "ButtonGroup", + "category": "base", + "purpose": "Theme-aware, responsive button group component." + }, + { + "name": "Card", + "category": "base", + "purpose": "Theme-aware, responsive card component." + }, + { + "name": "ChatBubble", + "category": "base", + "purpose": "Theme-aware, responsive chat bubble component." + }, + { + "name": "Carousel", + "category": "base", + "purpose": "Theme-aware, responsive carousel component." + }, + { + "name": "Collapse", + "category": "base", + "purpose": "Theme-aware, responsive collapse component." + }, + { + "name": "DatePicker", + "category": "base", + "purpose": "Theme-aware, responsive date picker component." + }, + { + "name": "DeviceFrame", + "category": "base", + "purpose": "Theme-aware, responsive device frame component." + }, + { + "name": "List", + "category": "base", + "purpose": "Theme-aware, responsive list component." + }, + { + "name": "ListGroup", + "category": "base", + "purpose": "Theme-aware, responsive list group component." + }, + { + "name": "LegendIndicator", + "category": "base", + "purpose": "Theme-aware, responsive legend indicator component." + }, + { + "name": "Progress", + "category": "base", + "purpose": "Theme-aware, responsive progress component." + }, + { + "name": "FileUploadProgress", + "category": "base", + "purpose": "Theme-aware, responsive file upload progress component." + }, + { + "name": "Rating", + "category": "base", + "purpose": "Theme-aware, responsive rating component." + }, + { + "name": "Skeleton", + "category": "base", + "purpose": "Theme-aware, responsive skeleton component." + }, + { + "name": "Spinner", + "category": "base", + "purpose": "Theme-aware, responsive spinner component." + }, + { + "name": "StyledIcon", + "category": "base", + "purpose": "Theme-aware, responsive styled icon component." + }, + { + "name": "Toast", + "category": "base", + "purpose": "Theme-aware, responsive toast component." + }, + { + "name": "Timeline", + "category": "base", + "purpose": "Theme-aware, responsive timeline component." + }, + { + "name": "TreeView", + "category": "base", + "purpose": "Theme-aware, responsive tree view component." + }, + { + "name": "Marquee", + "category": "base", + "purpose": "Theme-aware, responsive marquee component." + }, + { + "name": "Navbar", + "category": "navigation", + "purpose": "Theme-aware, responsive navbar component." + }, + { + "name": "MegaMenu", + "category": "navigation", + "purpose": "Theme-aware, responsive mega menu component." + }, + { + "name": "Nav", + "category": "navigation", + "purpose": "Theme-aware, responsive nav component." + }, + { + "name": "Tabs", + "category": "navigation", + "purpose": "Theme-aware, responsive tabs component." + }, + { + "name": "Sidebar", + "category": "navigation", + "purpose": "Theme-aware, responsive sidebar component." + }, + { + "name": "Scrollspy", + "category": "navigation", + "purpose": "Theme-aware, responsive scrollspy component." + }, + { + "name": "Breadcrumb", + "category": "navigation", + "purpose": "Theme-aware, responsive breadcrumb component." + }, + { + "name": "Pagination", + "category": "navigation", + "purpose": "Theme-aware, responsive pagination component." + }, + { + "name": "Stepper", + "category": "navigation", + "purpose": "Theme-aware, responsive stepper component." + }, + { + "name": "Input", "category": "forms", - "purpose": "Reusable hex color input component." - }, - { - "name": "HiddenField", - "category": "forms", - "purpose": "Reusable hidden field component." - }, - { - "name": "HighlightText", - "category": "content", - "purpose": "Reusable highlight text component." - }, - { - "name": "HolidayCalendar", - "category": "content", - "purpose": "Reusable holiday calendar component." - }, - { - "name": "HostnameInput", - "category": "forms", - "purpose": "Reusable hostname input component." - }, - { - "name": "HourPicker", - "category": "forms", - "purpose": "Reusable hour picker component." - }, - { - "name": "HslColorInput", - "category": "forms", - "purpose": "Reusable hsl color input component." - }, - { - "name": "HtmlEditor", - "category": "forms", - "purpose": "Reusable html editor component." - }, - { - "name": "HumanApprovalStep", - "category": "content", - "purpose": "Reusable human approval step component." - }, - { - "name": "Icon", - "category": "content", - "purpose": "Reusable icon component." - }, - { - "name": "IconButton", - "category": "actions", - "purpose": "Reusable icon button component." - }, - { - "name": "IconPicker", - "category": "forms", - "purpose": "Reusable icon picker component." - }, - { - "name": "IconSelector", - "category": "forms", - "purpose": "Reusable icon selector component." - }, - { - "name": "IdentifierInput", - "category": "forms", - "purpose": "Reusable identifier input component." - }, - { - "name": "Illustration", - "category": "content", - "purpose": "Reusable illustration component." - }, - { - "name": "ImageCompressionPreview", - "category": "content", - "purpose": "Reusable image compression preview component." - }, - { - "name": "ImageEditor", - "category": "forms", - "purpose": "Reusable image editor component." - }, - { - "name": "ImagePreviewDialog", - "category": "overlays", - "purpose": "Reusable image preview dialog component." - }, - { - "name": "ImageSelector", - "category": "forms", - "purpose": "Reusable image selector component." - }, - { - "name": "ImageUpload", - "category": "content", - "purpose": "Reusable image upload component." - }, - { - "name": "ImportProgress", - "category": "visualization", - "purpose": "Reusable import progress component." - }, - { - "name": "IncidentAlert", - "category": "feedback", - "purpose": "Reusable incident alert component." - }, - { - "name": "IncidentBanner", - "category": "feedback", - "purpose": "Reusable incident banner component." - }, - { - "name": "IncidentCard", - "category": "content", - "purpose": "Reusable incident card component." - }, - { - "name": "IncidentList", - "category": "data", - "purpose": "Reusable incident list component." - }, - { - "name": "IncidentResponseFlow", - "category": "visualization", - "purpose": "Reusable incident response flow component." - }, - { - "name": "IncidentSeverityBadge", - "category": "feedback", - "purpose": "Reusable incident severity badge component." - }, - { - "name": "IncidentTimeline", - "category": "visualization", - "purpose": "Reusable incident timeline component." - }, - { - "name": "IndustryBadge", - "category": "feedback", - "purpose": "Reusable industry badge component." - }, - { - "name": "IndustrySelector", - "category": "forms", - "purpose": "Reusable industry selector component." - }, - { - "name": "InfoCard", - "category": "content", - "purpose": "Reusable info card component." - }, - { - "name": "InlineAlert", - "category": "feedback", - "purpose": "Reusable inline alert component." - }, - { - "name": "InlineCode", - "category": "content", - "purpose": "Reusable inline code component." + "purpose": "Theme-aware, responsive input component." }, { "name": "InputGroup", "category": "forms", - "purpose": "Reusable input group component." + "purpose": "Theme-aware, responsive input group component." }, { - "name": "InsetPanel", - "category": "layout", - "purpose": "Reusable inset panel component." - }, - { - "name": "IntegerInput", + "name": "Textarea", "category": "forms", - "purpose": "Reusable integer input component." + "purpose": "Theme-aware, responsive textarea component." }, { - "name": "IntegrationCard", - "category": "content", - "purpose": "Reusable integration card component." - }, - { - "name": "InvoiceLineItem", - "category": "content", - "purpose": "Reusable invoice line item component." - }, - { - "name": "InvoiceSummary", - "category": "content", - "purpose": "Reusable invoice summary component." - }, - { - "name": "IpAddressInput", + "name": "FileInput", "category": "forms", - "purpose": "Reusable ip address input component." + "purpose": "Theme-aware, responsive file input component." }, { - "name": "JobCard", - "category": "content", - "purpose": "Reusable job card component." - }, - { - "name": "JobProgress", - "category": "visualization", - "purpose": "Reusable job progress component." - }, - { - "name": "JobTitleInput", + "name": "Checkbox", "category": "forms", - "purpose": "Reusable job title input component." + "purpose": "Theme-aware, responsive checkbox component." }, { - "name": "JsonInput", + "name": "Radio", "category": "forms", - "purpose": "Reusable json input component." + "purpose": "Theme-aware, responsive radio component." }, { - "name": "JsonViewer", - "category": "content", - "purpose": "Reusable json viewer component." - }, - { - "name": "KeyValueTable", - "category": "data", - "purpose": "Reusable key value table component." - }, - { - "name": "KycDocumentUpload", - "category": "content", - "purpose": "Reusable kyc document upload component." - }, - { - "name": "LanguageSelector", + "name": "Switch", "category": "forms", - "purpose": "Reusable language selector component." + "purpose": "Theme-aware, responsive switch component." }, { - "name": "LanguageSwitcher", - "category": "content", - "purpose": "Reusable language switcher component." - }, - { - "name": "LastNameInput", + "name": "Select", "category": "forms", - "purpose": "Reusable last name input component." - }, - { - "name": "LatencyMetric", - "category": "visualization", - "purpose": "Reusable latency metric component." - }, - { - "name": "LatitudeInput", - "category": "forms", - "purpose": "Reusable latitude input component." - }, - { - "name": "LeadText", - "category": "content", - "purpose": "Reusable lead text component." - }, - { - "name": "LeadershipGrid", - "category": "data", - "purpose": "Reusable leadership grid component." - }, - { - "name": "LegalAcceptanceNotice", - "category": "feedback", - "purpose": "Reusable legal acceptance notice component." - }, - { - "name": "LegalBulletList", - "category": "data", - "purpose": "Reusable legal bullet list component." - }, - { - "name": "LegalContactBlock", - "category": "content", - "purpose": "Reusable legal contact block component." - }, - { - "name": "LegalDefinitionList", - "category": "data", - "purpose": "Reusable legal definition list component." - }, - { - "name": "LegalDocumentHeader", - "category": "layout", - "purpose": "Reusable legal document header component." - }, - { - "name": "LegalDocumentLayout", - "category": "layout", - "purpose": "Reusable legal document layout component." - }, - { - "name": "LegalHero", - "category": "layout", - "purpose": "Reusable legal hero component." - }, - { - "name": "LegalLanguageSelector", - "category": "forms", - "purpose": "Reusable legal language selector component." - }, - { - "name": "LegalNotice", - "category": "feedback", - "purpose": "Reusable legal notice component." - }, - { - "name": "LegalPageShell", - "category": "layout", - "purpose": "Reusable legal page shell component." - }, - { - "name": "LegalPrintButton", - "category": "actions", - "purpose": "Reusable legal print button component." - }, - { - "name": "LegalRegionSelector", - "category": "forms", - "purpose": "Reusable legal region selector component." - }, - { - "name": "LegalSection", - "category": "layout", - "purpose": "Reusable legal section component." - }, - { - "name": "LegalSummary", - "category": "content", - "purpose": "Reusable legal summary component." - }, - { - "name": "LegalTable", - "category": "data", - "purpose": "Reusable legal table component." - }, - { - "name": "LegalVersionBadge", - "category": "feedback", - "purpose": "Reusable legal version badge component." - }, - { - "name": "LetterSpacingPicker", - "category": "forms", - "purpose": "Reusable letter spacing picker component." - }, - { - "name": "LicenseKeyInput", - "category": "forms", - "purpose": "Reusable license key input component." - }, - { - "name": "Lightbox", - "category": "overlays", - "purpose": "Reusable lightbox component." - }, - { - "name": "LineChart", - "category": "visualization", - "purpose": "Reusable line chart component." - }, - { - "name": "LineHeightPicker", - "category": "forms", - "purpose": "Reusable line height picker component." - }, - { - "name": "LinkButton", - "category": "actions", - "purpose": "Reusable link button component." - }, - { - "name": "List", - "category": "data", - "purpose": "Reusable list component." - }, - { - "name": "LoadingButton", - "category": "actions", - "purpose": "Reusable loading button component." - }, - { - "name": "LocaleSelector", - "category": "forms", - "purpose": "Reusable locale selector component." - }, - { - "name": "LocalizedRouteLink", - "category": "actions", - "purpose": "Reusable localized route link component." - }, - { - "name": "LocationPicker", - "category": "forms", - "purpose": "Reusable location picker component." - }, - { - "name": "LogTable", - "category": "data", - "purpose": "Reusable log table component." - }, - { - "name": "Logo", - "category": "content", - "purpose": "Reusable logo component." - }, - { - "name": "LogoUpload", - "category": "content", - "purpose": "Reusable logo upload component." - }, - { - "name": "LogoutDialog", - "category": "overlays", - "purpose": "Reusable logout dialog component." - }, - { - "name": "LongitudeInput", - "category": "forms", - "purpose": "Reusable longitude input component." - }, - { - "name": "MaintenanceAlert", - "category": "feedback", - "purpose": "Reusable maintenance alert component." - }, - { - "name": "MaintenanceBanner", - "category": "feedback", - "purpose": "Reusable maintenance banner component." - }, - { - "name": "MaintenanceCard", - "category": "content", - "purpose": "Reusable maintenance card component." - }, - { - "name": "MaintenancePage", - "category": "content", - "purpose": "Reusable maintenance page component." - }, - { - "name": "MaintenanceState", - "category": "feedback", - "purpose": "Reusable maintenance state component." - }, - { - "name": "MaintenanceWindowPicker", - "category": "forms", - "purpose": "Reusable maintenance window picker component." - }, - { - "name": "MapPicker", - "category": "forms", - "purpose": "Reusable map picker component." - }, - { - "name": "MarkdownEditor", - "category": "forms", - "purpose": "Reusable markdown editor component." - }, - { - "name": "MarketingPageShell", - "category": "layout", - "purpose": "Reusable marketing page shell component." - }, - { - "name": "MarketingSectionHeader", - "category": "layout", - "purpose": "Reusable marketing section header component." - }, - { - "name": "MaskedSecretField", - "category": "forms", - "purpose": "Reusable masked secret field component." - }, - { - "name": "MegaMenu", - "category": "overlays", - "purpose": "Reusable mega menu component." - }, - { - "name": "MemberList", - "category": "data", - "purpose": "Reusable member list component." - }, - { - "name": "MentionInput", - "category": "forms", - "purpose": "Reusable mention input component." - }, - { - "name": "MessageCharacterCounter", - "category": "feedback", - "purpose": "Reusable message character counter component." - }, - { - "name": "MessageComposer", - "category": "content", - "purpose": "Reusable message composer component." - }, - { - "name": "MessageComposerPreview", - "category": "content", - "purpose": "Reusable message composer preview component." - }, - { - "name": "MessageLimitInput", - "category": "forms", - "purpose": "Reusable message limit input component." - }, - { - "name": "MessagePreview", - "category": "content", - "purpose": "Reusable message preview component." - }, - { - "name": "MessageVolumeSlider", - "category": "content", - "purpose": "Reusable message volume slider component." - }, - { - "name": "Metric", - "category": "visualization", - "purpose": "Reusable metric component." - }, - { - "name": "MetricCard", - "category": "content", - "purpose": "Reusable metric card component." - }, - { - "name": "MetricGrid", - "category": "data", - "purpose": "Reusable metric grid component." - }, - { - "name": "MetricText", - "category": "content", - "purpose": "Reusable metric text component." - }, - { - "name": "MinutePicker", - "category": "forms", - "purpose": "Reusable minute picker component." - }, - { - "name": "MissionSection", - "category": "layout", - "purpose": "Reusable mission section component." - }, - { - "name": "MobileDeviceFrame", - "category": "layout", - "purpose": "Reusable mobile device frame component." - }, - { - "name": "MobileInput", - "category": "forms", - "purpose": "Reusable mobile input component." - }, - { - "name": "MobileMenuButton", - "category": "actions", - "purpose": "Reusable mobile menu button component." - }, - { - "name": "MobileNavigation", - "category": "layout", - "purpose": "Reusable mobile navigation component." - }, - { - "name": "MobileTableCard", - "category": "content", - "purpose": "Reusable mobile table card component." - }, - { - "name": "MonthPicker", - "category": "forms", - "purpose": "Reusable month picker component." - }, - { - "name": "MonthYearPicker", - "category": "forms", - "purpose": "Reusable month year picker component." - }, - { - "name": "MonthlyVolumeSelector", - "category": "forms", - "purpose": "Reusable monthly volume selector component." - }, - { - "name": "MultiFileUpload", - "category": "content", - "purpose": "Reusable multi file upload component." - }, - { - "name": "MultipleEmailInput", - "category": "forms", - "purpose": "Reusable multiple email input component." - }, - { - "name": "MutedText", - "category": "content", - "purpose": "Reusable muted text component." - }, - { - "name": "NameInput", - "category": "forms", - "purpose": "Reusable name input component." - }, - { - "name": "Navigation", - "category": "layout", - "purpose": "Reusable navigation component." - }, - { - "name": "NavigationItem", - "category": "content", - "purpose": "Reusable navigation item component." - }, - { - "name": "NavigationMegaMenu", - "category": "overlays", - "purpose": "Reusable navigation mega menu component." - }, - { - "name": "NewBadge", - "category": "feedback", - "purpose": "Reusable new badge component." - }, - { - "name": "NewPasswordInput", - "category": "forms", - "purpose": "Reusable new password input component." - }, - { - "name": "NewsletterCTA", - "category": "actions", - "purpose": "Reusable newsletter c t a component." - }, - { - "name": "NewsletterForm", - "category": "content", - "purpose": "Reusable newsletter form component." - }, - { - "name": "NoResultsState", - "category": "feedback", - "purpose": "Reusable no results state component." - }, - { - "name": "NotFoundPage", - "category": "content", - "purpose": "Reusable not found page component." - }, - { - "name": "NotFoundState", - "category": "feedback", - "purpose": "Reusable not found state component." - }, - { - "name": "NotificationCard", - "category": "content", - "purpose": "Reusable notification card component." - }, - { - "name": "NotificationList", - "category": "data", - "purpose": "Reusable notification list component." - }, - { - "name": "NumberInput", - "category": "forms", - "purpose": "Reusable number input component." - }, - { - "name": "OfficeCard", - "category": "content", - "purpose": "Reusable office card component." - }, - { - "name": "OfflinePage", - "category": "content", - "purpose": "Reusable offline page component." - }, - { - "name": "OfflineState", - "category": "feedback", - "purpose": "Reusable offline state component." - }, - { - "name": "OnboardingProgress", - "category": "visualization", - "purpose": "Reusable onboarding progress component." - }, - { - "name": "OneTimeSecretDisplay", - "category": "content", - "purpose": "Reusable one time secret display component." - }, - { - "name": "OnlineIndicator", - "category": "feedback", - "purpose": "Reusable online indicator component." - }, - { - "name": "OpacitySlider", - "category": "content", - "purpose": "Reusable opacity slider component." - }, - { - "name": "OpenAPICTA", - "category": "actions", - "purpose": "Reusable open a p i c t a component." - }, - { - "name": "OptionalIndicator", - "category": "feedback", - "purpose": "Reusable optional indicator component." - }, - { - "name": "OrganizationSelector", - "category": "forms", - "purpose": "Reusable organization selector component." - }, - { - "name": "OtpInput", - "category": "forms", - "purpose": "Reusable otp input component." - }, - { - "name": "OtpVerificationForm", - "category": "content", - "purpose": "Reusable otp verification form component." - }, - { - "name": "OutlinedCard", - "category": "content", - "purpose": "Reusable outlined card component." - }, - { - "name": "PageAlert", - "category": "feedback", - "purpose": "Reusable page alert component." - }, - { - "name": "PageSkeleton", - "category": "feedback", - "purpose": "Reusable page skeleton component." - }, - { - "name": "Panel", - "category": "layout", - "purpose": "Reusable panel component." - }, - { - "name": "PartnerApplicationForm", - "category": "content", - "purpose": "Reusable partner application form component." - }, - { - "name": "PartnerLogoGrid", - "category": "data", - "purpose": "Reusable partner logo grid component." - }, - { - "name": "PartnerProgramCard", - "category": "content", - "purpose": "Reusable partner program card component." - }, - { - "name": "PasskeyButton", - "category": "actions", - "purpose": "Reusable passkey button component." - }, - { - "name": "PasswordInput", - "category": "forms", - "purpose": "Reusable password input component." - }, - { - "name": "PasswordRequirementList", - "category": "data", - "purpose": "Reusable password requirement list component." - }, - { - "name": "PasswordStrengthMeter", - "category": "visualization", - "purpose": "Reusable password strength meter component." - }, - { - "name": "PasswordVisibilityToggle", - "category": "forms", - "purpose": "Reusable password visibility toggle component." - }, - { - "name": "PathInput", - "category": "forms", - "purpose": "Reusable path input component." - }, - { - "name": "PaymentMethodCard", - "category": "content", - "purpose": "Reusable payment method card component." - }, - { - "name": "PdfPreview", - "category": "content", - "purpose": "Reusable pdf preview component." - }, - { - "name": "PercentageInput", - "category": "forms", - "purpose": "Reusable percentage input component." - }, - { - "name": "PermissionSelector", - "category": "forms", - "purpose": "Reusable permission selector component." - }, - { - "name": "PhoneInput", - "category": "forms", - "purpose": "Reusable phone input component." - }, - { - "name": "PieChart", - "category": "visualization", - "purpose": "Reusable pie chart component." - }, - { - "name": "PinInput", - "category": "forms", - "purpose": "Reusable pin input component." - }, - { - "name": "PlainTextEditor", - "category": "forms", - "purpose": "Reusable plain text editor component." - }, - { - "name": "PlanCTA", - "category": "actions", - "purpose": "Reusable plan c t a component." - }, - { - "name": "PlanFeatureList", - "category": "data", - "purpose": "Reusable plan feature list component." - }, - { - "name": "PlanLimitList", - "category": "data", - "purpose": "Reusable plan limit list component." - }, - { - "name": "PlanSelector", - "category": "forms", - "purpose": "Reusable plan selector component." - }, - { - "name": "PlatformPillarCard", - "category": "content", - "purpose": "Reusable platform pillar card component." - }, - { - "name": "PolicyVersionTable", - "category": "data", - "purpose": "Reusable policy version table component." - }, - { - "name": "Popover", - "category": "overlays", - "purpose": "Reusable popover component." - }, - { - "name": "PortInput", - "category": "forms", - "purpose": "Reusable port input component." - }, - { - "name": "PortNumberInput", - "category": "forms", - "purpose": "Reusable port number input component." - }, - { - "name": "PositiveNumberInput", - "category": "forms", - "purpose": "Reusable positive number input component." - }, - { - "name": "PostalCodeInput", - "category": "forms", - "purpose": "Reusable postal code input component." - }, - { - "name": "PostmanCTA", - "category": "actions", - "purpose": "Reusable postman c t a component." - }, - { - "name": "PresetDateRangePicker", - "category": "forms", - "purpose": "Reusable preset date range picker component." - }, - { - "name": "PressReleaseCard", - "category": "content", - "purpose": "Reusable press release card component." - }, - { - "name": "PreviewBadge", - "category": "feedback", - "purpose": "Reusable preview badge component." - }, - { - "name": "PreviousNextNavigation", - "category": "layout", - "purpose": "Reusable previous next navigation component." - }, - { - "name": "PriceInput", - "category": "forms", - "purpose": "Reusable price input component." - }, - { - "name": "PriceRangeSlider", - "category": "content", - "purpose": "Reusable price range slider component." - }, - { - "name": "PriceText", - "category": "content", - "purpose": "Reusable price text component." - }, - { - "name": "PricingCard", - "category": "content", - "purpose": "Reusable pricing card component." - }, - { - "name": "PricingComparisonTable", - "category": "data", - "purpose": "Reusable pricing comparison table component." - }, - { - "name": "PricingContactForm", - "category": "content", - "purpose": "Reusable pricing contact form component." - }, - { - "name": "PricingFeatureGroup", - "category": "forms", - "purpose": "Reusable pricing feature group component." - }, - { - "name": "PricingGrid", - "category": "data", - "purpose": "Reusable pricing grid component." - }, - { - "name": "PricingHero", - "category": "layout", - "purpose": "Reusable pricing hero component." - }, - { - "name": "PricingPlanCard", - "category": "content", - "purpose": "Reusable pricing plan card component." - }, - { - "name": "PricingTable", - "category": "data", - "purpose": "Reusable pricing table component." - }, - { - "name": "PricingToggle", - "category": "forms", - "purpose": "Reusable pricing toggle component." - }, - { - "name": "PrimaryButton", - "category": "actions", - "purpose": "Reusable primary button component." - }, - { - "name": "PrintAction", - "category": "actions", - "purpose": "Reusable print action component." - }, - { - "name": "PrintPolicyButton", - "category": "actions", - "purpose": "Reusable print policy button component." - }, - { - "name": "PrioritySelector", - "category": "forms", - "purpose": "Reusable priority selector component." - }, - { - "name": "PrivacyNotice", - "category": "feedback", - "purpose": "Reusable privacy notice component." - }, - { - "name": "ProductArchitectureDiagram", - "category": "visualization", - "purpose": "Reusable product architecture diagram component." - }, - { - "name": "ProductCTA", - "category": "actions", - "purpose": "Reusable product c t a component." - }, - { - "name": "ProductCard", - "category": "content", - "purpose": "Reusable product card component." - }, - { - "name": "ProductCategorySection", - "category": "layout", - "purpose": "Reusable product category section component." - }, - { - "name": "ProductFeatureList", - "category": "data", - "purpose": "Reusable product feature list component." - }, - { - "name": "ProductGrid", - "category": "data", - "purpose": "Reusable product grid component." - }, - { - "name": "ProductHero", - "category": "layout", - "purpose": "Reusable product hero component." - }, - { - "name": "ProductIcon", - "category": "content", - "purpose": "Reusable product icon component." - }, - { - "name": "ProductIntegrationList", - "category": "data", - "purpose": "Reusable product integration list component." - }, - { - "name": "ProductList", - "category": "data", - "purpose": "Reusable product list component." - }, - { - "name": "ProductLogo", - "category": "content", - "purpose": "Reusable product logo component." - }, - { - "name": "ProductMiniCard", - "category": "content", - "purpose": "Reusable product mini card component." - }, - { - "name": "ProductNavigationCard", - "category": "content", - "purpose": "Reusable product navigation card component." - }, - { - "name": "ProductPageShell", - "category": "layout", - "purpose": "Reusable product page shell component." - }, - { - "name": "ProductSelector", - "category": "forms", - "purpose": "Reusable product selector component." - }, - { - "name": "ProductStatusBadge", - "category": "feedback", - "purpose": "Reusable product status badge component." - }, - { - "name": "ProductUseCaseList", - "category": "data", - "purpose": "Reusable product use case list component." - }, - { - "name": "ProductsMegaMenu", - "category": "overlays", - "purpose": "Reusable products mega menu component." - }, - { - "name": "ProgressChart", - "category": "visualization", - "purpose": "Reusable progress chart component." - }, - { - "name": "ProgressRing", - "category": "visualization", - "purpose": "Reusable progress ring component." - }, - { - "name": "ProgressSlider", - "category": "content", - "purpose": "Reusable progress slider component." - }, - { - "name": "ProjectCard", - "category": "content", - "purpose": "Reusable project card component." - }, - { - "name": "ProjectSelector", - "category": "forms", - "purpose": "Reusable project selector component." - }, - { - "name": "ProjectSwitcher", - "category": "content", - "purpose": "Reusable project switcher component." - }, - { - "name": "PromoCodeInput", - "category": "forms", - "purpose": "Reusable promo code input component." - }, - { - "name": "PromptDialog", - "category": "overlays", - "purpose": "Reusable prompt dialog component." - }, - { - "name": "ProviderSelector", - "category": "forms", - "purpose": "Reusable provider selector component." - }, - { - "name": "PublicHeader", - "category": "layout", - "purpose": "Reusable public header component." - }, - { - "name": "PublicHeaderLogo", - "category": "content", - "purpose": "Reusable public header logo component." - }, - { - "name": "PublicPageShell", - "category": "layout", - "purpose": "Reusable public page shell component." - }, - { - "name": "PublishDateTimePicker", - "category": "forms", - "purpose": "Reusable publish date time picker component." - }, - { - "name": "PushComposer", - "category": "content", - "purpose": "Reusable push composer component." - }, - { - "name": "PushNotificationEditor", - "category": "forms", - "purpose": "Reusable push notification editor component." - }, - { - "name": "QrCode", - "category": "content", - "purpose": "Reusable qr code component." - }, - { - "name": "QuantityInput", - "category": "forms", - "purpose": "Reusable quantity input component." - }, - { - "name": "QuantityStepper", - "category": "content", - "purpose": "Reusable quantity stepper component." - }, - { - "name": "QuietHoursPicker", - "category": "forms", - "purpose": "Reusable quiet hours picker component." - }, - { - "name": "QuoteText", - "category": "content", - "purpose": "Reusable quote text component." - }, - { - "name": "RadioGroup", - "category": "forms", - "purpose": "Reusable radio group component." - }, - { - "name": "RangeInput", - "category": "forms", - "purpose": "Reusable range input component." + "purpose": "Theme-aware, responsive select component." }, { "name": "RangeSlider", - "category": "content", - "purpose": "Reusable range slider component." - }, - { - "name": "RateLimitInput", "category": "forms", - "purpose": "Reusable rate limit input component." + "purpose": "Theme-aware, responsive range slider component." }, { - "name": "RateLimitPage", - "category": "content", - "purpose": "Reusable rate limit page component." - }, - { - "name": "RateLimitedState", - "category": "feedback", - "purpose": "Reusable rate limited state component." - }, - { - "name": "RateTable", - "category": "data", - "purpose": "Reusable rate table component." - }, - { - "name": "RatingSlider", - "category": "content", - "purpose": "Reusable rating slider component." - }, - { - "name": "RecipientSelector", + "name": "ColorPicker", "category": "forms", - "purpose": "Reusable recipient selector component." - }, - { - "name": "RecoveryCodeForm", - "category": "content", - "purpose": "Reusable recovery code form component." - }, - { - "name": "RecoveryCodeInput", - "category": "forms", - "purpose": "Reusable recovery code input component." - }, - { - "name": "RecurrenceRuleBuilder", - "category": "content", - "purpose": "Reusable recurrence rule builder component." - }, - { - "name": "RecurringSchedulePicker", - "category": "forms", - "purpose": "Reusable recurring schedule picker component." - }, - { - "name": "RedirectUriInput", - "category": "forms", - "purpose": "Reusable redirect uri input component." - }, - { - "name": "ReferenceInput", - "category": "forms", - "purpose": "Reusable reference input component." - }, - { - "name": "RegexInput", - "category": "forms", - "purpose": "Reusable regex input component." - }, - { - "name": "RegionAvailabilityTable", - "category": "data", - "purpose": "Reusable region availability table component." - }, - { - "name": "RegionSelector", - "category": "forms", - "purpose": "Reusable region selector component." - }, - { - "name": "RegionUnavailableAlert", - "category": "feedback", - "purpose": "Reusable region unavailable alert component." - }, - { - "name": "RegionUnavailableState", - "category": "feedback", - "purpose": "Reusable region unavailable state component." - }, - { - "name": "RegionalPrivacyBanner", - "category": "feedback", - "purpose": "Reusable regional privacy banner component." - }, - { - "name": "RejectOptionalCookiesButton", - "category": "actions", - "purpose": "Reusable reject optional cookies button component." - }, - { - "name": "ReopenCookieSettingsButton", - "category": "actions", - "purpose": "Reusable reopen cookie settings button component." - }, - { - "name": "ReportCard", - "category": "content", - "purpose": "Reusable report card component." - }, - { - "name": "RequestResponseViewer", - "category": "content", - "purpose": "Reusable request response viewer component." - }, - { - "name": "RequestViewer", - "category": "content", - "purpose": "Reusable request viewer component." - }, - { - "name": "RequiredIndicator", - "category": "feedback", - "purpose": "Reusable required indicator component." - }, - { - "name": "ResetPasswordForm", - "category": "content", - "purpose": "Reusable reset password form component." - }, - { - "name": "ResizablePanel", - "category": "layout", - "purpose": "Reusable resizable panel component." - }, - { - "name": "ResourceCard", - "category": "content", - "purpose": "Reusable resource card component." - }, - { - "name": "ResourceDownloadCard", - "category": "content", - "purpose": "Reusable resource download card component." - }, - { - "name": "ResourcePageShell", - "category": "layout", - "purpose": "Reusable resource page shell component." - }, - { - "name": "ResourceSearch", - "category": "content", - "purpose": "Reusable resource search component." - }, - { - "name": "ResourceTypeBadge", - "category": "feedback", - "purpose": "Reusable resource type badge component." - }, - { - "name": "ResourcesMegaMenu", - "category": "overlays", - "purpose": "Reusable resources mega menu component." - }, - { - "name": "ResponseViewer", - "category": "content", - "purpose": "Reusable response viewer component." - }, - { - "name": "ResponsibleDisclosureCTA", - "category": "actions", - "purpose": "Reusable responsible disclosure c t a component." - }, - { - "name": "ResponsiveTable", - "category": "data", - "purpose": "Reusable responsive table component." - }, - { - "name": "ResultsSection", - "category": "layout", - "purpose": "Reusable results section component." - }, - { - "name": "RetentionTable", - "category": "data", - "purpose": "Reusable retention table component." - }, - { - "name": "RetryCountInput", - "category": "forms", - "purpose": "Reusable retry count input component." - }, - { - "name": "RevenueChart", - "category": "visualization", - "purpose": "Reusable revenue chart component." - }, - { - "name": "RgbColorInput", - "category": "forms", - "purpose": "Reusable rgb color input component." - }, - { - "name": "RichTextEditor", - "category": "forms", - "purpose": "Reusable rich text editor component." - }, - { - "name": "RichTextInput", - "category": "forms", - "purpose": "Reusable rich text input component." - }, - { - "name": "RoleSelector", - "category": "forms", - "purpose": "Reusable role selector component." - }, - { - "name": "RollingDateRangePicker", - "category": "forms", - "purpose": "Reusable rolling date range picker component." - }, - { - "name": "SDKCard", - "category": "content", - "purpose": "Reusable s d k card component." - }, - { - "name": "SDKLanguageTabs", - "category": "content", - "purpose": "Reusable s d k language tabs component." - }, - { - "name": "SaveCookiePreferencesButton", - "category": "actions", - "purpose": "Reusable save cookie preferences button component." - }, - { - "name": "SavedFilterSelector", - "category": "forms", - "purpose": "Reusable saved filter selector component." - }, - { - "name": "ScheduleMessagePicker", - "category": "forms", - "purpose": "Reusable schedule message picker component." - }, - { - "name": "SchedulePicker", - "category": "forms", - "purpose": "Reusable schedule picker component." - }, - { - "name": "ScheduledDateTimePicker", - "category": "forms", - "purpose": "Reusable scheduled date time picker component." - }, - { - "name": "ScreenshotFrame", - "category": "layout", - "purpose": "Reusable screenshot frame component." - }, - { - "name": "SdkLanguageSelector", - "category": "forms", - "purpose": "Reusable sdk language selector component." - }, - { - "name": "SearchButton", - "category": "actions", - "purpose": "Reusable search button component." - }, - { - "name": "SearchCategoryTabs", - "category": "content", - "purpose": "Reusable search category tabs component." - }, - { - "name": "SearchDialog", - "category": "overlays", - "purpose": "Reusable search dialog component." - }, - { - "name": "SearchEmptyState", - "category": "feedback", - "purpose": "Reusable search empty state component." - }, - { - "name": "SearchInput", - "category": "forms", - "purpose": "Reusable search input component." - }, - { - "name": "SearchLoadingState", - "category": "feedback", - "purpose": "Reusable search loading state component." - }, - { - "name": "SearchResultItem", - "category": "content", - "purpose": "Reusable search result item component." - }, - { - "name": "SecondPicker", - "category": "forms", - "purpose": "Reusable second picker component." - }, - { - "name": "SecondaryButton", - "category": "actions", - "purpose": "Reusable secondary button component." - }, - { - "name": "SecretDisplay", - "category": "content", - "purpose": "Reusable secret display component." - }, - { - "name": "SecretInput", - "category": "forms", - "purpose": "Reusable secret input component." - }, - { - "name": "SecretRevealDialog", - "category": "overlays", - "purpose": "Reusable secret reveal dialog component." - }, - { - "name": "Section", - "category": "layout", - "purpose": "Reusable section component." - }, - { - "name": "SectionActions", - "category": "actions", - "purpose": "Reusable section actions component." - }, - { - "name": "SectionHeader", - "category": "layout", - "purpose": "Reusable section header component." - }, - { - "name": "SecurityAlert", - "category": "feedback", - "purpose": "Reusable security alert component." - }, - { - "name": "SecurityContactCard", - "category": "content", - "purpose": "Reusable security contact card component." - }, - { - "name": "SecurityFeatureCard", - "category": "content", - "purpose": "Reusable security feature card component." - }, - { - "name": "SecurityHero", - "category": "layout", - "purpose": "Reusable security hero component." - }, - { - "name": "SecurityPillarGrid", - "category": "data", - "purpose": "Reusable security pillar grid component." - }, - { - "name": "SecurityPracticeList", - "category": "data", - "purpose": "Reusable security practice list component." - }, - { - "name": "SecurityReportForm", - "category": "content", - "purpose": "Reusable security report form component." - }, - { - "name": "SenderIdInput", - "category": "forms", - "purpose": "Reusable sender id input component." - }, - { - "name": "ServerErrorPage", - "category": "content", - "purpose": "Reusable server error page component." - }, - { - "name": "ServiceLevelTable", - "category": "data", - "purpose": "Reusable service level table component." - }, - { - "name": "ServiceStatusBadge", - "category": "feedback", - "purpose": "Reusable service status badge component." - }, - { - "name": "ServiceStatusList", - "category": "data", - "purpose": "Reusable service status list component." - }, - { - "name": "ServiceStatusRow", - "category": "data", - "purpose": "Reusable service status row component." - }, - { - "name": "SessionCard", - "category": "content", - "purpose": "Reusable session card component." - }, - { - "name": "SessionExpiredDialog", - "category": "overlays", - "purpose": "Reusable session expired dialog component." - }, - { - "name": "SetupChecklist", - "category": "content", - "purpose": "Reusable setup checklist component." - }, - { - "name": "SeveritySelector", - "category": "forms", - "purpose": "Reusable severity selector component." - }, - { - "name": "ShadowPicker", - "category": "forms", - "purpose": "Reusable shadow picker component." - }, - { - "name": "ShareAction", - "category": "actions", - "purpose": "Reusable share action component." - }, - { - "name": "ShareButton", - "category": "actions", - "purpose": "Reusable share button component." - }, - { - "name": "SidePanel", - "category": "layout", - "purpose": "Reusable side panel component." - }, - { - "name": "SidebarLayout", - "category": "layout", - "purpose": "Reusable sidebar layout component." - }, - { - "name": "SignInForm", - "category": "content", - "purpose": "Reusable sign in form component." - }, - { - "name": "SignInLink", - "category": "actions", - "purpose": "Reusable sign in link component." - }, - { - "name": "SignUpForm", - "category": "content", - "purpose": "Reusable sign up form component." - }, - { - "name": "SiteSearch", - "category": "content", - "purpose": "Reusable site search component." - }, - { - "name": "Skeleton", - "category": "feedback", - "purpose": "Reusable skeleton component." - }, - { - "name": "SkipLink", - "category": "actions", - "purpose": "Reusable skip link component." - }, - { - "name": "SlaTable", - "category": "data", - "purpose": "Reusable sla table component." - }, - { - "name": "Slider", - "category": "content", - "purpose": "Reusable slider component." - }, - { - "name": "SlugInput", - "category": "forms", - "purpose": "Reusable slug input component." - }, - { - "name": "SmallText", - "category": "content", - "purpose": "Reusable small text component." - }, - { - "name": "SmartRouteDiagram", - "category": "visualization", - "purpose": "Reusable smart route diagram component." - }, - { - "name": "SmsComposer", - "category": "content", - "purpose": "Reusable sms composer component." - }, - { - "name": "SmsMessageEditor", - "category": "forms", - "purpose": "Reusable sms message editor component." - }, - { - "name": "SmsSegmentCounter", - "category": "feedback", - "purpose": "Reusable sms segment counter component." - }, - { - "name": "SolutionHero", - "category": "layout", - "purpose": "Reusable solution hero component." - }, - { - "name": "SolutionPageShell", - "category": "layout", - "purpose": "Reusable solution page shell component." - }, - { - "name": "SolutionSection", - "category": "layout", - "purpose": "Reusable solution section component." - }, - { - "name": "SolutionsMegaMenu", - "category": "overlays", - "purpose": "Reusable solutions mega menu component." - }, - { - "name": "SortableTable", - "category": "data", - "purpose": "Reusable sortable table component." - }, - { - "name": "SplitButton", - "category": "actions", - "purpose": "Reusable split button component." - }, - { - "name": "SplitCTA", - "category": "actions", - "purpose": "Reusable split c t a component." - }, - { - "name": "SplitHero", - "category": "layout", - "purpose": "Reusable split hero component." - }, - { - "name": "SplitLayout", - "category": "layout", - "purpose": "Reusable split layout component." - }, - { - "name": "SplitSectionHeader", - "category": "layout", - "purpose": "Reusable split section header component." - }, - { - "name": "StartFreeButton", - "category": "actions", - "purpose": "Reusable start free button component." - }, - { - "name": "StatCard", - "category": "content", - "purpose": "Reusable stat card component." - }, - { - "name": "StateSelector", - "category": "forms", - "purpose": "Reusable state selector component." - }, - { - "name": "StatusBadge", - "category": "feedback", - "purpose": "Reusable status badge component." - }, - { - "name": "StatusPageShell", - "category": "layout", - "purpose": "Reusable status page shell component." - }, - { - "name": "StatusSelector", - "category": "forms", - "purpose": "Reusable status selector component." - }, - { - "name": "StatusSubscribeForm", - "category": "content", - "purpose": "Reusable status subscribe form component." - }, - { - "name": "StatusTable", - "category": "data", - "purpose": "Reusable status table component." - }, - { - "name": "StepNavigation", - "category": "layout", - "purpose": "Reusable step navigation component." - }, - { - "name": "StepUpAuthenticationDialog", - "category": "overlays", - "purpose": "Reusable step up authentication dialog component." - }, - { - "name": "Stepper", - "category": "content", - "purpose": "Reusable stepper component." - }, - { - "name": "StepperInput", - "category": "forms", - "purpose": "Reusable stepper input component." - }, - { - "name": "StickerPicker", - "category": "forms", - "purpose": "Reusable sticker picker component." - }, - { - "name": "StickyLayout", - "category": "layout", - "purpose": "Reusable sticky layout component." - }, - { - "name": "StreetAddressInput", - "category": "forms", - "purpose": "Reusable street address input component." - }, - { - "name": "SubdomainInput", - "category": "forms", - "purpose": "Reusable subdomain input component." - }, - { - "name": "SubjectInput", - "category": "forms", - "purpose": "Reusable subject input component." - }, - { - "name": "SubprocessorTable", - "category": "data", - "purpose": "Reusable subprocessor table component." - }, - { - "name": "SuccessCard", - "category": "content", - "purpose": "Reusable success card component." - }, - { - "name": "SuccessState", - "category": "feedback", - "purpose": "Reusable success state component." - }, - { - "name": "SupportRequestForm", - "category": "content", - "purpose": "Reusable support request form component." - }, - { - "name": "Table", - "category": "data", - "purpose": "Reusable table component." - }, - { - "name": "TableHeader", - "category": "layout", - "purpose": "Reusable table header component." - }, - { - "name": "TableRow", - "category": "data", - "purpose": "Reusable table row component." - }, - { - "name": "TableSkeleton", - "category": "feedback", - "purpose": "Reusable table skeleton component." - }, - { - "name": "Tabs", - "category": "content", - "purpose": "Reusable tabs component." - }, - { - "name": "TagInput", - "category": "forms", - "purpose": "Reusable tag input component." - }, - { - "name": "TaxNotice", - "category": "feedback", - "purpose": "Reusable tax notice component." - }, - { - "name": "TaxRateInput", - "category": "forms", - "purpose": "Reusable tax rate input component." - }, - { - "name": "TeamMemberCard", - "category": "content", - "purpose": "Reusable team member card component." - }, - { - "name": "TeamSizeSelector", - "category": "forms", - "purpose": "Reusable team size selector component." - }, - { - "name": "TemplateCard", - "category": "content", - "purpose": "Reusable template card component." - }, - { - "name": "TemplateSelector", - "category": "forms", - "purpose": "Reusable template selector component." - }, - { - "name": "TemplateVariableInput", - "category": "forms", - "purpose": "Reusable template variable input component." - }, - { - "name": "TenantIsolationDiagram", - "category": "visualization", - "purpose": "Reusable tenant isolation diagram component." - }, - { - "name": "TerminalBlock", - "category": "content", - "purpose": "Reusable terminal block component." - }, - { - "name": "TertiaryButton", - "category": "actions", - "purpose": "Reusable tertiary button component." - }, - { - "name": "TestMessageDialog", - "category": "overlays", - "purpose": "Reusable test message dialog component." - }, - { - "name": "TestimonialCard", - "category": "content", - "purpose": "Reusable testimonial card component." - }, - { - "name": "TestimonialCarousel", - "category": "content", - "purpose": "Reusable testimonial carousel component." - }, - { - "name": "TextInput", - "category": "forms", - "purpose": "Reusable text input component." - }, - { - "name": "TextLink", - "category": "actions", - "purpose": "Reusable text link component." - }, - { - "name": "TextSkeleton", - "category": "feedback", - "purpose": "Reusable text skeleton component." - }, - { - "name": "ThemeColorPicker", - "category": "forms", - "purpose": "Reusable theme color picker component." - }, - { - "name": "ThemeSwitcher", - "category": "content", - "purpose": "Reusable theme switcher component." - }, - { - "name": "TimeInput", - "category": "forms", - "purpose": "Reusable time input component." + "purpose": "Theme-aware, responsive color picker component." }, { "name": "TimePicker", "category": "forms", - "purpose": "Reusable time picker component." + "purpose": "Theme-aware, responsive time picker component." }, { - "name": "TimeRangePicker", - "category": "forms", - "purpose": "Reusable time range picker component." + "name": "AdvancedSelect", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive advanced select component.", + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"] }, { - "name": "Timeline", - "category": "visualization", - "purpose": "Reusable timeline component." + "name": "ComboBox", + "category": "advanced-forms", + "purpose": "Editable autocomplete combobox with local and remote suggestions.", + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"] }, { - "name": "TimelineChart", - "category": "visualization", - "purpose": "Reusable timeline chart component." + "name": "SearchBox", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive search box component." }, { - "name": "TimelineItem", - "category": "content", - "purpose": "Reusable timeline item component." + "name": "InputNumber", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive input number component." }, { - "name": "TimeoutInput", - "category": "forms", - "purpose": "Reusable timeout input component." + "name": "StrongPassword", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive strong password component." }, { - "name": "TimezoneAwareTimePicker", - "category": "forms", - "purpose": "Reusable timezone aware time picker component." + "name": "TogglePassword", + "category": "advanced-forms", + "purpose": "Accessible password field with optional show and hide controls.", + "events": ["input", "change", "toggle"] }, { - "name": "TimezoneSelector", - "category": "forms", - "purpose": "Reusable timezone selector component." + "name": "ToggleCount", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive toggle count component." }, { - "name": "ToastAction", - "category": "actions", - "purpose": "Reusable toast action component." + "name": "CopyMarkup", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive copy markup component." }, { - "name": "ToastIcon", - "category": "content", - "purpose": "Reusable toast icon component." + "name": "PinInput", + "category": "advanced-forms", + "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.", + "events": ["input", "change", "complete", "paste", "clear", "error"] }, { - "name": "ToastProgress", - "category": "visualization", - "purpose": "Reusable toast progress component." + "name": "Dropdown", + "category": "overlays", + "purpose": "Theme-aware, responsive dropdown component." }, { - "name": "Toggle", - "category": "forms", - "purpose": "Reusable toggle component." + "name": "ContextMenu", + "category": "overlays", + "purpose": "Theme-aware, responsive context menu component." }, { - "name": "ToggleGroup", - "category": "forms", - "purpose": "Reusable toggle group component." + "name": "Modal", + "category": "overlays", + "purpose": "Theme-aware, responsive modal component." }, { - "name": "TokenInput", - "category": "forms", - "purpose": "Reusable token input component." + "name": "Drawer", + "category": "overlays", + "purpose": "Theme-aware, responsive drawer component." + }, + { + "name": "Popover", + "category": "overlays", + "purpose": "Theme-aware, responsive popover component." }, { "name": "Tooltip", - "category": "content", - "purpose": "Reusable tooltip component." - }, - { - "name": "TotpVerificationForm", - "category": "content", - "purpose": "Reusable totp verification form component." - }, - { - "name": "TranslatedText", - "category": "content", - "purpose": "Reusable translated text component." - }, - { - "name": "TreeTable", - "category": "data", - "purpose": "Reusable tree table component." - }, - { - "name": "TrendIndicator", - "category": "feedback", - "purpose": "Reusable trend indicator component." - }, - { - "name": "TruncatedText", - "category": "content", - "purpose": "Reusable truncated text component." - }, - { - "name": "TrustBadgeList", - "category": "data", - "purpose": "Reusable trust badge list component." - }, - { - "name": "UnavailableRegionState", - "category": "feedback", - "purpose": "Reusable unavailable region state component." - }, - { - "name": "UnifiedTimelinePreview", - "category": "content", - "purpose": "Reusable unified timeline preview component." - }, - { - "name": "UnsavedChangesDialog", "category": "overlays", - "purpose": "Reusable unsaved changes dialog component." + "purpose": "Theme-aware, responsive tooltip component." }, { - "name": "UploadItem", - "category": "content", - "purpose": "Reusable upload item component." + "name": "Table", + "category": "tables", + "purpose": "Theme-aware, responsive table component." }, { - "name": "UploadPreview", - "category": "content", - "purpose": "Reusable upload preview component." + "name": "AdvancedRangeSlider", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced range slider component." }, { - "name": "UploadProgress", - "category": "visualization", - "purpose": "Reusable upload progress component." + "name": "AdvancedDatePicker", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced date picker component." }, { - "name": "UptimeChart", - "category": "visualization", - "purpose": "Reusable uptime chart component." + "name": "Chart", + "category": "integrations", + "purpose": "Theme-aware, responsive chart component." }, { - "name": "UptimeMetric", - "category": "visualization", - "purpose": "Reusable uptime metric component." + "name": "Clipboard", + "category": "integrations", + "purpose": "Theme-aware, responsive clipboard component." }, { - "name": "UrlInput", - "category": "forms", - "purpose": "Reusable url input component." + "name": "Confetti", + "category": "integrations", + "purpose": "Theme-aware, responsive confetti component." }, { - "name": "UsagePricingTable", - "category": "data", - "purpose": "Reusable usage pricing table component." + "name": "DataMap", + "category": "integrations", + "purpose": "Theme-aware, responsive data map component." }, { - "name": "UseCaseSelector", - "category": "forms", - "purpose": "Reusable use case selector component." + "name": "DataTable", + "category": "integrations", + "purpose": "Theme-aware, responsive data table component." }, { - "name": "UserCard", - "category": "content", - "purpose": "Reusable user card component." + "name": "DragAndDrop", + "category": "integrations", + "purpose": "Theme-aware, responsive drag and drop component." }, { - "name": "UsernameInput", - "category": "forms", - "purpose": "Reusable username input component." + "name": "FileUpload", + "category": "integrations", + "purpose": "Theme-aware, responsive file upload component." }, { - "name": "ValueCard", - "category": "content", - "purpose": "Reusable value card component." + "name": "Map", + "category": "integrations", + "purpose": "Theme-aware, responsive map component." }, { - "name": "ValuesGrid", - "category": "data", - "purpose": "Reusable values grid component." + "name": "ToastNotifications", + "category": "integrations", + "purpose": "Theme-aware, responsive toast notifications component." }, { - "name": "VerificationCodeInput", - "category": "forms", - "purpose": "Reusable verification code input component." - }, - { - "name": "VerifiedBadge", - "category": "feedback", - "purpose": "Reusable verified badge component." - }, - { - "name": "VersionSelector", - "category": "forms", - "purpose": "Reusable version selector component." - }, - { - "name": "VerticalTabs", - "category": "content", - "purpose": "Reusable vertical tabs component." - }, - { - "name": "VideoCard", - "category": "content", - "purpose": "Reusable video card component." - }, - { - "name": "VideoPreviewDialog", - "category": "overlays", - "purpose": "Reusable video preview dialog component." - }, - { - "name": "VideoUpload", - "category": "content", - "purpose": "Reusable video upload component." - }, - { - "name": "VirtualizedTable", - "category": "data", - "purpose": "Reusable virtualized table component." - }, - { - "name": "VisionSection", - "category": "layout", - "purpose": "Reusable vision section component." - }, - { - "name": "VoiceScriptComposer", - "category": "content", - "purpose": "Reusable voice script composer component." - }, - { - "name": "VoiceScriptEditor", - "category": "forms", - "purpose": "Reusable voice script editor component." - }, - { - "name": "VolumeInput", - "category": "forms", - "purpose": "Reusable volume input component." - }, - { - "name": "VolumeSlider", - "category": "content", - "purpose": "Reusable volume slider component." - }, - { - "name": "WarningCard", - "category": "content", - "purpose": "Reusable warning card component." - }, - { - "name": "WebhookEventCard", - "category": "content", - "purpose": "Reusable webhook event card component." - }, - { - "name": "WebhookFlowDiagram", - "category": "visualization", - "purpose": "Reusable webhook flow diagram component." - }, - { - "name": "WebhookPayloadViewer", - "category": "content", - "purpose": "Reusable webhook payload viewer component." - }, - { - "name": "WebhookUrlInput", - "category": "forms", - "purpose": "Reusable webhook url input component." - }, - { - "name": "WebinarCard", - "category": "content", - "purpose": "Reusable webinar card component." - }, - { - "name": "WebinarRegistrationForm", - "category": "content", - "purpose": "Reusable webinar registration form component." - }, - { - "name": "WhatsAppComposer", - "category": "content", - "purpose": "Reusable whats app composer component." - }, - { - "name": "WhatsAppNumberInput", - "category": "forms", - "purpose": "Reusable whats app number input component." - }, - { - "name": "WhatsAppTemplateEditor", - "category": "forms", - "purpose": "Reusable whats app template editor component." - }, - { - "name": "Wizard", - "category": "content", - "purpose": "Reusable wizard component." - }, - { - "name": "WizardHeader", - "category": "layout", - "purpose": "Reusable wizard header component." - }, - { - "name": "WizardNavigation", - "category": "layout", - "purpose": "Reusable wizard navigation component." - }, - { - "name": "WorkflowCanvasPreview", - "category": "content", - "purpose": "Reusable workflow canvas preview component." - }, - { - "name": "WorkflowProgress", - "category": "visualization", - "purpose": "Reusable workflow progress component." - }, - { - "name": "WorkspaceCard", - "category": "content", - "purpose": "Reusable workspace card component." - }, - { - "name": "WorkspaceSelector", - "category": "forms", - "purpose": "Reusable workspace selector component." - }, - { - "name": "WorkspaceSwitcher", - "category": "content", - "purpose": "Reusable workspace switcher component." - }, - { - "name": "YearPicker", - "category": "forms", - "purpose": "Reusable year picker component." - }, - { - "name": "ZoomSlider", - "category": "content", - "purpose": "Reusable zoom slider component." + "name": "WysiwygEditor", + "category": "integrations", + "purpose": "Theme-aware, responsive wysiwyg editor component." } ] } diff --git a/packages/ui/component-migrations.json b/packages/ui/component-migrations.json new file mode 100644 index 00000000..58fb01f2 --- /dev/null +++ b/packages/ui/component-migrations.json @@ -0,0 +1,5 @@ +{ + "generatedFrom": "full component catalog reset", + "removedCount": 0, + "replacements": {} +} diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json index df0ae73b..86bbad7c 100644 --- a/packages/ui/component-reference.json +++ b/packages/ui/component-reference.json @@ -1,39 +1,33 @@ { "generatedFrom": "packages/ui/components/*.wrn", - "count": 902, + "count": 85, "components": [ { - "name": "AcceptAllCookiesButton", - "mount": "AcceptAllCookiesButton", - "category": "actions", - "purpose": "Reusable accept all cookies button component.", + "name": "Accordion", + "mount": "Accordion", + "category": "base", + "purpose": "Theme-aware, responsive accordion component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"default\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "multiple", "type": "boolean", "required": false, "default": "false" @@ -47,543 +41,31 @@ ], "slots": ["default"], "events": [], - "source": "components/AcceptAllCookiesButton.wrn" - }, - { - "name": "AccessibleAccordion", - "mount": "AccessibleAccordion", - "category": "content", - "purpose": "Reusable accessible accordion component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleAccordion.wrn" - }, - { - "name": "AccessibleCarousel", - "mount": "AccessibleCarousel", - "category": "content", - "purpose": "Reusable accessible carousel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleCarousel.wrn" - }, - { - "name": "AccessibleChartSummary", - "mount": "AccessibleChartSummary", - "category": "content", - "purpose": "Reusable accessible chart summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleChartSummary.wrn" - }, - { - "name": "AccessibleDialog", - "mount": "AccessibleDialog", - "category": "overlays", - "purpose": "Reusable accessible dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleDialog.wrn" - }, - { - "name": "AccessibleErrorSummary", - "mount": "AccessibleErrorSummary", - "category": "content", - "purpose": "Reusable accessible error summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleErrorSummary.wrn" - }, - { - "name": "AccessibleIcon", - "mount": "AccessibleIcon", - "category": "content", - "purpose": "Reusable accessible icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleIcon.wrn" - }, - { - "name": "AccessibleMenu", - "mount": "AccessibleMenu", - "category": "overlays", - "purpose": "Reusable accessible menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleMenu.wrn" - }, - { - "name": "AccessibleTabs", - "mount": "AccessibleTabs", - "category": "content", - "purpose": "Reusable accessible tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleTabs.wrn" - }, - { - "name": "AccessibleTooltip", - "mount": "AccessibleTooltip", - "category": "content", - "purpose": "Reusable accessible tooltip component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccessibleTooltip.wrn" - }, - { - "name": "Accordion", - "mount": "Accordion", - "category": "content", - "purpose": "Reusable accordion component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Question\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": ["default"], - "events": ["click"], "source": "components/Accordion.wrn" }, { - "name": "AccountMenu", - "mount": "AccountMenu", - "category": "overlays", - "purpose": "Reusable account menu component.", + "name": "AdvancedDatePicker", + "mount": "AdvancedDatePicker", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced date picker component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Advanced Date Picker\"" }, { "name": "description", @@ -592,57 +74,10 @@ "default": "\"\"" }, { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", + "name": "items", "type": "string", "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AccountMenu.wrn" - }, - { - "name": "AccountStatusBanner", - "mount": "AccountStatusBanner", - "category": "feedback", - "purpose": "Reusable account status banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"AccountStatus\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -659,19 +94,31 @@ ], "slots": ["default"], "events": [], - "source": "components/AccountStatusBanner.wrn" + "source": "components/AdvancedDatePicker.wrn" }, { - "name": "ActionMenu", - "mount": "ActionMenu", - "category": "overlays", - "purpose": "Reusable action menu component.", + "name": "AdvancedRangeSlider", + "mount": "AdvancedRangeSlider", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced range slider component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Advanced Range Slider\"" }, { "name": "description", @@ -680,16 +127,16 @@ "default": "\"\"" }, { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", + "name": "items", "type": "string", "required": false, - "default": "\"Close\"" + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" }, { "name": "class", @@ -700,160 +147,31 @@ ], "slots": ["default"], "events": [], - "source": "components/ActionMenu.wrn" + "source": "components/AdvancedRangeSlider.wrn" }, { - "name": "ActiveFilterList", - "mount": "ActiveFilterList", - "category": "data", - "purpose": "Reusable active filter list component.", + "name": "AdvancedSelect", + "mount": "AdvancedSelect", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive advanced select component.", "props": [ { - "name": "title", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "description", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ActiveFilterList.wrn" - }, - { - "name": "ActivityList", - "mount": "ActivityList", - "category": "data", - "purpose": "Reusable activity list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ActivityList.wrn" - }, - { - "name": "AddOnCard", - "mount": "AddOnCard", - "category": "content", - "purpose": "Reusable add on card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AddOnCard.wrn" - }, - { - "name": "AddressInput", - "mount": "AddressInput", - "category": "forms", - "purpose": "Reusable address input component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Address\"" + "default": "\"Advanced Select\"" }, { "name": "name", @@ -867,20 +185,74 @@ "required": false, "default": "\"\"" }, + { + "name": "values", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "options", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "groups", + "type": "string", + "required": false, + "default": "[]" + }, { "name": "placeholder", "type": "string", "required": false, + "default": "\"Select an option\"" + }, + { + "name": "placeholderIcon", + "type": "string", + "required": false, "default": "\"\"" }, { - "name": "type", + "name": "searchPlaceholder", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"Search options…\"" }, { - "name": "required", + "name": "multiple", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "searchable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "defaultOpen", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "clearable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "allowEmpty", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "tags", "type": "boolean", "required": false, "default": "false" @@ -891,271 +263,6 @@ "required": false, "default": "false" }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AddressInput.wrn" - }, - { - "name": "AddressPreview", - "mount": "AddressPreview", - "category": "content", - "purpose": "Reusable address preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AddressPreview.wrn" - }, - { - "name": "AdvancedFilterBuilder", - "mount": "AdvancedFilterBuilder", - "category": "content", - "purpose": "Reusable advanced filter builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AdvancedFilterBuilder.wrn" - }, - { - "name": "alert", - "mount": "alert", - "category": "core", - "purpose": "Reusable alert component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Notice\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"info\"" - }, - { - "name": "dismissible", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/alert.wrn" - }, - { - "name": "AlertDialog", - "mount": "AlertDialog", - "category": "overlays", - "purpose": "Reusable alert dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AlertDialog.wrn" - }, - { - "name": "AmountInput", - "mount": "AmountInput", - "category": "forms", - "purpose": "Reusable amount input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Amount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, { "name": "required", "type": "boolean", @@ -1163,1203 +270,19 @@ "default": "false" }, { - "name": "disabled", + "name": "invalid", "type": "boolean", "required": false, "default": "false" }, { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AmountInput.wrn" - }, - { - "name": "AnalyticsDashboardPreview", - "mount": "AnalyticsDashboardPreview", - "category": "content", - "purpose": "Reusable analytics dashboard preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AnalyticsDashboardPreview.wrn" - }, - { - "name": "AnchorNavigation", - "mount": "AnchorNavigation", - "category": "layout", - "purpose": "Reusable anchor navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AnchorNavigation.wrn" - }, - { - "name": "AnnouncementBar", - "mount": "AnnouncementBar", - "category": "core", - "purpose": "Reusable announcement bar component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "badge", - "type": "string", - "required": false, - "default": "\"New\"" - }, - { - "name": "message", - "type": "string", - "required": false, - "default": "\"WrNexus Organizations is now available.\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"/organizations\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Explore organizations\"" - }, - { - "name": "ariaLabel", - "type": "string", - "required": false, - "default": "\"Announcement\"" - }, - { - "name": "badgeIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--sparkles]\"" - }, - { - "name": "actionIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--arrow-right]\"" - }, - { - "name": "dismissLabel", - "type": "string", - "required": false, - "default": "\"Dismiss announcement\"" - }, - { - "name": "showBadge", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showDescription", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showAction", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "dismissible", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": [], - "events": ["click"], - "source": "components/AnnouncementBar.wrn" - }, - { - "name": "ApartmentInput", - "mount": "ApartmentInput", - "category": "forms", - "purpose": "Reusable apartment input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Apartment\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApartmentInput.wrn" - }, - { - "name": "ApiAuthenticationNotice", - "mount": "ApiAuthenticationNotice", - "category": "feedback", - "purpose": "Reusable api authentication notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiAuthentication\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiAuthenticationNotice.wrn" - }, - { - "name": "ApiEndpointCard", - "mount": "ApiEndpointCard", - "category": "content", - "purpose": "Reusable api endpoint card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"GET\"" - }, - { - "name": "path", - "type": "string", - "required": false, - "default": "\"/api/example\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"View endpoint\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiEndpointCard.wrn" - }, - { - "name": "ApiErrorExample", - "mount": "ApiErrorExample", - "category": "content", - "purpose": "Reusable api error example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiErrorExample.wrn" - }, - { - "name": "ApiHeaderTable", - "mount": "ApiHeaderTable", - "category": "data", - "purpose": "Reusable api header table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiHeaderTable.wrn" - }, - { - "name": "ApiKeyCreateDialog", - "mount": "ApiKeyCreateDialog", - "category": "overlays", - "purpose": "Reusable api key create dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiKeyCreateDialog.wrn" - }, - { - "name": "ApiKeyDisplay", - "mount": "ApiKeyDisplay", - "category": "content", - "purpose": "Reusable api key display component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiKeyDisplay.wrn" - }, - { - "name": "ApiKeyInput", - "mount": "ApiKeyInput", - "category": "forms", - "purpose": "Reusable api key input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiKey\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiKeyInput.wrn" - }, - { - "name": "ApiMethodBadge", - "mount": "ApiMethodBadge", - "category": "feedback", - "purpose": "Reusable api method badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiMethod\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiMethodBadge.wrn" - }, - { - "name": "ApiParameterTable", - "mount": "ApiParameterTable", - "category": "data", - "purpose": "Reusable api parameter table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiParameterTable.wrn" - }, - { - "name": "ApiRateLimitNotice", - "mount": "ApiRateLimitNotice", - "category": "feedback", - "purpose": "Reusable api rate limit notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiRateLimit\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiRateLimitNotice.wrn" - }, - { - "name": "ApiRequestExample", - "mount": "ApiRequestExample", - "category": "content", - "purpose": "Reusable api request example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiRequestExample.wrn" - }, - { - "name": "ApiResponseExample", - "mount": "ApiResponseExample", - "category": "content", - "purpose": "Reusable api response example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiResponseExample.wrn" - }, - { - "name": "ApiSchemaTable", - "mount": "ApiSchemaTable", - "category": "data", - "purpose": "Reusable api schema table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiSchemaTable.wrn" - }, - { - "name": "ApiSchemaViewer", - "mount": "ApiSchemaViewer", - "category": "content", - "purpose": "Reusable api schema viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiSchemaViewer.wrn" - }, - { - "name": "ApiVersionBadge", - "mount": "ApiVersionBadge", - "category": "feedback", - "purpose": "Reusable api version badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ApiVersion\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ApiVersionBadge.wrn" - }, - { - "name": "AppHeader", - "mount": "AppHeader", - "category": "layout", - "purpose": "Reusable app header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AppHeader.wrn" - }, - { - "name": "ArchitectureSection", - "mount": "ArchitectureSection", - "category": "layout", - "purpose": "Reusable architecture section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArchitectureSection.wrn" - }, - { - "name": "AreaChart", - "mount": "AreaChart", - "category": "visualization", - "purpose": "Reusable area chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", + "name": "validationMessage", "type": "string", "required": false, "default": "\"\"" }, { - "name": "summary", + "name": "helpText", "type": "string", "required": false, "default": "\"\"" @@ -2371,350 +294,166 @@ "default": "false" }, { - "name": "class", + "name": "loadingLabel", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AreaChart.wrn" - }, - { - "name": "ArticleHero", - "mount": "ArticleHero", - "category": "layout", - "purpose": "Reusable article hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"Loading options…\"" }, { - "name": "title", + "name": "emptyLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"No options found\"" }, { - "name": "description", + "name": "selectedOptionsLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Selected options\"" }, { - "name": "align", + "name": "clearLabel", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"Clear selection\"" }, { - "name": "class", + "name": "createLabel", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleHero.wrn" - }, - { - "name": "ArticleLayout", - "mount": "ArticleLayout", - "category": "layout", - "purpose": "Reusable article layout component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"Create\"" }, { - "name": "title", + "name": "loadMoreLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Load more\"" }, { - "name": "description", + "name": "searchMode", "type": "string", "required": false, - "default": "\"\"" + "default": "\"contains\"" }, { - "name": "align", + "name": "searchFields", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"label,description\"" }, { - "name": "class", - "type": "string", + "name": "minSearchLength", + "type": "number", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleLayout.wrn" - }, - { - "name": "ArticleNewsletterCTA", - "mount": "ArticleNewsletterCTA", - "category": "actions", - "purpose": "Reusable article newsletter c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" + "default": "0" }, { - "name": "href", - "type": "string", + "name": "searchResultLimit", + "type": "number", "required": false, - "default": "\"\"" + "default": "0" }, { - "name": "type", - "type": "string", + "name": "maxSelections", + "type": "number", "required": false, - "default": "\"button\"" + "default": "0" }, { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", + "name": "showCounter", "type": "boolean", "required": false, "default": "false" }, { - "name": "class", + "name": "counterTemplate", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleNewsletterCTA.wrn" - }, - { - "name": "ArticlePageShell", - "mount": "ArticlePageShell", - "category": "layout", - "purpose": "Reusable article page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"{selected} selected\"" }, { - "name": "title", + "name": "optionTemplate", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "description", + "name": "selectedTemplate", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "align", - "type": "string", + "name": "closeOnSelect", + "type": "boolean", "required": false, - "default": "\"start\"" + "default": "true" }, { - "name": "class", - "type": "string", + "name": "scrollToSelected", + "type": "boolean", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticlePageShell.wrn" - }, - { - "name": "ArticleShareActions", - "mount": "ArticleShareActions", - "category": "actions", - "purpose": "Reusable article share actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" + "default": "true" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", + "name": "fixed", "type": "boolean", "required": false, "default": "false" }, { - "name": "class", + "name": "placement", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ArticleShareActions.wrn" - }, - { - "name": "AspectRatio", - "mount": "AspectRatio", - "category": "core", - "purpose": "Reusable aspect ratio component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AspectRatio.wrn" - }, - { - "name": "AssetCard", - "mount": "AssetCard", - "category": "content", - "purpose": "Reusable asset card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"bottom\"" }, { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AssetCard.wrn" - }, - { - "name": "AttachmentPicker", - "mount": "AttachmentPicker", - "category": "forms", - "purpose": "Reusable attachment picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Attachment\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", + "name": "remote", "type": "boolean", "required": false, "default": "false" }, { - "name": "disabled", + "name": "remoteUrl", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "remoteQueryParam", + "type": "string", + "required": false, + "default": "\"q\"" + }, + { + "name": "remoteDebounce", + "type": "number", + "required": false, + "default": "250" + }, + { + "name": "remoteAutoLoad", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "infinite", "type": "boolean", "required": false, "default": "false" }, { - "name": "readonly", + "name": "hasMore", "type": "boolean", "required": false, "default": "false" }, { - "name": "help", - "type": "string", + "name": "page", + "type": "number", "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "1" }, { "name": "class", @@ -2723,723 +462,157 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/AttachmentPicker.wrn" + "slots": [], + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "source": "components/AdvancedSelect.wrn" }, { - "name": "AttachmentUpload", - "mount": "AttachmentUpload", - "category": "content", - "purpose": "Reusable attachment upload component.", + "name": "Alert", + "mount": "Alert", + "category": "base", + "purpose": "Theme-aware, responsive alert component.", "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AttachmentUpload.wrn" - }, - { - "name": "AudioUpload", - "mount": "AudioUpload", - "category": "content", - "purpose": "Reusable audio upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AudioUpload.wrn" - }, - { - "name": "AuditLogPreview", - "mount": "AuditLogPreview", - "category": "content", - "purpose": "Reusable audit log preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuditLogPreview.wrn" - }, - { - "name": "AuditTable", - "mount": "AuditTable", - "category": "data", - "purpose": "Reusable audit table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuditTable.wrn" - }, - { - "name": "AuthenticatorCodeInput", - "mount": "AuthenticatorCodeInput", - "category": "forms", - "purpose": "Reusable authenticator code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"AuthenticatorCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthenticatorCodeInput.wrn" - }, - { - "name": "AuthorAvatar", - "mount": "AuthorAvatar", - "category": "content", - "purpose": "Reusable author avatar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthorAvatar.wrn" - }, - { - "name": "AuthorCard", - "mount": "AuthorCard", - "category": "content", - "purpose": "Reusable author card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthorCard.wrn" - }, - { - "name": "AuthorizedApplicationCard", - "mount": "AuthorizedApplicationCard", - "category": "content", - "purpose": "Reusable authorized application card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AuthorizedApplicationCard.wrn" - }, - { - "name": "AutoGrid", - "mount": "AutoGrid", - "category": "data", - "purpose": "Reusable auto grid component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AutoGrid.wrn" - }, - { - "name": "AutomationExampleCard", - "mount": "AutomationExampleCard", - "category": "content", - "purpose": "Reusable automation example card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AutomationExampleCard.wrn" - }, - { - "name": "AvailabilityCalendar", - "mount": "AvailabilityCalendar", - "category": "content", - "purpose": "Reusable availability calendar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AvailabilityCalendar.wrn" - }, - { - "name": "Avatar", - "mount": "Avatar", - "category": "content", - "purpose": "Reusable avatar component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "src", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "initials", - "type": "string", - "required": false, - "default": "\"WR\"" - }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Alert\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], - "slots": [], + "slots": ["default"], + "events": [], + "source": "components/Alert.wrn" + }, + { + "name": "Avatar", + "mount": "Avatar", + "category": "base", + "purpose": "Theme-aware, responsive avatar component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Avatar\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], "events": [], "source": "components/Avatar.wrn" }, { "name": "AvatarGroup", "mount": "AvatarGroup", - "category": "forms", - "purpose": "Reusable avatar group component.", + "category": "base", + "purpose": "Theme-aware, responsive avatar group component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Avatar\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Avatar Group\"" + }, + { + "name": "description", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "placeholder", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -3452,187 +625,29 @@ "events": [], "source": "components/AvatarGroup.wrn" }, - { - "name": "AvatarUpload", - "mount": "AvatarUpload", - "category": "content", - "purpose": "Reusable avatar upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/AvatarUpload.wrn" - }, - { - "name": "BackButton", - "mount": "BackButton", - "category": "actions", - "purpose": "Reusable back button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BackButton.wrn" - }, - { - "name": "BackToTop", - "mount": "BackToTop", - "category": "core", - "purpose": "Reusable back to top component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Back to top\"" - }, - { - "name": "assistiveLabel", - "type": "string", - "required": false, - "default": "\"Return to the top of the page\"" - }, - { - "name": "threshold", - "type": "number", - "required": false, - "default": "500" - } - ], - "slots": [], - "events": ["click"], - "source": "components/BackToTop.wrn" - }, { "name": "Badge", "mount": "Badge", - "category": "feedback", - "purpose": "Reusable badge component.", + "category": "base", + "purpose": "Theme-aware, responsive badge component.", "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"neutral\"" - }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Badge.wrn" - }, - { - "name": "BankTransferDetails", - "mount": "BankTransferDetails", - "category": "content", - "purpose": "Reusable bank transfer details component.", - "props": [ + "default": "\"default\"" + }, { - "name": "eyebrow", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Badge\"" }, { "name": "description", @@ -3641,139 +656,10 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BankTransferDetails.wrn" - }, - { - "name": "Banner", - "mount": "Banner", - "category": "feedback", - "purpose": "Reusable banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "text", - "type": "string", - "required": false, - "default": "\"Announcement\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"brand\"" - } - ], - "slots": [], - "events": [], - "source": "components/Banner.wrn" - }, - { - "name": "BarChart", - "mount": "BarChart", - "category": "visualization", - "purpose": "Reusable bar chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BarChart.wrn" - }, - { - "name": "BetaBadge", - "mount": "BetaBadge", - "category": "feedback", - "purpose": "Reusable beta badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Beta\"" + "default": "[]" }, { "name": "variant", @@ -3790,25 +676,31 @@ ], "slots": ["default"], "events": [], - "source": "components/BetaBadge.wrn" + "source": "components/Badge.wrn" }, { - "name": "BillingAddressForm", - "mount": "BillingAddressForm", - "category": "content", - "purpose": "Reusable billing address form component.", + "name": "Blockquote", + "mount": "Blockquote", + "category": "base", + "purpose": "Theme-aware, responsive blockquote component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Blockquote\"" }, { "name": "description", @@ -3816,767 +708,6 @@ "required": false, "default": "\"\"" }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BillingAddressForm.wrn" - }, - { - "name": "BillingExample", - "mount": "BillingExample", - "category": "content", - "purpose": "Reusable billing example component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BillingExample.wrn" - }, - { - "name": "BillingPeriodToggle", - "mount": "BillingPeriodToggle", - "category": "forms", - "purpose": "Reusable billing period toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BillingPeriod\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BillingPeriodToggle.wrn" - }, - { - "name": "BlackoutDatePicker", - "mount": "BlackoutDatePicker", - "category": "forms", - "purpose": "Reusable blackout date picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BlackoutDate\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlackoutDatePicker.wrn" - }, - { - "name": "BlogCard", - "mount": "BlogCard", - "category": "content", - "purpose": "Reusable blog card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogCard.wrn" - }, - { - "name": "BlogGrid", - "mount": "BlogGrid", - "category": "data", - "purpose": "Reusable blog grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogGrid.wrn" - }, - { - "name": "BlogList", - "mount": "BlogList", - "category": "data", - "purpose": "Reusable blog list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogList.wrn" - }, - { - "name": "BlogSearch", - "mount": "BlogSearch", - "category": "content", - "purpose": "Reusable blog search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BlogSearch.wrn" - }, - { - "name": "BodyText", - "mount": "BodyText", - "category": "content", - "purpose": "Reusable body text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BodyText.wrn" - }, - { - "name": "BorderRadiusPicker", - "mount": "BorderRadiusPicker", - "category": "forms", - "purpose": "Reusable border radius picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BorderRadius\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BorderRadiusPicker.wrn" - }, - { - "name": "BottomNavigation", - "mount": "BottomNavigation", - "category": "layout", - "purpose": "Reusable bottom navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BottomNavigation.wrn" - }, - { - "name": "BrandColorPicker", - "mount": "BrandColorPicker", - "category": "forms", - "purpose": "Reusable brand color picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BrandColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BrandColorPicker.wrn" - }, - { - "name": "BrandSelector", - "mount": "BrandSelector", - "category": "forms", - "purpose": "Reusable brand selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Brand\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BrandSelector.wrn" - }, - { - "name": "Breadcrumbs", - "mount": "Breadcrumbs", - "category": "core", - "purpose": "Reusable breadcrumbs component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "items", "type": "string", @@ -4584,69 +715,10 @@ "default": "[]" }, { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showHome", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "homeLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Home\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - } - ], - "slots": [], - "events": [], - "source": "components/Breadcrumbs.wrn" - }, - { - "name": "BrowserFrame", - "mount": "BrowserFrame", - "category": "layout", - "purpose": "Reusable browser frame component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" + "default": "\"default\"" }, { "name": "class", @@ -4657,25 +729,78 @@ ], "slots": ["default"], "events": [], - "source": "components/BrowserFrame.wrn" + "source": "components/Blockquote.wrn" }, { - "name": "BudgetRangeSlider", - "mount": "BudgetRangeSlider", - "category": "content", - "purpose": "Reusable budget range slider component.", + "name": "Breadcrumb", + "mount": "Breadcrumb", + "category": "navigation", + "purpose": "Theme-aware, responsive breadcrumb component.", "props": [ { - "name": "eyebrow", + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Breadcrumb\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "title", + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Breadcrumb.wrn" + }, + { + "name": "Button", + "mount": "Button", + "category": "base", + "purpose": "Theme-aware, responsive button component.", + "props": [ + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Button\"" + }, + { + "name": "loadingLabel", + "type": "string", + "required": false, + "default": "\"Loading…\"" }, { "name": "description", @@ -4683,6 +808,12 @@ "required": false, "default": "\"\"" }, + { + "name": "as", + "type": "string", + "required": false, + "default": "\"\"" + }, { "name": "href", "type": "string", @@ -4690,200 +821,17 @@ "default": "\"\"" }, { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", + "name": "target", "type": "string", "required": false, "default": "\"\"" }, { - "name": "alt", + "name": "rel", "type": "string", "required": false, "default": "\"\"" }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BudgetRangeSlider.wrn" - }, - { - "name": "BudgetSelector", - "mount": "BudgetSelector", - "category": "forms", - "purpose": "Reusable budget selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Budget\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BudgetSelector.wrn" - }, - { - "name": "BusinessHoursPicker", - "mount": "BusinessHoursPicker", - "category": "forms", - "purpose": "Reusable business hours picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"BusinessHours\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/BusinessHoursPicker.wrn" - }, - { - "name": "Button", - "mount": "Button", - "category": "actions", - "purpose": "Reusable button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Button\"" - }, { "name": "type", "type": "string", @@ -4894,13 +842,19 @@ "name": "variant", "type": "string", "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, "default": "\"primary\"" }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" }, { "name": "disabled", @@ -4914,6 +868,18 @@ "required": false, "default": "false" }, + { + "name": "pill", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "fullWidth", + "type": "boolean", + "required": false, + "default": "false" + }, { "name": "icon", "type": "string", @@ -4927,13 +893,49 @@ "default": "\"start\"" }, { - "name": "fullWidth", + "name": "ariaLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "ariaPressed", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "ariaExpanded", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "ariaControls", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "autofocus", "type": "boolean", "required": false, "default": "false" }, { - "name": "className", + "name": "controlClass", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" @@ -4946,68 +948,44 @@ { "name": "ButtonGroup", "mount": "ButtonGroup", - "category": "forms", - "purpose": "Reusable button group component.", + "category": "base", + "purpose": "Theme-aware, responsive button group component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Button\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Button Group\"" + }, + { + "name": "description", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "placeholder", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -5021,658 +999,28 @@ "source": "components/ButtonGroup.wrn" }, { - "name": "ButtonSelector", - "mount": "ButtonSelector", - "category": "forms", - "purpose": "Reusable button selector component.", + "name": "Card", + "mount": "Card", + "category": "base", + "purpose": "Theme-aware, responsive card component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Button\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ButtonSelector.wrn" - }, - { - "name": "Calendar", - "mount": "Calendar", - "category": "content", - "purpose": "Reusable calendar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Calendar.wrn" - }, - { - "name": "CalendarGrid", - "mount": "CalendarGrid", - "category": "data", - "purpose": "Reusable calendar grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CalendarGrid.wrn" - }, - { - "name": "CalendarHeader", - "mount": "CalendarHeader", - "category": "layout", - "purpose": "Reusable calendar header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CalendarHeader.wrn" - }, - { - "name": "CalendarNavigation", - "mount": "CalendarNavigation", - "category": "layout", - "purpose": "Reusable calendar navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CalendarNavigation.wrn" - }, - { - "name": "CallbackUrlInput", - "mount": "CallbackUrlInput", - "category": "forms", - "purpose": "Reusable callback url input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CallbackUrl\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CallbackUrlInput.wrn" - }, - { - "name": "CampaignCard", - "mount": "CampaignCard", - "category": "content", - "purpose": "Reusable campaign card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--send]\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CampaignCard.wrn" - }, - { - "name": "CampaignPerformancePreview", - "mount": "CampaignPerformancePreview", - "category": "content", - "purpose": "Reusable campaign performance preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CampaignPerformancePreview.wrn" - }, - { - "name": "CampaignProgress", - "mount": "CampaignProgress", - "category": "visualization", - "purpose": "Reusable campaign progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CampaignProgress.wrn" - }, - { - "name": "CapabilityGrid", - "mount": "CapabilityGrid", - "category": "data", - "purpose": "Reusable capability grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CapabilityGrid.wrn" - }, - { - "name": "CaptchaField", - "mount": "CaptchaField", - "category": "forms", - "purpose": "Reusable captcha field component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Captcha\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaptchaField.wrn" - }, - { - "name": "card", - "mount": "card", - "category": "core", - "purpose": "Reusable card component.", - "props": [ - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "padding", + "name": "color", "type": "string", "required": false, - "default": "\"md\"" - }, - { - "name": "interactive", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/card.wrn" - }, - { - "name": "CardPaymentForm", - "mount": "CardPaymentForm", - "category": "content", - "purpose": "Reusable card payment form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Card\"" }, { "name": "description", @@ -5681,146 +1029,10 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CardPaymentForm.wrn" - }, - { - "name": "CardSelector", - "mount": "CardSelector", - "category": "forms", - "purpose": "Reusable card selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Card\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CardSelector.wrn" - }, - { - "name": "CardSkeleton", - "mount": "CardSkeleton", - "category": "feedback", - "purpose": "Reusable card skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Card\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -5837,125 +1049,31 @@ ], "slots": ["default"], "events": [], - "source": "components/CardSkeleton.wrn" - }, - { - "name": "CareerApplicationForm", - "mount": "CareerApplicationForm", - "category": "content", - "purpose": "Reusable career application form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CareerApplicationForm.wrn" - }, - { - "name": "CareerBenefitsGrid", - "mount": "CareerBenefitsGrid", - "category": "data", - "purpose": "Reusable career benefits grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CareerBenefitsGrid.wrn" + "source": "components/Card.wrn" }, { "name": "Carousel", "mount": "Carousel", - "category": "content", - "purpose": "Reusable carousel component.", + "category": "base", + "purpose": "Theme-aware, responsive carousel component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Carousel\"" }, { "name": "description", @@ -5964,28 +1082,16 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "actionLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -5999,228 +1105,28 @@ "source": "components/Carousel.wrn" }, { - "name": "CaseStudyCard", - "mount": "CaseStudyCard", - "category": "content", - "purpose": "Reusable case study card component.", + "name": "Chart", + "mount": "Chart", + "category": "integrations", + "purpose": "Theme-aware, responsive chart component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaseStudyCard.wrn" - }, - { - "name": "CaseStudyHero", - "mount": "CaseStudyHero", - "category": "layout", - "purpose": "Reusable case study hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaseStudyHero.wrn" - }, - { - "name": "CaseStudyPreview", - "mount": "CaseStudyPreview", - "category": "content", - "purpose": "Reusable case study preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CaseStudyPreview.wrn" - }, - { - "name": "CenteredCTA", - "mount": "CenteredCTA", - "category": "actions", - "purpose": "Reusable centered c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CenteredCTA.wrn" - }, - { - "name": "CenteredHero", - "mount": "CenteredHero", - "category": "layout", - "purpose": "Reusable centered hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Chart\"" }, { "name": "description", @@ -6229,151 +1135,10 @@ "default": "\"\"" }, { - "name": "align", + "name": "items", "type": "string", "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CenteredHero.wrn" - }, - { - "name": "CenteredSectionHeader", - "mount": "CenteredSectionHeader", - "category": "layout", - "purpose": "Reusable centered section header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CenteredSectionHeader.wrn" - }, - { - "name": "CertificateUpload", - "mount": "CertificateUpload", - "category": "content", - "purpose": "Reusable certificate upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CertificateUpload.wrn" - }, - { - "name": "CertificationBadge", - "mount": "CertificationBadge", - "category": "feedback", - "purpose": "Reusable certification badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Certification\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -6390,25 +1155,31 @@ ], "slots": ["default"], "events": [], - "source": "components/CertificationBadge.wrn" + "source": "components/Chart.wrn" }, { - "name": "ChallengeSection", - "mount": "ChallengeSection", - "category": "layout", - "purpose": "Reusable challenge section component.", + "name": "ChatBubble", + "mount": "ChatBubble", + "category": "base", + "purpose": "Theme-aware, responsive chat bubble component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Chat Bubble\"" }, { "name": "description", @@ -6417,51 +1188,10 @@ "default": "\"\"" }, { - "name": "align", + "name": "items", "type": "string", "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChallengeSection.wrn" - }, - { - "name": "ChannelBadge", - "mount": "ChannelBadge", - "category": "feedback", - "purpose": "Reusable channel badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Channel\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -6478,560 +1208,25 @@ ], "slots": ["default"], "events": [], - "source": "components/ChannelBadge.wrn" - }, - { - "name": "ChannelCard", - "mount": "ChannelCard", - "category": "content", - "purpose": "Reusable channel card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelCard.wrn" - }, - { - "name": "ChannelComparisonChart", - "mount": "ChannelComparisonChart", - "category": "visualization", - "purpose": "Reusable channel comparison chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelComparisonChart.wrn" - }, - { - "name": "ChannelComparisonTable", - "mount": "ChannelComparisonTable", - "category": "data", - "purpose": "Reusable channel comparison table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelComparisonTable.wrn" - }, - { - "name": "ChannelFallbackDiagram", - "mount": "ChannelFallbackDiagram", - "category": "visualization", - "purpose": "Reusable channel fallback diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelFallbackDiagram.wrn" - }, - { - "name": "ChannelFlow", - "mount": "ChannelFlow", - "category": "visualization", - "purpose": "Reusable channel flow component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ChannelFlow.wrn" - }, - { - "name": "ChannelIcon", - "mount": "ChannelIcon", - "category": "content", - "purpose": "Reusable channel icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelIcon.wrn" - }, - { - "name": "ChannelRateTable", - "mount": "ChannelRateTable", - "category": "data", - "purpose": "Reusable channel rate table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelRateTable.wrn" - }, - { - "name": "ChannelSelector", - "mount": "ChannelSelector", - "category": "forms", - "purpose": "Reusable channel selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Channel\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChannelSelector.wrn" - }, - { - "name": "CharacterCounter", - "mount": "CharacterCounter", - "category": "feedback", - "purpose": "Reusable character counter component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Character\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CharacterCounter.wrn" - }, - { - "name": "ChartEmptyState", - "mount": "ChartEmptyState", - "category": "feedback", - "purpose": "Reusable chart empty state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ChartEmpty\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChartEmptyState.wrn" - }, - { - "name": "ChartTooltip", - "mount": "ChartTooltip", - "category": "content", - "purpose": "Reusable chart tooltip component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChartTooltip.wrn" + "source": "components/ChatBubble.wrn" }, { "name": "Checkbox", "mount": "Checkbox", - "category": "core", - "purpose": "Reusable checkbox component.", + "category": "forms", + "purpose": "Theme-aware, responsive checkbox component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "label", @@ -7040,11 +1235,17 @@ "default": "\"Checkbox\"" }, { - "name": "description", + "name": "name", "type": "string", "required": false, "default": "\"\"" }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"on\"" + }, { "name": "checked", "type": "boolean", @@ -7056,6 +1257,12 @@ "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], @@ -7063,2807 +1270,10 @@ "source": "components/Checkbox.wrn" }, { - "name": "CheckboxGroup", - "mount": "CheckboxGroup", - "category": "forms", - "purpose": "Reusable checkbox group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Checkbox\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CheckboxGroup.wrn" - }, - { - "name": "Checklist", - "mount": "Checklist", - "category": "content", - "purpose": "Reusable checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Checklist.wrn" - }, - { - "name": "ChecklistProgress", - "mount": "ChecklistProgress", - "category": "visualization", - "purpose": "Reusable checklist progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChecklistProgress.wrn" - }, - { - "name": "Chip", - "mount": "Chip", - "category": "core", - "purpose": "Reusable chip component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Chip\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Chip.wrn" - }, - { - "name": "ChipInput", - "mount": "ChipInput", - "category": "forms", - "purpose": "Reusable chip input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Chip\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ChipInput.wrn" - }, - { - "name": "CircularProgress", - "mount": "CircularProgress", - "category": "visualization", - "purpose": "Reusable circular progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CircularProgress.wrn" - }, - { - "name": "CitySelector", - "mount": "CitySelector", - "category": "forms", - "purpose": "Reusable city selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"City\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CitySelector.wrn" - }, - { - "name": "ClearFiltersButton", - "mount": "ClearFiltersButton", - "category": "actions", - "purpose": "Reusable clear filters button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ClearFiltersButton.wrn" - }, - { - "name": "ClickableCard", - "mount": "ClickableCard", - "category": "content", - "purpose": "Reusable clickable card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ClickableCard.wrn" - }, - { - "name": "CloseButton", - "mount": "CloseButton", - "category": "actions", - "purpose": "Reusable close button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CloseButton.wrn" - }, - { - "name": "Cluster", - "mount": "Cluster", - "category": "core", - "purpose": "Reusable cluster component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Cluster.wrn" - }, - { - "name": "Code", - "mount": "Code", - "category": "content", - "purpose": "Reusable code component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Code.wrn" - }, - { - "name": "CodeBlock", - "mount": "CodeBlock", - "category": "content", - "purpose": "Reusable code block component.", - "props": [ - { - "name": "language", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "code", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "copyable", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/CodeBlock.wrn" - }, - { - "name": "CodeCopyButton", - "mount": "CodeCopyButton", - "category": "actions", - "purpose": "Reusable code copy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeCopyButton.wrn" - }, - { - "name": "CodeHeader", - "mount": "CodeHeader", - "category": "layout", - "purpose": "Reusable code header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeHeader.wrn" - }, - { - "name": "CodeInput", - "mount": "CodeInput", - "category": "forms", - "purpose": "Reusable code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Code\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeInput.wrn" - }, - { - "name": "CodeLanguageBadge", - "mount": "CodeLanguageBadge", - "category": "feedback", - "purpose": "Reusable code language badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CodeLanguage\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeLanguageBadge.wrn" - }, - { - "name": "CodeTabs", - "mount": "CodeTabs", - "category": "content", - "purpose": "Reusable code tabs component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeTabs.wrn" - }, - { - "name": "CodeText", - "mount": "CodeText", - "category": "content", - "purpose": "Reusable code text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CodeText.wrn" - }, - { - "name": "CohortChart", - "mount": "CohortChart", - "category": "visualization", - "purpose": "Reusable cohort chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CohortChart.wrn" - }, - { - "name": "ColorGrid", - "mount": "ColorGrid", - "category": "data", - "purpose": "Reusable color grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorGrid.wrn" - }, - { - "name": "ColorHexInput", - "mount": "ColorHexInput", - "category": "forms", - "purpose": "Reusable color hex input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ColorHex\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorHexInput.wrn" - }, - { - "name": "ColorPicker", - "mount": "ColorPicker", - "category": "forms", - "purpose": "Reusable color picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Color\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorPicker.wrn" - }, - { - "name": "ColorSelector", - "mount": "ColorSelector", - "category": "forms", - "purpose": "Reusable color selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Color\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorSelector.wrn" - }, - { - "name": "ColorSwatch", - "mount": "ColorSwatch", - "category": "content", - "purpose": "Reusable color swatch component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ColorSwatch.wrn" - }, - { - "name": "Combobox", - "mount": "Combobox", - "category": "core", - "purpose": "Reusable combobox component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"combobox\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Choose an option\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Search options\"" - }, - { - "name": "options", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/Combobox.wrn" - }, - { - "name": "ComingSoonBadge", - "mount": "ComingSoonBadge", - "category": "feedback", - "purpose": "Reusable coming soon badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ComingSoon\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComingSoonBadge.wrn" - }, - { - "name": "ComingSoonState", - "mount": "ComingSoonState", - "category": "feedback", - "purpose": "Reusable coming soon state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ComingSoon\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComingSoonState.wrn" - }, - { - "name": "CommandBlock", - "mount": "CommandBlock", - "category": "content", - "purpose": "Reusable command block component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CommandBlock.wrn" - }, - { - "name": "CommandMenu", - "mount": "CommandMenu", - "category": "overlays", - "purpose": "Reusable command menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CommandMenu.wrn" - }, - { - "name": "CommandSearchInput", - "mount": "CommandSearchInput", - "category": "forms", - "purpose": "Reusable command search input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CommandSearch\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CommandSearchInput.wrn" - }, - { - "name": "CompanyHero", - "mount": "CompanyHero", - "category": "layout", - "purpose": "Reusable company hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanyHero.wrn" - }, - { - "name": "CompanyNameInput", - "mount": "CompanyNameInput", - "category": "forms", - "purpose": "Reusable company name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CompanyName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanyNameInput.wrn" - }, - { - "name": "CompanyPageShell", - "mount": "CompanyPageShell", - "category": "layout", - "purpose": "Reusable company page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanyPageShell.wrn" - }, - { - "name": "CompanySizeSelector", - "mount": "CompanySizeSelector", - "category": "forms", - "purpose": "Reusable company size selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CompanySize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompanySizeSelector.wrn" - }, - { - "name": "ComparisonDateRangePicker", - "mount": "ComparisonDateRangePicker", - "category": "forms", - "purpose": "Reusable comparison date range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ComparisonDateRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComparisonDateRangePicker.wrn" - }, - { - "name": "ComparisonTable", - "mount": "ComparisonTable", - "category": "data", - "purpose": "Reusable comparison table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComparisonTable.wrn" - }, - { - "name": "CompletionMeter", - "mount": "CompletionMeter", - "category": "visualization", - "purpose": "Reusable completion meter component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CompletionMeter.wrn" - }, - { - "name": "ComplianceBadgeList", - "mount": "ComplianceBadgeList", - "category": "data", - "purpose": "Reusable compliance badge list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComplianceBadgeList.wrn" - }, - { - "name": "ComplianceProgramCard", - "mount": "ComplianceProgramCard", - "category": "content", - "purpose": "Reusable compliance program card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ComplianceProgramCard.wrn" - }, - { - "name": "ConfirmationDialog", - "mount": "ConfirmationDialog", - "category": "overlays", - "purpose": "Reusable confirmation dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Confirm action\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Are you sure you want to continue?\"" - }, - { - "name": "confirmLabel", - "type": "string", - "required": false, - "default": "\"Confirm\"" - }, - { - "name": "cancelLabel", - "type": "string", - "required": false, - "default": "\"Cancel\"" - }, - { - "name": "danger", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["confirm"], - "events": ["click"], - "source": "components/ConfirmationDialog.wrn" - }, - { - "name": "ConfirmPasswordInput", - "mount": "ConfirmPasswordInput", - "category": "forms", - "purpose": "Reusable confirm password input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ConfirmPassword\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConfirmPasswordInput.wrn" - }, - { - "name": "ConnectedAccountCard", - "mount": "ConnectedAccountCard", - "category": "content", - "purpose": "Reusable connected account card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConnectedAccountCard.wrn" - }, - { - "name": "ConnectionCard", - "mount": "ConnectionCard", - "category": "content", - "purpose": "Reusable connection card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConnectionCard.wrn" - }, - { - "name": "ConsentTimelinePreview", - "mount": "ConsentTimelinePreview", - "category": "content", - "purpose": "Reusable consent timeline preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConsentTimelinePreview.wrn" - }, - { - "name": "ContactCard", - "mount": "ContactCard", - "category": "content", - "purpose": "Reusable contact card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactCard.wrn" - }, - { - "name": "ContactCTA", - "mount": "ContactCTA", - "category": "actions", - "purpose": "Reusable contact c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactCTA.wrn" - }, - { - "name": "ContactForm", - "mount": "ContactForm", - "category": "content", - "purpose": "Reusable contact form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactForm.wrn" - }, - { - "name": "ContactHero", - "mount": "ContactHero", - "category": "layout", - "purpose": "Reusable contact hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactHero.wrn" - }, - { - "name": "ContactPageShell", - "mount": "ContactPageShell", - "category": "layout", - "purpose": "Reusable contact page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactPageShell.wrn" - }, - { - "name": "ContactSalesBanner", - "mount": "ContactSalesBanner", - "category": "core", - "purpose": "Reusable contact sales banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"Enterprise identity\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Ready to secure your next application?\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Contact sales\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"/contact\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"Start free\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"/sign-up\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"icon-[lucide--messages-square]\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "points", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "trustPoints", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": [], - "source": "components/ContactSalesBanner.wrn" - }, - { - "name": "ContactSalesButton", - "mount": "ContactSalesButton", - "category": "actions", - "purpose": "Reusable contact sales button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactSalesButton.wrn" - }, - { - "name": "ContactSalesForm", - "mount": "ContactSalesForm", - "category": "content", - "purpose": "Reusable contact sales form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContactSalesForm.wrn" - }, - { - "name": "Container", - "mount": "Container", - "category": "core", - "purpose": "Reusable container component.", + "name": "Clipboard", + "mount": "Clipboard", + "category": "integrations", + "purpose": "Theme-aware, responsive clipboard component.", "props": [ { "name": "size", @@ -9872,7 +1282,571 @@ "default": "\"default\"" }, { - "name": "className", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Clipboard\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Clipboard.wrn" + }, + { + "name": "Collapse", + "mount": "Collapse", + "category": "base", + "purpose": "Theme-aware, responsive collapse component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "multiple", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Collapse.wrn" + }, + { + "name": "ColorPicker", + "mount": "ColorPicker", + "category": "forms", + "purpose": "Theme-aware, responsive color picker component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Color Picker\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"color\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/ColorPicker.wrn" + }, + { + "name": "Columns", + "mount": "Columns", + "category": "layout", + "purpose": "Theme-aware, responsive columns component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, + { + "name": "gap", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Columns.wrn" + }, + { + "name": "ComboBox", + "mount": "ComboBox", + "category": "advanced-forms", + "purpose": "Editable autocomplete combobox with local and remote suggestions.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"ComboBox\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "options", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "groups", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Search or select an option\"" + }, + { + "name": "searchPlaceholder", + "type": "string", + "required": false, + "default": "\"Start typing…\"" + }, + { + "name": "clearable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "allowCustomValue", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "invalid", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "validationMessage", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "helpText", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "loading", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "loadingLabel", + "type": "string", + "required": false, + "default": "\"Loading suggestions…\"" + }, + { + "name": "emptyLabel", + "type": "string", + "required": false, + "default": "\"No matching options\"" + }, + { + "name": "clearLabel", + "type": "string", + "required": false, + "default": "\"Clear value\"" + }, + { + "name": "toggleLabel", + "type": "string", + "required": false, + "default": "\"Toggle suggestions\"" + }, + { + "name": "searchMode", + "type": "string", + "required": false, + "default": "\"contains\"" + }, + { + "name": "searchFields", + "type": "string", + "required": false, + "default": "\"label,description\"" + }, + { + "name": "minSearchLength", + "type": "number", + "required": false, + "default": "0" + }, + { + "name": "searchResultLimit", + "type": "number", + "required": false, + "default": "0" + }, + { + "name": "optionTemplate", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "defaultOpen", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "closeOnSelect", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "fixed", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "autocomplete", + "type": "string", + "required": false, + "default": "\"off\"" + }, + { + "name": "remote", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "remoteUrl", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "remoteQueryParam", + "type": "string", + "required": false, + "default": "\"q\"" + }, + { + "name": "remoteDebounce", + "type": "number", + "required": false, + "default": "250" + }, + { + "name": "remoteAutoLoad", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "infinite", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "hasMore", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "page", + "type": "number", + "required": false, + "default": "1" + }, + { + "name": "loadMoreLabel", + "type": "string", + "required": false, + "default": "\"Load more\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "source": "components/ComboBox.wrn" + }, + { + "name": "Confetti", + "mount": "Confetti", + "category": "integrations", + "purpose": "Theme-aware, responsive confetti component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Confetti\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Confetti.wrn" + }, + { + "name": "Container", + "mount": "Container", + "category": "layout", + "purpose": "Theme-aware, responsive container component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, + { + "name": "gap", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" @@ -9886,13 +1860,25 @@ "name": "ContextMenu", "mount": "ContextMenu", "category": "overlays", - "purpose": "Reusable context menu component.", + "purpose": "Theme-aware, responsive context menu component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Context Menu\"" }, { "name": "description", @@ -9906,6 +1892,12 @@ "required": false, "default": "false" }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, { "name": "closeLabel", "type": "string", @@ -9924,763 +1916,28 @@ "source": "components/ContextMenu.wrn" }, { - "name": "ContextSwitcher", - "mount": "ContextSwitcher", - "category": "content", - "purpose": "Reusable context switcher component.", + "name": "CopyMarkup", + "mount": "CopyMarkup", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive copy markup component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ContextSwitcher.wrn" - }, - { - "name": "ConversationList", - "mount": "ConversationList", - "category": "data", - "purpose": "Reusable conversation list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConversationList.wrn" - }, - { - "name": "ConversationPreview", - "mount": "ConversationPreview", - "category": "content", - "purpose": "Reusable conversation preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConversationPreview.wrn" - }, - { - "name": "ConversionChart", - "mount": "ConversionChart", - "category": "visualization", - "purpose": "Reusable conversion chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ConversionChart.wrn" - }, - { - "name": "CookieBanner", - "mount": "CookieBanner", - "category": "feedback", - "purpose": "Reusable cookie banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"We use cookies\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"We use essential cookies and optional analytics to improve your experience.\"" - }, - { - "name": "privacyHref", - "type": "string", - "required": false, - "default": "\"/privacy\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/CookieBanner.wrn" - }, - { - "name": "CookieCategoryList", - "mount": "CookieCategoryList", - "category": "data", - "purpose": "Reusable cookie category list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieCategoryList.wrn" - }, - { - "name": "CookieCategoryToggle", - "mount": "CookieCategoryToggle", - "category": "forms", - "purpose": "Reusable cookie category toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CookieCategory\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieCategoryToggle.wrn" - }, - { - "name": "CookieConsent", - "mount": "CookieConsent", - "category": "core", - "purpose": "Reusable cookie consent component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click", "change"], - "source": "components/CookieConsent.wrn" - }, - { - "name": "CookieDetailsTable", - "mount": "CookieDetailsTable", - "category": "data", - "purpose": "Reusable cookie details table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieDetailsTable.wrn" - }, - { - "name": "CookiePreferencesDialog", - "mount": "CookiePreferencesDialog", - "category": "overlays", - "purpose": "Reusable cookie preferences dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Cookie preferences\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Choose which optional cookies you allow. Essential cookies are always enabled.\"" - }, - { - "name": "saveLabel", - "type": "string", - "required": false, - "default": "\"Save preferences\"" - }, - { - "name": "acceptLabel", - "type": "string", - "required": false, - "default": "\"Accept all\"" - }, - { - "name": "rejectLabel", - "type": "string", - "required": false, - "default": "\"Reject optional\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["change", "click"], - "source": "components/CookiePreferencesDialog.wrn" - }, - { - "name": "CookieTable", - "mount": "CookieTable", - "category": "data", - "purpose": "Reusable cookie table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CookieTable.wrn" - }, - { - "name": "CoordinatesInput", - "mount": "CoordinatesInput", - "category": "forms", - "purpose": "Reusable coordinates input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Coordinates\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CoordinatesInput.wrn" - }, - { - "name": "CoordinatesPicker", - "mount": "CoordinatesPicker", - "category": "forms", - "purpose": "Reusable coordinates picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Coordinates\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CoordinatesPicker.wrn" - }, - { - "name": "CopyButton", - "mount": "CopyButton", - "category": "actions", - "purpose": "Reusable copy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CopyButton.wrn" - }, - { - "name": "CopyCodeButton", - "mount": "CopyCodeButton", - "category": "actions", - "purpose": "Reusable copy code button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CopyCodeButton.wrn" - }, - { - "name": "CopySecretField", - "mount": "CopySecretField", - "category": "forms", - "purpose": "Reusable copy secret field component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"CopySecret\"" + "default": "\"Copy Markup\"" }, { "name": "name", @@ -10707,10 +1964,22 @@ "default": "\"text\"" }, { - "name": "required", - "type": "boolean", + "name": "min", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "disabled", @@ -10719,66 +1988,7 @@ "default": "false" }, { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CopySecretField.wrn" - }, - { - "name": "CostBreakdownChart", - "mount": "CostBreakdownChart", - "category": "visualization", - "purpose": "Reusable cost breakdown chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -10790,57 +2000,45 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], - "source": "components/CostBreakdownChart.wrn" + "source": "components/CopyMarkup.wrn" }, { - "name": "CostSummary", - "mount": "CostSummary", - "category": "content", - "purpose": "Reusable cost summary component.", + "name": "CustomScrollbar", + "mount": "CustomScrollbar", + "category": "layout", + "purpose": "Theme-aware, responsive custom scrollbar component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { - "name": "description", - "type": "string", + "name": "columns", + "type": "number", "required": false, - "default": "\"\"" + "default": "2" }, { - "name": "href", + "name": "gap", "type": "string", "required": false, - "default": "\"\"" + "default": "\"md\"" }, { - "name": "actionLabel", + "name": "maxWidth", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"xl\"" }, { "name": "class", @@ -10851,19 +2049,43 @@ ], "slots": ["default"], "events": [], - "source": "components/CostSummary.wrn" + "source": "components/CustomScrollbar.wrn" }, { - "name": "Counter", - "mount": "Counter", - "category": "feedback", - "purpose": "Reusable counter component.", + "name": "DataMap", + "mount": "DataMap", + "category": "integrations", + "purpose": "Theme-aware, responsive data map component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Status\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Data Map\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" }, { "name": "variant", @@ -10880,1142 +2102,31 @@ ], "slots": ["default"], "events": [], - "source": "components/Counter.wrn" - }, - { - "name": "CountryCallingCodeInput", - "mount": "CountryCallingCodeInput", - "category": "forms", - "purpose": "Reusable country calling code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CountryCallingCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CountryCallingCodeInput.wrn" - }, - { - "name": "CountryCallingCodeSelector", - "mount": "CountryCallingCodeSelector", - "category": "forms", - "purpose": "Reusable country calling code selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CountryCallingCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CountryCallingCodeSelector.wrn" - }, - { - "name": "CountrySelector", - "mount": "CountrySelector", - "category": "forms", - "purpose": "Reusable country selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Country\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CountrySelector.wrn" - }, - { - "name": "CouponInput", - "mount": "CouponInput", - "category": "forms", - "purpose": "Reusable coupon input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Coupon\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CouponInput.wrn" - }, - { - "name": "CreditAmountInput", - "mount": "CreditAmountInput", - "category": "forms", - "purpose": "Reusable credit amount input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CreditAmount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CreditAmountInput.wrn" - }, - { - "name": "CronBuilder", - "mount": "CronBuilder", - "category": "content", - "purpose": "Reusable cron builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CronBuilder.wrn" - }, - { - "name": "CronInput", - "mount": "CronInput", - "category": "forms", - "purpose": "Reusable cron input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Cron\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CronInput.wrn" - }, - { - "name": "CsvUpload", - "mount": "CsvUpload", - "category": "content", - "purpose": "Reusable csv upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CsvUpload.wrn" - }, - { - "name": "CTASection", - "mount": "CTASection", - "category": "layout", - "purpose": "Reusable c t a section component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"Ready?\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Start building today\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Get started\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"Contact sales\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - } - ], - "slots": [], - "events": [], - "source": "components/CTASection.wrn" - }, - { - "name": "CurrencyInput", - "mount": "CurrencyInput", - "category": "forms", - "purpose": "Reusable currency input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Currency\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CurrencyInput.wrn" - }, - { - "name": "CurrencySelector", - "mount": "CurrencySelector", - "category": "forms", - "purpose": "Reusable currency selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Currency\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CurrencySelector.wrn" - }, - { - "name": "CurrentPasswordInput", - "mount": "CurrentPasswordInput", - "category": "forms", - "purpose": "Reusable current password input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"CurrentPassword\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CurrentPasswordInput.wrn" - }, - { - "name": "CustomerLogo", - "mount": "CustomerLogo", - "category": "content", - "purpose": "Reusable customer logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CustomerLogo.wrn" - }, - { - "name": "CustomerStoryCard", - "mount": "CustomerStoryCard", - "category": "content", - "purpose": "Reusable customer story card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/CustomerStoryCard.wrn" - }, - { - "name": "DangerButton", - "mount": "DangerButton", - "category": "actions", - "purpose": "Reusable danger button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DangerButton.wrn" - }, - { - "name": "DataProtectionCard", - "mount": "DataProtectionCard", - "category": "content", - "purpose": "Reusable data protection card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DataProtectionCard.wrn" - }, - { - "name": "DataRetentionTable", - "mount": "DataRetentionTable", - "category": "data", - "purpose": "Reusable data retention table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DataRetentionTable.wrn" + "source": "components/DataMap.wrn" }, { "name": "DataTable", "mount": "DataTable", - "category": "data", - "purpose": "Reusable data table component.", + "category": "integrations", + "purpose": "Theme-aware, responsive data table component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "caption", "type": "string", "required": false, - "default": "\"Data table\"" + "default": "\"Data Table\"" }, { "name": "columns", @@ -12029,17 +2140,11 @@ "required": false, "default": "[]" }, - { - "name": "emptyMessage", - "type": "string", - "required": false, - "default": "\"No data available.\"" - }, { "name": "striped", "type": "boolean", "required": false, - "default": "false" + "default": "true" }, { "name": "class", @@ -12048,27 +2153,33 @@ "default": "\"\"" } ], - "slots": [], + "slots": ["default"], "events": [], "source": "components/DataTable.wrn" }, { - "name": "DateInput", - "mount": "DateInput", - "category": "forms", - "purpose": "Reusable date input component.", + "name": "DatePicker", + "mount": "DatePicker", + "category": "base", + "purpose": "Theme-aware, responsive date picker component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Date Picker\"" }, { "name": "name", @@ -12076,12 +2187,6 @@ "required": false, "default": "\"\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Date\"" - }, { "name": "value", "type": "string", @@ -12095,82 +2200,11 @@ "default": "\"\"" }, { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DateInput.wrn" - }, - { - "name": "DatePicker", - "mount": "DatePicker", - "category": "forms", - "purpose": "Reusable date picker component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", + "name": "type", "type": "string", "required": false, "default": "\"date\"" }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"date\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Date\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "min", "type": "string", @@ -12183,11 +2217,29 @@ "required": false, "default": "\"\"" }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, { "name": "required", "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], @@ -12195,22 +2247,28 @@ "source": "components/DatePicker.wrn" }, { - "name": "DateRangeCalendar", - "mount": "DateRangeCalendar", - "category": "content", - "purpose": "Reusable date range calendar component.", + "name": "DeviceFrame", + "mount": "DeviceFrame", + "category": "base", + "purpose": "Theme-aware, responsive device frame component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Device Frame\"" }, { "name": "description", @@ -12219,28 +2277,16 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "actionLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -12251,60 +2297,72 @@ ], "slots": ["default"], "events": [], - "source": "components/DateRangeCalendar.wrn" + "source": "components/DeviceFrame.wrn" }, { - "name": "DateRangePicker", - "mount": "DateRangePicker", - "category": "forms", - "purpose": "Reusable date range picker component.", + "name": "Divider", + "mount": "Divider", + "category": "layout", + "purpose": "Theme-aware, responsive divider component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "label", "type": "string", "required": false, - "default": "\"Date range\"" + "default": "\"\"" }, { - "name": "startName", + "name": "orientation", "type": "string", "required": false, - "default": "\"startDate\"" + "default": "\"horizontal\"" }, { - "name": "endName", + "name": "class", "type": "string", "required": false, - "default": "\"endDate\"" + "default": "\"\"" } ], "slots": [], "events": [], - "source": "components/DateRangePicker.wrn" + "source": "components/Divider.wrn" }, { - "name": "DateRangeSlider", - "mount": "DateRangeSlider", - "category": "content", - "purpose": "Reusable date range slider component.", + "name": "DragAndDrop", + "mount": "DragAndDrop", + "category": "integrations", + "purpose": "Theme-aware, responsive drag and drop component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Drag And Drop\"" }, { "name": "description", @@ -12313,28 +2371,16 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { - "name": "actionLabel", + "name": "variant", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -12345,25 +2391,149 @@ ], "slots": ["default"], "events": [], - "source": "components/DateRangeSlider.wrn" + "source": "components/DragAndDrop.wrn" }, { - "name": "DateTimeInput", - "mount": "DateTimeInput", - "category": "forms", - "purpose": "Reusable date time input component.", + "name": "Drawer", + "mount": "Drawer", + "category": "overlays", + "purpose": "Theme-aware, responsive drawer component.", "props": [ { - "name": "class", + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Drawer\"" + }, + { + "name": "description", "type": "string", "required": false, "default": "\"\"" }, { - "name": "id", + "name": "open", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "closeLabel", + "type": "string", + "required": false, + "default": "\"Close\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Drawer.wrn" + }, + { + "name": "Dropdown", + "mount": "Dropdown", + "category": "overlays", + "purpose": "Theme-aware, responsive dropdown component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Dropdown\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "open", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "closeLabel", + "type": "string", + "required": false, + "default": "\"Close\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Dropdown.wrn" + }, + { + "name": "FileInput", + "mount": "FileInput", + "category": "forms", + "purpose": "Theme-aware, responsive file input component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"File Input\"" }, { "name": "name", @@ -12371,12 +2541,6 @@ "required": false, "default": "\"\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"DateTime\"" - }, { "name": "value", "type": "string", @@ -12390,75 +2554,10 @@ "default": "\"\"" }, { - "name": "help", + "name": "type", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DateTimeInput.wrn" - }, - { - "name": "DateTimePicker", - "mount": "DateTimePicker", - "category": "forms", - "purpose": "Reusable date time picker component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"datetime-picker\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"datetime\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Date and time\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"file\"" }, { "name": "min", @@ -12473,13 +2572,19 @@ "default": "\"\"" }, { - "name": "required", + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", "type": "boolean", "required": false, "default": "false" }, { - "name": "disabled", + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -12493,173 +2598,31 @@ ], "slots": [], "events": [], - "source": "components/DateTimePicker.wrn" + "source": "components/FileInput.wrn" }, { - "name": "DateTimeRangePicker", - "mount": "DateTimeRangePicker", - "category": "forms", - "purpose": "Reusable date time range picker component.", + "name": "FileUpload", + "mount": "FileUpload", + "category": "integrations", + "purpose": "Theme-aware, responsive file upload component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"DateTimeRange\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DateTimeRangePicker.wrn" - }, - { - "name": "DecimalInput", - "mount": "DecimalInput", - "category": "forms", - "purpose": "Reusable decimal input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Decimal\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DecimalInput.wrn" - }, - { - "name": "DefinitionList", - "mount": "DefinitionList", - "category": "data", - "purpose": "Reusable definition list component.", - "props": [ { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"File Upload\"" }, { "name": "description", @@ -12668,387 +2631,10 @@ "default": "\"\"" }, { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", + "name": "items", "type": "string", "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DefinitionList.wrn" - }, - { - "name": "DeleteConfirmationDialog", - "mount": "DeleteConfirmationDialog", - "category": "overlays", - "purpose": "Reusable delete confirmation dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeleteConfirmationDialog.wrn" - }, - { - "name": "DeliveryPreview", - "mount": "DeliveryPreview", - "category": "content", - "purpose": "Reusable delivery preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeliveryPreview.wrn" - }, - { - "name": "DeliveryStatusChart", - "mount": "DeliveryStatusChart", - "category": "visualization", - "purpose": "Reusable delivery status chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeliveryStatusChart.wrn" - }, - { - "name": "DeliveryStatusTimeline", - "mount": "DeliveryStatusTimeline", - "category": "visualization", - "purpose": "Reusable delivery status timeline component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeliveryStatusTimeline.wrn" - }, - { - "name": "DemoRequestForm", - "mount": "DemoRequestForm", - "category": "content", - "purpose": "Reusable demo request form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DemoRequestForm.wrn" - }, - { - "name": "DepartmentInput", - "mount": "DepartmentInput", - "category": "forms", - "purpose": "Reusable department input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Department\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DepartmentInput.wrn" - }, - { - "name": "DeprecatedFeatureAlert", - "mount": "DeprecatedFeatureAlert", - "category": "feedback", - "purpose": "Reusable deprecated feature alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"DeprecatedFeature\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -13065,4533 +2651,46 @@ ], "slots": ["default"], "events": [], - "source": "components/DeprecatedFeatureAlert.wrn" + "source": "components/FileUpload.wrn" }, { - "name": "DescriptionList", - "mount": "DescriptionList", - "category": "data", - "purpose": "Reusable description list component.", + "name": "FileUploadProgress", + "mount": "FileUploadProgress", + "category": "base", + "purpose": "Theme-aware, responsive file upload progress component.", "props": [ { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DescriptionList.wrn" - }, - { - "name": "DesktopNavigation", - "mount": "DesktopNavigation", - "category": "layout", - "purpose": "Reusable desktop navigation component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Primary navigation\"" - }, - { - "name": "items", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DesktopNavigation.wrn" - }, - { - "name": "DeveloperCTA", - "mount": "DeveloperCTA", - "category": "actions", - "purpose": "Reusable developer c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperCTA.wrn" - }, - { - "name": "DeveloperHero", - "mount": "DeveloperHero", - "category": "layout", - "purpose": "Reusable developer hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperHero.wrn" - }, - { - "name": "DeveloperPageShell", - "mount": "DeveloperPageShell", - "category": "layout", - "purpose": "Reusable developer page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperPageShell.wrn" - }, - { - "name": "DeveloperSearch", - "mount": "DeveloperSearch", - "category": "content", - "purpose": "Reusable developer search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeveloperSearch.wrn" - }, - { - "name": "DevelopersMegaMenu", - "mount": "DevelopersMegaMenu", - "category": "core", - "purpose": "Reusable developers mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/DevelopersMegaMenu.wrn" - }, - { - "name": "DevelopersMenu", - "mount": "DevelopersMenu", - "category": "overlays", - "purpose": "Reusable developers menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DevelopersMenu.wrn" - }, - { - "name": "DeviceCard", - "mount": "DeviceCard", - "category": "content", - "purpose": "Reusable device card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DeviceCard.wrn" - }, - { - "name": "disclosure", - "mount": "disclosure", - "category": "core", - "purpose": "Reusable disclosure component.", - "props": [ - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"Details\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/disclosure.wrn" - }, - { - "name": "DiscountInput", - "mount": "DiscountInput", - "category": "forms", - "purpose": "Reusable discount input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Discount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DiscountInput.wrn" - }, - { - "name": "DisplayHeading", - "mount": "DisplayHeading", - "category": "core", - "purpose": "Reusable display heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DisplayHeading.wrn" - }, - { - "name": "DisplayNameInput", - "mount": "DisplayNameInput", - "category": "forms", - "purpose": "Reusable display name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"DisplayName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DisplayNameInput.wrn" - }, - { - "name": "Divider", - "mount": "Divider", - "category": "core", - "purpose": "Reusable divider component.", - "props": [ - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Divider.wrn" - }, - { - "name": "DocumentPreview", - "mount": "DocumentPreview", - "category": "content", - "purpose": "Reusable document preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DocumentPreview.wrn" - }, - { - "name": "DocumentUpload", - "mount": "DocumentUpload", - "category": "content", - "purpose": "Reusable document upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DocumentUpload.wrn" - }, - { - "name": "DomainInput", - "mount": "DomainInput", - "category": "forms", - "purpose": "Reusable domain input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Domain\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DomainInput.wrn" - }, - { - "name": "DoNotSellLink", - "mount": "DoNotSellLink", - "category": "actions", - "purpose": "Reusable do not sell link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DoNotSellLink.wrn" - }, - { - "name": "DonutChart", - "mount": "DonutChart", - "category": "visualization", - "purpose": "Reusable donut chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DonutChart.wrn" - }, - { - "name": "DownloadAction", - "mount": "DownloadAction", - "category": "actions", - "purpose": "Reusable download action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadAction.wrn" - }, - { - "name": "DownloadButton", - "mount": "DownloadButton", - "category": "actions", - "purpose": "Reusable download button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadButton.wrn" - }, - { - "name": "DownloadGateForm", - "mount": "DownloadGateForm", - "category": "content", - "purpose": "Reusable download gate form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadGateForm.wrn" - }, - { - "name": "DownloadPolicyButton", - "mount": "DownloadPolicyButton", - "category": "actions", - "purpose": "Reusable download policy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadPolicyButton.wrn" - }, - { - "name": "DownloadResourceForm", - "mount": "DownloadResourceForm", - "category": "content", - "purpose": "Reusable download resource form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DownloadResourceForm.wrn" - }, - { - "name": "Drawer", - "mount": "Drawer", - "category": "core", - "purpose": "Reusable drawer component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Panel\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "side", - "type": "string", - "required": false, - "default": "\"right\"" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/Drawer.wrn" - }, - { - "name": "DropdownMenu", - "mount": "DropdownMenu", - "category": "overlays", - "purpose": "Reusable dropdown menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Menu\"" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/DropdownMenu.wrn" - }, - { - "name": "DropdownNavigation", - "mount": "DropdownNavigation", - "category": "layout", - "purpose": "Reusable dropdown navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DropdownNavigation.wrn" - }, - { - "name": "DurationInput", - "mount": "DurationInput", - "category": "forms", - "purpose": "Reusable duration input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Duration\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DurationInput.wrn" - }, - { - "name": "DurationPicker", - "mount": "DurationPicker", - "category": "forms", - "purpose": "Reusable duration picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Duration\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DurationPicker.wrn" - }, - { - "name": "DurationSlider", - "mount": "DurationSlider", - "category": "content", - "purpose": "Reusable duration slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/DurationSlider.wrn" - }, - { - "name": "ElevatedCard", - "mount": "ElevatedCard", - "category": "content", - "purpose": "Reusable elevated card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ElevatedCard.wrn" - }, - { - "name": "EmailBodyEditor", - "mount": "EmailBodyEditor", - "category": "forms", - "purpose": "Reusable email body editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"EmailBody\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EmailBodyEditor.wrn" - }, - { - "name": "EmailComposer", - "mount": "EmailComposer", - "category": "content", - "purpose": "Reusable email composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EmailComposer.wrn" - }, - { - "name": "EmailInput", - "mount": "EmailInput", - "category": "forms", - "purpose": "Reusable email input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Email\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"you@company.com\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"email\"" - } - ], - "slots": [], - "events": [], - "source": "components/EmailInput.wrn" - }, - { - "name": "EmojiPicker", - "mount": "EmojiPicker", - "category": "forms", - "purpose": "Reusable emoji picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Emoji\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EmojiPicker.wrn" - }, - { - "name": "EmptyState", - "mount": "EmptyState", - "category": "feedback", - "purpose": "Reusable empty state component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Nothing found\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"icon-[lucide--inbox]\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "suggestions", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": [], - "source": "components/EmptyState.wrn" - }, - { - "name": "EncryptionDiagram", - "mount": "EncryptionDiagram", - "category": "visualization", - "purpose": "Reusable encryption diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EncryptionDiagram.wrn" - }, - { - "name": "EnterpriseCTA", - "mount": "EnterpriseCTA", - "category": "actions", - "purpose": "Reusable enterprise c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnterpriseCTA.wrn" - }, - { - "name": "EnterpriseHero", - "mount": "EnterpriseHero", - "category": "layout", - "purpose": "Reusable enterprise hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnterpriseHero.wrn" - }, - { - "name": "EnterprisePricingCard", - "mount": "EnterprisePricingCard", - "category": "content", - "purpose": "Reusable enterprise pricing card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnterprisePricingCard.wrn" - }, - { - "name": "EnvironmentSelector", - "mount": "EnvironmentSelector", - "category": "forms", - "purpose": "Reusable environment selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Environment\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnvironmentSelector.wrn" - }, - { - "name": "EnvironmentSwitcher", - "mount": "EnvironmentSwitcher", - "category": "content", - "purpose": "Reusable environment switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EnvironmentSwitcher.wrn" - }, - { - "name": "ErrorActions", - "mount": "ErrorActions", - "category": "actions", - "purpose": "Reusable error actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorActions.wrn" - }, - { - "name": "ErrorCard", - "mount": "ErrorCard", - "category": "content", - "purpose": "Reusable error card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorCard.wrn" - }, - { - "name": "ErrorCode", - "mount": "ErrorCode", - "category": "content", - "purpose": "Reusable error code component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorCode.wrn" - }, - { - "name": "ErrorHero", - "mount": "ErrorHero", - "category": "layout", - "purpose": "Reusable error hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorHero.wrn" - }, - { - "name": "ErrorIllustration", - "mount": "ErrorIllustration", - "category": "content", - "purpose": "Reusable error illustration component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorIllustration.wrn" - }, - { - "name": "ErrorPage", - "mount": "ErrorPage", - "category": "content", - "purpose": "Reusable error page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorPage.wrn" - }, - { - "name": "ErrorPageShell", - "mount": "ErrorPageShell", - "category": "layout", - "purpose": "Reusable error page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorPageShell.wrn" - }, - { - "name": "ErrorState", - "mount": "ErrorState", - "category": "feedback", - "purpose": "Reusable error state component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"error\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Something went wrong\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "errorCode", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "retryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "retryAction", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "details", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": ["click"], - "source": "components/ErrorState.wrn" - }, - { - "name": "ErrorSupportLink", - "mount": "ErrorSupportLink", - "category": "actions", - "purpose": "Reusable error support link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ErrorSupportLink.wrn" - }, - { - "name": "EstimatedCostSummary", - "mount": "EstimatedCostSummary", - "category": "content", - "purpose": "Reusable estimated cost summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EstimatedCostSummary.wrn" - }, - { - "name": "EventTable", - "mount": "EventTable", - "category": "data", - "purpose": "Reusable event table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EventTable.wrn" - }, - { - "name": "ExpandableText", - "mount": "ExpandableText", - "category": "content", - "purpose": "Reusable expandable text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExpandableText.wrn" - }, - { - "name": "ExpiryDateTimePicker", - "mount": "ExpiryDateTimePicker", - "category": "forms", - "purpose": "Reusable expiry date time picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ExpiryDateTime\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExpiryDateTimePicker.wrn" - }, - { - "name": "ExportProgress", - "mount": "ExportProgress", - "category": "visualization", - "purpose": "Reusable export progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExportProgress.wrn" - }, - { - "name": "ExternalLink", - "mount": "ExternalLink", - "category": "actions", - "purpose": "Reusable external link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ExternalLink.wrn" - }, - { - "name": "EyebrowText", - "mount": "EyebrowText", - "category": "content", - "purpose": "Reusable eyebrow text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/EyebrowText.wrn" - }, - { - "name": "FactorCard", - "mount": "FactorCard", - "category": "content", - "purpose": "Reusable factor card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FactorCard.wrn" - }, - { - "name": "FallbackRouteBuilder", - "mount": "FallbackRouteBuilder", - "category": "content", - "purpose": "Reusable fallback route builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FallbackRouteBuilder.wrn" - }, - { - "name": "FallbackRouteDiagram", - "mount": "FallbackRouteDiagram", - "category": "visualization", - "purpose": "Reusable fallback route diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FallbackRouteDiagram.wrn" - }, - { - "name": "FAQ", - "mount": "FAQ", - "category": "core", - "purpose": "Reusable faq component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Frequently asked questions\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "items", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "allowMultiple", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "defaultOpenIndex", - "type": "number", - "required": false, - "default": "0" - } - ], - "slots": [], - "events": [], - "source": "components/FAQ.wrn" - }, - { - "name": "FAQAccordion", - "mount": "FAQAccordion", - "category": "core", - "purpose": "Reusable faqaccordion component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Frequently asked questions\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "items", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "allowMultiple", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "defaultOpenIndex", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "showContact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "contactText", - "type": "string", - "required": false, - "default": "\"Still have questions?\"" - }, - { - "name": "contactLabel", - "type": "string", - "required": false, - "default": "\"Contact support\"" - }, - { - "name": "contactHref", - "type": "string", - "required": false, - "default": "\"/support\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/FAQAccordion.wrn" - }, - { - "name": "FaviconUpload", - "mount": "FaviconUpload", - "category": "content", - "purpose": "Reusable favicon upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FaviconUpload.wrn" - }, - { - "name": "FaxInput", - "mount": "FaxInput", - "category": "forms", - "purpose": "Reusable fax input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Fax\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FaxInput.wrn" - }, - { - "name": "FeatureCard", - "mount": "FeatureCard", - "category": "content", - "purpose": "Reusable feature card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--sparkles]\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Feature\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/FeatureCard.wrn" - }, - { - "name": "FeatureChecklist", - "mount": "FeatureChecklist", - "category": "content", - "purpose": "Reusable feature checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureChecklist.wrn" - }, - { - "name": "FeatureComparisonTable", - "mount": "FeatureComparisonTable", - "category": "data", - "purpose": "Reusable feature comparison table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureComparisonTable.wrn" - }, - { - "name": "FeaturedBlogCard", - "mount": "FeaturedBlogCard", - "category": "content", - "purpose": "Reusable featured blog card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeaturedBlogCard.wrn" - }, - { - "name": "FeatureDetailsPanel", - "mount": "FeatureDetailsPanel", - "category": "layout", - "purpose": "Reusable feature details panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureDetailsPanel.wrn" - }, - { - "name": "FeatureGrid", - "mount": "FeatureGrid", - "category": "data", - "purpose": "Reusable feature grid component.", - "props": [ - { - "name": "columns", - "type": "number", - "required": false, - "default": "3" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureGrid.wrn" - }, - { - "name": "FeatureIconCard", - "mount": "FeatureIconCard", - "category": "content", - "purpose": "Reusable feature icon card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureIconCard.wrn" - }, - { - "name": "FeatureList", - "mount": "FeatureList", - "category": "data", - "purpose": "Reusable feature list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureList.wrn" - }, - { - "name": "FeatureTabs", - "mount": "FeatureTabs", - "category": "content", - "purpose": "Reusable feature tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureTabs.wrn" - }, - { - "name": "FeatureTimeline", - "mount": "FeatureTimeline", - "category": "visualization", - "purpose": "Reusable feature timeline component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureTimeline.wrn" - }, - { - "name": "FeatureUnavailableState", - "mount": "FeatureUnavailableState", - "category": "feedback", - "purpose": "Reusable feature unavailable state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FeatureUnavailable\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FeatureUnavailableState.wrn" - }, - { - "name": "FieldActions", - "mount": "FieldActions", - "category": "actions", - "purpose": "Reusable field actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", + "name": "label", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FieldActions.wrn" - }, - { - "name": "file-upload", - "mount": "file-upload", - "category": "core", - "purpose": "Reusable file-upload component.", - "props": [ - { - "name": "store", - "type": "string", - "required": false, - "default": "\"public\"" + "default": "\"Progress\"" }, { - "name": "endpoint", - "type": "string", + "name": "value", + "type": "number", "required": false, - "default": "\"/api/upload\"" - }, - { - "name": "accept", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "multiple", - "type": "boolean", - "required": false, - "default": "false" + "default": "50" }, { "name": "max", "type": "number", "required": false, - "default": "0" + "default": "100" }, { - "name": "label", - "type": "string", - "required": false, - "default": "\"Drag files here or click to browse\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/file-upload.wrn" - }, - { - "name": "FileInput", - "mount": "FileInput", - "category": "forms", - "purpose": "Reusable file input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"File\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileInput.wrn" - }, - { - "name": "FileList", - "mount": "FileList", - "category": "data", - "purpose": "Reusable file list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileList.wrn" - }, - { - "name": "FileSizeInput", - "mount": "FileSizeInput", - "category": "forms", - "purpose": "Reusable file size input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FileSize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileSizeInput.wrn" - }, - { - "name": "FileSizeLabel", - "mount": "FileSizeLabel", - "category": "content", - "purpose": "Reusable file size label component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileSizeLabel.wrn" - }, - { - "name": "FileTypeBadge", - "mount": "FileTypeBadge", - "category": "feedback", - "purpose": "Reusable file type badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FileType\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FileTypeBadge.wrn" - }, - { - "name": "FileUpload", - "mount": "FileUpload", - "category": "content", - "purpose": "Reusable file upload component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"file\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"file\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Upload file\"" - }, - { - "name": "accept", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "multiple", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"Drag and drop or browse\"" - } - ], - "slots": [], - "events": [], - "source": "components/FileUpload.wrn" - }, - { - "name": "FilterableTable", - "mount": "FilterableTable", - "category": "data", - "purpose": "Reusable filterable table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FilterableTable.wrn" - }, - { - "name": "FilterBar", - "mount": "FilterBar", - "category": "core", - "purpose": "Reusable filter bar component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Filters\"" - }, - { - "name": "clearLabel", - "type": "string", - "required": false, - "default": "\"Clear filters\"" - }, - { - "name": "showClear", + "name": "showValue", "type": "boolean", "required": false, "default": "true" @@ -17603,1936 +2702,48 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/FilterBar.wrn" - }, - { - "name": "FilterMenu", - "mount": "FilterMenu", - "category": "overlays", - "purpose": "Reusable filter menu component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FilterMenu.wrn" - }, - { - "name": "FilterSearchInput", - "mount": "FilterSearchInput", - "category": "forms", - "purpose": "Reusable filter search input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FilterSearch\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FilterSearchInput.wrn" - }, - { - "name": "FinalCTA", - "mount": "FinalCTA", - "category": "actions", - "purpose": "Reusable final c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Get started\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FinalCTA.wrn" - }, - { - "name": "FirstNameInput", - "mount": "FirstNameInput", - "category": "forms", - "purpose": "Reusable first name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FirstName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FirstNameInput.wrn" - }, - { - "name": "Flex", - "mount": "Flex", - "category": "core", - "purpose": "Reusable flex component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Flex.wrn" - }, - { - "name": "FontPicker", - "mount": "FontPicker", - "category": "forms", - "purpose": "Reusable font picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Font\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FontPicker.wrn" - }, - { - "name": "FontSizePicker", - "mount": "FontSizePicker", - "category": "forms", - "purpose": "Reusable font size picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FontSize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FontSizePicker.wrn" - }, - { - "name": "FontWeightPicker", - "mount": "FontWeightPicker", - "category": "forms", - "purpose": "Reusable font weight picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FontWeight\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FontWeightPicker.wrn" - }, - { - "name": "FooterLanguageSwitcher", - "mount": "FooterLanguageSwitcher", - "category": "content", - "purpose": "Reusable footer language switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FooterLanguageSwitcher.wrn" - }, - { - "name": "FooterStatusIndicator", - "mount": "FooterStatusIndicator", - "category": "feedback", - "purpose": "Reusable footer status indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"FooterStatus\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FooterStatusIndicator.wrn" - }, - { - "name": "ForbiddenPage", - "mount": "ForbiddenPage", - "category": "content", - "purpose": "Reusable forbidden page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ForbiddenPage.wrn" - }, - { - "name": "ForbiddenState", - "mount": "ForbiddenState", - "category": "feedback", - "purpose": "Reusable forbidden state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Forbidden\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ForbiddenState.wrn" - }, - { - "name": "ForgotPasswordForm", - "mount": "ForgotPasswordForm", - "category": "content", - "purpose": "Reusable forgot password form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ForgotPasswordForm.wrn" - }, - { - "name": "Form", - "mount": "Form", - "category": "content", - "purpose": "Reusable form component.", - "props": [ - { - "name": "action", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"post\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Form.wrn" - }, - { - "name": "FormActions", - "mount": "FormActions", - "category": "actions", - "purpose": "Reusable form actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormActions.wrn" - }, - { - "name": "FormAlert", - "mount": "FormAlert", - "category": "feedback", - "purpose": "Reusable form alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Form\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormAlert.wrn" - }, - { - "name": "FormDialog", - "mount": "FormDialog", - "category": "overlays", - "purpose": "Reusable form dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormDialog.wrn" - }, - { - "name": "FormError", - "mount": "FormError", - "category": "core", - "purpose": "Reusable form error component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "message", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormError.wrn" - }, - { - "name": "FormErrorSummary", - "mount": "FormErrorSummary", - "category": "content", - "purpose": "Reusable form error summary component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Please fix the following\"" - }, - { - "name": "visible", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormErrorSummary.wrn" - }, - { - "name": "FormField", - "mount": "FormField", - "category": "forms", - "purpose": "Reusable form field component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Field\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormField.wrn" - }, - { - "name": "FormGrid", - "mount": "FormGrid", - "category": "data", - "purpose": "Reusable form grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormGrid.wrn" - }, - { - "name": "FormGroup", - "mount": "FormGroup", - "category": "forms", - "purpose": "Reusable form group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Form\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormGroup.wrn" - }, - { - "name": "FormHelpText", - "mount": "FormHelpText", - "category": "content", - "purpose": "Reusable form help text component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormHelpText.wrn" - }, - { - "name": "FormLabel", - "mount": "FormLabel", - "category": "content", - "purpose": "Reusable form label component.", - "props": [ - { - "name": "for", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Label\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "optional", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], "slots": [], "events": [], - "source": "components/FormLabel.wrn" - }, - { - "name": "FormProgress", - "mount": "FormProgress", - "category": "visualization", - "purpose": "Reusable form progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormProgress.wrn" - }, - { - "name": "FormRow", - "mount": "FormRow", - "category": "data", - "purpose": "Reusable form row component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormRow.wrn" - }, - { - "name": "FormSection", - "mount": "FormSection", - "category": "layout", - "purpose": "Reusable form section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FormSection.wrn" - }, - { - "name": "FullBleed", - "mount": "FullBleed", - "category": "core", - "purpose": "Reusable full bleed component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FullBleed.wrn" - }, - { - "name": "FullscreenDialog", - "mount": "FullscreenDialog", - "category": "overlays", - "purpose": "Reusable fullscreen dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FullscreenDialog.wrn" - }, - { - "name": "FunnelChart", - "mount": "FunnelChart", - "category": "visualization", - "purpose": "Reusable funnel chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/FunnelChart.wrn" - }, - { - "name": "GeoChart", - "mount": "GeoChart", - "category": "visualization", - "purpose": "Reusable geo chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GeoChart.wrn" - }, - { - "name": "GeofenceEditor", - "mount": "GeofenceEditor", - "category": "forms", - "purpose": "Reusable geofence editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Geofence\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GeofenceEditor.wrn" - }, - { - "name": "GhostButton", - "mount": "GhostButton", - "category": "actions", - "purpose": "Reusable ghost button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GhostButton.wrn" - }, - { - "name": "GlassCard", - "mount": "GlassCard", - "category": "content", - "purpose": "Reusable glass card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GlassCard.wrn" - }, - { - "name": "GlobalSearch", - "mount": "GlobalSearch", - "category": "content", - "purpose": "Reusable global search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GlobalSearch.wrn" - }, - { - "name": "GradientCTA", - "mount": "GradientCTA", - "category": "actions", - "purpose": "Reusable gradient c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GradientCTA.wrn" - }, - { - "name": "GradientPicker", - "mount": "GradientPicker", - "category": "forms", - "purpose": "Reusable gradient picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Gradient\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GradientPicker.wrn" - }, - { - "name": "GradientStopEditor", - "mount": "GradientStopEditor", - "category": "forms", - "purpose": "Reusable gradient stop editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"GradientStop\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GradientStopEditor.wrn" + "source": "components/FileUploadProgress.wrn" }, { "name": "Grid", "mount": "Grid", - "category": "data", - "purpose": "Reusable grid component.", + "category": "layout", + "purpose": "Theme-aware, responsive grid component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, { "name": "gap", "type": "string", "required": false, - "default": "\"4\"" + "default": "\"md\"" }, { - "name": "className", + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" + }, + { + "name": "class", "type": "string", "required": false, "default": "\"\"" @@ -19543,584 +2754,25 @@ "source": "components/Grid.wrn" }, { - "name": "GuideCard", - "mount": "GuideCard", - "category": "content", - "purpose": "Reusable guide card component.", + "name": "Image", + "mount": "Image", + "category": "layout", + "purpose": "Theme-aware, responsive image component.", "props": [ { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideCard.wrn" - }, - { - "name": "GuideChecklist", - "mount": "GuideChecklist", - "category": "content", - "purpose": "Reusable guide checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideChecklist.wrn" - }, - { - "name": "GuideDifficultyBadge", - "mount": "GuideDifficultyBadge", - "category": "feedback", - "purpose": "Reusable guide difficulty badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"GuideDifficulty\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideDifficultyBadge.wrn" - }, - { - "name": "GuideGrid", - "mount": "GuideGrid", - "category": "data", - "purpose": "Reusable guide grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideGrid.wrn" - }, - { - "name": "GuideStep", - "mount": "GuideStep", - "category": "content", - "purpose": "Reusable guide step component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/GuideStep.wrn" - }, - { - "name": "Header", - "mount": "Header", - "category": "layout", - "purpose": "Reusable header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Header.wrn" - }, - { - "name": "HeaderActions", - "mount": "HeaderActions", - "category": "actions", - "purpose": "Reusable header actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeaderActions.wrn" - }, - { - "name": "HealthIndicator", - "mount": "HealthIndicator", - "category": "feedback", - "purpose": "Reusable health indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Health\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HealthIndicator.wrn" - }, - { - "name": "Hero", - "mount": "Hero", - "category": "layout", - "purpose": "Reusable hero component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Build faster with WRNexusJS\"" - }, - { - "name": "highlight", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Get started\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"#\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"center\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Hero.wrn" - }, - { - "name": "HeroActions", - "mount": "HeroActions", - "category": "actions", - "purpose": "Reusable hero actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroActions.wrn" - }, - { - "name": "HeroCodePanel", - "mount": "HeroCodePanel", - "category": "layout", - "purpose": "Reusable hero code panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroCodePanel.wrn" - }, - { - "name": "HeroGradientText", - "mount": "HeroGradientText", - "category": "content", - "purpose": "Reusable hero gradient text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", + "name": "src", "type": "string", "required": false, "default": "\"\"" @@ -20132,1631 +2784,25 @@ "default": "\"\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroGradientText.wrn" - }, - { - "name": "HeroPrimaryAction", - "mount": "HeroPrimaryAction", - "category": "actions", - "purpose": "Reusable hero primary action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroPrimaryAction.wrn" - }, - { - "name": "HeroProductPreview", - "mount": "HeroProductPreview", - "category": "content", - "purpose": "Reusable hero product preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroProductPreview.wrn" - }, - { - "name": "HeroSecondaryAction", - "mount": "HeroSecondaryAction", - "category": "actions", - "purpose": "Reusable hero secondary action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroSecondaryAction.wrn" - }, - { - "name": "HeroTrustText", - "mount": "HeroTrustText", - "category": "content", - "purpose": "Reusable hero trust text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HeroTrustText.wrn" - }, - { - "name": "HexColorInput", - "mount": "HexColorInput", - "category": "forms", - "purpose": "Reusable hex color input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"HexColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HexColorInput.wrn" - }, - { - "name": "HiddenField", - "mount": "HiddenField", - "category": "forms", - "purpose": "Reusable hidden field component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Hidden\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HiddenField.wrn" - }, - { - "name": "HighlightText", - "mount": "HighlightText", - "category": "content", - "purpose": "Reusable highlight text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HighlightText.wrn" - }, - { - "name": "HolidayCalendar", - "mount": "HolidayCalendar", - "category": "content", - "purpose": "Reusable holiday calendar component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HolidayCalendar.wrn" - }, - { - "name": "HostnameInput", - "mount": "HostnameInput", - "category": "forms", - "purpose": "Reusable hostname input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Hostname\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HostnameInput.wrn" - }, - { - "name": "HourPicker", - "mount": "HourPicker", - "category": "forms", - "purpose": "Reusable hour picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Hour\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HourPicker.wrn" - }, - { - "name": "HslColorInput", - "mount": "HslColorInput", - "category": "forms", - "purpose": "Reusable hsl color input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"HslColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HslColorInput.wrn" - }, - { - "name": "hstack", - "mount": "hstack", - "category": "core", - "purpose": "Reusable hstack component.", - "props": [ - { - "name": "gap", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"center\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/hstack.wrn" - }, - { - "name": "HtmlEditor", - "mount": "HtmlEditor", - "category": "forms", - "purpose": "Reusable html editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Html\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HtmlEditor.wrn" - }, - { - "name": "HumanApprovalStep", - "mount": "HumanApprovalStep", - "category": "content", - "purpose": "Reusable human approval step component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/HumanApprovalStep.wrn" - }, - { - "name": "Icon", - "mount": "Icon", - "category": "content", - "purpose": "Reusable icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Icon.wrn" - }, - { - "name": "IconButton", - "mount": "IconButton", - "category": "actions", - "purpose": "Reusable icon button component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"•\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"ghost\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": [], - "events": [], - "source": "components/IconButton.wrn" - }, - { - "name": "IconPicker", - "mount": "IconPicker", - "category": "forms", - "purpose": "Reusable icon picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Icon\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IconPicker.wrn" - }, - { - "name": "IconSelector", - "mount": "IconSelector", - "category": "forms", - "purpose": "Reusable icon selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Icon\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IconSelector.wrn" - }, - { - "name": "IdentifierInput", - "mount": "IdentifierInput", - "category": "forms", - "purpose": "Reusable identifier input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Identifier\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IdentifierInput.wrn" - }, - { - "name": "Illustration", - "mount": "Illustration", - "category": "content", - "purpose": "Reusable illustration component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Illustration.wrn" - }, - { - "name": "ImageCompressionPreview", - "mount": "ImageCompressionPreview", - "category": "content", - "purpose": "Reusable image compression preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageCompressionPreview.wrn" - }, - { - "name": "ImageEditor", - "mount": "ImageEditor", - "category": "forms", - "purpose": "Reusable image editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Image\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageEditor.wrn" - }, - { - "name": "ImagePreviewDialog", - "mount": "ImagePreviewDialog", - "category": "overlays", - "purpose": "Reusable image preview dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImagePreviewDialog.wrn" - }, - { - "name": "ImageSelector", - "mount": "ImageSelector", - "category": "forms", - "purpose": "Reusable image selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Image\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageSelector.wrn" - }, - { - "name": "ImageUpload", - "mount": "ImageUpload", - "category": "content", - "purpose": "Reusable image upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ImageUpload.wrn" - }, - { - "name": "ImportProgress", - "mount": "ImportProgress", - "category": "visualization", - "purpose": "Reusable import progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", + "name": "width", "type": "string", "required": false, "default": "\"\"" }, { - "name": "summary", + "name": "height", "type": "string", "required": false, "default": "\"\"" }, { "name": "loading", + "type": "string", + "required": false, + "default": "\"lazy\"" + }, + { + "name": "rounded", "type": "boolean", "required": false, "default": "false" @@ -21770,648 +2816,26 @@ ], "slots": ["default"], "events": [], - "source": "components/ImportProgress.wrn" + "source": "components/Image.wrn" }, { - "name": "IncidentAlert", - "mount": "IncidentAlert", - "category": "feedback", - "purpose": "Reusable incident alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Incident\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentAlert.wrn" - }, - { - "name": "IncidentBanner", - "mount": "IncidentBanner", - "category": "feedback", - "purpose": "Reusable incident banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Incident\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentBanner.wrn" - }, - { - "name": "IncidentCard", - "mount": "IncidentCard", - "category": "content", - "purpose": "Reusable incident card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentCard.wrn" - }, - { - "name": "IncidentList", - "mount": "IncidentList", - "category": "data", - "purpose": "Reusable incident list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentList.wrn" - }, - { - "name": "IncidentResponseFlow", - "mount": "IncidentResponseFlow", - "category": "visualization", - "purpose": "Reusable incident response flow component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentResponseFlow.wrn" - }, - { - "name": "IncidentSeverityBadge", - "mount": "IncidentSeverityBadge", - "category": "feedback", - "purpose": "Reusable incident severity badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"IncidentSeverity\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentSeverityBadge.wrn" - }, - { - "name": "IncidentTimeline", - "mount": "IncidentTimeline", - "category": "visualization", - "purpose": "Reusable incident timeline component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IncidentTimeline.wrn" - }, - { - "name": "IndustryBadge", - "mount": "IndustryBadge", - "category": "feedback", - "purpose": "Reusable industry badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Industry\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IndustryBadge.wrn" - }, - { - "name": "IndustrySelector", - "mount": "IndustrySelector", + "name": "Input", + "mount": "Input", "category": "forms", - "purpose": "Reusable industry selector component.", + "purpose": "Theme-aware, responsive input component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Industry\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IndustrySelector.wrn" - }, - { - "name": "InfoCard", - "mount": "InfoCard", - "category": "content", - "purpose": "Reusable info card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InfoCard.wrn" - }, - { - "name": "Inline", - "mount": "Inline", - "category": "core", - "purpose": "Reusable inline component.", - "props": [ - { - "name": "gap", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Inline.wrn" - }, - { - "name": "InlineAlert", - "mount": "InlineAlert", - "category": "feedback", - "purpose": "Reusable inline alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Inline\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InlineAlert.wrn" - }, - { - "name": "InlineCode", - "mount": "InlineCode", - "category": "content", - "purpose": "Reusable inline code component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InlineCode.wrn" - }, - { - "name": "input", - "mount": "input", - "category": "core", - "purpose": "Reusable input component.", - "props": [ - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/input.wrn" - }, - { - "name": "InputGroup", - "mount": "InputGroup", - "category": "forms", - "purpose": "Reusable input group component.", - "props": [ { "name": "label", "type": "string", @@ -22443,10 +2867,22 @@ "default": "\"text\"" }, { - "name": "required", - "type": "boolean", + "name": "min", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "disabled", @@ -22455,23 +2891,11 @@ "default": "false" }, { - "name": "readonly", + "name": "required", "type": "boolean", "required": false, "default": "false" }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "class", "type": "string", @@ -22479,1670 +2903,33 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], - "source": "components/InputGroup.wrn" + "source": "components/Input.wrn" }, { - "name": "InsetPanel", - "mount": "InsetPanel", - "category": "layout", - "purpose": "Reusable inset panel component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InsetPanel.wrn" - }, - { - "name": "IntegerInput", - "mount": "IntegerInput", + "name": "InputGroup", + "mount": "InputGroup", "category": "forms", - "purpose": "Reusable integer input component.", + "purpose": "Theme-aware, responsive input group component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Integer\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IntegerInput.wrn" - }, - { - "name": "IntegrationCard", - "mount": "IntegrationCard", - "category": "content", - "purpose": "Reusable integration card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--plug-zap]\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IntegrationCard.wrn" - }, - { - "name": "InvoiceLineItem", - "mount": "InvoiceLineItem", - "category": "content", - "purpose": "Reusable invoice line item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InvoiceLineItem.wrn" - }, - { - "name": "InvoiceSummary", - "mount": "InvoiceSummary", - "category": "content", - "purpose": "Reusable invoice summary component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/InvoiceSummary.wrn" - }, - { - "name": "IpAddressInput", - "mount": "IpAddressInput", - "category": "forms", - "purpose": "Reusable ip address input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"IpAddress\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/IpAddressInput.wrn" - }, - { - "name": "JobCard", - "mount": "JobCard", - "category": "content", - "purpose": "Reusable job card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JobCard.wrn" - }, - { - "name": "JobProgress", - "mount": "JobProgress", - "category": "visualization", - "purpose": "Reusable job progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JobProgress.wrn" - }, - { - "name": "JobTitleInput", - "mount": "JobTitleInput", - "category": "forms", - "purpose": "Reusable job title input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"JobTitle\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JobTitleInput.wrn" - }, - { - "name": "JsonInput", - "mount": "JsonInput", - "category": "forms", - "purpose": "Reusable json input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Json\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JsonInput.wrn" - }, - { - "name": "JsonViewer", - "mount": "JsonViewer", - "category": "content", - "purpose": "Reusable json viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/JsonViewer.wrn" - }, - { - "name": "KeyValueTable", - "mount": "KeyValueTable", - "category": "data", - "purpose": "Reusable key value table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/KeyValueTable.wrn" - }, - { - "name": "KycDocumentUpload", - "mount": "KycDocumentUpload", - "category": "content", - "purpose": "Reusable kyc document upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/KycDocumentUpload.wrn" - }, - { - "name": "LanguageSelector", - "mount": "LanguageSelector", - "category": "forms", - "purpose": "Reusable language selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Language\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LanguageSelector.wrn" - }, - { - "name": "LanguageSwitcher", - "mount": "LanguageSwitcher", - "category": "content", - "purpose": "Reusable language switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LanguageSwitcher.wrn" - }, - { - "name": "LastNameInput", - "mount": "LastNameInput", - "category": "forms", - "purpose": "Reusable last name input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LastName\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LastNameInput.wrn" - }, - { - "name": "LatencyMetric", - "mount": "LatencyMetric", - "category": "visualization", - "purpose": "Reusable latency metric component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LatencyMetric.wrn" - }, - { - "name": "LatitudeInput", - "mount": "LatitudeInput", - "category": "forms", - "purpose": "Reusable latitude input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Latitude\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LatitudeInput.wrn" - }, - { - "name": "LeadershipGrid", - "mount": "LeadershipGrid", - "category": "data", - "purpose": "Reusable leadership grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LeadershipGrid.wrn" - }, - { - "name": "LeadText", - "mount": "LeadText", - "category": "content", - "purpose": "Reusable lead text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LeadText.wrn" - }, - { - "name": "LegalAcceptanceNotice", - "mount": "LegalAcceptanceNotice", - "category": "feedback", - "purpose": "Reusable legal acceptance notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LegalAcceptance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalAcceptanceNotice.wrn" - }, - { - "name": "LegalBulletList", - "mount": "LegalBulletList", - "category": "data", - "purpose": "Reusable legal bullet list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalBulletList.wrn" - }, - { - "name": "LegalContactBlock", - "mount": "LegalContactBlock", - "category": "content", - "purpose": "Reusable legal contact block component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalContactBlock.wrn" - }, - { - "name": "LegalDefinitionList", - "mount": "LegalDefinitionList", - "category": "data", - "purpose": "Reusable legal definition list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalDefinitionList.wrn" - }, - { - "name": "LegalDocumentHeader", - "mount": "LegalDocumentHeader", - "category": "layout", - "purpose": "Reusable legal document header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalDocumentHeader.wrn" - }, - { - "name": "LegalDocumentLayout", - "mount": "LegalDocumentLayout", - "category": "layout", - "purpose": "Reusable legal document layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Legal document\"" - }, - { - "name": "effectiveDate", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "updatedDate", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["toc", "default"], - "events": [], - "source": "components/LegalDocumentLayout.wrn" - }, - { - "name": "LegalHero", - "mount": "LegalHero", - "category": "layout", - "purpose": "Reusable legal hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalHero.wrn" - }, - { - "name": "LegalLanguageSelector", - "mount": "LegalLanguageSelector", - "category": "forms", - "purpose": "Reusable legal language selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LegalLanguage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalLanguageSelector.wrn" - }, - { - "name": "LegalNotice", - "mount": "LegalNotice", - "category": "feedback", - "purpose": "Reusable legal notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Legal\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalNotice.wrn" - }, - { - "name": "LegalPageShell", - "mount": "LegalPageShell", - "category": "layout", - "purpose": "Reusable legal page shell component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["navigation", "default"], - "events": [], - "source": "components/LegalPageShell.wrn" - }, - { - "name": "LegalPrintButton", - "mount": "LegalPrintButton", - "category": "actions", - "purpose": "Reusable legal print button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalPrintButton.wrn" - }, - { - "name": "LegalRegionSelector", - "mount": "LegalRegionSelector", - "category": "forms", - "purpose": "Reusable legal region selector component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"LegalRegion\"" + "default": "\"Input Group\"" }, { "name": "name", @@ -24169,10 +2956,22 @@ "default": "\"text\"" }, { - "name": "required", - "type": "boolean", + "name": "min", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "disabled", @@ -24181,23 +2980,11 @@ "default": "false" }, { - "name": "readonly", + "name": "required", "type": "boolean", "required": false, "default": "false" }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "class", "type": "string", @@ -24205,39 +2992,122 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], - "source": "components/LegalRegionSelector.wrn" + "source": "components/InputGroup.wrn" }, { - "name": "LegalSection", - "mount": "LegalSection", + "name": "InputNumber", + "mount": "InputNumber", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive input number component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Input Number\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"number\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/InputNumber.wrn" + }, + { + "name": "Kbd", + "mount": "Kbd", "category": "layout", - "purpose": "Reusable legal section component.", + "purpose": "Theme-aware, responsive kbd component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { - "name": "description", + "name": "label", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" + "default": "\"⌘ K\"" }, { "name": "class", @@ -24248,55 +3118,43 @@ ], "slots": ["default"], "events": [], - "source": "components/LegalSection.wrn" + "source": "components/Kbd.wrn" }, { - "name": "LegalSummary", - "mount": "LegalSummary", - "category": "content", - "purpose": "Reusable legal summary component.", + "name": "LayoutSplitter", + "mount": "LayoutSplitter", + "category": "layout", + "purpose": "Theme-aware, responsive layout splitter component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { - "name": "description", - "type": "string", + "name": "columns", + "type": "number", "required": false, - "default": "\"\"" + "default": "2" }, { - "name": "href", + "name": "gap", "type": "string", "required": false, - "default": "\"\"" + "default": "\"md\"" }, { - "name": "actionLabel", + "name": "maxWidth", "type": "string", "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"xl\"" }, { "name": "class", @@ -24307,19 +3165,31 @@ ], "slots": ["default"], "events": [], - "source": "components/LegalSummary.wrn" + "source": "components/LayoutSplitter.wrn" }, { - "name": "LegalTable", - "mount": "LegalTable", - "category": "data", - "purpose": "Reusable legal table component.", + "name": "LegendIndicator", + "mount": "LegendIndicator", + "category": "base", + "purpose": "Theme-aware, responsive legend indicator component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Legend Indicator\"" }, { "name": "description", @@ -24327,88 +3197,12 @@ "required": false, "default": "\"\"" }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LegalTable.wrn" - }, - { - "name": "LegalTableOfContents", - "mount": "LegalTableOfContents", - "category": "core", - "purpose": "Reusable legal table of contents component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"On this page\"" - }, { "name": "items", "type": "string", "required": false, "default": "[]" }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/LegalTableOfContents.wrn" - }, - { - "name": "LegalVersionBadge", - "mount": "LegalVersionBadge", - "category": "feedback", - "purpose": "Reusable legal version badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LegalVersion\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "variant", "type": "string", @@ -24424,338 +3218,25 @@ ], "slots": ["default"], "events": [], - "source": "components/LegalVersionBadge.wrn" - }, - { - "name": "LetterSpacingPicker", - "mount": "LetterSpacingPicker", - "category": "forms", - "purpose": "Reusable letter spacing picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LetterSpacing\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LetterSpacingPicker.wrn" - }, - { - "name": "LicenseKeyInput", - "mount": "LicenseKeyInput", - "category": "forms", - "purpose": "Reusable license key input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LicenseKey\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LicenseKeyInput.wrn" - }, - { - "name": "Lightbox", - "mount": "Lightbox", - "category": "overlays", - "purpose": "Reusable lightbox component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Lightbox.wrn" - }, - { - "name": "LineChart", - "mount": "LineChart", - "category": "visualization", - "purpose": "Reusable line chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LineChart.wrn" - }, - { - "name": "LineHeightPicker", - "mount": "LineHeightPicker", - "category": "forms", - "purpose": "Reusable line height picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"LineHeight\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LineHeightPicker.wrn" + "source": "components/LegendIndicator.wrn" }, { "name": "Link", "mount": "Link", - "category": "core", - "purpose": "Reusable link component.", + "category": "layout", + "purpose": "Theme-aware, responsive link component.", "props": [ { - "name": "href", + "name": "size", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "label", @@ -24764,42 +3245,25 @@ "default": "\"Link\"" }, { - "name": "external", - "type": "boolean", + "name": "href", + "type": "string", "required": false, - "default": "false" + "default": "\"#\"" }, { - "name": "className", + "name": "target", "type": "string", "required": false, "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/Link.wrn" - }, - { - "name": "LinkButton", - "mount": "LinkButton", - "category": "actions", - "purpose": "Reusable link button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" }, { - "name": "type", + "name": "rel", "type": "string", "required": false, - "default": "\"button\"" + "default": "\"\"" }, { - "name": "disabled", + "name": "external", "type": "boolean", "required": false, "default": "false" @@ -24813,19 +3277,31 @@ ], "slots": ["default"], "events": [], - "source": "components/LinkButton.wrn" + "source": "components/Link.wrn" }, { "name": "List", "mount": "List", - "category": "data", - "purpose": "Reusable list component.", + "category": "base", + "purpose": "Theme-aware, responsive list component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"List\"" }, { "name": "description", @@ -24834,16 +3310,16 @@ "default": "\"\"" }, { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", + "name": "items", "type": "string", "required": false, - "default": "\"No items available.\"" + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" }, { "name": "class", @@ -24857,276 +3333,28 @@ "source": "components/List.wrn" }, { - "name": "LoadingButton", - "mount": "LoadingButton", - "category": "actions", - "purpose": "Reusable loading button component.", + "name": "ListGroup", + "mount": "ListGroup", + "category": "base", + "purpose": "Theme-aware, responsive list group component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Continue\"" + "default": "\"default\"" }, { - "name": "loadingLabel", - "type": "string", - "required": false, - "default": "\"Loading…\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/LoadingButton.wrn" - }, - { - "name": "LocaleSelector", - "mount": "LocaleSelector", - "category": "forms", - "purpose": "Reusable locale selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Locale\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LocaleSelector.wrn" - }, - { - "name": "LocalizedRouteLink", - "mount": "LocalizedRouteLink", - "category": "actions", - "purpose": "Reusable localized route link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LocalizedRouteLink.wrn" - }, - { - "name": "LocationPicker", - "mount": "LocationPicker", - "category": "forms", - "purpose": "Reusable location picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Location\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LocationPicker.wrn" - }, - { - "name": "Logo", - "mount": "Logo", - "category": "content", - "purpose": "Reusable logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"List Group\"" }, { "name": "description", @@ -25134,1945 +3362,6 @@ "required": false, "default": "\"\"" }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Logo.wrn" - }, - { - "name": "LogoCloud", - "mount": "LogoCloud", - "category": "core", - "purpose": "Reusable logo cloud component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Trusted by teams building modern products\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "logos", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"strip\"" - }, - { - "name": "grayscale", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showNames", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "maxItems", - "type": "number", - "required": false, - "default": "8" - } - ], - "slots": [], - "events": [], - "source": "components/LogoCloud.wrn" - }, - { - "name": "LogoUpload", - "mount": "LogoUpload", - "category": "content", - "purpose": "Reusable logo upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LogoUpload.wrn" - }, - { - "name": "LogoutDialog", - "mount": "LogoutDialog", - "category": "overlays", - "purpose": "Reusable logout dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LogoutDialog.wrn" - }, - { - "name": "LogTable", - "mount": "LogTable", - "category": "data", - "purpose": "Reusable log table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LogTable.wrn" - }, - { - "name": "LongitudeInput", - "mount": "LongitudeInput", - "category": "forms", - "purpose": "Reusable longitude input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Longitude\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/LongitudeInput.wrn" - }, - { - "name": "MaintenanceAlert", - "mount": "MaintenanceAlert", - "category": "feedback", - "purpose": "Reusable maintenance alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Maintenance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceAlert.wrn" - }, - { - "name": "MaintenanceBanner", - "mount": "MaintenanceBanner", - "category": "feedback", - "purpose": "Reusable maintenance banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Maintenance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceBanner.wrn" - }, - { - "name": "MaintenanceCard", - "mount": "MaintenanceCard", - "category": "content", - "purpose": "Reusable maintenance card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceCard.wrn" - }, - { - "name": "MaintenancePage", - "mount": "MaintenancePage", - "category": "content", - "purpose": "Reusable maintenance page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenancePage.wrn" - }, - { - "name": "MaintenanceState", - "mount": "MaintenanceState", - "category": "feedback", - "purpose": "Reusable maintenance state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Maintenance\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceState.wrn" - }, - { - "name": "MaintenanceWindowPicker", - "mount": "MaintenanceWindowPicker", - "category": "forms", - "purpose": "Reusable maintenance window picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MaintenanceWindow\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaintenanceWindowPicker.wrn" - }, - { - "name": "MapPicker", - "mount": "MapPicker", - "category": "forms", - "purpose": "Reusable map picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Map\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MapPicker.wrn" - }, - { - "name": "MarkdownEditor", - "mount": "MarkdownEditor", - "category": "forms", - "purpose": "Reusable markdown editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Markdown\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MarkdownEditor.wrn" - }, - { - "name": "MarketingPageShell", - "mount": "MarketingPageShell", - "category": "layout", - "purpose": "Reusable marketing page shell component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MarketingPageShell.wrn" - }, - { - "name": "MarketingSectionHeader", - "mount": "MarketingSectionHeader", - "category": "layout", - "purpose": "Reusable marketing section header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MarketingSectionHeader.wrn" - }, - { - "name": "MaskedSecretField", - "mount": "MaskedSecretField", - "category": "forms", - "purpose": "Reusable masked secret field component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MaskedSecret\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MaskedSecretField.wrn" - }, - { - "name": "MegaMenu", - "mount": "MegaMenu", - "category": "overlays", - "purpose": "Reusable mega menu component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Explore\"" - }, - { - "name": "sections", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/MegaMenu.wrn" - }, - { - "name": "MemberList", - "mount": "MemberList", - "category": "data", - "purpose": "Reusable member list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MemberList.wrn" - }, - { - "name": "MentionInput", - "mount": "MentionInput", - "category": "forms", - "purpose": "Reusable mention input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Mention\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MentionInput.wrn" - }, - { - "name": "MessageCharacterCounter", - "mount": "MessageCharacterCounter", - "category": "feedback", - "purpose": "Reusable message character counter component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MessageCharacter\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageCharacterCounter.wrn" - }, - { - "name": "MessageComposer", - "mount": "MessageComposer", - "category": "content", - "purpose": "Reusable message composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageComposer.wrn" - }, - { - "name": "MessageComposerPreview", - "mount": "MessageComposerPreview", - "category": "content", - "purpose": "Reusable message composer preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageComposerPreview.wrn" - }, - { - "name": "MessageLimitInput", - "mount": "MessageLimitInput", - "category": "forms", - "purpose": "Reusable message limit input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MessageLimit\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageLimitInput.wrn" - }, - { - "name": "MessagePreview", - "mount": "MessagePreview", - "category": "content", - "purpose": "Reusable message preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessagePreview.wrn" - }, - { - "name": "MessageVolumeSlider", - "mount": "MessageVolumeSlider", - "category": "content", - "purpose": "Reusable message volume slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MessageVolumeSlider.wrn" - }, - { - "name": "Metric", - "mount": "Metric", - "category": "visualization", - "purpose": "Reusable metric component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Metric.wrn" - }, - { - "name": "MetricCard", - "mount": "MetricCard", - "category": "content", - "purpose": "Reusable metric card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MetricCard.wrn" - }, - { - "name": "MetricGrid", - "mount": "MetricGrid", - "category": "data", - "purpose": "Reusable metric grid component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Platform metrics\"" - }, - { - "name": "metrics", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "columns", - "type": "number", - "required": false, - "default": "4" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/MetricGrid.wrn" - }, - { - "name": "MetricText", - "mount": "MetricText", - "category": "content", - "purpose": "Reusable metric text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MetricText.wrn" - }, - { - "name": "MinutePicker", - "mount": "MinutePicker", - "category": "forms", - "purpose": "Reusable minute picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Minute\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MinutePicker.wrn" - }, - { - "name": "MissionSection", - "mount": "MissionSection", - "category": "layout", - "purpose": "Reusable mission section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MissionSection.wrn" - }, - { - "name": "MobileDeviceFrame", - "mount": "MobileDeviceFrame", - "category": "layout", - "purpose": "Reusable mobile device frame component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MobileDeviceFrame.wrn" - }, - { - "name": "MobileInput", - "mount": "MobileInput", - "category": "forms", - "purpose": "Reusable mobile input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Mobile\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MobileInput.wrn" - }, - { - "name": "MobileMenuButton", - "mount": "MobileMenuButton", - "category": "actions", - "purpose": "Reusable mobile menu button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MobileMenuButton.wrn" - }, - { - "name": "MobileNavigation", - "mount": "MobileNavigation", - "category": "layout", - "purpose": "Reusable mobile navigation component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Menu\"" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close menu\"" - }, { "name": "items", "type": "string", @@ -27080,63 +3369,10 @@ "default": "[]" }, { - "name": "class", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/MobileNavigation.wrn" - }, - { - "name": "MobileTableCard", - "mount": "MobileTableCard", - "category": "content", - "purpose": "Reusable mobile table card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"default\"" }, { "name": "class", @@ -27147,303 +3383,31 @@ ], "slots": ["default"], "events": [], - "source": "components/MobileTableCard.wrn" + "source": "components/ListGroup.wrn" }, { - "name": "Modal", - "mount": "Modal", - "category": "core", - "purpose": "Reusable modal component.", + "name": "Map", + "mount": "Map", + "category": "integrations", + "purpose": "Theme-aware, responsive map component.", "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Dialog\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" }, { - "name": "closeLabel", + "name": "color", "type": "string", "required": false, - "default": "\"Close\"" - } - ], - "slots": ["default"], - "events": ["click"], - "source": "components/Modal.wrn" - }, - { - "name": "MonthlyVolumeSelector", - "mount": "MonthlyVolumeSelector", - "category": "forms", - "purpose": "Reusable monthly volume selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MonthlyVolume\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MonthlyVolumeSelector.wrn" - }, - { - "name": "MonthPicker", - "mount": "MonthPicker", - "category": "forms", - "purpose": "Reusable month picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Month\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MonthPicker.wrn" - }, - { - "name": "MonthYearPicker", - "mount": "MonthYearPicker", - "category": "forms", - "purpose": "Reusable month year picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MonthYear\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MonthYearPicker.wrn" - }, - { - "name": "MultiFileUpload", - "mount": "MultiFileUpload", - "category": "content", - "purpose": "Reusable multi file upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Map\"" }, { "name": "description", @@ -27452,193 +3416,16 @@ "default": "\"\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MultiFileUpload.wrn" - }, - { - "name": "MultipleEmailInput", - "mount": "MultipleEmailInput", - "category": "forms", - "purpose": "Reusable multiple email input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"MultipleEmail\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/MultipleEmailInput.wrn" - }, - { - "name": "MultiSelect", - "mount": "MultiSelect", - "category": "core", - "purpose": "Reusable multi select component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"multi-select\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Choose options\"" - }, - { - "name": "options", + "name": "items", "type": "string", "required": false, "default": "[]" }, { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "size", - "type": "number", - "required": false, - "default": "5" - }, - { - "name": "class", + "name": "variant", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/MultiSelect.wrn" - }, - { - "name": "MutedText", - "mount": "MutedText", - "category": "content", - "purpose": "Reusable muted text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" + "default": "\"default\"" }, { "name": "class", @@ -27649,73 +3436,102 @@ ], "slots": ["default"], "events": [], - "source": "components/MutedText.wrn" + "source": "components/Map.wrn" }, { - "name": "NameInput", - "mount": "NameInput", - "category": "forms", - "purpose": "Reusable name input component.", + "name": "Marquee", + "mount": "Marquee", + "category": "base", + "purpose": "Theme-aware, responsive marquee component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Marquee\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Marquee.wrn" + }, + { + "name": "MegaMenu", + "mount": "MegaMenu", + "category": "navigation", + "purpose": "Theme-aware, responsive mega menu component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Name\"" + "default": "\"Mega Menu\"" }, { - "name": "name", + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "orientation", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"horizontal\"" }, { "name": "class", @@ -27726,136 +3542,31 @@ ], "slots": ["default"], "events": [], - "source": "components/NameInput.wrn" + "source": "components/MegaMenu.wrn" }, { - "name": "NarrowContainer", - "mount": "NarrowContainer", - "category": "core", - "purpose": "Reusable narrow container component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NarrowContainer.wrn" - }, - { - "name": "Navigation", - "mount": "Navigation", - "category": "layout", - "purpose": "Reusable navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Navigation.wrn" - }, - { - "name": "NavigationItem", - "mount": "NavigationItem", - "category": "content", - "purpose": "Reusable navigation item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NavigationItem.wrn" - }, - { - "name": "NavigationMegaMenu", - "mount": "NavigationMegaMenu", + "name": "Modal", + "mount": "Modal", "category": "overlays", - "purpose": "Reusable navigation mega menu component.", + "purpose": "Theme-aware, responsive modal component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Modal\"" }, { "name": "description", @@ -27869,6 +3580,12 @@ "required": false, "default": "false" }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, { "name": "closeLabel", "type": "string", @@ -27884,149 +3601,49 @@ ], "slots": ["default"], "events": [], - "source": "components/NavigationMegaMenu.wrn" + "source": "components/Modal.wrn" }, { - "name": "NewBadge", - "mount": "NewBadge", - "category": "feedback", - "purpose": "Reusable new badge component.", + "name": "Nav", + "mount": "Nav", + "category": "navigation", + "purpose": "Theme-aware, responsive nav component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"New\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NewBadge.wrn" - }, - { - "name": "NewPasswordInput", - "mount": "NewPasswordInput", - "category": "forms", - "purpose": "Reusable new password input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"NewPassword\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NewPasswordInput.wrn" - }, - { - "name": "NewsletterCTA", - "mount": "NewsletterCTA", - "category": "actions", - "purpose": "Reusable newsletter c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", + "name": "label", + "type": "string", "required": false, - "default": "false" + "default": "\"Nav\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" }, { "name": "class", @@ -28037,868 +3654,49 @@ ], "slots": ["default"], "events": [], - "source": "components/NewsletterCTA.wrn" + "source": "components/Nav.wrn" }, { - "name": "NewsletterForm", - "mount": "NewsletterForm", - "category": "content", - "purpose": "Reusable newsletter form component.", + "name": "Navbar", + "mount": "Navbar", + "category": "navigation", + "purpose": "Theme-aware, responsive navbar component.", "props": [ { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Stay up to date\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Enter your email\"" - }, - { - "name": "buttonLabel", - "type": "string", - "required": false, - "default": "\"Subscribe\"" - }, - { - "name": "action", - "type": "string", - "required": false, - "default": "\"/newsletter/subscribe\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"post\"" - }, - { - "name": "emailName", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "privacyLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "privacyHref", - "type": "string", - "required": false, - "default": "\"/privacy\"" - }, - { - "name": "successMessage", - "type": "string", - "required": false, - "default": "\"You are subscribed.\"" - }, - { - "name": "errorMessage", - "type": "string", - "required": false, - "default": "\"Something went wrong. Please try again.\"" - }, - { - "name": "iconClass", - "type": "string", - "required": false, - "default": "\"icon-[lucide--mail]\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showIcon", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showPrivacy", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "fullWidth", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": [], - "events": ["submit", "input"], - "source": "components/NewsletterForm.wrn" - }, - { - "name": "NoResultsState", - "mount": "NoResultsState", - "category": "feedback", - "purpose": "Reusable no results state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"NoResults\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NoResultsState.wrn" - }, - { - "name": "NotFoundPage", - "mount": "NotFoundPage", - "category": "content", - "purpose": "Reusable not found page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotFoundPage.wrn" - }, - { - "name": "NotFoundState", - "mount": "NotFoundState", - "category": "feedback", - "purpose": "Reusable not found state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"NotFound\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotFoundState.wrn" - }, - { - "name": "NotificationCard", - "mount": "NotificationCard", - "category": "content", - "purpose": "Reusable notification card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotificationCard.wrn" - }, - { - "name": "NotificationDot", - "mount": "NotificationDot", - "category": "core", - "purpose": "Reusable notification dot component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Notification\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotificationDot.wrn" - }, - { - "name": "NotificationList", - "mount": "NotificationList", - "category": "data", - "purpose": "Reusable notification list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/NotificationList.wrn" - }, - { - "name": "NumberInput", - "mount": "NumberInput", - "category": "forms", - "purpose": "Reusable number input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Number\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/NumberInput.wrn" - }, - { - "name": "OfficeCard", - "mount": "OfficeCard", - "category": "content", - "purpose": "Reusable office card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OfficeCard.wrn" - }, - { - "name": "OfflinePage", - "mount": "OfflinePage", - "category": "content", - "purpose": "Reusable offline page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OfflinePage.wrn" - }, - { - "name": "OfflineState", - "mount": "OfflineState", - "category": "feedback", - "purpose": "Reusable offline state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Offline\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OfflineState.wrn" - }, - { - "name": "OnboardingProgress", - "mount": "OnboardingProgress", - "category": "visualization", - "purpose": "Reusable onboarding progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OnboardingProgress.wrn" - }, - { - "name": "OneTimeSecretDisplay", - "mount": "OneTimeSecretDisplay", - "category": "content", - "purpose": "Reusable one time secret display component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OneTimeSecretDisplay.wrn" - }, - { - "name": "OnlineIndicator", - "mount": "OnlineIndicator", - "category": "feedback", - "purpose": "Reusable online indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Online\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OnlineIndicator.wrn" - }, - { - "name": "OpacitySlider", - "mount": "OpacitySlider", - "category": "content", - "purpose": "Reusable opacity slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OpacitySlider.wrn" - }, - { - "name": "OpenAPICTA", - "mount": "OpenAPICTA", - "category": "actions", - "purpose": "Reusable open a p i c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, { - "name": "disabled", - "type": "boolean", + "name": "label", + "type": "string", "required": false, - "default": "false" + "default": "\"Navbar\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" }, { "name": "class", @@ -28909,120 +3707,49 @@ ], "slots": ["default"], "events": [], - "source": "components/OpenAPICTA.wrn" + "source": "components/Navbar.wrn" }, { - "name": "OptionalIndicator", - "mount": "OptionalIndicator", - "category": "feedback", - "purpose": "Reusable optional indicator component.", + "name": "Pagination", + "mount": "Pagination", + "category": "navigation", + "purpose": "Theme-aware, responsive pagination component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Optional\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OptionalIndicator.wrn" - }, - { - "name": "OrganizationSelector", - "mount": "OrganizationSelector", - "category": "forms", - "purpose": "Reusable organization selector component.", - "props": [ + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Organization\"" + "default": "\"Pagination\"" }, { - "name": "name", + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "value", + "name": "orientation", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"horizontal\"" }, { "name": "class", @@ -29033,160 +3760,37 @@ ], "slots": ["default"], "events": [], - "source": "components/OrganizationSelector.wrn" + "source": "components/Pagination.wrn" }, { - "name": "OtpInput", - "mount": "OtpInput", - "category": "forms", - "purpose": "Reusable otp input component.", + "name": "PinInput", + "mount": "PinInput", + "category": "advanced-forms", + "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "name", + "name": "color", "type": "string", "required": false, - "default": "\"otp\"" - }, - { - "name": "length", - "type": "number", - "required": false, - "default": "6" + "default": "\"primary\"" }, { "name": "label", "type": "string", "required": false, "default": "\"Verification code\"" - } - ], - "slots": [], - "events": [], - "source": "components/OtpInput.wrn" - }, - { - "name": "OtpVerificationForm", - "mount": "OtpVerificationForm", - "category": "content", - "purpose": "Reusable otp verification form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" }, { - "name": "title", + "name": "name", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OtpVerificationForm.wrn" - }, - { - "name": "OutlinedCard", - "mount": "OutlinedCard", - "category": "content", - "purpose": "Reusable outlined card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/OutlinedCard.wrn" - }, - { - "name": "PageAlert", - "mount": "PageAlert", - "category": "feedback", - "purpose": "Reusable page alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Page\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"pin\"" }, { "name": "value", @@ -29195,773 +3799,121 @@ "default": "\"\"" }, { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageAlert.wrn" - }, - { - "name": "PageHeader", - "mount": "PageHeader", - "category": "core", - "purpose": "Reusable page header component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "secondaryHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"sparkles\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showBreadcrumbs", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "breadcrumbParent", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "breadcrumbParentHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "breadcrumbCurrent", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "highlights", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": [], - "source": "components/PageHeader.wrn" - }, - { - "name": "PageHeading", - "mount": "PageHeading", - "category": "core", - "purpose": "Reusable page heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageHeading.wrn" - }, - { - "name": "PageShell", - "mount": "PageShell", - "category": "core", - "purpose": "Reusable page shell component.", - "props": [ - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageShell.wrn" - }, - { - "name": "PageSkeleton", - "mount": "PageSkeleton", - "category": "feedback", - "purpose": "Reusable page skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Page\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PageSkeleton.wrn" - }, - { - "name": "Pagination", - "mount": "Pagination", - "category": "core", - "purpose": "Reusable pagination component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "currentPage", + "name": "length", "type": "number", "required": false, - "default": "1" + "default": "4" }, { - "name": "totalPages", - "type": "number", - "required": false, - "default": "1" - }, - { - "name": "previousHref", + "name": "pattern", "type": "string", "required": false, - "default": "\"\"" + "default": "\"[0-9]\"" }, { - "name": "nextHref", + "name": "type", "type": "string", "required": false, - "default": "\"\"" + "default": "\"text\"" }, { - "name": "pages", + "name": "inputMode", "type": "string", "required": false, - "default": "[]" + "default": "\"numeric\"" }, { - "name": "showNumbers", + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"○\"" + }, + { + "name": "autocomplete", + "type": "string", + "required": false, + "default": "\"one-time-code\"" + }, + { + "name": "masked", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "readonly", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "autoFocus", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "autoSubmit", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "allowPaste", "type": "boolean", "required": false, "default": "true" }, { - "name": "showSummary", + "name": "clearable", "type": "boolean", "required": false, "default": "true" }, { - "name": "totalItems", + "name": "clearLabel", + "type": "string", + "required": false, + "default": "\"Clear code\"" + }, + { + "name": "separator", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "groupSize", "type": "number", "required": false, "default": "0" }, { - "name": "pageSize", - "type": "number", + "name": "helpText", + "type": "string", "required": false, - "default": "10" + "default": "\"\"" }, { - "name": "compact", + "name": "invalid", "type": "boolean", "required": false, "default": "false" }, { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - } - ], - "slots": [], - "events": [], - "source": "components/Pagination.wrn" - }, - { - "name": "Panel", - "mount": "Panel", - "category": "layout", - "purpose": "Reusable panel component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Panel.wrn" - }, - { - "name": "PartnerApplicationForm", - "mount": "PartnerApplicationForm", - "category": "content", - "purpose": "Reusable partner application form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PartnerApplicationForm.wrn" - }, - { - "name": "PartnerLogoGrid", - "mount": "PartnerLogoGrid", - "category": "data", - "purpose": "Reusable partner logo grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PartnerLogoGrid.wrn" - }, - { - "name": "PartnerProgramCard", - "mount": "PartnerProgramCard", - "category": "content", - "purpose": "Reusable partner program card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PartnerProgramCard.wrn" - }, - { - "name": "PasskeyButton", - "mount": "PasskeyButton", - "category": "actions", - "purpose": "Reusable passkey button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Continue with a passkey\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Use fingerprint, face recognition, or device PIN\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/PasskeyButton.wrn" - }, - { - "name": "PasswordInput", - "mount": "PasswordInput", - "category": "forms", - "purpose": "Reusable password input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"password\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"password\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Password\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Enter your password\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"current-password\"" - }, - { - "name": "revealable", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": [], - "events": ["click"], - "source": "components/PasswordInput.wrn" - }, - { - "name": "PasswordRequirementList", - "mount": "PasswordRequirementList", - "category": "data", - "purpose": "Reusable password requirement list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PasswordRequirementList.wrn" - }, - { - "name": "PasswordStrengthMeter", - "mount": "PasswordStrengthMeter", - "category": "visualization", - "purpose": "Reusable password strength meter component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PasswordStrengthMeter.wrn" - }, - { - "name": "PasswordVisibilityToggle", - "mount": "PasswordVisibilityToggle", - "category": "forms", - "purpose": "Reusable password visibility toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PasswordVisibility\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", + "name": "validationMessage", "type": "string", "required": false, "default": "\"\"" @@ -29973,989 +3925,33 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/PasswordVisibilityToggle.wrn" - }, - { - "name": "PathInput", - "mount": "PathInput", - "category": "forms", - "purpose": "Reusable path input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Path\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PathInput.wrn" - }, - { - "name": "PaymentMethodCard", - "mount": "PaymentMethodCard", - "category": "content", - "purpose": "Reusable payment method card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PaymentMethodCard.wrn" - }, - { - "name": "PdfPreview", - "mount": "PdfPreview", - "category": "content", - "purpose": "Reusable pdf preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PdfPreview.wrn" - }, - { - "name": "PercentageInput", - "mount": "PercentageInput", - "category": "forms", - "purpose": "Reusable percentage input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Percentage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PercentageInput.wrn" - }, - { - "name": "PermissionSelector", - "mount": "PermissionSelector", - "category": "forms", - "purpose": "Reusable permission selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Permission\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PermissionSelector.wrn" - }, - { - "name": "PhoneInput", - "mount": "PhoneInput", - "category": "forms", - "purpose": "Reusable phone input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Phone\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], "slots": [], - "events": [], - "source": "components/PhoneInput.wrn" - }, - { - "name": "PieChart", - "mount": "PieChart", - "category": "visualization", - "purpose": "Reusable pie chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PieChart.wrn" - }, - { - "name": "Pill", - "mount": "Pill", - "category": "core", - "purpose": "Reusable pill component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Pill\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Pill.wrn" - }, - { - "name": "PinInput", - "mount": "PinInput", - "category": "forms", - "purpose": "Reusable pin input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Pin\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], + "events": ["input", "change", "complete", "paste", "clear", "error"], "source": "components/PinInput.wrn" }, - { - "name": "PlainTextEditor", - "mount": "PlainTextEditor", - "category": "forms", - "purpose": "Reusable plain text editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PlainText\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlainTextEditor.wrn" - }, - { - "name": "PlanCTA", - "mount": "PlanCTA", - "category": "actions", - "purpose": "Reusable plan c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanCTA.wrn" - }, - { - "name": "PlanFeatureList", - "mount": "PlanFeatureList", - "category": "data", - "purpose": "Reusable plan feature list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanFeatureList.wrn" - }, - { - "name": "PlanLimitList", - "mount": "PlanLimitList", - "category": "data", - "purpose": "Reusable plan limit list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanLimitList.wrn" - }, - { - "name": "PlanSelector", - "mount": "PlanSelector", - "category": "forms", - "purpose": "Reusable plan selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Plan\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlanSelector.wrn" - }, - { - "name": "PlatformPillarCard", - "mount": "PlatformPillarCard", - "category": "content", - "purpose": "Reusable platform pillar card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PlatformPillarCard.wrn" - }, - { - "name": "PolicyVersionTable", - "mount": "PolicyVersionTable", - "category": "data", - "purpose": "Reusable policy version table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PolicyVersionTable.wrn" - }, { "name": "Popover", "mount": "Popover", "category": "overlays", - "purpose": "Reusable popover component.", + "purpose": "Theme-aware, responsive popover component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Popover\"" }, { "name": "description", @@ -30969,6 +3965,12 @@ "required": false, "default": "false" }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, { "name": "closeLabel", "type": "string", @@ -30987,3402 +3989,47 @@ "source": "components/Popover.wrn" }, { - "name": "PortInput", - "mount": "PortInput", - "category": "forms", - "purpose": "Reusable port input component.", + "name": "Progress", + "mount": "Progress", + "category": "base", + "purpose": "Theme-aware, responsive progress component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"Port\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PortInput.wrn" - }, - { - "name": "PortNumberInput", - "mount": "PortNumberInput", - "category": "forms", - "purpose": "Reusable port number input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PortNumber\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PortNumberInput.wrn" - }, - { - "name": "PositiveNumberInput", - "mount": "PositiveNumberInput", - "category": "forms", - "purpose": "Reusable positive number input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PositiveNumber\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PositiveNumberInput.wrn" - }, - { - "name": "PostalCodeInput", - "mount": "PostalCodeInput", - "category": "forms", - "purpose": "Reusable postal code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PostalCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PostalCodeInput.wrn" - }, - { - "name": "PostmanCTA", - "mount": "PostmanCTA", - "category": "actions", - "purpose": "Reusable postman c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PostmanCTA.wrn" - }, - { - "name": "PresetDateRangePicker", - "mount": "PresetDateRangePicker", - "category": "forms", - "purpose": "Reusable preset date range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PresetDateRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PresetDateRangePicker.wrn" - }, - { - "name": "PressReleaseCard", - "mount": "PressReleaseCard", - "category": "content", - "purpose": "Reusable press release card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PressReleaseCard.wrn" - }, - { - "name": "PreviewBadge", - "mount": "PreviewBadge", - "category": "feedback", - "purpose": "Reusable preview badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Preview\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PreviewBadge.wrn" - }, - { - "name": "PreviousNextNavigation", - "mount": "PreviousNextNavigation", - "category": "layout", - "purpose": "Reusable previous next navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PreviousNextNavigation.wrn" - }, - { - "name": "PriceInput", - "mount": "PriceInput", - "category": "forms", - "purpose": "Reusable price input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Price\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PriceInput.wrn" - }, - { - "name": "PriceRangeSlider", - "mount": "PriceRangeSlider", - "category": "content", - "purpose": "Reusable price range slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PriceRangeSlider.wrn" - }, - { - "name": "PriceText", - "mount": "PriceText", - "category": "content", - "purpose": "Reusable price text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PriceText.wrn" - }, - { - "name": "PricingCard", - "mount": "PricingCard", - "category": "content", - "purpose": "Reusable pricing card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingCard.wrn" - }, - { - "name": "PricingComparisonTable", - "mount": "PricingComparisonTable", - "category": "data", - "purpose": "Reusable pricing comparison table component.", - "props": [ - { - "name": "caption", - "type": "string", - "required": false, - "default": "\"Plan comparison\"" - }, - { - "name": "plans", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "features", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "featuredPlan", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/PricingComparisonTable.wrn" - }, - { - "name": "PricingContactForm", - "mount": "PricingContactForm", - "category": "content", - "purpose": "Reusable pricing contact form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingContactForm.wrn" - }, - { - "name": "PricingFeatureGroup", - "mount": "PricingFeatureGroup", - "category": "forms", - "purpose": "Reusable pricing feature group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PricingFeature\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingFeatureGroup.wrn" - }, - { - "name": "PricingGrid", - "mount": "PricingGrid", - "category": "data", - "purpose": "Reusable pricing grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingGrid.wrn" - }, - { - "name": "PricingHero", - "mount": "PricingHero", - "category": "layout", - "purpose": "Reusable pricing hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingHero.wrn" - }, - { - "name": "PricingPlanCard", - "mount": "PricingPlanCard", - "category": "content", - "purpose": "Reusable pricing plan card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"Starter\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "price", - "type": "string", - "required": false, - "default": "\"₹0\"" - }, - { - "name": "period", - "type": "string", - "required": false, - "default": "\"/month\"" - }, - { - "name": "featured", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "badgeLabel", - "type": "string", - "required": false, - "default": "\"Most popular\"" - }, - { - "name": "ctaLabel", - "type": "string", - "required": false, - "default": "\"Choose plan\"" - }, - { - "name": "ctaHref", - "type": "string", - "required": false, - "default": "\"#\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingPlanCard.wrn" - }, - { - "name": "PricingTable", - "mount": "PricingTable", - "category": "data", - "purpose": "Reusable pricing table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingTable.wrn" - }, - { - "name": "PricingToggle", - "mount": "PricingToggle", - "category": "forms", - "purpose": "Reusable pricing toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Pricing\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PricingToggle.wrn" - }, - { - "name": "PrimaryButton", - "mount": "PrimaryButton", - "category": "actions", - "purpose": "Reusable primary button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrimaryButton.wrn" - }, - { - "name": "PrintAction", - "mount": "PrintAction", - "category": "actions", - "purpose": "Reusable print action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrintAction.wrn" - }, - { - "name": "PrintPolicyButton", - "mount": "PrintPolicyButton", - "category": "actions", - "purpose": "Reusable print policy button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrintPolicyButton.wrn" - }, - { - "name": "PrioritySelector", - "mount": "PrioritySelector", - "category": "forms", - "purpose": "Reusable priority selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Priority\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrioritySelector.wrn" - }, - { - "name": "PrivacyNotice", - "mount": "PrivacyNotice", - "category": "feedback", - "purpose": "Reusable privacy notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Privacy\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PrivacyNotice.wrn" - }, - { - "name": "ProductArchitectureDiagram", - "mount": "ProductArchitectureDiagram", - "category": "visualization", - "purpose": "Reusable product architecture diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductArchitectureDiagram.wrn" - }, - { - "name": "ProductCard", - "mount": "ProductCard", - "category": "content", - "purpose": "Reusable product card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "status", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductCard.wrn" - }, - { - "name": "ProductCategorySection", - "mount": "ProductCategorySection", - "category": "layout", - "purpose": "Reusable product category section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductCategorySection.wrn" - }, - { - "name": "ProductCTA", - "mount": "ProductCTA", - "category": "actions", - "purpose": "Reusable product c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductCTA.wrn" - }, - { - "name": "ProductFeatureList", - "mount": "ProductFeatureList", - "category": "data", - "purpose": "Reusable product feature list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductFeatureList.wrn" - }, - { - "name": "ProductGrid", - "mount": "ProductGrid", - "category": "data", - "purpose": "Reusable product grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductGrid.wrn" - }, - { - "name": "ProductHero", - "mount": "ProductHero", - "category": "layout", - "purpose": "Reusable product hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductHero.wrn" - }, - { - "name": "ProductIcon", - "mount": "ProductIcon", - "category": "content", - "purpose": "Reusable product icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductIcon.wrn" - }, - { - "name": "ProductIntegrationList", - "mount": "ProductIntegrationList", - "category": "data", - "purpose": "Reusable product integration list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductIntegrationList.wrn" - }, - { - "name": "ProductList", - "mount": "ProductList", - "category": "data", - "purpose": "Reusable product list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductList.wrn" - }, - { - "name": "ProductLogo", - "mount": "ProductLogo", - "category": "content", - "purpose": "Reusable product logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductLogo.wrn" - }, - { - "name": "ProductMegaMenu", - "mount": "ProductMegaMenu", - "category": "core", - "purpose": "Reusable product mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductMegaMenu.wrn" - }, - { - "name": "ProductMiniCard", - "mount": "ProductMiniCard", - "category": "content", - "purpose": "Reusable product mini card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductMiniCard.wrn" - }, - { - "name": "ProductNavigationCard", - "mount": "ProductNavigationCard", - "category": "content", - "purpose": "Reusable product navigation card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductNavigationCard.wrn" - }, - { - "name": "ProductPageShell", - "mount": "ProductPageShell", - "category": "layout", - "purpose": "Reusable product page shell component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductPageShell.wrn" - }, - { - "name": "ProductSelector", - "mount": "ProductSelector", - "category": "forms", - "purpose": "Reusable product selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Product\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductSelector.wrn" - }, - { - "name": "ProductsMegaMenu", - "mount": "ProductsMegaMenu", - "category": "overlays", - "purpose": "Reusable products mega menu component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Products\"" - }, - { - "name": "sections", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductsMegaMenu.wrn" - }, - { - "name": "ProductStatusBadge", - "mount": "ProductStatusBadge", - "category": "feedback", - "purpose": "Reusable product status badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Available\"" - }, - { - "name": "status", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ProductStatusBadge.wrn" - }, - { - "name": "ProductUseCaseList", - "mount": "ProductUseCaseList", - "category": "data", - "purpose": "Reusable product use case list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProductUseCaseList.wrn" - }, - { - "name": "progress", - "mount": "progress", - "category": "core", - "purpose": "Reusable progress component.", - "props": [ - { - "name": "value", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "max", - "type": "number", - "required": false, - "default": "100" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/progress.wrn" - }, - { - "name": "ProgressBar", - "mount": "ProgressBar", - "category": "core", - "purpose": "Reusable progress bar component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "max", - "type": "number", - "required": false, - "default": "100" - }, { "name": "label", "type": "string", "required": false, "default": "\"Progress\"" }, + { + "name": "value", + "type": "number", + "required": false, + "default": "50" + }, + { + "name": "max", + "type": "number", + "required": false, + "default": "100" + }, { "name": "showValue", "type": "boolean", "required": false, "default": "true" - } - ], - "slots": [], - "events": [], - "source": "components/ProgressBar.wrn" - }, - { - "name": "ProgressChart", - "mount": "ProgressChart", - "category": "visualization", - "purpose": "Reusable progress chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProgressChart.wrn" - }, - { - "name": "ProgressRing", - "mount": "ProgressRing", - "category": "visualization", - "purpose": "Reusable progress ring component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProgressRing.wrn" - }, - { - "name": "ProgressSlider", - "mount": "ProgressSlider", - "category": "content", - "purpose": "Reusable progress slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProgressSlider.wrn" - }, - { - "name": "ProjectCard", - "mount": "ProjectCard", - "category": "content", - "purpose": "Reusable project card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProjectCard.wrn" - }, - { - "name": "ProjectSelector", - "mount": "ProjectSelector", - "category": "forms", - "purpose": "Reusable project selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Project\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProjectSelector.wrn" - }, - { - "name": "ProjectSwitcher", - "mount": "ProjectSwitcher", - "category": "content", - "purpose": "Reusable project switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProjectSwitcher.wrn" - }, - { - "name": "PromoCodeInput", - "mount": "PromoCodeInput", - "category": "forms", - "purpose": "Reusable promo code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PromoCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PromoCodeInput.wrn" - }, - { - "name": "PromptDialog", - "mount": "PromptDialog", - "category": "overlays", - "purpose": "Reusable prompt dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PromptDialog.wrn" - }, - { - "name": "ProviderSelector", - "mount": "ProviderSelector", - "category": "forms", - "purpose": "Reusable provider selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Provider\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ProviderSelector.wrn" - }, - { - "name": "PublicFooter", - "mount": "PublicFooter", - "category": "core", - "purpose": "Reusable public footer component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - }, - { - "name": "brandName", - "type": "string", - "required": false, - "default": "\"WrNexus\"" - }, - { - "name": "brandTagline", - "type": "string", - "required": false, - "default": "\"Identity Cloud\"" - }, - { - "name": "brandAriaLabel", - "type": "string", - "required": false, - "default": "\"WrNexus home\"" - }, - { - "name": "brandIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--blocks]\"" - }, - { - "name": "brandDescription", - "type": "string", - "required": false, - "default": "\"Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications.\"" - }, - { - "name": "statusLabel", - "type": "string", - "required": false, - "default": "\"All systems operational\"" - }, - { - "name": "statusHref", - "type": "string", - "required": false, - "default": "\"/status\"" - }, - { - "name": "newsletterEyebrow", - "type": "string", - "required": false, - "default": "\"WrNexus updates\"" - }, - { - "name": "newsletterTitle", - "type": "string", - "required": false, - "default": "\"Identity insights delivered to your inbox\"" - }, - { - "name": "newsletterDescription", - "type": "string", - "required": false, - "default": "\"Get product updates, security guidance, implementation strategies, and practical identity architecture resources.\"" - }, - { - "name": "newsletterAction", - "type": "string", - "required": false, - "default": "\"/api/newsletter/subscribe\"" - }, - { - "name": "newsletterButtonLabel", - "type": "string", - "required": false, - "default": "\"Subscribe\"" - }, - { - "name": "newsletterPlaceholder", - "type": "string", - "required": false, - "default": "\"Enter your work email\"" - }, - { - "name": "newsletterSuccessMessage", - "type": "string", - "required": false, - "default": "\"Thanks. Please check your inbox to confirm your subscription.\"" - }, - { - "name": "newsletterPrivacyLabel", - "type": "string", - "required": false, - "default": "\"privacy policy\"" - }, - { - "name": "newsletterPrivacyHref", - "type": "string", - "required": false, - "default": "\"/privacy\"" - }, - { - "name": "newsletterFinePrintPrefix", - "type": "string", - "required": false, - "default": "\"No spam. Unsubscribe at any time. Read our\"" - }, - { - "name": "newsletterFinePrintSuffix", - "type": "string", - "required": false, - "default": "\".\"" - }, - { - "name": "newsletterEmailLabel", - "type": "string", - "required": false, - "default": "\"Work email address\"" - }, - { - "name": "newsletterEmailName", - "type": "string", - "required": false, - "default": "\"email\"" - }, - { - "name": "copyrightText", - "type": "string", - "required": false, - "default": "\"© 2026 WrNexus. All rights reserved.\"" - }, - { - "name": "attributionText", - "type": "string", - "required": false, - "default": "\"Built by WorkRoot Workspace.\"" - }, - { - "name": "showNewsletter", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showSocialLinks", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showThemeToggle", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showStatus", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showCookiePreferences", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "cookiePreferencesLabel", - "type": "string", - "required": false, - "default": "\"Cookie preferences\"" - }, - { - "name": "themeLabel", - "type": "string", - "required": false, - "default": "\"Theme\"" - }, - { - "name": "themeToggleLabel", - "type": "string", - "required": false, - "default": "\"Toggle color theme\"" - }, - { - "name": "legalTitle", - "type": "string", - "required": false, - "default": "\"Legal\"" - }, - { - "name": "socialLinks", - "type": "PublicFooterLink[]", - "required": false, - "default": "[]" - }, - { - "name": "navigationColumns", - "type": "PublicFooterColumn[]", - "required": false, - "default": "[]" - }, - { - "name": "legalLinks", - "type": "PublicFooterLink[]", - "required": false, - "default": "[]" - }, - { - "name": "navigationAriaLabel", - "type": "string", - "required": false, - "default": "\"Footer navigation\"" - } - ], - "slots": ["navigation"], - "events": ["submit"], - "source": "components/PublicFooter.wrn" - }, - { - "name": "PublicHeader", - "mount": "PublicHeader", - "category": "layout", - "purpose": "Reusable public header component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - }, - { - "name": "brandName", - "type": "string", - "required": false, - "default": "\"WrNexus\"" - }, - { - "name": "brandTagline", - "type": "string", - "required": false, - "default": "\"Identity Cloud\"" - }, - { - "name": "brandAriaLabel", - "type": "string", - "required": false, - "default": "\"WrNexus home\"" - }, - { - "name": "brandIcon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--blocks]\"" - }, - { - "name": "pricingLabel", - "type": "string", - "required": false, - "default": "\"Pricing\"" - }, - { - "name": "pricingHref", - "type": "string", - "required": false, - "default": "\"/pricing\"" - }, - { - "name": "statusLabel", - "type": "string", - "required": false, - "default": "\"All systems operational\"" - }, - { - "name": "statusHref", - "type": "string", - "required": false, - "default": "\"/status\"" - }, - { - "name": "signInLabel", - "type": "string", - "required": false, - "default": "\"Sign in\"" - }, - { - "name": "signInHref", - "type": "string", - "required": false, - "default": "\"/sign-in\"" - }, - { - "name": "primaryLabel", - "type": "string", - "required": false, - "default": "\"Start free\"" - }, - { - "name": "primaryHref", - "type": "string", - "required": false, - "default": "\"/sign-up\"" - }, - { - "name": "showStatus", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showThemeToggle", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showSignIn", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showPrimaryAction", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "productLabel", - "type": "string", - "required": false, - "default": "\"Product\"" - }, - { - "name": "solutionsLabel", - "type": "string", - "required": false, - "default": "\"Solutions\"" - }, - { - "name": "developersLabel", - "type": "string", - "required": false, - "default": "\"Developers\"" - }, - { - "name": "resourcesLabel", - "type": "string", - "required": false, - "default": "\"Resources\"" - }, - { - "name": "navigationAriaLabel", - "type": "string", - "required": false, - "default": "\"Main navigation\"" - }, - { - "name": "themeToggleLabel", - "type": "string", - "required": false, - "default": "\"Toggle color theme\"" - }, - { - "name": "mobileMenuOpenLabel", - "type": "string", - "required": false, - "default": "\"Open navigation menu\"" - }, - { - "name": "mobileMenuCloseLabel", - "type": "string", - "required": false, - "default": "\"Close navigation menu\"" - }, - { - "name": "navigationItems", - "type": "PublicHeaderNavigationItem[]", - "required": false, - "default": "[]" - }, - { - "name": "actionItems", - "type": "PublicHeaderActionItem[]", - "required": false, - "default": "[]" - }, - { - "name": "showNavigation", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showMobileThemeToggle", - "type": "boolean", - "required": false, - "default": "true" - } - ], - "slots": ["navigation", "actions"], - "events": ["click"], - "source": "components/PublicHeader.wrn" - }, - { - "name": "PublicHeaderLogo", - "mount": "PublicHeaderLogo", - "category": "content", - "purpose": "Reusable public header logo component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PublicHeaderLogo.wrn" - }, - { - "name": "PublicMobileNavigation", - "mount": "PublicMobileNavigation", - "category": "core", - "purpose": "Reusable public mobile navigation component.", - "props": [ { "name": "class", "type": "string", @@ -34391,110 +4038,15 @@ } ], "slots": [], - "events": ["click"], - "source": "components/PublicMobileNavigation.wrn" - }, - { - "name": "PublicPageShell", - "mount": "PublicPageShell", - "category": "layout", - "purpose": "Reusable public page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], "events": [], - "source": "components/PublicPageShell.wrn" + "source": "components/Progress.wrn" }, { - "name": "PublicSearch", - "mount": "PublicSearch", - "category": "core", - "purpose": "Reusable public search component.", + "name": "Radio", + "mount": "Radio", + "category": "forms", + "purpose": "Theme-aware, responsive radio component.", "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "query", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"Search...\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Search\"" - }, - { - "name": "action", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "method", - "type": "string", - "required": false, - "default": "\"get\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"q\"" - }, - { - "name": "buttonLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "clearLabel", - "type": "string", - "required": false, - "default": "\"Clear search\"" - }, { "name": "size", "type": "string", @@ -34502,51 +4054,16 @@ "default": "\"default\"" }, { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "fullWidth", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showShortcut", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "shortcutLabel", + "name": "color", "type": "string", "required": false, - "default": "\"⌘ K\"" + "default": "\"primary\"" }, - { - "name": "suggestions", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": ["input", "focus", "blur", "click"], - "source": "components/PublicSearch.wrn" - }, - { - "name": "PublishDateTimePicker", - "mount": "PublishDateTimePicker", - "category": "forms", - "purpose": "Reusable publish date time picker component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"PublishDateTime\"" + "default": "\"Radio\"" }, { "name": "name", @@ -34558,521 +4075,7 @@ "name": "value", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PublishDateTimePicker.wrn" - }, - { - "name": "PushComposer", - "mount": "PushComposer", - "category": "content", - "purpose": "Reusable push composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PushComposer.wrn" - }, - { - "name": "PushNotificationEditor", - "mount": "PushNotificationEditor", - "category": "forms", - "purpose": "Reusable push notification editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"PushNotification\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/PushNotificationEditor.wrn" - }, - { - "name": "QrCode", - "mount": "QrCode", - "category": "content", - "purpose": "Reusable qr code component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QrCode.wrn" - }, - { - "name": "QuantityInput", - "mount": "QuantityInput", - "category": "forms", - "purpose": "Reusable quantity input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Quantity\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QuantityInput.wrn" - }, - { - "name": "QuantityStepper", - "mount": "QuantityStepper", - "category": "content", - "purpose": "Reusable quantity stepper component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QuantityStepper.wrn" - }, - { - "name": "QuietHoursPicker", - "mount": "QuietHoursPicker", - "category": "forms", - "purpose": "Reusable quiet hours picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Quiet hours\"" - }, - { - "name": "startName", - "type": "string", - "required": false, - "default": "\"quietStart\"" - }, - { - "name": "endName", - "type": "string", - "required": false, - "default": "\"quietEnd\"" - }, - { - "name": "start", - "type": "string", - "required": false, - "default": "\"22:00\"" - }, - { - "name": "end", - "type": "string", - "required": false, - "default": "\"08:00\"" - }, - { - "name": "timezone", - "type": "string", - "required": false, - "default": "\"UTC\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/QuietHoursPicker.wrn" - }, - { - "name": "QuoteText", - "mount": "QuoteText", - "category": "content", - "purpose": "Reusable quote text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/QuoteText.wrn" - }, - { - "name": "Radio", - "mount": "Radio", - "category": "core", - "purpose": "Reusable radio component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"choice\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Option\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"on\"" }, { "name": "checked", @@ -35085,3980 +4088,24 @@ "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], "events": [], "source": "components/Radio.wrn" }, - { - "name": "RadioGroup", - "mount": "RadioGroup", - "category": "forms", - "purpose": "Reusable radio group component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Choose one\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"choice\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RadioGroup.wrn" - }, - { - "name": "RangeInput", - "mount": "RangeInput", - "category": "forms", - "purpose": "Reusable range input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Range\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RangeInput.wrn" - }, { "name": "RangeSlider", "mount": "RangeSlider", - "category": "content", - "purpose": "Reusable range slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RangeSlider.wrn" - }, - { - "name": "RateLimitedState", - "mount": "RateLimitedState", - "category": "feedback", - "purpose": "Reusable rate limited state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RateLimited\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateLimitedState.wrn" - }, - { - "name": "RateLimitInput", - "mount": "RateLimitInput", "category": "forms", - "purpose": "Reusable rate limit input component.", + "purpose": "Theme-aware, responsive range slider component.", "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RateLimit\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateLimitInput.wrn" - }, - { - "name": "RateLimitPage", - "mount": "RateLimitPage", - "category": "content", - "purpose": "Reusable rate limit page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateLimitPage.wrn" - }, - { - "name": "RateTable", - "mount": "RateTable", - "category": "data", - "purpose": "Reusable rate table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RateTable.wrn" - }, - { - "name": "RatingSlider", - "mount": "RatingSlider", - "category": "content", - "purpose": "Reusable rating slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RatingSlider.wrn" - }, - { - "name": "RecipientSelector", - "mount": "RecipientSelector", - "category": "forms", - "purpose": "Reusable recipient selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Recipient\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecipientSelector.wrn" - }, - { - "name": "RecoveryCodeForm", - "mount": "RecoveryCodeForm", - "category": "content", - "purpose": "Reusable recovery code form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecoveryCodeForm.wrn" - }, - { - "name": "RecoveryCodeInput", - "mount": "RecoveryCodeInput", - "category": "forms", - "purpose": "Reusable recovery code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RecoveryCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecoveryCodeInput.wrn" - }, - { - "name": "RecurrenceRuleBuilder", - "mount": "RecurrenceRuleBuilder", - "category": "content", - "purpose": "Reusable recurrence rule builder component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RecurrenceRuleBuilder.wrn" - }, - { - "name": "RecurringSchedulePicker", - "mount": "RecurringSchedulePicker", - "category": "forms", - "purpose": "Reusable recurring schedule picker component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"recurring-schedule\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"recurrence\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Repeat\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"none\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/RecurringSchedulePicker.wrn" - }, - { - "name": "RedirectUriInput", - "mount": "RedirectUriInput", - "category": "forms", - "purpose": "Reusable redirect uri input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RedirectUri\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RedirectUriInput.wrn" - }, - { - "name": "ReferenceInput", - "mount": "ReferenceInput", - "category": "forms", - "purpose": "Reusable reference input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Reference\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ReferenceInput.wrn" - }, - { - "name": "RegexInput", - "mount": "RegexInput", - "category": "forms", - "purpose": "Reusable regex input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Regex\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegexInput.wrn" - }, - { - "name": "RegionalPrivacyBanner", - "mount": "RegionalPrivacyBanner", - "category": "feedback", - "purpose": "Reusable regional privacy banner component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RegionalPrivacy\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionalPrivacyBanner.wrn" - }, - { - "name": "RegionAvailabilityTable", - "mount": "RegionAvailabilityTable", - "category": "data", - "purpose": "Reusable region availability table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionAvailabilityTable.wrn" - }, - { - "name": "RegionSelector", - "mount": "RegionSelector", - "category": "forms", - "purpose": "Reusable region selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Region\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionSelector.wrn" - }, - { - "name": "RegionUnavailableAlert", - "mount": "RegionUnavailableAlert", - "category": "feedback", - "purpose": "Reusable region unavailable alert component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RegionUnavailable\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionUnavailableAlert.wrn" - }, - { - "name": "RegionUnavailableState", - "mount": "RegionUnavailableState", - "category": "feedback", - "purpose": "Reusable region unavailable state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RegionUnavailable\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RegionUnavailableState.wrn" - }, - { - "name": "RejectOptionalCookiesButton", - "mount": "RejectOptionalCookiesButton", - "category": "actions", - "purpose": "Reusable reject optional cookies button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RejectOptionalCookiesButton.wrn" - }, - { - "name": "ReopenCookieSettingsButton", - "mount": "ReopenCookieSettingsButton", - "category": "actions", - "purpose": "Reusable reopen cookie settings button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ReopenCookieSettingsButton.wrn" - }, - { - "name": "ReportCard", - "mount": "ReportCard", - "category": "content", - "purpose": "Reusable report card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ReportCard.wrn" - }, - { - "name": "RequestResponseViewer", - "mount": "RequestResponseViewer", - "category": "content", - "purpose": "Reusable request response viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RequestResponseViewer.wrn" - }, - { - "name": "RequestViewer", - "mount": "RequestViewer", - "category": "content", - "purpose": "Reusable request viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RequestViewer.wrn" - }, - { - "name": "RequiredIndicator", - "mount": "RequiredIndicator", - "category": "feedback", - "purpose": "Reusable required indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Required\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RequiredIndicator.wrn" - }, - { - "name": "ResetPasswordForm", - "mount": "ResetPasswordForm", - "category": "content", - "purpose": "Reusable reset password form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResetPasswordForm.wrn" - }, - { - "name": "ResizablePanel", - "mount": "ResizablePanel", - "category": "layout", - "purpose": "Reusable resizable panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResizablePanel.wrn" - }, - { - "name": "ResourceCard", - "mount": "ResourceCard", - "category": "content", - "purpose": "Reusable resource card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceCard.wrn" - }, - { - "name": "ResourceDownloadCard", - "mount": "ResourceDownloadCard", - "category": "content", - "purpose": "Reusable resource download card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceDownloadCard.wrn" - }, - { - "name": "ResourcePageShell", - "mount": "ResourcePageShell", - "category": "layout", - "purpose": "Reusable resource page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourcePageShell.wrn" - }, - { - "name": "ResourceSearch", - "mount": "ResourceSearch", - "category": "content", - "purpose": "Reusable resource search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceSearch.wrn" - }, - { - "name": "ResourcesMegaMenu", - "mount": "ResourcesMegaMenu", - "category": "overlays", - "purpose": "Reusable resources mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/ResourcesMegaMenu.wrn" - }, - { - "name": "ResourceTypeBadge", - "mount": "ResourceTypeBadge", - "category": "feedback", - "purpose": "Reusable resource type badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ResourceType\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResourceTypeBadge.wrn" - }, - { - "name": "ResponseViewer", - "mount": "ResponseViewer", - "category": "content", - "purpose": "Reusable response viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResponseViewer.wrn" - }, - { - "name": "ResponsibleDisclosureCTA", - "mount": "ResponsibleDisclosureCTA", - "category": "actions", - "purpose": "Reusable responsible disclosure c t a component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResponsibleDisclosureCTA.wrn" - }, - { - "name": "ResponsiveTable", - "mount": "ResponsiveTable", - "category": "data", - "purpose": "Reusable responsive table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResponsiveTable.wrn" - }, - { - "name": "ResultsSection", - "mount": "ResultsSection", - "category": "layout", - "purpose": "Reusable results section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ResultsSection.wrn" - }, - { - "name": "RetentionTable", - "mount": "RetentionTable", - "category": "data", - "purpose": "Reusable retention table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RetentionTable.wrn" - }, - { - "name": "RetryCountInput", - "mount": "RetryCountInput", - "category": "forms", - "purpose": "Reusable retry count input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RetryCount\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RetryCountInput.wrn" - }, - { - "name": "RevenueChart", - "mount": "RevenueChart", - "category": "visualization", - "purpose": "Reusable revenue chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RevenueChart.wrn" - }, - { - "name": "RgbColorInput", - "mount": "RgbColorInput", - "category": "forms", - "purpose": "Reusable rgb color input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RgbColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RgbColorInput.wrn" - }, - { - "name": "RichTextEditor", - "mount": "RichTextEditor", - "category": "forms", - "purpose": "Reusable rich text editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RichText\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RichTextEditor.wrn" - }, - { - "name": "RichTextInput", - "mount": "RichTextInput", - "category": "forms", - "purpose": "Reusable rich text input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RichText\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RichTextInput.wrn" - }, - { - "name": "RoleSelector", - "mount": "RoleSelector", - "category": "forms", - "purpose": "Reusable role selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Role\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RoleSelector.wrn" - }, - { - "name": "RollingDateRangePicker", - "mount": "RollingDateRangePicker", - "category": "forms", - "purpose": "Reusable rolling date range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"RollingDateRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/RollingDateRangePicker.wrn" - }, - { - "name": "SaveCookiePreferencesButton", - "mount": "SaveCookiePreferencesButton", - "category": "actions", - "purpose": "Reusable save cookie preferences button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SaveCookiePreferencesButton.wrn" - }, - { - "name": "SavedFilterSelector", - "mount": "SavedFilterSelector", - "category": "forms", - "purpose": "Reusable saved filter selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SavedFilter\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SavedFilterSelector.wrn" - }, - { - "name": "ScheduledDateTimePicker", - "mount": "ScheduledDateTimePicker", - "category": "forms", - "purpose": "Reusable scheduled date time picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ScheduledDateTime\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScheduledDateTimePicker.wrn" - }, - { - "name": "ScheduleMessagePicker", - "mount": "ScheduleMessagePicker", - "category": "forms", - "purpose": "Reusable schedule message picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ScheduleMessage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScheduleMessagePicker.wrn" - }, - { - "name": "SchedulePicker", - "mount": "SchedulePicker", - "category": "forms", - "purpose": "Reusable schedule picker component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Schedule\"" - } - ], - "slots": [], - "events": [], - "source": "components/SchedulePicker.wrn" - }, - { - "name": "ScreenshotFrame", - "mount": "ScreenshotFrame", - "category": "layout", - "purpose": "Reusable screenshot frame component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScreenshotFrame.wrn" - }, - { - "name": "ScrollArea", - "mount": "ScrollArea", - "category": "core", - "purpose": "Reusable scroll area component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ScrollArea.wrn" - }, - { - "name": "SDKCard", - "mount": "SDKCard", - "category": "content", - "purpose": "Reusable s d k card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SDKCard.wrn" - }, - { - "name": "SdkLanguageSelector", - "mount": "SdkLanguageSelector", - "category": "forms", - "purpose": "Reusable sdk language selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SdkLanguage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SdkLanguageSelector.wrn" - }, - { - "name": "SDKLanguageTabs", - "mount": "SDKLanguageTabs", - "category": "content", - "purpose": "Reusable s d k language tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SDKLanguageTabs.wrn" - }, - { - "name": "SDKTabs", - "mount": "SDKTabs", - "category": "core", - "purpose": "Reusable sdktabs component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SDK languages\"" - }, - { - "name": "tabs", - "type": "string", - "required": false, - "default": "[]" - }, - { - "name": "defaultIndex", - "type": "number", - "required": false, - "default": "0" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/SDKTabs.wrn" - }, - { - "name": "SearchButton", - "mount": "SearchButton", - "category": "actions", - "purpose": "Reusable search button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchButton.wrn" - }, - { - "name": "SearchCategoryTabs", - "mount": "SearchCategoryTabs", - "category": "content", - "purpose": "Reusable search category tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchCategoryTabs.wrn" - }, - { - "name": "SearchDialog", - "mount": "SearchDialog", - "category": "overlays", - "purpose": "Reusable search dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchDialog.wrn" - }, - { - "name": "SearchEmptyState", - "mount": "SearchEmptyState", - "category": "feedback", - "purpose": "Reusable search empty state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SearchEmpty\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchEmptyState.wrn" - }, - { - "name": "SearchInput", - "mount": "SearchInput", - "category": "forms", - "purpose": "Reusable search input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Search\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/SearchInput.wrn" - }, - { - "name": "SearchLoadingState", - "mount": "SearchLoadingState", - "category": "feedback", - "purpose": "Reusable search loading state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SearchLoading\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchLoadingState.wrn" - }, - { - "name": "SearchResultItem", - "mount": "SearchResultItem", - "category": "content", - "purpose": "Reusable search result item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SearchResultItem.wrn" - }, - { - "name": "SecondaryButton", - "mount": "SecondaryButton", - "category": "actions", - "purpose": "Reusable secondary button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecondaryButton.wrn" - }, - { - "name": "SecondPicker", - "mount": "SecondPicker", - "category": "forms", - "purpose": "Reusable second picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Second\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecondPicker.wrn" - }, - { - "name": "SecretDisplay", - "mount": "SecretDisplay", - "category": "content", - "purpose": "Reusable secret display component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecretDisplay.wrn" - }, - { - "name": "SecretInput", - "mount": "SecretInput", - "category": "forms", - "purpose": "Reusable secret input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Secret\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecretInput.wrn" - }, - { - "name": "SecretRevealDialog", - "mount": "SecretRevealDialog", - "category": "overlays", - "purpose": "Reusable secret reveal dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecretRevealDialog.wrn" - }, - { - "name": "Section", - "mount": "Section", - "category": "layout", - "purpose": "Reusable section component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "size", "type": "string", @@ -39066,159 +4113,19 @@ "default": "\"default\"" }, { - "name": "surface", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Section.wrn" - }, - { - "name": "SectionActions", - "mount": "SectionActions", - "category": "actions", - "purpose": "Reusable section actions component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SectionActions.wrn" - }, - { - "name": "SectionHeader", - "mount": "SectionHeader", - "category": "layout", - "purpose": "Reusable section header component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Section title\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"left\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SectionHeader.wrn" - }, - { - "name": "SectionHeading", - "mount": "SectionHeading", - "category": "core", - "purpose": "Reusable section heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SectionHeading.wrn" - }, - { - "name": "SecurityAlert", - "mount": "SecurityAlert", - "category": "feedback", - "purpose": "Reusable security alert component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Security\"" + "default": "\"Range Slider\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", + "name": "name", "type": "string", "required": false, "default": "\"\"" @@ -39229,6 +4136,95 @@ "required": false, "default": "\"\"" }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"range\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/RangeSlider.wrn" + }, + { + "name": "Rating", + "mount": "Rating", + "category": "base", + "purpose": "Theme-aware, responsive rating component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Rating\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, { "name": "variant", "type": "string", @@ -39244,319 +4240,31 @@ ], "slots": ["default"], "events": [], - "source": "components/SecurityAlert.wrn" + "source": "components/Rating.wrn" }, { - "name": "SecurityContactCard", - "mount": "SecurityContactCard", - "category": "content", - "purpose": "Reusable security contact card component.", + "name": "Scrollspy", + "mount": "Scrollspy", + "category": "navigation", + "purpose": "Theme-aware, responsive scrollspy component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityContactCard.wrn" - }, - { - "name": "SecurityFeatureCard", - "mount": "SecurityFeatureCard", - "category": "content", - "purpose": "Reusable security feature card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityFeatureCard.wrn" - }, - { - "name": "SecurityHero", - "mount": "SecurityHero", - "category": "layout", - "purpose": "Reusable security hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityHero.wrn" - }, - { - "name": "SecurityPillarGrid", - "mount": "SecurityPillarGrid", - "category": "data", - "purpose": "Reusable security pillar grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityPillarGrid.wrn" - }, - { - "name": "SecurityPracticeList", - "mount": "SecurityPracticeList", - "category": "data", - "purpose": "Reusable security practice list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityPracticeList.wrn" - }, - { - "name": "SecurityReportForm", - "mount": "SecurityReportForm", - "category": "content", - "purpose": "Reusable security report form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SecurityReportForm.wrn" - }, - { - "name": "SegmentedButtonGroup", - "mount": "SegmentedButtonGroup", - "category": "core", - "purpose": "Reusable segmented button group component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Options\"" + "default": "\"Scrollspy\"" }, { "name": "items", @@ -39570,14 +4278,97 @@ "required": false, "default": "\"\"" }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Scrollspy.wrn" + }, + { + "name": "SearchBox", + "mount": "SearchBox", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive search box component.", + "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"default\"" }, { - "name": "fullWidth", + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Search Box\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"search\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -39590,32 +4381,26 @@ } ], "slots": [], - "events": ["click"], - "source": "components/SegmentedButtonGroup.wrn" + "events": [], + "source": "components/SearchBox.wrn" }, { "name": "Select", "mount": "Select", - "category": "core", - "purpose": "Reusable select component.", + "category": "forms", + "purpose": "Theme-aware, responsive select component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "label", @@ -39624,19 +4409,31 @@ "default": "\"Select\"" }, { - "name": "help", + "name": "name", "type": "string", "required": false, "default": "\"\"" }, { - "name": "error", + "name": "value", "type": "string", "required": false, "default": "\"\"" }, { - "name": "required", + "name": "options", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Select an option\"" + }, + { + "name": "multiple", "type": "boolean", "required": false, "default": "false" @@ -39646,701 +4443,59 @@ "type": "boolean", "required": false, "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/Select.wrn" }, { - "name": "SenderIdInput", - "mount": "SenderIdInput", - "category": "forms", - "purpose": "Reusable sender id input component.", + "name": "Sidebar", + "mount": "Sidebar", + "category": "navigation", + "purpose": "Theme-aware, responsive sidebar component.", "props": [ { - "name": "label", - "type": "string", - "required": false, - "default": "\"SenderId\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SenderIdInput.wrn" - }, - { - "name": "ServerErrorPage", - "mount": "ServerErrorPage", - "category": "content", - "purpose": "Reusable server error page component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServerErrorPage.wrn" - }, - { - "name": "ServiceLevelTable", - "mount": "ServiceLevelTable", - "category": "data", - "purpose": "Reusable service level table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceLevelTable.wrn" - }, - { - "name": "ServiceStatusBadge", - "mount": "ServiceStatusBadge", - "category": "feedback", - "purpose": "Reusable service status badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ServiceStatus\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceStatusBadge.wrn" - }, - { - "name": "ServiceStatusList", - "mount": "ServiceStatusList", - "category": "data", - "purpose": "Reusable service status list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceStatusList.wrn" - }, - { - "name": "ServiceStatusRow", - "mount": "ServiceStatusRow", - "category": "data", - "purpose": "Reusable service status row component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ServiceStatusRow.wrn" - }, - { - "name": "SessionCard", - "mount": "SessionCard", - "category": "content", - "purpose": "Reusable session card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SessionCard.wrn" - }, - { - "name": "SessionExpiredDialog", - "mount": "SessionExpiredDialog", - "category": "overlays", - "purpose": "Reusable session expired dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SessionExpiredDialog.wrn" - }, - { - "name": "SetupChecklist", - "mount": "SetupChecklist", - "category": "content", - "purpose": "Reusable setup checklist component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SetupChecklist.wrn" - }, - { - "name": "SeveritySelector", - "mount": "SeveritySelector", - "category": "forms", - "purpose": "Reusable severity selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Severity\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SeveritySelector.wrn" - }, - { - "name": "ShadowPicker", - "mount": "ShadowPicker", - "category": "forms", - "purpose": "Reusable shadow picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Shadow\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ShadowPicker.wrn" - }, - { - "name": "ShareAction", - "mount": "ShareAction", - "category": "actions", - "purpose": "Reusable share action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ShareAction.wrn" - }, - { - "name": "ShareButton", - "mount": "ShareButton", - "category": "actions", - "purpose": "Reusable share button component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"Sidebar\"" }, { - "name": "type", + "name": "items", "type": "string", "required": false, - "default": "\"button\"" + "default": "[]" }, { - "name": "disabled", - "type": "boolean", + "name": "active", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" }, { "name": "class", @@ -40351,1101 +4506,20 @@ ], "slots": ["default"], "events": [], - "source": "components/ShareButton.wrn" - }, - { - "name": "SidebarLayout", - "mount": "SidebarLayout", - "category": "layout", - "purpose": "Reusable sidebar layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SidebarLayout.wrn" - }, - { - "name": "SidePanel", - "mount": "SidePanel", - "category": "layout", - "purpose": "Reusable side panel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SidePanel.wrn" - }, - { - "name": "SignInForm", - "mount": "SignInForm", - "category": "content", - "purpose": "Reusable sign in form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SignInForm.wrn" - }, - { - "name": "SignInLink", - "mount": "SignInLink", - "category": "actions", - "purpose": "Reusable sign in link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Sign in with password\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"Use your username or email and password\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"secondary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"icon-[lucide--lock-keyhole]\"" - }, - { - "name": "tone", - "type": "string", - "required": false, - "default": "\"password\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/SignInLink.wrn" - }, - { - "name": "SignUpForm", - "mount": "SignUpForm", - "category": "content", - "purpose": "Reusable sign up form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SignUpForm.wrn" - }, - { - "name": "SiteSearch", - "mount": "SiteSearch", - "category": "content", - "purpose": "Reusable site search component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SiteSearch.wrn" + "source": "components/Sidebar.wrn" }, { "name": "Skeleton", "mount": "Skeleton", - "category": "feedback", - "purpose": "Reusable skeleton component.", + "category": "base", + "purpose": "Theme-aware, responsive skeleton component.", "props": [ { - "name": "height", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "rounded", - "type": "string", - "required": false, - "default": "\"lg\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/Skeleton.wrn" - }, - { - "name": "SkipLink", - "mount": "SkipLink", - "category": "actions", - "purpose": "Reusable skip link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SkipLink.wrn" - }, - { - "name": "SlaTable", - "mount": "SlaTable", - "category": "data", - "purpose": "Reusable sla table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SlaTable.wrn" - }, - { - "name": "Slider", - "mount": "Slider", - "category": "content", - "purpose": "Reusable slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Slider.wrn" - }, - { - "name": "SlugInput", - "mount": "SlugInput", - "category": "forms", - "purpose": "Reusable slug input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Slug\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SlugInput.wrn" - }, - { - "name": "SmallText", - "mount": "SmallText", - "category": "content", - "purpose": "Reusable small text component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmallText.wrn" - }, - { - "name": "SmartRouteDiagram", - "mount": "SmartRouteDiagram", - "category": "visualization", - "purpose": "Reusable smart route diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmartRouteDiagram.wrn" - }, - { - "name": "SmsComposer", - "mount": "SmsComposer", - "category": "content", - "purpose": "Reusable sms composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmsComposer.wrn" - }, - { - "name": "SmsMessageEditor", - "mount": "SmsMessageEditor", - "category": "forms", - "purpose": "Reusable sms message editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SmsMessage\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmsMessageEditor.wrn" - }, - { - "name": "SmsSegmentCounter", - "mount": "SmsSegmentCounter", - "category": "feedback", - "purpose": "Reusable sms segment counter component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"SmsSegment\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SmsSegmentCounter.wrn" - }, - { - "name": "SocialShare", - "mount": "SocialShare", - "category": "core", - "purpose": "Reusable social share component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Share this page\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "url", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "shareText", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "centered", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "showTitle", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "showCopy", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "networks", - "type": "string", - "required": false, - "default": "[]" - } - ], - "slots": [], - "events": ["click"], - "source": "components/SocialShare.wrn" - }, - { - "name": "SolutionHero", - "mount": "SolutionHero", - "category": "layout", - "purpose": "Reusable solution hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SolutionHero.wrn" - }, - { - "name": "SolutionPageShell", - "mount": "SolutionPageShell", - "category": "layout", - "purpose": "Reusable solution page shell component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SolutionPageShell.wrn" - }, - { - "name": "SolutionSection", - "mount": "SolutionSection", - "category": "layout", - "purpose": "Reusable solution section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SolutionSection.wrn" - }, - { - "name": "SolutionsMegaMenu", - "mount": "SolutionsMegaMenu", - "category": "overlays", - "purpose": "Reusable solutions mega menu component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/SolutionsMegaMenu.wrn" - }, - { - "name": "SortableTable", - "mount": "SortableTable", - "category": "data", - "purpose": "Reusable sortable table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SortableTable.wrn" - }, - { - "name": "spacer", - "mount": "spacer", - "category": "core", - "purpose": "Reusable spacer component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/spacer.wrn" - }, - { - "name": "Spinner", - "mount": "Spinner", - "category": "core", - "purpose": "Reusable spinner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "label", "type": "string", @@ -41457,6 +4531,59 @@ "type": "string", "required": false, "default": "\"md\"" + }, + { + "name": "lines", + "type": "number", + "required": false, + "default": "3" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/Skeleton.wrn" + }, + { + "name": "Spinner", + "mount": "Spinner", + "category": "base", + "purpose": "Theme-aware, responsive spinner component.", + "props": [ + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Loading\"" + }, + { + "name": "size", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "lines", + "type": "number", + "required": false, + "default": "3" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], "slots": [], @@ -41464,780 +4591,46 @@ "source": "components/Spinner.wrn" }, { - "name": "SplitButton", - "mount": "SplitButton", - "category": "actions", - "purpose": "Reusable split button component.", + "name": "Stepper", + "mount": "Stepper", + "category": "navigation", + "purpose": "Theme-aware, responsive stepper component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"default\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitButton.wrn" - }, - { - "name": "SplitCTA", - "mount": "SplitCTA", - "category": "actions", - "purpose": "Reusable split c t a component.", - "props": [ { "name": "label", "type": "string", "required": false, - "default": "\"Action\"" + "default": "\"Stepper\"" }, { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitCTA.wrn" - }, - { - "name": "SplitHero", - "mount": "SplitHero", - "category": "layout", - "purpose": "Reusable split hero component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitHero.wrn" - }, - { - "name": "SplitLayout", - "mount": "SplitLayout", - "category": "layout", - "purpose": "Reusable split layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitLayout.wrn" - }, - { - "name": "SplitSectionHeader", - "mount": "SplitSectionHeader", - "category": "layout", - "purpose": "Reusable split section header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SplitSectionHeader.wrn" - }, - { - "name": "Stack", - "mount": "Stack", - "category": "core", - "purpose": "Reusable stack component.", - "props": [ - { - "name": "gap", - "type": "string", - "required": false, - "default": "\"4\"" - }, - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Stack.wrn" - }, - { - "name": "StartFreeButton", - "mount": "StartFreeButton", - "category": "actions", - "purpose": "Reusable start free button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StartFreeButton.wrn" - }, - { - "name": "StatCard", - "mount": "StatCard", - "category": "content", - "purpose": "Reusable stat card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Metric\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"0\"" - }, - { - "name": "change", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "trend", - "type": "string", - "required": false, - "default": "\"neutral\"" - } - ], - "slots": [], - "events": [], - "source": "components/StatCard.wrn" - }, - { - "name": "StateSelector", - "mount": "StateSelector", - "category": "forms", - "purpose": "Reusable state selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"State\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StateSelector.wrn" - }, - { - "name": "StatusBadge", - "mount": "StatusBadge", - "category": "feedback", - "purpose": "Reusable status badge component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "status", - "type": "string", - "required": false, - "default": "\"operational\"" - } - ], - "slots": [], - "events": [], - "source": "components/StatusBadge.wrn" - }, - { - "name": "StatusBanner", - "mount": "StatusBanner", - "category": "core", - "purpose": "Reusable status banner component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"info\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionHref", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "dismissible", - "type": "boolean", - "required": false, - "default": "true" - }, - { - "name": "compact", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "details", + "name": "items", "type": "string", "required": false, "default": "[]" - } - ], - "slots": [], - "events": ["click"], - "source": "components/StatusBanner.wrn" - }, - { - "name": "StatusPageShell", - "mount": "StatusPageShell", - "category": "layout", - "purpose": "Reusable status page shell component.", - "props": [ + }, { - "name": "eyebrow", + "name": "active", "type": "string", "required": false, "default": "\"\"" }, { - "name": "title", + "name": "orientation", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusPageShell.wrn" - }, - { - "name": "StatusSelector", - "mount": "StatusSelector", - "category": "forms", - "purpose": "Reusable status selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Status\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusSelector.wrn" - }, - { - "name": "StatusSubscribeForm", - "mount": "StatusSubscribeForm", - "category": "content", - "purpose": "Reusable status subscribe form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusSubscribeForm.wrn" - }, - { - "name": "StatusTable", - "mount": "StatusTable", - "category": "data", - "purpose": "Reusable status table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StatusTable.wrn" - }, - { - "name": "StepNavigation", - "mount": "StepNavigation", - "category": "layout", - "purpose": "Reusable step navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StepNavigation.wrn" - }, - { - "name": "Stepper", - "mount": "Stepper", - "category": "content", - "purpose": "Reusable stepper component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"horizontal\"" }, { "name": "class", @@ -42251,22 +4644,34 @@ "source": "components/Stepper.wrn" }, { - "name": "StepperInput", - "mount": "StepperInput", - "category": "forms", - "purpose": "Reusable stepper input component.", + "name": "StrongPassword", + "mount": "StrongPassword", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive strong password component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Stepper\"" + "default": "\"Password\"" }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"password\"" }, { "name": "value", @@ -42278,19 +4683,97 @@ "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Create a strong password\"" }, { - "name": "type", + "name": "autocomplete", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"new-password\"" }, { - "name": "required", + "name": "minLength", + "type": "number", + "required": false, + "default": "8" + }, + { + "name": "specialCharactersSet", + "type": "string", + "required": false, + "default": "\"!@#$%^&*()_+-=[]{}|;:,.<>?\"" + }, + { + "name": "requireLowercase", "type": "boolean", "required": false, - "default": "false" + "default": "true" + }, + { + "name": "requireUppercase", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "requireNumber", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "requireSpecialCharacter", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showRequirements", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "presentation", + "type": "string", + "required": false, + "default": "\"inline\"" + }, + { + "name": "hintText", + "type": "string", + "required": false, + "default": "\"Use a unique password you do not use elsewhere.\"" + }, + { + "name": "emptyLabel", + "type": "string", + "required": false, + "default": "\"Enter a password\"" + }, + { + "name": "weakLabel", + "type": "string", + "required": false, + "default": "\"Weak\"" + }, + { + "name": "fairLabel", + "type": "string", + "required": false, + "default": "\"Fair\"" + }, + { + "name": "goodLabel", + "type": "string", + "required": false, + "default": "\"Good\"" + }, + { + "name": "strongLabel", + "type": "string", + "required": false, + "default": "\"Strong\"" }, { "name": "disabled", @@ -42305,13 +4788,19 @@ "default": "false" }, { - "name": "help", - "type": "string", + "name": "required", + "type": "boolean", "required": false, - "default": "\"\"" + "default": "false" }, { - "name": "error", + "name": "invalid", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "validationMessage", "type": "string", "required": false, "default": "\"\"" @@ -42323,21 +4812,33 @@ "default": "\"\"" } ], - "slots": ["default"], - "events": [], - "source": "components/StepperInput.wrn" + "slots": [], + "events": ["input", "change", "strength"], + "source": "components/StrongPassword.wrn" }, { - "name": "StepUpAuthenticationDialog", - "mount": "StepUpAuthenticationDialog", - "category": "overlays", - "purpose": "Reusable step up authentication dialog component.", + "name": "StyledIcon", + "mount": "StyledIcon", + "category": "base", + "purpose": "Theme-aware, responsive styled icon component.", "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Styled Icon\"" }, { "name": "description", @@ -42346,504 +4847,10 @@ "default": "\"\"" }, { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", + "name": "items", "type": "string", "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StepUpAuthenticationDialog.wrn" - }, - { - "name": "StickerPicker", - "mount": "StickerPicker", - "category": "forms", - "purpose": "Reusable sticker picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Sticker\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StickerPicker.wrn" - }, - { - "name": "Sticky", - "mount": "Sticky", - "category": "core", - "purpose": "Reusable sticky component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Sticky.wrn" - }, - { - "name": "StickyLayout", - "mount": "StickyLayout", - "category": "layout", - "purpose": "Reusable sticky layout component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StickyLayout.wrn" - }, - { - "name": "StreetAddressInput", - "mount": "StreetAddressInput", - "category": "forms", - "purpose": "Reusable street address input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"StreetAddress\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/StreetAddressInput.wrn" - }, - { - "name": "SubdomainInput", - "mount": "SubdomainInput", - "category": "forms", - "purpose": "Reusable subdomain input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Subdomain\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubdomainInput.wrn" - }, - { - "name": "SubjectInput", - "mount": "SubjectInput", - "category": "forms", - "purpose": "Reusable subject input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Subject\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubjectInput.wrn" - }, - { - "name": "SubprocessorTable", - "mount": "SubprocessorTable", - "category": "data", - "purpose": "Reusable subprocessor table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubprocessorTable.wrn" - }, - { - "name": "SubsectionHeading", - "mount": "SubsectionHeading", - "category": "core", - "purpose": "Reusable subsection heading component.", - "props": [ - { - "name": "text", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SubsectionHeading.wrn" - }, - { - "name": "SuccessCard", - "mount": "SuccessCard", - "category": "content", - "purpose": "Reusable success card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SuccessCard.wrn" - }, - { - "name": "SuccessState", - "mount": "SuccessState", - "category": "feedback", - "purpose": "Reusable success state component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Success\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -42860,107 +4867,25 @@ ], "slots": ["default"], "events": [], - "source": "components/SuccessState.wrn" - }, - { - "name": "SupportRequestForm", - "mount": "SupportRequestForm", - "category": "content", - "purpose": "Reusable support request form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/SupportRequestForm.wrn" - }, - { - "name": "Surface", - "mount": "Surface", - "category": "core", - "purpose": "Reusable surface component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Surface.wrn" + "source": "components/StyledIcon.wrn" }, { "name": "Switch", "mount": "Switch", - "category": "core", - "purpose": "Reusable switch component.", + "category": "forms", + "purpose": "Theme-aware, responsive switch component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"primary\"" }, { "name": "label", @@ -42969,11 +4894,17 @@ "default": "\"Switch\"" }, { - "name": "description", + "name": "name", "type": "string", "required": false, "default": "\"\"" }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"on\"" + }, { "name": "checked", "type": "boolean", @@ -42985,53 +4916,65 @@ "type": "boolean", "required": false, "default": "false" - } - ], - "slots": [], - "events": ["click"], - "source": "components/Switch.wrn" - }, - { - "name": "Table", - "mount": "Table", - "category": "data", - "purpose": "Reusable table component.", - "props": [ + }, { "name": "class", "type": "string", "required": false, "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/Switch.wrn" + }, + { + "name": "Table", + "mount": "Table", + "category": "tables", + "purpose": "Theme-aware, responsive table component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "caption", "type": "string", "required": false, - "default": "\"Data table\"" + "default": "\"Table\"" }, { - "name": "responsive", - "type": "boolean", + "name": "columns", + "type": "string", "required": false, - "default": "true" + "default": "[]" + }, + { + "name": "rows", + "type": "string", + "required": false, + "default": "[]" }, { "name": "striped", "type": "boolean", "required": false, - "default": "false" - }, - { - "name": "hoverable", - "type": "boolean", - "required": false, "default": "true" }, { - "name": "compact", - "type": "boolean", + "name": "class", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" } ], "slots": ["default"], @@ -43039,1017 +4982,81 @@ "source": "components/Table.wrn" }, { - "name": "TableHeader", - "mount": "TableHeader", - "category": "layout", - "purpose": "Reusable table header component.", + "name": "Tabs", + "mount": "Tabs", + "category": "navigation", + "purpose": "Theme-aware, responsive tabs component.", "props": [ { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TableHeader.wrn" - }, - { - "name": "TableRow", - "mount": "TableRow", - "category": "data", - "purpose": "Reusable table row component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TableRow.wrn" - }, - { - "name": "TableSkeleton", - "mount": "TableSkeleton", - "category": "feedback", - "purpose": "Reusable table skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Table\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"" }, { - "name": "class", + "name": "color", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TableSkeleton.wrn" - }, - { - "name": "Tabs", - "mount": "Tabs", - "category": "content", - "purpose": "Reusable tabs component.", - "props": [ + "default": "\"primary\"" + }, { - "name": "class", + "name": "label", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Tabs\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" }, { "name": "active", "type": "string", "required": false, - "default": "\"first\"" + "default": "\"\"" + }, + { + "name": "orientation", + "type": "string", + "required": false, + "default": "\"horizontal\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" } ], - "slots": ["first", "second"], - "events": ["click"], + "slots": ["default"], + "events": [], "source": "components/Tabs.wrn" }, - { - "name": "tag", - "mount": "tag", - "category": "core", - "purpose": "Reusable tag component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/tag.wrn" - }, - { - "name": "TagInput", - "mount": "TagInput", - "category": "forms", - "purpose": "Reusable tag input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Tag\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TagInput.wrn" - }, - { - "name": "TaxNotice", - "mount": "TaxNotice", - "category": "feedback", - "purpose": "Reusable tax notice component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Tax\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TaxNotice.wrn" - }, - { - "name": "TaxRateInput", - "mount": "TaxRateInput", - "category": "forms", - "purpose": "Reusable tax rate input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TaxRate\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TaxRateInput.wrn" - }, - { - "name": "TeamMemberCard", - "mount": "TeamMemberCard", - "category": "content", - "purpose": "Reusable team member card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TeamMemberCard.wrn" - }, - { - "name": "TeamSizeSelector", - "mount": "TeamSizeSelector", - "category": "forms", - "purpose": "Reusable team size selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TeamSize\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TeamSizeSelector.wrn" - }, - { - "name": "TemplateCard", - "mount": "TemplateCard", - "category": "content", - "purpose": "Reusable template card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TemplateCard.wrn" - }, - { - "name": "TemplateSelector", - "mount": "TemplateSelector", - "category": "forms", - "purpose": "Reusable template selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Template\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TemplateSelector.wrn" - }, - { - "name": "TemplateVariableInput", - "mount": "TemplateVariableInput", - "category": "forms", - "purpose": "Reusable template variable input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TemplateVariable\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TemplateVariableInput.wrn" - }, - { - "name": "TenantIsolationDiagram", - "mount": "TenantIsolationDiagram", - "category": "visualization", - "purpose": "Reusable tenant isolation diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TenantIsolationDiagram.wrn" - }, - { - "name": "TerminalBlock", - "mount": "TerminalBlock", - "category": "content", - "purpose": "Reusable terminal block component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TerminalBlock.wrn" - }, - { - "name": "TertiaryButton", - "mount": "TertiaryButton", - "category": "actions", - "purpose": "Reusable tertiary button component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TertiaryButton.wrn" - }, - { - "name": "TestimonialCard", - "mount": "TestimonialCard", - "category": "content", - "purpose": "Reusable testimonial card component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "quote", - "type": "string", - "required": false, - "default": "\"Great product.\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"Customer\"" - }, - { - "name": "role", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "company", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "avatar", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/TestimonialCard.wrn" - }, - { - "name": "TestimonialCarousel", - "mount": "TestimonialCarousel", - "category": "content", - "purpose": "Reusable testimonial carousel component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TestimonialCarousel.wrn" - }, - { - "name": "TestMessageDialog", - "mount": "TestMessageDialog", - "category": "overlays", - "purpose": "Reusable test message dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TestMessageDialog.wrn" - }, { "name": "Textarea", "mount": "Textarea", - "category": "core", - "purpose": "Reusable textarea component.", + "category": "forms", + "purpose": "Theme-aware, responsive textarea component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", + "name": "color", "type": "string", "required": false, - "default": "\"\"" + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Textarea\"" }, { "name": "name", @@ -44057,12 +5064,6 @@ "required": false, "default": "\"\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Message\"" - }, { "name": "value", "type": "string", @@ -44082,16 +5083,10 @@ "default": "5" }, { - "name": "help", - "type": "string", + "name": "disabled", + "type": "boolean", "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" + "default": "false" }, { "name": "required", @@ -44100,10 +5095,10 @@ "default": "false" }, { - "name": "disabled", - "type": "boolean", + "name": "class", + "type": "string", "required": false, - "default": "false" + "default": "\"\"" } ], "slots": [], @@ -44111,152 +5106,28 @@ "source": "components/Textarea.wrn" }, { - "name": "TextInput", - "mount": "TextInput", - "category": "forms", - "purpose": "Reusable text input component.", + "name": "Timeline", + "mount": "Timeline", + "category": "base", + "purpose": "Theme-aware, responsive timeline component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Text\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/TextInput.wrn" - }, - { - "name": "TextLink", - "mount": "TextLink", - "category": "actions", - "purpose": "Reusable text link component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TextLink.wrn" - }, - { - "name": "TextSkeleton", - "mount": "TextSkeleton", - "category": "feedback", - "purpose": "Reusable text skeleton component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Text\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Timeline\"" }, { "name": "description", @@ -44265,10 +5136,10 @@ "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -44285,372 +5156,31 @@ ], "slots": ["default"], "events": [], - "source": "components/TextSkeleton.wrn" - }, - { - "name": "theme-toggle", - "mount": "theme-toggle", - "category": "core", - "purpose": "Reusable theme-toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Toggle theme\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/theme-toggle.wrn" - }, - { - "name": "ThemeColorPicker", - "mount": "ThemeColorPicker", - "category": "forms", - "purpose": "Reusable theme color picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"ThemeColor\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ThemeColorPicker.wrn" - }, - { - "name": "ThemeSwitcher", - "mount": "ThemeSwitcher", - "category": "content", - "purpose": "Reusable theme switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ThemeSwitcher.wrn" - }, - { - "name": "TimeInput", - "mount": "TimeInput", - "category": "forms", - "purpose": "Reusable time input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Time\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/TimeInput.wrn" - }, - { - "name": "Timeline", - "mount": "Timeline", - "category": "visualization", - "purpose": "Reusable timeline component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Timeline\"" - } - ], - "slots": ["default"], - "events": [], "source": "components/Timeline.wrn" }, { - "name": "TimelineChart", - "mount": "TimelineChart", - "category": "visualization", - "purpose": "Reusable timeline chart component.", + "name": "TimePicker", + "mount": "TimePicker", + "category": "forms", + "purpose": "Theme-aware, responsive time picker component.", "props": [ { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimelineChart.wrn" - }, - { - "name": "TimelineItem", - "mount": "TimelineItem", - "category": "content", - "purpose": "Reusable timeline item component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Event\"" - }, - { - "name": "date", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "status", + "name": "size", "type": "string", "required": false, "default": "\"default\"" - } - ], - "slots": [], - "events": [], - "source": "components/TimelineItem.wrn" - }, - { - "name": "TimeoutInput", - "mount": "TimeoutInput", - "category": "forms", - "purpose": "Reusable timeout input component.", - "props": [ + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, { "name": "label", "type": "string", "required": false, - "default": "\"Timeout\"" + "default": "\"Time Picker\"" }, { "name": "name", @@ -44674,79 +5204,8 @@ "name": "type", "type": "string", "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimeoutInput.wrn" - }, - { - "name": "TimePicker", - "mount": "TimePicker", - "category": "forms", - "purpose": "Reusable time picker component.", - "props": [ - { - "name": "id", - "type": "string", - "required": false, - "default": "\"time-picker\"" - }, - { - "name": "name", - "type": "string", - "required": false, "default": "\"time\"" }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Time\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "min", "type": "string", @@ -44761,18 +5220,18 @@ }, { "name": "step", - "type": "number", + "type": "string", "required": false, - "default": "60" + "default": "\"\"" }, { - "name": "required", + "name": "disabled", "type": "boolean", "required": false, "default": "false" }, { - "name": "disabled", + "name": "required", "type": "boolean", "required": false, "default": "false" @@ -44788,317 +5247,29 @@ "events": [], "source": "components/TimePicker.wrn" }, - { - "name": "TimeRangePicker", - "mount": "TimeRangePicker", - "category": "forms", - "purpose": "Reusable time range picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TimeRange\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimeRangePicker.wrn" - }, - { - "name": "TimezoneAwareTimePicker", - "mount": "TimezoneAwareTimePicker", - "category": "forms", - "purpose": "Reusable timezone aware time picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"TimezoneAwareTime\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TimezoneAwareTimePicker.wrn" - }, - { - "name": "TimezoneSelector", - "mount": "TimezoneSelector", - "category": "forms", - "purpose": "Reusable timezone selector component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"timezone\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"timezone\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Timezone\"" - } - ], - "slots": [], - "events": [], - "source": "components/TimezoneSelector.wrn" - }, { "name": "Toast", "mount": "Toast", - "category": "core", - "purpose": "Reusable toast component.", + "category": "base", + "purpose": "Theme-aware, responsive toast component.", "props": [ { - "name": "class", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" }, { - "name": "title", - "type": "string", - "required": false, - "default": "\"Saved\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"success\"" - }, - { - "name": "duration", - "type": "number", - "required": false, - "default": "5000" - } - ], - "slots": [], - "events": ["click"], - "source": "components/Toast.wrn" - }, - { - "name": "ToastAction", - "mount": "ToastAction", - "category": "actions", - "purpose": "Reusable toast action component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Action\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"button\"" - }, - { - "name": "variant", + "name": "color", "type": "string", "required": false, "default": "\"primary\"" }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToastAction.wrn" - }, - { - "name": "ToastHost", - "mount": "ToastHost", - "category": "core", - "purpose": "Reusable toast host component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": ["click"], - "source": "components/ToastHost.wrn" - }, - { - "name": "ToastIcon", - "mount": "ToastIcon", - "category": "content", - "purpose": "Reusable toast icon component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Toast\"" }, { "name": "description", @@ -45107,535 +5278,10 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToastIcon.wrn" - }, - { - "name": "ToastProgress", - "mount": "ToastProgress", - "category": "visualization", - "purpose": "Reusable toast progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToastProgress.wrn" - }, - { - "name": "Toggle", - "mount": "Toggle", - "category": "forms", - "purpose": "Reusable toggle component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Toggle.wrn" - }, - { - "name": "ToggleGroup", - "mount": "ToggleGroup", - "category": "forms", - "purpose": "Reusable toggle group component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Toggle\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ToggleGroup.wrn" - }, - { - "name": "TokenInput", - "mount": "TokenInput", - "category": "forms", - "purpose": "Reusable token input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Token\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TokenInput.wrn" - }, - { - "name": "Tooltip", - "mount": "Tooltip", - "category": "content", - "purpose": "Reusable tooltip component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "text", - "type": "string", - "required": false, - "default": "\"Helpful information\"" - }, - { - "name": "position", - "type": "string", - "required": false, - "default": "\"top\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Tooltip.wrn" - }, - { - "name": "TotpVerificationForm", - "mount": "TotpVerificationForm", - "category": "content", - "purpose": "Reusable totp verification form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TotpVerificationForm.wrn" - }, - { - "name": "TranslatedText", - "mount": "TranslatedText", - "category": "content", - "purpose": "Reusable translated text component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TranslatedText.wrn" - }, - { - "name": "TreeTable", - "mount": "TreeTable", - "category": "data", - "purpose": "Reusable tree table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TreeTable.wrn" - }, - { - "name": "TrendIndicator", - "mount": "TrendIndicator", - "category": "feedback", - "purpose": "Reusable trend indicator component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Trend\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -45652,25 +5298,31 @@ ], "slots": ["default"], "events": [], - "source": "components/TrendIndicator.wrn" + "source": "components/Toast.wrn" }, { - "name": "TruncatedText", - "mount": "TruncatedText", - "category": "content", - "purpose": "Reusable truncated text component.", + "name": "ToastNotifications", + "mount": "ToastNotifications", + "category": "integrations", + "purpose": "Theme-aware, responsive toast notifications component.", "props": [ { - "name": "eyebrow", + "name": "size", "type": "string", "required": false, - "default": "\"\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Toast Notifications\"" }, { "name": "description", @@ -45679,104 +5331,419 @@ "default": "\"\"" }, { - "name": "href", + "name": "items", "type": "string", "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TruncatedText.wrn" - }, - { - "name": "TrustBadgeList", - "mount": "TrustBadgeList", - "category": "data", - "purpose": "Reusable trust badge list component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/TrustBadgeList.wrn" - }, - { - "name": "Typography", - "mount": "Typography", - "category": "core", - "purpose": "Reusable typography component.", - "props": [ - { - "name": "as", - "type": "string", - "required": false, - "default": "\"p\"" + "default": "[]" }, { "name": "variant", "type": "string", "required": false, - "default": "\"body\"" + "default": "\"default\"" }, { - "name": "align", + "name": "class", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/ToastNotifications.wrn" + }, + { + "name": "ToggleCount", + "mount": "ToggleCount", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive toggle count component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Toggle Count\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"text\"" + }, + { + "name": "min", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "max", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "step", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/ToggleCount.wrn" + }, + { + "name": "TogglePassword", + "mount": "TogglePassword", + "category": "advanced-forms", + "purpose": "Accessible password field with optional show and hide controls.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Password\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"password\"" + }, + { + "name": "value", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Enter your password\"" + }, + { + "name": "autocomplete", + "type": "string", + "required": false, + "default": "\"current-password\"" + }, + { + "name": "minlength", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "maxlength", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "pattern", + "type": "string", + "required": false, + "default": "\"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}\"" + }, + { + "name": "fields", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "visible", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "toggleable", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "toggleMode", + "type": "string", + "required": false, + "default": "\"button\"" + }, + { + "name": "checkboxLabel", + "type": "string", + "required": false, + "default": "\"Show password\"" + }, + { + "name": "showLabel", + "type": "string", + "required": false, + "default": "\"Show password\"" + }, + { + "name": "hideLabel", + "type": "string", + "required": false, + "default": "\"Hide password\"" + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "readonly", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "required", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "invalid", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "helpText", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "validationMessage", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["input", "change", "toggle"], + "source": "components/TogglePassword.wrn" + }, + { + "name": "Tooltip", + "mount": "Tooltip", + "category": "overlays", + "purpose": "Theme-aware, responsive tooltip component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Tooltip\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "open", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "placement", + "type": "string", + "required": false, + "default": "\"bottom\"" + }, + { + "name": "closeLabel", + "type": "string", + "required": false, + "default": "\"Close\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/Tooltip.wrn" + }, + { + "name": "TreeView", + "mount": "TreeView", + "category": "base", + "purpose": "Theme-aware, responsive tree view component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Tree View\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": ["default"], + "events": [], + "source": "components/TreeView.wrn" + }, + { + "name": "Typography", + "mount": "Typography", + "category": "layout", + "purpose": "Theme-aware, responsive typography component.", + "props": [ + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" + }, + { + "name": "columns", + "type": "number", + "required": false, + "default": "2" + }, + { + "name": "gap", + "type": "string", + "required": false, + "default": "\"md\"" + }, + { + "name": "maxWidth", + "type": "string", + "required": false, + "default": "\"xl\"" }, { "name": "class", @@ -45790,22 +5757,28 @@ "source": "components/Typography.wrn" }, { - "name": "UnavailableRegionState", - "mount": "UnavailableRegionState", - "category": "feedback", - "purpose": "Reusable unavailable region state component.", + "name": "WysiwygEditor", + "mount": "WysiwygEditor", + "category": "integrations", + "purpose": "Theme-aware, responsive wysiwyg editor component.", "props": [ { - "name": "label", + "name": "size", "type": "string", "required": false, - "default": "\"UnavailableRegion\"" + "default": "\"default\"" + }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Wysiwyg Editor\"" }, { "name": "description", @@ -45814,10 +5787,10 @@ "default": "\"\"" }, { - "name": "value", + "name": "items", "type": "string", "required": false, - "default": "\"\"" + "default": "[]" }, { "name": "variant", @@ -45834,2747 +5807,7 @@ ], "slots": ["default"], "events": [], - "source": "components/UnavailableRegionState.wrn" - }, - { - "name": "UnifiedTimelinePreview", - "mount": "UnifiedTimelinePreview", - "category": "content", - "purpose": "Reusable unified timeline preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UnifiedTimelinePreview.wrn" - }, - { - "name": "UnsavedChangesDialog", - "mount": "UnsavedChangesDialog", - "category": "overlays", - "purpose": "Reusable unsaved changes dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UnsavedChangesDialog.wrn" - }, - { - "name": "UploadItem", - "mount": "UploadItem", - "category": "content", - "purpose": "Reusable upload item component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UploadItem.wrn" - }, - { - "name": "UploadPreview", - "mount": "UploadPreview", - "category": "content", - "purpose": "Reusable upload preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UploadPreview.wrn" - }, - { - "name": "UploadProgress", - "mount": "UploadProgress", - "category": "visualization", - "purpose": "Reusable upload progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UploadProgress.wrn" - }, - { - "name": "UptimeChart", - "mount": "UptimeChart", - "category": "visualization", - "purpose": "Reusable uptime chart component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UptimeChart.wrn" - }, - { - "name": "UptimeMetric", - "mount": "UptimeMetric", - "category": "visualization", - "purpose": "Reusable uptime metric component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UptimeMetric.wrn" - }, - { - "name": "UrlInput", - "mount": "UrlInput", - "category": "forms", - "purpose": "Reusable url input component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "id", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Url\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "autocomplete", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": [], - "events": [], - "source": "components/UrlInput.wrn" - }, - { - "name": "UsagePricingTable", - "mount": "UsagePricingTable", - "category": "data", - "purpose": "Reusable usage pricing table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UsagePricingTable.wrn" - }, - { - "name": "UseCaseSelector", - "mount": "UseCaseSelector", - "category": "forms", - "purpose": "Reusable use case selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"UseCase\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UseCaseSelector.wrn" - }, - { - "name": "UserCard", - "mount": "UserCard", - "category": "content", - "purpose": "Reusable user card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UserCard.wrn" - }, - { - "name": "UsernameInput", - "mount": "UsernameInput", - "category": "forms", - "purpose": "Reusable username input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Username\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/UsernameInput.wrn" - }, - { - "name": "ValueCard", - "mount": "ValueCard", - "category": "content", - "purpose": "Reusable value card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ValueCard.wrn" - }, - { - "name": "ValuesGrid", - "mount": "ValuesGrid", - "category": "data", - "purpose": "Reusable values grid component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ValuesGrid.wrn" - }, - { - "name": "VerificationCodeInput", - "mount": "VerificationCodeInput", - "category": "forms", - "purpose": "Reusable verification code input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"VerificationCode\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VerificationCodeInput.wrn" - }, - { - "name": "VerifiedBadge", - "mount": "VerifiedBadge", - "category": "feedback", - "purpose": "Reusable verified badge component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Verified\"" - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VerifiedBadge.wrn" - }, - { - "name": "VersionSelector", - "mount": "VersionSelector", - "category": "forms", - "purpose": "Reusable version selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Version\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VersionSelector.wrn" - }, - { - "name": "VerticalTabs", - "mount": "VerticalTabs", - "category": "content", - "purpose": "Reusable vertical tabs component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VerticalTabs.wrn" - }, - { - "name": "VideoCard", - "mount": "VideoCard", - "category": "content", - "purpose": "Reusable video card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VideoCard.wrn" - }, - { - "name": "VideoPreviewDialog", - "mount": "VideoPreviewDialog", - "category": "overlays", - "purpose": "Reusable video preview dialog component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VideoPreviewDialog.wrn" - }, - { - "name": "VideoUpload", - "mount": "VideoUpload", - "category": "content", - "purpose": "Reusable video upload component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VideoUpload.wrn" - }, - { - "name": "VirtualizedTable", - "mount": "VirtualizedTable", - "category": "data", - "purpose": "Reusable virtualized table component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "empty", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "emptyText", - "type": "string", - "required": false, - "default": "\"No items available.\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VirtualizedTable.wrn" - }, - { - "name": "VisionSection", - "mount": "VisionSection", - "category": "layout", - "purpose": "Reusable vision section component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VisionSection.wrn" - }, - { - "name": "VisuallyHidden", - "mount": "VisuallyHidden", - "category": "core", - "purpose": "Reusable visually hidden component.", - "props": [ - { - "name": "className", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VisuallyHidden.wrn" - }, - { - "name": "VoiceScriptComposer", - "mount": "VoiceScriptComposer", - "category": "content", - "purpose": "Reusable voice script composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VoiceScriptComposer.wrn" - }, - { - "name": "VoiceScriptEditor", - "mount": "VoiceScriptEditor", - "category": "forms", - "purpose": "Reusable voice script editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"VoiceScript\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VoiceScriptEditor.wrn" - }, - { - "name": "VolumeInput", - "mount": "VolumeInput", - "category": "forms", - "purpose": "Reusable volume input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Volume\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VolumeInput.wrn" - }, - { - "name": "VolumeSlider", - "mount": "VolumeSlider", - "category": "content", - "purpose": "Reusable volume slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/VolumeSlider.wrn" - }, - { - "name": "WarningCard", - "mount": "WarningCard", - "category": "content", - "purpose": "Reusable warning card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WarningCard.wrn" - }, - { - "name": "WebhookEventCard", - "mount": "WebhookEventCard", - "category": "content", - "purpose": "Reusable webhook event card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookEventCard.wrn" - }, - { - "name": "WebhookFlowDiagram", - "mount": "WebhookFlowDiagram", - "category": "visualization", - "purpose": "Reusable webhook flow diagram component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookFlowDiagram.wrn" - }, - { - "name": "WebhookPayloadViewer", - "mount": "WebhookPayloadViewer", - "category": "content", - "purpose": "Reusable webhook payload viewer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookPayloadViewer.wrn" - }, - { - "name": "WebhookUrlInput", - "mount": "WebhookUrlInput", - "category": "forms", - "purpose": "Reusable webhook url input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"WebhookUrl\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebhookUrlInput.wrn" - }, - { - "name": "WebinarCard", - "mount": "WebinarCard", - "category": "content", - "purpose": "Reusable webinar card component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebinarCard.wrn" - }, - { - "name": "WebinarRegistrationForm", - "mount": "WebinarRegistrationForm", - "category": "content", - "purpose": "Reusable webinar registration form component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WebinarRegistrationForm.wrn" - }, - { - "name": "Well", - "mount": "Well", - "category": "core", - "purpose": "Reusable well component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Well.wrn" - }, - { - "name": "WhatsAppComposer", - "mount": "WhatsAppComposer", - "category": "content", - "purpose": "Reusable whats app composer component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WhatsAppComposer.wrn" - }, - { - "name": "WhatsAppNumberInput", - "mount": "WhatsAppNumberInput", - "category": "forms", - "purpose": "Reusable whats app number input component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"WhatsAppNumber\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WhatsAppNumberInput.wrn" - }, - { - "name": "WhatsAppTemplateEditor", - "mount": "WhatsAppTemplateEditor", - "category": "forms", - "purpose": "Reusable whats app template editor component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"WhatsAppTemplate\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WhatsAppTemplateEditor.wrn" - }, - { - "name": "WideContainer", - "mount": "WideContainer", - "category": "core", - "purpose": "Reusable wide container component.", - "props": [ - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WideContainer.wrn" - }, - { - "name": "Wizard", - "mount": "Wizard", - "category": "content", - "purpose": "Reusable wizard component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/Wizard.wrn" - }, - { - "name": "WizardHeader", - "mount": "WizardHeader", - "category": "layout", - "purpose": "Reusable wizard header component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WizardHeader.wrn" - }, - { - "name": "WizardNavigation", - "mount": "WizardNavigation", - "category": "layout", - "purpose": "Reusable wizard navigation component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "align", - "type": "string", - "required": false, - "default": "\"start\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WizardNavigation.wrn" - }, - { - "name": "WorkflowCanvasPreview", - "mount": "WorkflowCanvasPreview", - "category": "content", - "purpose": "Reusable workflow canvas preview component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkflowCanvasPreview.wrn" - }, - { - "name": "WorkflowProgress", - "mount": "WorkflowProgress", - "category": "visualization", - "purpose": "Reusable workflow progress component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "summary", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "loading", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkflowProgress.wrn" - }, - { - "name": "WorkspaceCard", - "mount": "WorkspaceCard", - "category": "content", - "purpose": "Reusable workspace card component.", - "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkspaceCard.wrn" - }, - { - "name": "WorkspaceSelector", - "mount": "WorkspaceSelector", - "category": "forms", - "purpose": "Reusable workspace selector component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Workspace\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkspaceSelector.wrn" - }, - { - "name": "WorkspaceSwitcher", - "mount": "WorkspaceSwitcher", - "category": "content", - "purpose": "Reusable workspace switcher component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/WorkspaceSwitcher.wrn" - }, - { - "name": "YearPicker", - "mount": "YearPicker", - "category": "forms", - "purpose": "Reusable year picker component.", - "props": [ - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Year\"" - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"" - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "readonly", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "help", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "error", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/YearPicker.wrn" - }, - { - "name": "ZoomSlider", - "mount": "ZoomSlider", - "category": "content", - "purpose": "Reusable zoom slider component.", - "props": [ - { - "name": "eyebrow", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "image", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "alt", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": [], - "source": "components/ZoomSlider.wrn" + "source": "components/WysiwygEditor.wrn" } ] } diff --git a/packages/ui/components/AcceptAllCookiesButton.wrn b/packages/ui/components/AcceptAllCookiesButton.wrn deleted file mode 100644 index 3afd8aad..00000000 --- a/packages/ui/components/AcceptAllCookiesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component AcceptAllCookiesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/AccessibleAccordion.wrn b/packages/ui/components/AccessibleAccordion.wrn deleted file mode 100644 index ba182b91..00000000 --- a/packages/ui/components/AccessibleAccordion.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleAccordion { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AccessibleCarousel.wrn b/packages/ui/components/AccessibleCarousel.wrn deleted file mode 100644 index 301c01ac..00000000 --- a/packages/ui/components/AccessibleCarousel.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleCarousel { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AccessibleChartSummary.wrn b/packages/ui/components/AccessibleChartSummary.wrn deleted file mode 100644 index a69b3495..00000000 --- a/packages/ui/components/AccessibleChartSummary.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component AccessibleChartSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    Chart summary
    Delivered
    96.8%
    Engaged
    42.1%
    Converted
    8.7%
    {#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    - } -} diff --git a/packages/ui/components/AccessibleDialog.wrn b/packages/ui/components/AccessibleDialog.wrn deleted file mode 100644 index e7b931d6..00000000 --- a/packages/ui/components/AccessibleDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AccessibleDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/AccessibleErrorSummary.wrn b/packages/ui/components/AccessibleErrorSummary.wrn deleted file mode 100644 index 931e1e14..00000000 --- a/packages/ui/components/AccessibleErrorSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleErrorSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AccessibleIcon.wrn b/packages/ui/components/AccessibleIcon.wrn deleted file mode 100644 index 5dd97370..00000000 --- a/packages/ui/components/AccessibleIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AccessibleMenu.wrn b/packages/ui/components/AccessibleMenu.wrn deleted file mode 100644 index 27b75e1f..00000000 --- a/packages/ui/components/AccessibleMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AccessibleMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/AccessibleTabs.wrn b/packages/ui/components/AccessibleTabs.wrn deleted file mode 100644 index 6c67b8b2..00000000 --- a/packages/ui/components/AccessibleTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AccessibleTooltip.wrn b/packages/ui/components/AccessibleTooltip.wrn deleted file mode 100644 index eca4ad23..00000000 --- a/packages/ui/components/AccessibleTooltip.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AccessibleTooltip { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Accordion.wrn b/packages/ui/components/Accordion.wrn index 739f130c..689c3bb9 100644 --- a/packages/ui/components/Accordion.wrn +++ b/packages/ui/components/Accordion.wrn @@ -1,31 +1,15 @@ component Accordion { - props { - class = "" - title = "Question" - open = false - } - - state expanded = open - - view { -
    - -
    - -
    -
    - } + props { + size = "default" + color = "primary" + items = [] + multiple = false + class = "" + } + view { +
    + {#each items as item}
    {item.label}
    {item.content}
    {/each} + +
    + } } diff --git a/packages/ui/components/AccountMenu.wrn b/packages/ui/components/AccountMenu.wrn deleted file mode 100644 index 4cfc36af..00000000 --- a/packages/ui/components/AccountMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AccountMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/AccountStatusBanner.wrn b/packages/ui/components/AccountStatusBanner.wrn deleted file mode 100644 index f14b03d9..00000000 --- a/packages/ui/components/AccountStatusBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component AccountStatusBanner { - props { - label = "AccountStatus" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ActionMenu.wrn b/packages/ui/components/ActionMenu.wrn deleted file mode 100644 index 90e5db6a..00000000 --- a/packages/ui/components/ActionMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ActionMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/ActiveFilterList.wrn b/packages/ui/components/ActiveFilterList.wrn deleted file mode 100644 index a8f168c7..00000000 --- a/packages/ui/components/ActiveFilterList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ActiveFilterList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ActivityList.wrn b/packages/ui/components/ActivityList.wrn deleted file mode 100644 index 79c28be0..00000000 --- a/packages/ui/components/ActivityList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ActivityList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/AddOnCard.wrn b/packages/ui/components/AddOnCard.wrn deleted file mode 100644 index 4472c0b4..00000000 --- a/packages/ui/components/AddOnCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AddOnCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AddressInput.wrn b/packages/ui/components/AddressInput.wrn deleted file mode 100644 index 6af0c679..00000000 --- a/packages/ui/components/AddressInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AddressInput { - props { - label = "Address" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/AddressPreview.wrn b/packages/ui/components/AddressPreview.wrn deleted file mode 100644 index 3d508f3f..00000000 --- a/packages/ui/components/AddressPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AddressPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AdvancedDatePicker.wrn b/packages/ui/components/AdvancedDatePicker.wrn new file mode 100644 index 00000000..48954b2a --- /dev/null +++ b/packages/ui/components/AdvancedDatePicker.wrn @@ -0,0 +1,19 @@ +component AdvancedDatePicker { + props { + size = "default" + color = "primary" + title = "Advanced Date Picker" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/AdvancedFilterBuilder.wrn b/packages/ui/components/AdvancedFilterBuilder.wrn deleted file mode 100644 index e66322aa..00000000 --- a/packages/ui/components/AdvancedFilterBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AdvancedFilterBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AdvancedRangeSlider.wrn b/packages/ui/components/AdvancedRangeSlider.wrn new file mode 100644 index 00000000..963bed7d --- /dev/null +++ b/packages/ui/components/AdvancedRangeSlider.wrn @@ -0,0 +1,19 @@ +component AdvancedRangeSlider { + props { + size = "default" + color = "primary" + title = "Advanced Range Slider" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/AdvancedSelect.wrn b/packages/ui/components/AdvancedSelect.wrn new file mode 100644 index 00000000..6bd6fe16 --- /dev/null +++ b/packages/ui/components/AdvancedSelect.wrn @@ -0,0 +1,456 @@ +component AdvancedSelect { + props { + size = "default" + color = "primary" + label = "Advanced Select" + name = "" + value = "" + values = [] + options = [] + groups = [] + placeholder = "Select an option" + placeholderIcon = "" + searchPlaceholder = "Search options…" + multiple = false + searchable = true + defaultOpen = false + clearable = true + allowEmpty = true + tags = false + disabled = false + required = false + invalid = false + validationMessage = "" + helpText = "" + loading = false + loadingLabel = "Loading options…" + emptyLabel = "No options found" + selectedOptionsLabel = "Selected options" + clearLabel = "Clear selection" + createLabel = "Create" + loadMoreLabel = "Load more" + searchMode = "contains" + searchFields = "label,description" + minSearchLength = 0 + searchResultLimit = 0 + maxSelections = 0 + showCounter = false + counterTemplate = "{selected} selected" + optionTemplate = "default" + selectedTemplate = "default" + closeOnSelect = true + scrollToSelected = true + fixed = false + placement = "bottom" + remote = false + remoteUrl = "" + remoteQueryParam = "q" + remoteDebounce = 250 + remoteAutoLoad = true + infinite = false + hasMore = false + page = 1 + class = "" + @event search = function + @event select = function + @event change = function + @event clear = function + @event open = function + @event close = function + @event load = function + @event error = function + } + + state open = defaultOpen + state query = "" + state activeIndex = -1 + state selectedValue = value + state selectedValues = values + + functions { + function allOptions() { + return [...groups.flatMap((group) => group.options || []), ...options] + } + + function searchableText(option) { + return ((option.label || "") + " " + (option.description || "")).toLowerCase() + } + + function matches(option) { + if (!query || query.length < Number(minSearchLength || 0)) { + return true + } + if (searchMode === "startsWith") { + return searchableText(option).startsWith(query.toLowerCase()) + } + if (searchMode === "exact") { + return searchableText(option) === query.toLowerCase() + } + return searchableText(option).includes(query.toLowerCase()) + } + + function matchingOptions(list) { + return list.filter((option) => matches(option)) + } + + function visibleOptions(list) { + if (searchResultLimit > 0) { + return matchingOptions(list).slice(0, Number(searchResultLimit)) + } + return matchingOptions(list) + } + + function flatVisibleOptions() { + return visibleOptions(allOptions()) + } + + function isSelected(option) { + return ( + multiple + ? selectedValues.includes(option.value) + : selectedValue === option.value + ) + } + + function selectedOptions() { + return allOptions().filter((option) => isSelected(option)) + } + + function selectedCount() { + return multiple ? selectedValues.length : selectedValue ? 1 : 0 + } + + function counterText() { + return ( + maxSelections + ? selectedCount() + " / " + maxSelections + " selected" + : selectedCount() + " selected" + ) + } + + function selectedText() { + return ( + multiple + ? selectedValues.join(", ") + : selectedOptions().length + ? selectedOptions()[0].label + : "" + ) + } + + function triggerText() { + return selectedCount() ? selectedText() : placeholder + } + + function canSelect(option) { + if (option.disabled) { + return false + } + if (!multiple || isSelected(option)) { + return true + } + if (maxSelections <= 0) { + return true + } + return selectedCount() < maxSelections + } + + function chooseSingle(option) { + if (!canSelect(option)) { + return + } + selectedValue = option.value + query = "" + if (closeOnSelect) { + open = false + } + } + + function chooseMultiple(option) { + if (!canSelect(option)) { + return + } + if (isSelected(option)) { + selectedValues = selectedValues.filter((item) => item !== option.value) + } else { + selectedValues = selectedValues.concat([option.value]) + } + query = "" + } + + function chooseOption(option) { + if (multiple) { + chooseMultiple(option) + return + } + chooseSingle(option) + } + + function clearSelection(event) { + event.stopPropagation() + selectedValue = "" + selectedValues = [] + query = "" + open = false + } + + function toggle() { + if (disabled) { + return; + }; + open = !open; + activeIndex = open && flatVisibleOptions().length ? 0 : -1; + } + + function moveActive(direction) { + if (!flatVisibleOptions().length) { + return + } + activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length + } + + function handleKeydown(event) { + if (disabled) { + return + } + if (event.key === "ArrowDown") { + event.preventDefault() + if (!open) { + open = true + } + moveActive(1) + } else if (event.key === "ArrowUp") { + event.preventDefault() + if (!open) { + open = true + } + moveActive(-1) + } else if (event.key === "Enter" || event.key === " ") { + event.preventDefault() + if (!open) { + open = true + } else if (activeIndex >= 0) { + chooseOption(flatVisibleOptions()[activeIndex]) + } + } else if (event.key === "Escape") { + open = false + } else if (event.key === "Home" && open) { + event.preventDefault() + activeIndex = 0 + } else if (event.key === "End" && open) { + event.preventDefault() + activeIndex = flatVisibleOptions().length - 1 + } + } + + function optionIndex(option) { + return flatVisibleOptions().findIndex((item) => item.value === option.value) + } + } + + view { +
    +
    + + {counterText()} +
    + +
    + + + +
    + +
    + {#if searchable} + + {/if} + +
    Enter at least {minSearchLength} characters.
    +
    + + {loadingLabel} +
    +
    + {#each groups as group} + {#if visibleOptions(group.options || []).length} +
    +
    {group.label}
    + {#each group.options || [] as option} + + {/each} +
    + {/if} + {/each} + + {#each options as option} + + {/each} + + {#if !loading && !flatVisibleOptions().length} +
    {emptyLabel}
    + {/if} +
    + + {#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())} + + {/if} + +
    + + + + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
    + } +} diff --git a/packages/ui/components/AlertDialog.wrn b/packages/ui/components/AlertDialog.wrn deleted file mode 100644 index 83140e77..00000000 --- a/packages/ui/components/AlertDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AlertDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/AmountInput.wrn b/packages/ui/components/AmountInput.wrn deleted file mode 100644 index 374d1754..00000000 --- a/packages/ui/components/AmountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AmountInput { - props { - label = "Amount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/AnalyticsDashboardPreview.wrn b/packages/ui/components/AnalyticsDashboardPreview.wrn deleted file mode 100644 index a647c5d8..00000000 --- a/packages/ui/components/AnalyticsDashboardPreview.wrn +++ /dev/null @@ -1,83 +0,0 @@ -component AnalyticsDashboardPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - - view { -
    -
    -
    - {#if image} - {alt} - {:else} - - {/if} -
    - -
    - {#if eyebrow} -

    {eyebrow}

    - {/if} - - {#if title} -

    {title}

    - {/if} - - {#if description} -

    {description}

    - {/if} - -
    - - {#if href} - - {actionLabel} - - {/if} -
    -
    -
    - } -} diff --git a/packages/ui/components/AnchorNavigation.wrn b/packages/ui/components/AnchorNavigation.wrn deleted file mode 100644 index 4fb237c4..00000000 --- a/packages/ui/components/AnchorNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AnchorNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/AnnouncementBar.wrn b/packages/ui/components/AnnouncementBar.wrn deleted file mode 100644 index e9783d63..00000000 --- a/packages/ui/components/AnnouncementBar.wrn +++ /dev/null @@ -1,96 +0,0 @@ -component AnnouncementBar { - props { - class: string = "" - badge: string = "New" - message: string = "WrNexus Organizations is now available." - description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO." - href: string = "/organizations" - actionLabel: string = "Explore organizations" - ariaLabel: string = "Announcement" - badgeIcon: string = "icon-[lucide--sparkles]" - actionIcon: string = "icon-[lucide--arrow-right]" - dismissLabel: string = "Dismiss announcement" - showBadge: boolean = true - showDescription: boolean = true - showAction: boolean = true - dismissible: boolean = true - } - - state visible = true - - view { - - } -} diff --git a/packages/ui/components/ApartmentInput.wrn b/packages/ui/components/ApartmentInput.wrn deleted file mode 100644 index 86a05abd..00000000 --- a/packages/ui/components/ApartmentInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ApartmentInput { - props { - label = "Apartment" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ApiAuthenticationNotice.wrn b/packages/ui/components/ApiAuthenticationNotice.wrn deleted file mode 100644 index 5e1b73a7..00000000 --- a/packages/ui/components/ApiAuthenticationNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiAuthenticationNotice { - props { - label = "ApiAuthentication" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ApiEndpointCard.wrn b/packages/ui/components/ApiEndpointCard.wrn deleted file mode 100644 index 922fc352..00000000 --- a/packages/ui/components/ApiEndpointCard.wrn +++ /dev/null @@ -1,39 +0,0 @@ -component ApiEndpointCard { - props { - class = "" - method = "GET" - path = "/api/example" - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "View endpoint" - } - - view { -
    -
    - - {method} - - - {title || path} - -
    -

    - {description} -

    -
    - -
    - {#if href}{actionLabel}{/if} -
    - } -} diff --git a/packages/ui/components/ApiErrorExample.wrn b/packages/ui/components/ApiErrorExample.wrn deleted file mode 100644 index 1e857232..00000000 --- a/packages/ui/components/ApiErrorExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiErrorExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ApiHeaderTable.wrn b/packages/ui/components/ApiHeaderTable.wrn deleted file mode 100644 index 8f9f79b4..00000000 --- a/packages/ui/components/ApiHeaderTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiHeaderTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ApiKeyCreateDialog.wrn b/packages/ui/components/ApiKeyCreateDialog.wrn deleted file mode 100644 index ba616096..00000000 --- a/packages/ui/components/ApiKeyCreateDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiKeyCreateDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/ApiKeyDisplay.wrn b/packages/ui/components/ApiKeyDisplay.wrn deleted file mode 100644 index 6a142190..00000000 --- a/packages/ui/components/ApiKeyDisplay.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiKeyDisplay { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ApiKeyInput.wrn b/packages/ui/components/ApiKeyInput.wrn deleted file mode 100644 index 98cbb1d0..00000000 --- a/packages/ui/components/ApiKeyInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ApiKeyInput { - props { - label = "ApiKey" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ApiMethodBadge.wrn b/packages/ui/components/ApiMethodBadge.wrn deleted file mode 100644 index 43ba1a9d..00000000 --- a/packages/ui/components/ApiMethodBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiMethodBadge { - props { - label = "ApiMethod" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ApiParameterTable.wrn b/packages/ui/components/ApiParameterTable.wrn deleted file mode 100644 index 768d7a08..00000000 --- a/packages/ui/components/ApiParameterTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiParameterTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ApiRateLimitNotice.wrn b/packages/ui/components/ApiRateLimitNotice.wrn deleted file mode 100644 index f098aa1f..00000000 --- a/packages/ui/components/ApiRateLimitNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiRateLimitNotice { - props { - label = "ApiRateLimit" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ApiRequestExample.wrn b/packages/ui/components/ApiRequestExample.wrn deleted file mode 100644 index f6eb2323..00000000 --- a/packages/ui/components/ApiRequestExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiRequestExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ApiResponseExample.wrn b/packages/ui/components/ApiResponseExample.wrn deleted file mode 100644 index 37341e3d..00000000 --- a/packages/ui/components/ApiResponseExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiResponseExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ApiSchemaTable.wrn b/packages/ui/components/ApiSchemaTable.wrn deleted file mode 100644 index bbe81c51..00000000 --- a/packages/ui/components/ApiSchemaTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ApiSchemaTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ApiSchemaViewer.wrn b/packages/ui/components/ApiSchemaViewer.wrn deleted file mode 100644 index dc1bce2c..00000000 --- a/packages/ui/components/ApiSchemaViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ApiSchemaViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ApiVersionBadge.wrn b/packages/ui/components/ApiVersionBadge.wrn deleted file mode 100644 index accd7965..00000000 --- a/packages/ui/components/ApiVersionBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ApiVersionBadge { - props { - label = "ApiVersion" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/AppHeader.wrn b/packages/ui/components/AppHeader.wrn deleted file mode 100644 index 6e2283cf..00000000 --- a/packages/ui/components/AppHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AppHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ArchitectureSection.wrn b/packages/ui/components/ArchitectureSection.wrn deleted file mode 100644 index f477e6d3..00000000 --- a/packages/ui/components/ArchitectureSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArchitectureSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/AreaChart.wrn b/packages/ui/components/AreaChart.wrn deleted file mode 100644 index bb4b8216..00000000 --- a/packages/ui/components/AreaChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component AreaChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/ArticleHero.wrn b/packages/ui/components/ArticleHero.wrn deleted file mode 100644 index b3a11900..00000000 --- a/packages/ui/components/ArticleHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArticleHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ArticleLayout.wrn b/packages/ui/components/ArticleLayout.wrn deleted file mode 100644 index 42904a2d..00000000 --- a/packages/ui/components/ArticleLayout.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArticleLayout { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ArticleNewsletterCTA.wrn b/packages/ui/components/ArticleNewsletterCTA.wrn deleted file mode 100644 index d2643221..00000000 --- a/packages/ui/components/ArticleNewsletterCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ArticleNewsletterCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ArticlePageShell.wrn b/packages/ui/components/ArticlePageShell.wrn deleted file mode 100644 index 5d2b6ece..00000000 --- a/packages/ui/components/ArticlePageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ArticlePageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ArticleShareActions.wrn b/packages/ui/components/ArticleShareActions.wrn deleted file mode 100644 index e9600199..00000000 --- a/packages/ui/components/ArticleShareActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ArticleShareActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/AspectRatio.wrn b/packages/ui/components/AspectRatio.wrn deleted file mode 100644 index d6c2bf73..00000000 --- a/packages/ui/components/AspectRatio.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component AspectRatio { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/AssetCard.wrn b/packages/ui/components/AssetCard.wrn deleted file mode 100644 index f38a44ad..00000000 --- a/packages/ui/components/AssetCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component AssetCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/AttachmentPicker.wrn b/packages/ui/components/AttachmentPicker.wrn deleted file mode 100644 index 549af51a..00000000 --- a/packages/ui/components/AttachmentPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AttachmentPicker { - props { - label = "Attachment" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/AttachmentUpload.wrn b/packages/ui/components/AttachmentUpload.wrn deleted file mode 100644 index 10d4204c..00000000 --- a/packages/ui/components/AttachmentUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AttachmentUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AudioUpload.wrn b/packages/ui/components/AudioUpload.wrn deleted file mode 100644 index 06646ec0..00000000 --- a/packages/ui/components/AudioUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AudioUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AuditLogPreview.wrn b/packages/ui/components/AuditLogPreview.wrn deleted file mode 100644 index d8c1a820..00000000 --- a/packages/ui/components/AuditLogPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuditLogPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AuditTable.wrn b/packages/ui/components/AuditTable.wrn deleted file mode 100644 index 0c09bcd6..00000000 --- a/packages/ui/components/AuditTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component AuditTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/AuthenticatorCodeInput.wrn b/packages/ui/components/AuthenticatorCodeInput.wrn deleted file mode 100644 index f372c730..00000000 --- a/packages/ui/components/AuthenticatorCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component AuthenticatorCodeInput { - props { - label = "AuthenticatorCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/AuthorAvatar.wrn b/packages/ui/components/AuthorAvatar.wrn deleted file mode 100644 index c9196a01..00000000 --- a/packages/ui/components/AuthorAvatar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuthorAvatar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AuthorCard.wrn b/packages/ui/components/AuthorCard.wrn deleted file mode 100644 index b2e6e57b..00000000 --- a/packages/ui/components/AuthorCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuthorCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AuthorizedApplicationCard.wrn b/packages/ui/components/AuthorizedApplicationCard.wrn deleted file mode 100644 index 3662c9df..00000000 --- a/packages/ui/components/AuthorizedApplicationCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AuthorizedApplicationCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AutoGrid.wrn b/packages/ui/components/AutoGrid.wrn deleted file mode 100644 index 52a18909..00000000 --- a/packages/ui/components/AutoGrid.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component AutoGrid { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/AutomationExampleCard.wrn b/packages/ui/components/AutomationExampleCard.wrn deleted file mode 100644 index 6e64cff1..00000000 --- a/packages/ui/components/AutomationExampleCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AutomationExampleCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AvailabilityCalendar.wrn b/packages/ui/components/AvailabilityCalendar.wrn deleted file mode 100644 index 5a9ef54a..00000000 --- a/packages/ui/components/AvailabilityCalendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AvailabilityCalendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/AvatarGroup.wrn b/packages/ui/components/AvatarGroup.wrn index 0cb3e98a..1930a2c4 100644 --- a/packages/ui/components/AvatarGroup.wrn +++ b/packages/ui/components/AvatarGroup.wrn @@ -1,16 +1,19 @@ component AvatarGroup { props { - label = "Avatar" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" + size = "default" + color = "primary" + title = "Avatar Group" + description = "" + items = [] + variant = "default" class = "" } - view { } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } } diff --git a/packages/ui/components/AvatarUpload.wrn b/packages/ui/components/AvatarUpload.wrn deleted file mode 100644 index 70f92346..00000000 --- a/packages/ui/components/AvatarUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component AvatarUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/BackButton.wrn b/packages/ui/components/BackButton.wrn deleted file mode 100644 index 2cf2c0d5..00000000 --- a/packages/ui/components/BackButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component BackButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/BackToTop.wrn b/packages/ui/components/BackToTop.wrn deleted file mode 100644 index 4011bd67..00000000 --- a/packages/ui/components/BackToTop.wrn +++ /dev/null @@ -1,94 +0,0 @@ -component BackToTop { - props { - class = "" - label = "Back to top" - assistiveLabel = "Return to the top of the page" - threshold = 500 - } - - state visible = false - - functions { - function updateBackToTopVisibility() { - visible = window.scrollY > threshold - } - - function scrollToTop() { - window.scrollTo({ - top: 0, - behavior: "smooth" - }) - } - } - - lifecycle { - mount { - updateBackToTopVisibility() - - window.addEventListener( - "scroll", - updateBackToTopVisibility, - { passive: true } - ) - } - - unmount { - window.removeEventListener( - "scroll", - updateBackToTopVisibility - ) - } - } - - watch visible { - console.debug( - "Back-to-top visibility:", - value, - previous - ) - } - - view { -
    - - - - -
    - - - - -
    -
    - } -} diff --git a/packages/ui/components/BankTransferDetails.wrn b/packages/ui/components/BankTransferDetails.wrn deleted file mode 100644 index 9f4bee22..00000000 --- a/packages/ui/components/BankTransferDetails.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BankTransferDetails { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Banner.wrn b/packages/ui/components/Banner.wrn deleted file mode 100644 index 86939b9c..00000000 --- a/packages/ui/components/Banner.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component Banner { - props { - class = "" - text = "Announcement" - href = "" - actionLabel = "Learn more" - variant = "brand" - } - view { - - } -} diff --git a/packages/ui/components/BarChart.wrn b/packages/ui/components/BarChart.wrn deleted file mode 100644 index 3e8d9041..00000000 --- a/packages/ui/components/BarChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component BarChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/BetaBadge.wrn b/packages/ui/components/BetaBadge.wrn deleted file mode 100644 index 0491a276..00000000 --- a/packages/ui/components/BetaBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component BetaBadge { - props { - label = "Beta" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/BillingAddressForm.wrn b/packages/ui/components/BillingAddressForm.wrn deleted file mode 100644 index 61d86ca6..00000000 --- a/packages/ui/components/BillingAddressForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BillingAddressForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/BillingExample.wrn b/packages/ui/components/BillingExample.wrn deleted file mode 100644 index 7d6fb269..00000000 --- a/packages/ui/components/BillingExample.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BillingExample { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/BillingPeriodToggle.wrn b/packages/ui/components/BillingPeriodToggle.wrn deleted file mode 100644 index a4469365..00000000 --- a/packages/ui/components/BillingPeriodToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BillingPeriodToggle { - props { - label = "BillingPeriod" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/BlackoutDatePicker.wrn b/packages/ui/components/BlackoutDatePicker.wrn deleted file mode 100644 index 6096d9fc..00000000 --- a/packages/ui/components/BlackoutDatePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BlackoutDatePicker { - props { - label = "BlackoutDate" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Blockquote.wrn b/packages/ui/components/Blockquote.wrn new file mode 100644 index 00000000..693b09a3 --- /dev/null +++ b/packages/ui/components/Blockquote.wrn @@ -0,0 +1,19 @@ +component Blockquote { + props { + size = "default" + color = "primary" + title = "Blockquote" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/BlogCard.wrn b/packages/ui/components/BlogCard.wrn deleted file mode 100644 index fb85219a..00000000 --- a/packages/ui/components/BlogCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BlogCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/BlogGrid.wrn b/packages/ui/components/BlogGrid.wrn deleted file mode 100644 index 0599f37e..00000000 --- a/packages/ui/components/BlogGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BlogGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/BlogList.wrn b/packages/ui/components/BlogList.wrn deleted file mode 100644 index e40af45b..00000000 --- a/packages/ui/components/BlogList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BlogList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/BlogSearch.wrn b/packages/ui/components/BlogSearch.wrn deleted file mode 100644 index 1d1c9475..00000000 --- a/packages/ui/components/BlogSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BlogSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/BodyText.wrn b/packages/ui/components/BodyText.wrn deleted file mode 100644 index 261064c1..00000000 --- a/packages/ui/components/BodyText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component BodyText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/BorderRadiusPicker.wrn b/packages/ui/components/BorderRadiusPicker.wrn deleted file mode 100644 index bef4b4bf..00000000 --- a/packages/ui/components/BorderRadiusPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BorderRadiusPicker { - props { - label = "BorderRadius" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/BottomNavigation.wrn b/packages/ui/components/BottomNavigation.wrn deleted file mode 100644 index f273c20a..00000000 --- a/packages/ui/components/BottomNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BottomNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/BrandColorPicker.wrn b/packages/ui/components/BrandColorPicker.wrn deleted file mode 100644 index 3ebd75e7..00000000 --- a/packages/ui/components/BrandColorPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BrandColorPicker { - props { - label = "BrandColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/BrandSelector.wrn b/packages/ui/components/BrandSelector.wrn deleted file mode 100644 index ecbc5b0a..00000000 --- a/packages/ui/components/BrandSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BrandSelector { - props { - label = "Brand" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Breadcrumb.wrn b/packages/ui/components/Breadcrumb.wrn new file mode 100644 index 00000000..41e5654e --- /dev/null +++ b/packages/ui/components/Breadcrumb.wrn @@ -0,0 +1,17 @@ +component Breadcrumb { + props { + size = "default" + color = "primary" + label = "Breadcrumb" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/packages/ui/components/Breadcrumbs.wrn b/packages/ui/components/Breadcrumbs.wrn deleted file mode 100644 index 2f186735..00000000 --- a/packages/ui/components/Breadcrumbs.wrn +++ /dev/null @@ -1,105 +0,0 @@ -component Breadcrumbs { - props { - class: string = "" - items = [] - centered = false - compact = false - showHome = true - homeLabel = "Home" - homeHref = "/" - } - - view { - - } -} diff --git a/packages/ui/components/BrowserFrame.wrn b/packages/ui/components/BrowserFrame.wrn deleted file mode 100644 index 1021c018..00000000 --- a/packages/ui/components/BrowserFrame.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component BrowserFrame { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/BudgetRangeSlider.wrn b/packages/ui/components/BudgetRangeSlider.wrn deleted file mode 100644 index cd5f3577..00000000 --- a/packages/ui/components/BudgetRangeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component BudgetRangeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/BudgetSelector.wrn b/packages/ui/components/BudgetSelector.wrn deleted file mode 100644 index 9c92720b..00000000 --- a/packages/ui/components/BudgetSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BudgetSelector { - props { - label = "Budget" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/BusinessHoursPicker.wrn b/packages/ui/components/BusinessHoursPicker.wrn deleted file mode 100644 index 3fcb9dd7..00000000 --- a/packages/ui/components/BusinessHoursPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component BusinessHoursPicker { - props { - label = "BusinessHours" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ButtonGroup.wrn b/packages/ui/components/ButtonGroup.wrn index 8fa14cb2..8d40d424 100644 --- a/packages/ui/components/ButtonGroup.wrn +++ b/packages/ui/components/ButtonGroup.wrn @@ -1,16 +1,19 @@ component ButtonGroup { props { - label = "Button" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" + size = "default" + color = "primary" + title = "Button Group" + description = "" + items = [] + variant = "default" class = "" } - view { } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } } diff --git a/packages/ui/components/ButtonSelector.wrn b/packages/ui/components/ButtonSelector.wrn deleted file mode 100644 index 153ec7bf..00000000 --- a/packages/ui/components/ButtonSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ButtonSelector { - props { - label = "Button" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CTASection.wrn b/packages/ui/components/CTASection.wrn deleted file mode 100644 index c18aaf80..00000000 --- a/packages/ui/components/CTASection.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component CTASection { - props { - class = "" - eyebrow = "Ready?" - title = "Start building today" - description = "" - primaryLabel = "Get started" - primaryHref = "#" - secondaryLabel = "Contact sales" - secondaryHref = "#" - } - view { -

    {eyebrow}

    {title}

    {description}

    {primaryLabel}{secondaryLabel}
    - } -} diff --git a/packages/ui/components/Calendar.wrn b/packages/ui/components/Calendar.wrn deleted file mode 100644 index ade705d9..00000000 --- a/packages/ui/components/Calendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Calendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CalendarGrid.wrn b/packages/ui/components/CalendarGrid.wrn deleted file mode 100644 index 8bf8be4f..00000000 --- a/packages/ui/components/CalendarGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CalendarGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/CalendarHeader.wrn b/packages/ui/components/CalendarHeader.wrn deleted file mode 100644 index b0584a10..00000000 --- a/packages/ui/components/CalendarHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CalendarHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CalendarNavigation.wrn b/packages/ui/components/CalendarNavigation.wrn deleted file mode 100644 index 6df42a40..00000000 --- a/packages/ui/components/CalendarNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CalendarNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CallbackUrlInput.wrn b/packages/ui/components/CallbackUrlInput.wrn deleted file mode 100644 index 6ded0fd3..00000000 --- a/packages/ui/components/CallbackUrlInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CallbackUrlInput { - props { - label = "CallbackUrl" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CampaignCard.wrn b/packages/ui/components/CampaignCard.wrn deleted file mode 100644 index 69e07e07..00000000 --- a/packages/ui/components/CampaignCard.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CampaignCard { - props { - title = "" - description = "" - href = "" - icon = "icon-[lucide--send]" - class = "" - } - view {
    {#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}Open {title}{/if}
    } -} diff --git a/packages/ui/components/CampaignPerformancePreview.wrn b/packages/ui/components/CampaignPerformancePreview.wrn deleted file mode 100644 index 36195fc8..00000000 --- a/packages/ui/components/CampaignPerformancePreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CampaignPerformancePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CampaignProgress.wrn b/packages/ui/components/CampaignProgress.wrn deleted file mode 100644 index 43dc0e85..00000000 --- a/packages/ui/components/CampaignProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CampaignProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/CapabilityGrid.wrn b/packages/ui/components/CapabilityGrid.wrn deleted file mode 100644 index 91276355..00000000 --- a/packages/ui/components/CapabilityGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CapabilityGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/CaptchaField.wrn b/packages/ui/components/CaptchaField.wrn deleted file mode 100644 index f184ae30..00000000 --- a/packages/ui/components/CaptchaField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CaptchaField { - props { - label = "Captcha" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CardPaymentForm.wrn b/packages/ui/components/CardPaymentForm.wrn deleted file mode 100644 index 2842925a..00000000 --- a/packages/ui/components/CardPaymentForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CardPaymentForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CardSelector.wrn b/packages/ui/components/CardSelector.wrn deleted file mode 100644 index 06589d62..00000000 --- a/packages/ui/components/CardSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CardSelector { - props { - label = "Card" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CardSkeleton.wrn b/packages/ui/components/CardSkeleton.wrn deleted file mode 100644 index 0b82f3e8..00000000 --- a/packages/ui/components/CardSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CardSkeleton { - props { - label = "Card" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/CareerApplicationForm.wrn b/packages/ui/components/CareerApplicationForm.wrn deleted file mode 100644 index 1f674c08..00000000 --- a/packages/ui/components/CareerApplicationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CareerApplicationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CareerBenefitsGrid.wrn b/packages/ui/components/CareerBenefitsGrid.wrn deleted file mode 100644 index fa61d70f..00000000 --- a/packages/ui/components/CareerBenefitsGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CareerBenefitsGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/Carousel.wrn b/packages/ui/components/Carousel.wrn index 0ab6f8ab..c9024c86 100644 --- a/packages/ui/components/Carousel.wrn +++ b/packages/ui/components/Carousel.wrn @@ -1,13 +1,19 @@ component Carousel { props { - eyebrow = "" - title = "" + size = "default" + color = "primary" + title = "Carousel" description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" + items = [] + variant = "default" class = "" } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } } diff --git a/packages/ui/components/CaseStudyCard.wrn b/packages/ui/components/CaseStudyCard.wrn deleted file mode 100644 index 7e3b9831..00000000 --- a/packages/ui/components/CaseStudyCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CaseStudyCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CaseStudyHero.wrn b/packages/ui/components/CaseStudyHero.wrn deleted file mode 100644 index 6adb849b..00000000 --- a/packages/ui/components/CaseStudyHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CaseStudyHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CaseStudyPreview.wrn b/packages/ui/components/CaseStudyPreview.wrn deleted file mode 100644 index 5b95a4cc..00000000 --- a/packages/ui/components/CaseStudyPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CaseStudyPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CenteredCTA.wrn b/packages/ui/components/CenteredCTA.wrn deleted file mode 100644 index 878af5a3..00000000 --- a/packages/ui/components/CenteredCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CenteredCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/CenteredHero.wrn b/packages/ui/components/CenteredHero.wrn deleted file mode 100644 index 49e37173..00000000 --- a/packages/ui/components/CenteredHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CenteredHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CenteredSectionHeader.wrn b/packages/ui/components/CenteredSectionHeader.wrn deleted file mode 100644 index 0a3fd90b..00000000 --- a/packages/ui/components/CenteredSectionHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CenteredSectionHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CertificateUpload.wrn b/packages/ui/components/CertificateUpload.wrn deleted file mode 100644 index 4a77b5c7..00000000 --- a/packages/ui/components/CertificateUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CertificateUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CertificationBadge.wrn b/packages/ui/components/CertificationBadge.wrn deleted file mode 100644 index 3489bd66..00000000 --- a/packages/ui/components/CertificationBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CertificationBadge { - props { - label = "Certification" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ChallengeSection.wrn b/packages/ui/components/ChallengeSection.wrn deleted file mode 100644 index a72934de..00000000 --- a/packages/ui/components/ChallengeSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ChallengeSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ChannelBadge.wrn b/packages/ui/components/ChannelBadge.wrn deleted file mode 100644 index 87261f3e..00000000 --- a/packages/ui/components/ChannelBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChannelBadge { - props { - label = "Channel" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ChannelCard.wrn b/packages/ui/components/ChannelCard.wrn deleted file mode 100644 index 6e9b4ce7..00000000 --- a/packages/ui/components/ChannelCard.wrn +++ /dev/null @@ -1,54 +0,0 @@ -component ChannelCard { - props { - title = "" - description = "" - href = "" - icon = "" - actionLabel = "" - class = "" - } - - view { - - } -} diff --git a/packages/ui/components/ChannelComparisonChart.wrn b/packages/ui/components/ChannelComparisonChart.wrn deleted file mode 100644 index 922c168a..00000000 --- a/packages/ui/components/ChannelComparisonChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChannelComparisonChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/ChannelComparisonTable.wrn b/packages/ui/components/ChannelComparisonTable.wrn deleted file mode 100644 index ca1066f1..00000000 --- a/packages/ui/components/ChannelComparisonTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ChannelComparisonTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ChannelFallbackDiagram.wrn b/packages/ui/components/ChannelFallbackDiagram.wrn deleted file mode 100644 index 22f85b46..00000000 --- a/packages/ui/components/ChannelFallbackDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChannelFallbackDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/ChannelFlow.wrn b/packages/ui/components/ChannelFlow.wrn deleted file mode 100644 index 97cd8ccf..00000000 --- a/packages/ui/components/ChannelFlow.wrn +++ /dev/null @@ -1,49 +0,0 @@ -component ChannelFlow { - props { - class = "" - } - - view { - - } -} diff --git a/packages/ui/components/ChannelIcon.wrn b/packages/ui/components/ChannelIcon.wrn deleted file mode 100644 index eec37ab3..00000000 --- a/packages/ui/components/ChannelIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ChannelIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ChannelRateTable.wrn b/packages/ui/components/ChannelRateTable.wrn deleted file mode 100644 index 652cc1a9..00000000 --- a/packages/ui/components/ChannelRateTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ChannelRateTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ChannelSelector.wrn b/packages/ui/components/ChannelSelector.wrn deleted file mode 100644 index 714f025f..00000000 --- a/packages/ui/components/ChannelSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ChannelSelector { - props { - label = "Channel" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CharacterCounter.wrn b/packages/ui/components/CharacterCounter.wrn deleted file mode 100644 index 40715d14..00000000 --- a/packages/ui/components/CharacterCounter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CharacterCounter { - props { - label = "Character" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/Chart.wrn b/packages/ui/components/Chart.wrn new file mode 100644 index 00000000..a1d8c853 --- /dev/null +++ b/packages/ui/components/Chart.wrn @@ -0,0 +1,19 @@ +component Chart { + props { + size = "default" + color = "primary" + title = "Chart" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/ChartEmptyState.wrn b/packages/ui/components/ChartEmptyState.wrn deleted file mode 100644 index 3245cc5e..00000000 --- a/packages/ui/components/ChartEmptyState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChartEmptyState { - props { - label = "ChartEmpty" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ChartTooltip.wrn b/packages/ui/components/ChartTooltip.wrn deleted file mode 100644 index d47fc253..00000000 --- a/packages/ui/components/ChartTooltip.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ChartTooltip { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ChatBubble.wrn b/packages/ui/components/ChatBubble.wrn new file mode 100644 index 00000000..c53d562b --- /dev/null +++ b/packages/ui/components/ChatBubble.wrn @@ -0,0 +1,19 @@ +component ChatBubble { + props { + size = "default" + color = "primary" + title = "Chat Bubble" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/CheckboxGroup.wrn b/packages/ui/components/CheckboxGroup.wrn deleted file mode 100644 index d48275d1..00000000 --- a/packages/ui/components/CheckboxGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CheckboxGroup { - props { - label = "Checkbox" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Checklist.wrn b/packages/ui/components/Checklist.wrn deleted file mode 100644 index 6bc5e9c8..00000000 --- a/packages/ui/components/Checklist.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Checklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ChecklistProgress.wrn b/packages/ui/components/ChecklistProgress.wrn deleted file mode 100644 index dd4e73d9..00000000 --- a/packages/ui/components/ChecklistProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ChecklistProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/Chip.wrn b/packages/ui/components/Chip.wrn deleted file mode 100644 index e42f4bf9..00000000 --- a/packages/ui/components/Chip.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component Chip { - props { - label = "Chip" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/ChipInput.wrn b/packages/ui/components/ChipInput.wrn deleted file mode 100644 index ffcad515..00000000 --- a/packages/ui/components/ChipInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ChipInput { - props { - label = "Chip" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CircularProgress.wrn b/packages/ui/components/CircularProgress.wrn deleted file mode 100644 index 8d938bc2..00000000 --- a/packages/ui/components/CircularProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CircularProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/CitySelector.wrn b/packages/ui/components/CitySelector.wrn deleted file mode 100644 index 521f32cb..00000000 --- a/packages/ui/components/CitySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CitySelector { - props { - label = "City" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ClearFiltersButton.wrn b/packages/ui/components/ClearFiltersButton.wrn deleted file mode 100644 index 68eb3b71..00000000 --- a/packages/ui/components/ClearFiltersButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ClearFiltersButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ClickableCard.wrn b/packages/ui/components/ClickableCard.wrn deleted file mode 100644 index 02fabcef..00000000 --- a/packages/ui/components/ClickableCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ClickableCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Clipboard.wrn b/packages/ui/components/Clipboard.wrn new file mode 100644 index 00000000..eaa43786 --- /dev/null +++ b/packages/ui/components/Clipboard.wrn @@ -0,0 +1,19 @@ +component Clipboard { + props { + size = "default" + color = "primary" + title = "Clipboard" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/CloseButton.wrn b/packages/ui/components/CloseButton.wrn deleted file mode 100644 index 40406cd0..00000000 --- a/packages/ui/components/CloseButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component CloseButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/Cluster.wrn b/packages/ui/components/Cluster.wrn deleted file mode 100644 index 2fcdafc6..00000000 --- a/packages/ui/components/Cluster.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component Cluster { - props { - class = "" - } - - view { -
    - -
    - } -} diff --git a/packages/ui/components/Code.wrn b/packages/ui/components/Code.wrn deleted file mode 100644 index 831fc056..00000000 --- a/packages/ui/components/Code.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Code { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CodeBlock.wrn b/packages/ui/components/CodeBlock.wrn deleted file mode 100644 index 66321440..00000000 --- a/packages/ui/components/CodeBlock.wrn +++ /dev/null @@ -1,26 +0,0 @@ -component CodeBlock { - props { - language = "text" - title = "" - code = "" - copyable = true - class = "" - } - - view { -
    -
    - - - {#if title}{title}{:else}{language}{/if} - - {#if copyable} - - {/if} -
    - 
    {code}
    -
    - } -} diff --git a/packages/ui/components/CodeCopyButton.wrn b/packages/ui/components/CodeCopyButton.wrn deleted file mode 100644 index dced3b68..00000000 --- a/packages/ui/components/CodeCopyButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CodeCopyButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/CodeHeader.wrn b/packages/ui/components/CodeHeader.wrn deleted file mode 100644 index bdfb4e5d..00000000 --- a/packages/ui/components/CodeHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CodeHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CodeInput.wrn b/packages/ui/components/CodeInput.wrn deleted file mode 100644 index e28dafe2..00000000 --- a/packages/ui/components/CodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CodeInput { - props { - label = "Code" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CodeLanguageBadge.wrn b/packages/ui/components/CodeLanguageBadge.wrn deleted file mode 100644 index c7fe5e3b..00000000 --- a/packages/ui/components/CodeLanguageBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CodeLanguageBadge { - props { - label = "CodeLanguage" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/CodeTabs.wrn b/packages/ui/components/CodeTabs.wrn deleted file mode 100644 index 9fd89555..00000000 --- a/packages/ui/components/CodeTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CodeTabs { - props { - class = "" - } - - view { -
    - -
    - } -} diff --git a/packages/ui/components/CodeText.wrn b/packages/ui/components/CodeText.wrn deleted file mode 100644 index 4bfbaebc..00000000 --- a/packages/ui/components/CodeText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component CodeText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/CohortChart.wrn b/packages/ui/components/CohortChart.wrn deleted file mode 100644 index 9a8fb673..00000000 --- a/packages/ui/components/CohortChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CohortChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/Collapse.wrn b/packages/ui/components/Collapse.wrn new file mode 100644 index 00000000..ddedbfca --- /dev/null +++ b/packages/ui/components/Collapse.wrn @@ -0,0 +1,15 @@ +component Collapse { + props { + size = "default" + color = "primary" + items = [] + multiple = false + class = "" + } + view { +
    + {#each items as item}
    {item.label}
    {item.content}
    {/each} + +
    + } +} diff --git a/packages/ui/components/ColorGrid.wrn b/packages/ui/components/ColorGrid.wrn deleted file mode 100644 index d8d485f1..00000000 --- a/packages/ui/components/ColorGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ColorGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ColorHexInput.wrn b/packages/ui/components/ColorHexInput.wrn deleted file mode 100644 index 22ab0804..00000000 --- a/packages/ui/components/ColorHexInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ColorHexInput { - props { - label = "ColorHex" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ColorPicker.wrn b/packages/ui/components/ColorPicker.wrn index b9d7eee4..282ca958 100644 --- a/packages/ui/components/ColorPicker.wrn +++ b/packages/ui/components/ColorPicker.wrn @@ -1,16 +1,20 @@ component ColorPicker { props { - label = "Color" + size = "default" + color = "primary" + label = "Color Picker" name = "" value = "" placeholder = "" - type = "text" - required = false + type = "color" + min = "" + max = "" + step = "" disabled = false - readonly = false - help = "" - error = "" + required = false class = "" } - view { } + view { + + } } diff --git a/packages/ui/components/ColorSelector.wrn b/packages/ui/components/ColorSelector.wrn deleted file mode 100644 index 8d86ed18..00000000 --- a/packages/ui/components/ColorSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ColorSelector { - props { - label = "Color" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ColorSwatch.wrn b/packages/ui/components/ColorSwatch.wrn deleted file mode 100644 index f82bf09c..00000000 --- a/packages/ui/components/ColorSwatch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ColorSwatch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Columns.wrn b/packages/ui/components/Columns.wrn new file mode 100644 index 00000000..a54a056e --- /dev/null +++ b/packages/ui/components/Columns.wrn @@ -0,0 +1,13 @@ +component Columns { + props { + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" + } + view { +
    + } +} diff --git a/packages/ui/components/Combobox.wrn b/packages/ui/components/Combobox.wrn index 486bb9c8..7f82992b 100644 --- a/packages/ui/components/Combobox.wrn +++ b/packages/ui/components/Combobox.wrn @@ -1,15 +1,386 @@ -component Combobox { +component ComboBox { props { - id = "combobox" + size = "default" + color = "primary" + label = "ComboBox" name = "" - label = "Choose an option" - placeholder = "Search options" + value = "" options = [] - required = false + groups = [] + placeholder = "Search or select an option" + searchPlaceholder = "Start typing…" + clearable = true + allowCustomValue = false disabled = false + required = false + invalid = false + validationMessage = "" + helpText = "" + loading = false + loadingLabel = "Loading suggestions…" + emptyLabel = "No matching options" + clearLabel = "Clear value" + toggleLabel = "Toggle suggestions" + searchMode = "contains" + searchFields = "label,description" + minSearchLength = 0 + searchResultLimit = 0 + optionTemplate = "default" + defaultOpen = false + closeOnSelect = true + fixed = false + placement = "bottom" + autocomplete = "off" + remote = false + remoteUrl = "" + remoteQueryParam = "q" + remoteDebounce = 250 + remoteAutoLoad = true + infinite = false + hasMore = false + page = 1 + loadMoreLabel = "Load more" class = "" + @event search = function + @event select = function + @event change = function + @event clear = function + @event open = function + @event close = function + @event load = function + @event error = function } + + state open = defaultOpen + state query = "" + state selectedValue = value + state activeIndex = -1 + + functions { + function allOptions() { + return [...groups.flatMap((group) => group.options || []), ...options] + } + + function searchableText(option) { + return ((option.label || "") + " " + (option.description || "")).toLowerCase() + } + + function matches(option) { + if (!query || query.length < minSearchLength) { + return true + } + if (searchMode === "startsWith") { + return searchableText(option).startsWith(query.toLowerCase()) + } + if (searchMode === "exact") { + return searchableText(option) === query.toLowerCase() + } + return searchableText(option).includes(query.toLowerCase()) + } + + function matchingOptions(list) { + return list.filter((option) => matches(option)) + } + + function visibleOptions(list) { + if (searchResultLimit > 0) { + return matchingOptions(list).slice(0, searchResultLimit) + } + return matchingOptions(list) + } + + function flatVisibleOptions() { + return visibleOptions(allOptions()) + } + + function isSelected(option) { + return selectedValue === option.value + } + + function selectedOptions() { + return allOptions().filter((option) => isSelected(option)) + } + + function selectedText() { + return selectedOptions().length ? selectedOptions()[0].label : selectedValue + } + + function inputText() { + return query || selectedText() + } + + function shouldShowDropdown() { + if (!open) { + return false + } + if (loading) { + return true + } + if (remote && query.length !== 0 && query.length < minSearchLength) { + return true + } + if (flatVisibleOptions().length) { + return true + } + return infinite && hasMore + } + + function canSelect(option) { + return !option.disabled + } + + function chooseOption(option) { + if (!canSelect(option)) { + return + } + selectedValue = option.value + query = option.label + activeIndex = optionIndex(option) + if (closeOnSelect) { + open = false + } + } + + function updateQuery(event) { + query = event.target.value + selectedValue = allowCustomValue ? event.target.value : "" + open = true + activeIndex = flatVisibleOptions().length ? 0 : -1 + } + + function clearValue(event) { + if (event) { + event.stopPropagation() + } + query = "" + selectedValue = "" + activeIndex = -1 + open = false + } + + function openDropdown() { + if (!disabled) { + open = true + activeIndex = flatVisibleOptions().length ? 0 : -1 + } + } + + function closeDropdown() { + open = false + } + + function toggle() { + if (open) { + closeDropdown() + } else { + openDropdown() + } + } + + function setValue(nextValue) { + selectedValue = nextValue + query = "" + } + + function moveActive(direction) { + if (!flatVisibleOptions().length) { + return + } + activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length + } + + function handleKeydown(event) { + if (disabled) { + return + } + if (event.key === "ArrowDown") { + event.preventDefault() + openDropdown() + moveActive(1) + } else if (event.key === "ArrowUp") { + event.preventDefault() + openDropdown() + moveActive(-1) + } else if (event.key === "Enter" && open && activeIndex >= 0) { + event.preventDefault() + chooseOption(flatVisibleOptions()[activeIndex]) + } else if (event.key === "Escape") { + closeDropdown() + } else if (event.key === "Home" && open) { + event.preventDefault() + activeIndex = 0 + } else if (event.key === "End" && open) { + event.preventDefault() + activeIndex = flatVisibleOptions().length - 1 + } + } + + function optionIndex(option) { + return flatVisibleOptions().findIndex((item) => item.value === option.value) + } + } + view { -
    {#each options as option}{/each}
    +
    + + +
    + + + + + +
    + +
    +
    Enter at least {minSearchLength} characters.
    +
    + + {loadingLabel} +
    + +
    + {#each groups as group} + {#if visibleOptions(group.options || []).length} +
    +
    {group.label}
    + {#each group.options || [] as option} + + {/each} +
    + {/if} + {/each} + + {#each options as option} + + {/each} +
    + + +
    + + {#if !allowCustomValue} + + {/if} + + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
    } } diff --git a/packages/ui/components/ComingSoonBadge.wrn b/packages/ui/components/ComingSoonBadge.wrn deleted file mode 100644 index f28408cd..00000000 --- a/packages/ui/components/ComingSoonBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component ComingSoonBadge { - props { - label = "ComingSoon" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/ComingSoonState.wrn b/packages/ui/components/ComingSoonState.wrn deleted file mode 100644 index 40e6cedc..00000000 --- a/packages/ui/components/ComingSoonState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ComingSoonState { - props { - label = "ComingSoon" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/CommandBlock.wrn b/packages/ui/components/CommandBlock.wrn deleted file mode 100644 index 5ec7f164..00000000 --- a/packages/ui/components/CommandBlock.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CommandBlock { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CommandMenu.wrn b/packages/ui/components/CommandMenu.wrn deleted file mode 100644 index 8f9def1a..00000000 --- a/packages/ui/components/CommandMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CommandMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/CommandSearchInput.wrn b/packages/ui/components/CommandSearchInput.wrn deleted file mode 100644 index e5839eba..00000000 --- a/packages/ui/components/CommandSearchInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CommandSearchInput { - props { - label = "CommandSearch" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CompanyHero.wrn b/packages/ui/components/CompanyHero.wrn deleted file mode 100644 index 5a0b0c02..00000000 --- a/packages/ui/components/CompanyHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CompanyHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CompanyNameInput.wrn b/packages/ui/components/CompanyNameInput.wrn deleted file mode 100644 index 4721ea62..00000000 --- a/packages/ui/components/CompanyNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CompanyNameInput { - props { - label = "CompanyName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CompanyPageShell.wrn b/packages/ui/components/CompanyPageShell.wrn deleted file mode 100644 index dca2426c..00000000 --- a/packages/ui/components/CompanyPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CompanyPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/CompanySizeSelector.wrn b/packages/ui/components/CompanySizeSelector.wrn deleted file mode 100644 index 3fd0a219..00000000 --- a/packages/ui/components/CompanySizeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CompanySizeSelector { - props { - label = "CompanySize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ComparisonDateRangePicker.wrn b/packages/ui/components/ComparisonDateRangePicker.wrn deleted file mode 100644 index 5120aea2..00000000 --- a/packages/ui/components/ComparisonDateRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ComparisonDateRangePicker { - props { - label = "ComparisonDateRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ComparisonTable.wrn b/packages/ui/components/ComparisonTable.wrn deleted file mode 100644 index 1a576d59..00000000 --- a/packages/ui/components/ComparisonTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ComparisonTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/CompletionMeter.wrn b/packages/ui/components/CompletionMeter.wrn deleted file mode 100644 index 77db45d4..00000000 --- a/packages/ui/components/CompletionMeter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CompletionMeter { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/ComplianceBadgeList.wrn b/packages/ui/components/ComplianceBadgeList.wrn deleted file mode 100644 index 968c0673..00000000 --- a/packages/ui/components/ComplianceBadgeList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ComplianceBadgeList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ComplianceProgramCard.wrn b/packages/ui/components/ComplianceProgramCard.wrn deleted file mode 100644 index e3591731..00000000 --- a/packages/ui/components/ComplianceProgramCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ComplianceProgramCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Confetti.wrn b/packages/ui/components/Confetti.wrn new file mode 100644 index 00000000..90b1ff86 --- /dev/null +++ b/packages/ui/components/Confetti.wrn @@ -0,0 +1,19 @@ +component Confetti { + props { + size = "default" + color = "primary" + title = "Confetti" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/ConfirmPasswordInput.wrn b/packages/ui/components/ConfirmPasswordInput.wrn deleted file mode 100644 index 98839b1d..00000000 --- a/packages/ui/components/ConfirmPasswordInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ConfirmPasswordInput { - props { - label = "ConfirmPassword" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ConfirmationDialog.wrn b/packages/ui/components/ConfirmationDialog.wrn deleted file mode 100644 index 9f74ed29..00000000 --- a/packages/ui/components/ConfirmationDialog.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component ConfirmationDialog { - props { - title = "Confirm action" - description = "Are you sure you want to continue?" - confirmLabel = "Confirm" - cancelLabel = "Cancel" - danger = false - open = false - class = "" - } - state visible = open - view { - - } -} diff --git a/packages/ui/components/ConnectedAccountCard.wrn b/packages/ui/components/ConnectedAccountCard.wrn deleted file mode 100644 index 6abc75d7..00000000 --- a/packages/ui/components/ConnectedAccountCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ConnectedAccountCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ConnectionCard.wrn b/packages/ui/components/ConnectionCard.wrn deleted file mode 100644 index 906931c1..00000000 --- a/packages/ui/components/ConnectionCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ConnectionCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ConsentTimelinePreview.wrn b/packages/ui/components/ConsentTimelinePreview.wrn deleted file mode 100644 index 5bcb0aca..00000000 --- a/packages/ui/components/ConsentTimelinePreview.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component ConsentTimelinePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    {#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    - } -} diff --git a/packages/ui/components/ContactCTA.wrn b/packages/ui/components/ContactCTA.wrn deleted file mode 100644 index 0c1de8f0..00000000 --- a/packages/ui/components/ContactCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ContactCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ContactCard.wrn b/packages/ui/components/ContactCard.wrn deleted file mode 100644 index 4e3dbeba..00000000 --- a/packages/ui/components/ContactCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ContactCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ContactForm.wrn b/packages/ui/components/ContactForm.wrn deleted file mode 100644 index c9c619d3..00000000 --- a/packages/ui/components/ContactForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ContactForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ContactHero.wrn b/packages/ui/components/ContactHero.wrn deleted file mode 100644 index 70e59691..00000000 --- a/packages/ui/components/ContactHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ContactHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ContactPageShell.wrn b/packages/ui/components/ContactPageShell.wrn deleted file mode 100644 index 1627cea5..00000000 --- a/packages/ui/components/ContactPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ContactPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ContactSalesBanner.wrn b/packages/ui/components/ContactSalesBanner.wrn deleted file mode 100644 index 58a954d9..00000000 --- a/packages/ui/components/ContactSalesBanner.wrn +++ /dev/null @@ -1,195 +0,0 @@ -component ContactSalesBanner { - props { - class: string = "" - eyebrow = "Enterprise identity" - title = "Ready to secure your next application?" - description = "" - - primaryLabel = "Contact sales" - primaryHref = "/contact" - - secondaryLabel = "Start free" - secondaryHref = "/sign-up" - - iconClass = "icon-[lucide--messages-square]" - - centered = false - compact = false - - points = [] - trustPoints = [] - } - - view { -
    -
    - - - -
    - -
    - -
    - -
    - - - - {eyebrow} - -
    - - -

    - {title} -

    - - -

    - {description} -

    - - -
    - {#each points.slice(0, 4) as point} -
    - - - - - {point} -
    - {/each} -
    -
    - - -
    - - {secondaryLabel} - - - - {primaryLabel} - - - -
    -
    - - -
    -
    - {#each trustPoints.slice(0, 4) as trustPoint} - - - - {trustPoint.label} - - {/each} -
    -
    -
    -
    -
    - } -} diff --git a/packages/ui/components/ContactSalesButton.wrn b/packages/ui/components/ContactSalesButton.wrn deleted file mode 100644 index 8d721b0e..00000000 --- a/packages/ui/components/ContactSalesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ContactSalesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ContactSalesForm.wrn b/packages/ui/components/ContactSalesForm.wrn deleted file mode 100644 index 2a734465..00000000 --- a/packages/ui/components/ContactSalesForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ContactSalesForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ContextMenu.wrn b/packages/ui/components/ContextMenu.wrn index c5ff0774..543f5314 100644 --- a/packages/ui/components/ContextMenu.wrn +++ b/packages/ui/components/ContextMenu.wrn @@ -1,10 +1,19 @@ component ContextMenu { props { - title = "" + size = "default" + color = "primary" + title = "Context Menu" description = "" open = false + placement = "bottom" closeLabel = "Close" class = "" } - view {
    } + view { +
    +
    {title}
    + {#if description}

    {description}

    {/if} + +
    + } } diff --git a/packages/ui/components/ContextSwitcher.wrn b/packages/ui/components/ContextSwitcher.wrn deleted file mode 100644 index ab6cff0c..00000000 --- a/packages/ui/components/ContextSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ContextSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ConversationList.wrn b/packages/ui/components/ConversationList.wrn deleted file mode 100644 index 809f57ad..00000000 --- a/packages/ui/components/ConversationList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ConversationList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ConversationPreview.wrn b/packages/ui/components/ConversationPreview.wrn deleted file mode 100644 index 14ba92dd..00000000 --- a/packages/ui/components/ConversationPreview.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component ConversationPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    {#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    - } -} diff --git a/packages/ui/components/ConversionChart.wrn b/packages/ui/components/ConversionChart.wrn deleted file mode 100644 index 2840b608..00000000 --- a/packages/ui/components/ConversionChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ConversionChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/CookieBanner.wrn b/packages/ui/components/CookieBanner.wrn deleted file mode 100644 index af715639..00000000 --- a/packages/ui/components/CookieBanner.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component CookieBanner { - props { - class = "" - title = "We use cookies" - description = "We use essential cookies and optional analytics to improve your experience." - privacyHref = "/privacy" - } - state visible = true - view { - - } -} diff --git a/packages/ui/components/CookieCategoryList.wrn b/packages/ui/components/CookieCategoryList.wrn deleted file mode 100644 index c2a9d812..00000000 --- a/packages/ui/components/CookieCategoryList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CookieCategoryList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/CookieCategoryToggle.wrn b/packages/ui/components/CookieCategoryToggle.wrn deleted file mode 100644 index d596498b..00000000 --- a/packages/ui/components/CookieCategoryToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CookieCategoryToggle { - props { - label = "CookieCategory" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CookieConsent.wrn b/packages/ui/components/CookieConsent.wrn deleted file mode 100644 index 58f63e21..00000000 --- a/packages/ui/components/CookieConsent.wrn +++ /dev/null @@ -1,372 +0,0 @@ -component CookieConsent { - props { - class: string = "" - } - state bannerOpen = false - state preferencesOpen = false - - state analyticsCookies = false - state personalizationCookies = false - state marketingCookies = false - - view { -
    - - - - - - - - -
    - } -} diff --git a/packages/ui/components/CookieDetailsTable.wrn b/packages/ui/components/CookieDetailsTable.wrn deleted file mode 100644 index f366829d..00000000 --- a/packages/ui/components/CookieDetailsTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CookieDetailsTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/CookiePreferencesDialog.wrn b/packages/ui/components/CookiePreferencesDialog.wrn deleted file mode 100644 index a74888fd..00000000 --- a/packages/ui/components/CookiePreferencesDialog.wrn +++ /dev/null @@ -1,17 +0,0 @@ -component CookiePreferencesDialog { - props { - title = "Cookie preferences" - description = "Choose which optional cookies you allow. Essential cookies are always enabled." - saveLabel = "Save preferences" - acceptLabel = "Accept all" - rejectLabel = "Reject optional" - open = false - class = "" - } - state visible = open - state analytics = false - state marketing = false - view { - - } -} diff --git a/packages/ui/components/CookieTable.wrn b/packages/ui/components/CookieTable.wrn deleted file mode 100644 index 411e7946..00000000 --- a/packages/ui/components/CookieTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component CookieTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/CoordinatesInput.wrn b/packages/ui/components/CoordinatesInput.wrn deleted file mode 100644 index 520ae166..00000000 --- a/packages/ui/components/CoordinatesInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CoordinatesInput { - props { - label = "Coordinates" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CoordinatesPicker.wrn b/packages/ui/components/CoordinatesPicker.wrn deleted file mode 100644 index 84e04c62..00000000 --- a/packages/ui/components/CoordinatesPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CoordinatesPicker { - props { - label = "Coordinates" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CopyButton.wrn b/packages/ui/components/CopyButton.wrn deleted file mode 100644 index 07a68c31..00000000 --- a/packages/ui/components/CopyButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component CopyButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/CopyCodeButton.wrn b/packages/ui/components/CopyCodeButton.wrn deleted file mode 100644 index da387b20..00000000 --- a/packages/ui/components/CopyCodeButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CopyCodeButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/CopyMarkup.wrn b/packages/ui/components/CopyMarkup.wrn new file mode 100644 index 00000000..c053b12a --- /dev/null +++ b/packages/ui/components/CopyMarkup.wrn @@ -0,0 +1,20 @@ +component CopyMarkup { + props { + size = "default" + color = "primary" + label = "Copy Markup" + name = "" + value = "" + placeholder = "" + type = "text" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/packages/ui/components/CopySecretField.wrn b/packages/ui/components/CopySecretField.wrn deleted file mode 100644 index e016e880..00000000 --- a/packages/ui/components/CopySecretField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CopySecretField { - props { - label = "CopySecret" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CostBreakdownChart.wrn b/packages/ui/components/CostBreakdownChart.wrn deleted file mode 100644 index 1a773cdd..00000000 --- a/packages/ui/components/CostBreakdownChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component CostBreakdownChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/CostSummary.wrn b/packages/ui/components/CostSummary.wrn deleted file mode 100644 index 98368415..00000000 --- a/packages/ui/components/CostSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CostSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Counter.wrn b/packages/ui/components/Counter.wrn deleted file mode 100644 index 95ef7af3..00000000 --- a/packages/ui/components/Counter.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component Counter { - props { - label = "Status" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/CountryCallingCodeInput.wrn b/packages/ui/components/CountryCallingCodeInput.wrn deleted file mode 100644 index 044717e6..00000000 --- a/packages/ui/components/CountryCallingCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CountryCallingCodeInput { - props { - label = "CountryCallingCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CountryCallingCodeSelector.wrn b/packages/ui/components/CountryCallingCodeSelector.wrn deleted file mode 100644 index 2b0913d1..00000000 --- a/packages/ui/components/CountryCallingCodeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CountryCallingCodeSelector { - props { - label = "CountryCallingCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CountrySelector.wrn b/packages/ui/components/CountrySelector.wrn deleted file mode 100644 index 0cd618c9..00000000 --- a/packages/ui/components/CountrySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CountrySelector { - props { - label = "Country" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CouponInput.wrn b/packages/ui/components/CouponInput.wrn deleted file mode 100644 index e6592370..00000000 --- a/packages/ui/components/CouponInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CouponInput { - props { - label = "Coupon" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CreditAmountInput.wrn b/packages/ui/components/CreditAmountInput.wrn deleted file mode 100644 index 68aade4d..00000000 --- a/packages/ui/components/CreditAmountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CreditAmountInput { - props { - label = "CreditAmount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CronBuilder.wrn b/packages/ui/components/CronBuilder.wrn deleted file mode 100644 index cf7ec37a..00000000 --- a/packages/ui/components/CronBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CronBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CronInput.wrn b/packages/ui/components/CronInput.wrn deleted file mode 100644 index 04e14a7c..00000000 --- a/packages/ui/components/CronInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CronInput { - props { - label = "Cron" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CsvUpload.wrn b/packages/ui/components/CsvUpload.wrn deleted file mode 100644 index 7fb0953e..00000000 --- a/packages/ui/components/CsvUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CsvUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CurrencyInput.wrn b/packages/ui/components/CurrencyInput.wrn deleted file mode 100644 index 9a4dac50..00000000 --- a/packages/ui/components/CurrencyInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CurrencyInput { - props { - label = "Currency" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CurrencySelector.wrn b/packages/ui/components/CurrencySelector.wrn deleted file mode 100644 index 520c86c7..00000000 --- a/packages/ui/components/CurrencySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CurrencySelector { - props { - label = "Currency" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CurrentPasswordInput.wrn b/packages/ui/components/CurrentPasswordInput.wrn deleted file mode 100644 index 3a1d6f22..00000000 --- a/packages/ui/components/CurrentPasswordInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component CurrentPasswordInput { - props { - label = "CurrentPassword" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/CustomScrollbar.wrn b/packages/ui/components/CustomScrollbar.wrn new file mode 100644 index 00000000..7ed9de16 --- /dev/null +++ b/packages/ui/components/CustomScrollbar.wrn @@ -0,0 +1,13 @@ +component CustomScrollbar { + props { + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" + } + view { +
    + } +} diff --git a/packages/ui/components/CustomerLogo.wrn b/packages/ui/components/CustomerLogo.wrn deleted file mode 100644 index a13c1ec3..00000000 --- a/packages/ui/components/CustomerLogo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CustomerLogo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/CustomerStoryCard.wrn b/packages/ui/components/CustomerStoryCard.wrn deleted file mode 100644 index b0945b4f..00000000 --- a/packages/ui/components/CustomerStoryCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component CustomerStoryCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DangerButton.wrn b/packages/ui/components/DangerButton.wrn deleted file mode 100644 index ec738080..00000000 --- a/packages/ui/components/DangerButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component DangerButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/DataMap.wrn b/packages/ui/components/DataMap.wrn new file mode 100644 index 00000000..19098606 --- /dev/null +++ b/packages/ui/components/DataMap.wrn @@ -0,0 +1,19 @@ +component DataMap { + props { + size = "default" + color = "primary" + title = "Data Map" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/DataProtectionCard.wrn b/packages/ui/components/DataProtectionCard.wrn deleted file mode 100644 index a3c5dcbf..00000000 --- a/packages/ui/components/DataProtectionCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DataProtectionCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DataRetentionTable.wrn b/packages/ui/components/DataRetentionTable.wrn deleted file mode 100644 index 0292cd3f..00000000 --- a/packages/ui/components/DataRetentionTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DataRetentionTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/DataTable.wrn b/packages/ui/components/DataTable.wrn index a6220a9c..075dbd05 100644 --- a/packages/ui/components/DataTable.wrn +++ b/packages/ui/components/DataTable.wrn @@ -1,13 +1,14 @@ component DataTable { props { - caption = "Data table" + size = "default" + color = "primary" + caption = "Data Table" columns = [] rows = [] - emptyMessage = "No data available." - striped = false + striped = true class = "" } view { -
    {#each columns as column}{/each}{#each rows as row}{#each columns as column}{/each}{:empty}{/each}
    {caption}
    {column.label}
    {row[column.key]}
    {emptyMessage}
    +
    {#each columns as column}{/each}{#each rows as row}{#each columns as column}{/each}{/each}
    {caption}
    {column.label}
    {row[column.key]}
    } } diff --git a/packages/ui/components/DateInput.wrn b/packages/ui/components/DateInput.wrn deleted file mode 100644 index 626844e8..00000000 --- a/packages/ui/components/DateInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component DateInput { - props { - class = "" - id: string = "" - name: string = "" - label: string = "Date" - value: string = "" - placeholder: string = "" - help: string = "" - error: string = "" - required: boolean = false - disabled: boolean = false - readonly: boolean = false - autocomplete: string = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/DatePicker.wrn b/packages/ui/components/DatePicker.wrn index 57b5c294..6a604af1 100644 --- a/packages/ui/components/DatePicker.wrn +++ b/packages/ui/components/DatePicker.wrn @@ -1,15 +1,20 @@ component DatePicker { props { + size = "default" + color = "primary" + label = "Date Picker" + name = "" + value = "" + placeholder = "" + type = "date" + min = "" + max = "" + step = "" + disabled = false + required = false class = "" - id: string = "date" - name: string = "date" - label: string = "Date" - value: string = "" - min: string = "" - max: string = "" - required: boolean = false } view { - + } } diff --git a/packages/ui/components/DateRangeCalendar.wrn b/packages/ui/components/DateRangeCalendar.wrn deleted file mode 100644 index 03333d98..00000000 --- a/packages/ui/components/DateRangeCalendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DateRangeCalendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DateRangePicker.wrn b/packages/ui/components/DateRangePicker.wrn deleted file mode 100644 index 9ffb7dc6..00000000 --- a/packages/ui/components/DateRangePicker.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DateRangePicker { - props { - class = "" - label = "Date range" - startName = "startDate" - endName = "endDate" - } - view { -
    {label}
    - } -} diff --git a/packages/ui/components/DateRangeSlider.wrn b/packages/ui/components/DateRangeSlider.wrn deleted file mode 100644 index a7ab515a..00000000 --- a/packages/ui/components/DateRangeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DateRangeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DateTimeInput.wrn b/packages/ui/components/DateTimeInput.wrn deleted file mode 100644 index 3f1fb792..00000000 --- a/packages/ui/components/DateTimeInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component DateTimeInput { - props { - class = "" - id = "" - name = "" - label = "DateTime" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/DateTimePicker.wrn b/packages/ui/components/DateTimePicker.wrn deleted file mode 100644 index 341f5464..00000000 --- a/packages/ui/components/DateTimePicker.wrn +++ /dev/null @@ -1,14 +0,0 @@ -component DateTimePicker { - props { - id = "datetime-picker" - name = "datetime" - label = "Date and time" - value = "" - min = "" - max = "" - required = false - disabled = false - class = "" - } - view {
    } -} diff --git a/packages/ui/components/DateTimeRangePicker.wrn b/packages/ui/components/DateTimeRangePicker.wrn deleted file mode 100644 index fec48f5f..00000000 --- a/packages/ui/components/DateTimeRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DateTimeRangePicker { - props { - label = "DateTimeRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DecimalInput.wrn b/packages/ui/components/DecimalInput.wrn deleted file mode 100644 index 724952b5..00000000 --- a/packages/ui/components/DecimalInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DecimalInput { - props { - label = "Decimal" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DefinitionList.wrn b/packages/ui/components/DefinitionList.wrn deleted file mode 100644 index 4535aee5..00000000 --- a/packages/ui/components/DefinitionList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DefinitionList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/DeleteConfirmationDialog.wrn b/packages/ui/components/DeleteConfirmationDialog.wrn deleted file mode 100644 index 4c57325c..00000000 --- a/packages/ui/components/DeleteConfirmationDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DeleteConfirmationDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/DeliveryPreview.wrn b/packages/ui/components/DeliveryPreview.wrn deleted file mode 100644 index dcf13d00..00000000 --- a/packages/ui/components/DeliveryPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DeliveryPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DeliveryStatusChart.wrn b/packages/ui/components/DeliveryStatusChart.wrn deleted file mode 100644 index 2eec2737..00000000 --- a/packages/ui/components/DeliveryStatusChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeliveryStatusChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/DeliveryStatusTimeline.wrn b/packages/ui/components/DeliveryStatusTimeline.wrn deleted file mode 100644 index 31d90d63..00000000 --- a/packages/ui/components/DeliveryStatusTimeline.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeliveryStatusTimeline { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/DemoRequestForm.wrn b/packages/ui/components/DemoRequestForm.wrn deleted file mode 100644 index daec8dee..00000000 --- a/packages/ui/components/DemoRequestForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DemoRequestForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DepartmentInput.wrn b/packages/ui/components/DepartmentInput.wrn deleted file mode 100644 index 833f66d5..00000000 --- a/packages/ui/components/DepartmentInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DepartmentInput { - props { - label = "Department" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DeprecatedFeatureAlert.wrn b/packages/ui/components/DeprecatedFeatureAlert.wrn deleted file mode 100644 index 1b750233..00000000 --- a/packages/ui/components/DeprecatedFeatureAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeprecatedFeatureAlert { - props { - label = "DeprecatedFeature" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/DescriptionList.wrn b/packages/ui/components/DescriptionList.wrn deleted file mode 100644 index 93cddb8f..00000000 --- a/packages/ui/components/DescriptionList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DescriptionList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/DesktopNavigation.wrn b/packages/ui/components/DesktopNavigation.wrn deleted file mode 100644 index cf9b53b7..00000000 --- a/packages/ui/components/DesktopNavigation.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component DesktopNavigation { - props { - label = "Primary navigation" - items = [] - class = "" - } - view { } -} diff --git a/packages/ui/components/DeveloperCTA.wrn b/packages/ui/components/DeveloperCTA.wrn deleted file mode 100644 index ed4aafe0..00000000 --- a/packages/ui/components/DeveloperCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DeveloperCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/DeveloperHero.wrn b/packages/ui/components/DeveloperHero.wrn deleted file mode 100644 index cf3536da..00000000 --- a/packages/ui/components/DeveloperHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DeveloperHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/DeveloperPageShell.wrn b/packages/ui/components/DeveloperPageShell.wrn deleted file mode 100644 index cb5214a3..00000000 --- a/packages/ui/components/DeveloperPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DeveloperPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/DeveloperSearch.wrn b/packages/ui/components/DeveloperSearch.wrn deleted file mode 100644 index cd049bfd..00000000 --- a/packages/ui/components/DeveloperSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DeveloperSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DevelopersMegaMenu.wrn b/packages/ui/components/DevelopersMegaMenu.wrn deleted file mode 100644 index 529dddfc..00000000 --- a/packages/ui/components/DevelopersMegaMenu.wrn +++ /dev/null @@ -1,421 +0,0 @@ -component DevelopersMegaMenu { - props { - class: string = "" - } - view { -
    -
    -
    - - -
    -
    -
    -

    - Developers -

    - -

    - Build secure identity into any application -

    - -

    - Explore documentation, APIs, SDKs, examples, and tools built - for modern development teams. -

    -
    - - -
    - -
    - - - - - - - - - - - Documentation - - - - - - - Guides for authentication, users, organizations, and - authorization. - - - - - - - - - - - - - - API reference - - - - - - - Complete endpoint, request, response, and error - documentation. - - - - - - - - - - - - - - SDKs - - - - - - - Official libraries for JavaScript, TypeScript, Go, Java, - Python, and more. - - - - - - - - - - - - - - Examples - - - - - - - Ready-to-run projects for common frameworks and identity - flows. - - - - - - - - - - - - - - Webhooks - - - - - - - Respond to user, session, organization, and security events. - - - - - - - - - - - - - - Changelog - - - - - - - Review platform releases, improvements, and migration notes. - - - -
    - - - Open documentation - - - -
    - - - -
    - - -
    -
    - - - - Authentication guides - - - - - - Organizations - - - - - - Authorization - - - - - - - - - System status - -
    - - - Developer support - - - -
    -
    -
    - } -} diff --git a/packages/ui/components/DevelopersMenu.wrn b/packages/ui/components/DevelopersMenu.wrn deleted file mode 100644 index a971815e..00000000 --- a/packages/ui/components/DevelopersMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DevelopersMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/DeviceCard.wrn b/packages/ui/components/DeviceCard.wrn deleted file mode 100644 index cedc0bcb..00000000 --- a/packages/ui/components/DeviceCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DeviceCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DeviceFrame.wrn b/packages/ui/components/DeviceFrame.wrn new file mode 100644 index 00000000..5787a4b5 --- /dev/null +++ b/packages/ui/components/DeviceFrame.wrn @@ -0,0 +1,19 @@ +component DeviceFrame { + props { + size = "default" + color = "primary" + title = "Device Frame" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/DiscountInput.wrn b/packages/ui/components/DiscountInput.wrn deleted file mode 100644 index c18429be..00000000 --- a/packages/ui/components/DiscountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DiscountInput { - props { - label = "Discount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DisplayHeading.wrn b/packages/ui/components/DisplayHeading.wrn deleted file mode 100644 index fedf276c..00000000 --- a/packages/ui/components/DisplayHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component DisplayHeading { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/DisplayNameInput.wrn b/packages/ui/components/DisplayNameInput.wrn deleted file mode 100644 index 763031f2..00000000 --- a/packages/ui/components/DisplayNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DisplayNameInput { - props { - label = "DisplayName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DoNotSellLink.wrn b/packages/ui/components/DoNotSellLink.wrn deleted file mode 100644 index a98c0af4..00000000 --- a/packages/ui/components/DoNotSellLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DoNotSellLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/DocumentPreview.wrn b/packages/ui/components/DocumentPreview.wrn deleted file mode 100644 index c08fd513..00000000 --- a/packages/ui/components/DocumentPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DocumentPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DocumentUpload.wrn b/packages/ui/components/DocumentUpload.wrn deleted file mode 100644 index 4b2665cb..00000000 --- a/packages/ui/components/DocumentUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DocumentUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DomainInput.wrn b/packages/ui/components/DomainInput.wrn deleted file mode 100644 index b55a2d82..00000000 --- a/packages/ui/components/DomainInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DomainInput { - props { - label = "Domain" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DonutChart.wrn b/packages/ui/components/DonutChart.wrn deleted file mode 100644 index e4b6c899..00000000 --- a/packages/ui/components/DonutChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DonutChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/DownloadAction.wrn b/packages/ui/components/DownloadAction.wrn deleted file mode 100644 index 80555512..00000000 --- a/packages/ui/components/DownloadAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DownloadAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/DownloadButton.wrn b/packages/ui/components/DownloadButton.wrn deleted file mode 100644 index 41a3c7ab..00000000 --- a/packages/ui/components/DownloadButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component DownloadButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/DownloadGateForm.wrn b/packages/ui/components/DownloadGateForm.wrn deleted file mode 100644 index 88f03dec..00000000 --- a/packages/ui/components/DownloadGateForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DownloadGateForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DownloadPolicyButton.wrn b/packages/ui/components/DownloadPolicyButton.wrn deleted file mode 100644 index 08635cab..00000000 --- a/packages/ui/components/DownloadPolicyButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component DownloadPolicyButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/DownloadResourceForm.wrn b/packages/ui/components/DownloadResourceForm.wrn deleted file mode 100644 index 91bcaf6d..00000000 --- a/packages/ui/components/DownloadResourceForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DownloadResourceForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/DragAndDrop.wrn b/packages/ui/components/DragAndDrop.wrn new file mode 100644 index 00000000..2b97f1a7 --- /dev/null +++ b/packages/ui/components/DragAndDrop.wrn @@ -0,0 +1,19 @@ +component DragAndDrop { + props { + size = "default" + color = "primary" + title = "Drag And Drop" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/Drawer.wrn b/packages/ui/components/Drawer.wrn index 3a8ea618..9d460fc1 100644 --- a/packages/ui/components/Drawer.wrn +++ b/packages/ui/components/Drawer.wrn @@ -1,12 +1,19 @@ component Drawer { props { - class = "" - title = "Panel" + size = "default" + color = "primary" + title = "Drawer" + description = "" open = false - side = "right" + placement = "bottom" + closeLabel = "Close" + class = "" } - state visible = open view { - + } } diff --git a/packages/ui/components/Dropdown.wrn b/packages/ui/components/Dropdown.wrn new file mode 100644 index 00000000..d1f8c352 --- /dev/null +++ b/packages/ui/components/Dropdown.wrn @@ -0,0 +1,19 @@ +component Dropdown { + props { + size = "default" + color = "primary" + title = "Dropdown" + description = "" + open = false + placement = "bottom" + closeLabel = "Close" + class = "" + } + view { +
    +
    {title}
    + {#if description}

    {description}

    {/if} + +
    + } +} diff --git a/packages/ui/components/DropdownMenu.wrn b/packages/ui/components/DropdownMenu.wrn deleted file mode 100644 index ea34d28c..00000000 --- a/packages/ui/components/DropdownMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DropdownMenu { - props { - class = "" - label = "Menu" - } - state open = false - view { -
    - } -} diff --git a/packages/ui/components/DropdownNavigation.wrn b/packages/ui/components/DropdownNavigation.wrn deleted file mode 100644 index f41eb1cf..00000000 --- a/packages/ui/components/DropdownNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component DropdownNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/DurationInput.wrn b/packages/ui/components/DurationInput.wrn deleted file mode 100644 index 1b11745c..00000000 --- a/packages/ui/components/DurationInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DurationInput { - props { - label = "Duration" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DurationPicker.wrn b/packages/ui/components/DurationPicker.wrn deleted file mode 100644 index 57f2fedf..00000000 --- a/packages/ui/components/DurationPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component DurationPicker { - props { - label = "Duration" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/DurationSlider.wrn b/packages/ui/components/DurationSlider.wrn deleted file mode 100644 index 1d3557c7..00000000 --- a/packages/ui/components/DurationSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component DurationSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ElevatedCard.wrn b/packages/ui/components/ElevatedCard.wrn deleted file mode 100644 index a8ec601e..00000000 --- a/packages/ui/components/ElevatedCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ElevatedCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/EmailBodyEditor.wrn b/packages/ui/components/EmailBodyEditor.wrn deleted file mode 100644 index 8df9bccf..00000000 --- a/packages/ui/components/EmailBodyEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component EmailBodyEditor { - props { - label = "EmailBody" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/EmailComposer.wrn b/packages/ui/components/EmailComposer.wrn deleted file mode 100644 index 08e7fa58..00000000 --- a/packages/ui/components/EmailComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EmailComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/EmailInput.wrn b/packages/ui/components/EmailInput.wrn deleted file mode 100644 index d601b5ec..00000000 --- a/packages/ui/components/EmailInput.wrn +++ /dev/null @@ -1,27 +0,0 @@ -component EmailInput { - props { - class = "" - id = "email" - name = "email" - label = "Email" - value = "" - placeholder = "you@company.com" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "email" - } - view { -
    - -
    - - -
    - {#if help && !error}

    {help}

    {/if} - {#if error}{/if} -
    - } -} diff --git a/packages/ui/components/EmojiPicker.wrn b/packages/ui/components/EmojiPicker.wrn deleted file mode 100644 index 5597ed59..00000000 --- a/packages/ui/components/EmojiPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component EmojiPicker { - props { - label = "Emoji" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/EmptyState.wrn b/packages/ui/components/EmptyState.wrn deleted file mode 100644 index c3c870e6..00000000 --- a/packages/ui/components/EmptyState.wrn +++ /dev/null @@ -1,167 +0,0 @@ -component EmptyState { - props { - class: string = "" - eyebrow = "" - title = "Nothing found" - description = "" - - iconClass = "icon-[lucide--inbox]" - - primaryLabel = "" - primaryHref = "" - - secondaryLabel = "" - secondaryHref = "" - - compact = false - centered = true - - suggestions = [] - } - - view { -
    -
    - - - -
    -
    - -
    - - - -
    - - -

    - {eyebrow} -

    - - -

    - {title} -

    - - -

    - {description} -

    - - -
    - {#each suggestions.slice(0, 4) as suggestion} - - - - {suggestion.label} - - {/each} -
    - - -
    - - {secondaryLabel} - - - - {primaryLabel} - - - -
    -
    -
    -
    -
    - } -} diff --git a/packages/ui/components/EncryptionDiagram.wrn b/packages/ui/components/EncryptionDiagram.wrn deleted file mode 100644 index 99b62da6..00000000 --- a/packages/ui/components/EncryptionDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component EncryptionDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/EnterpriseCTA.wrn b/packages/ui/components/EnterpriseCTA.wrn deleted file mode 100644 index 5d35e4ab..00000000 --- a/packages/ui/components/EnterpriseCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component EnterpriseCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/EnterpriseHero.wrn b/packages/ui/components/EnterpriseHero.wrn deleted file mode 100644 index eb5fda6d..00000000 --- a/packages/ui/components/EnterpriseHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component EnterpriseHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/EnterprisePricingCard.wrn b/packages/ui/components/EnterprisePricingCard.wrn deleted file mode 100644 index 420f76fd..00000000 --- a/packages/ui/components/EnterprisePricingCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EnterprisePricingCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/EnvironmentSelector.wrn b/packages/ui/components/EnvironmentSelector.wrn deleted file mode 100644 index 0f5585bf..00000000 --- a/packages/ui/components/EnvironmentSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component EnvironmentSelector { - props { - label = "Environment" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/EnvironmentSwitcher.wrn b/packages/ui/components/EnvironmentSwitcher.wrn deleted file mode 100644 index 36b25835..00000000 --- a/packages/ui/components/EnvironmentSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EnvironmentSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ErrorActions.wrn b/packages/ui/components/ErrorActions.wrn deleted file mode 100644 index 4ea87d53..00000000 --- a/packages/ui/components/ErrorActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ErrorActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ErrorCard.wrn b/packages/ui/components/ErrorCard.wrn deleted file mode 100644 index 8d80152c..00000000 --- a/packages/ui/components/ErrorCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ErrorCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ErrorCode.wrn b/packages/ui/components/ErrorCode.wrn deleted file mode 100644 index 50e60779..00000000 --- a/packages/ui/components/ErrorCode.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ErrorCode { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ErrorHero.wrn b/packages/ui/components/ErrorHero.wrn deleted file mode 100644 index 11cb3fdc..00000000 --- a/packages/ui/components/ErrorHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ErrorHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ErrorIllustration.wrn b/packages/ui/components/ErrorIllustration.wrn deleted file mode 100644 index c588c2b2..00000000 --- a/packages/ui/components/ErrorIllustration.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ErrorIllustration { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ErrorPage.wrn b/packages/ui/components/ErrorPage.wrn deleted file mode 100644 index 74749556..00000000 --- a/packages/ui/components/ErrorPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ErrorPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ErrorPageShell.wrn b/packages/ui/components/ErrorPageShell.wrn deleted file mode 100644 index 9fd5e587..00000000 --- a/packages/ui/components/ErrorPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ErrorPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ErrorState.wrn b/packages/ui/components/ErrorState.wrn deleted file mode 100644 index b3776e7d..00000000 --- a/packages/ui/components/ErrorState.wrn +++ /dev/null @@ -1,193 +0,0 @@ -component ErrorState { - props { - class: string = "" - type = "error" - - eyebrow = "" - title = "Something went wrong" - description = "" - - errorCode = "" - - iconClass = "" - - primaryLabel = "" - primaryHref = "" - - secondaryLabel = "" - secondaryHref = "" - - retryLabel = "" - retryAction = "" - - centered = true - compact = false - - details = [] - } - - view { -
    -
    - - - -
    -
    - -
    -
    - - - - - -
    -
    - - -
    - - {errorCode} - -
    - - -

    - {eyebrow} -

    - - -

    - {title} -

    - - -

    - {description} -

    - - -
    - {#each details.slice(0, 4) as detail} -
    - - - - - {detail.label} -
    - {/each} -
    - - -
    - - - {secondaryLabel} - - - - - - - - {primaryLabel} - - - -
    -
    -
    -
    -
    - } -} diff --git a/packages/ui/components/ErrorSupportLink.wrn b/packages/ui/components/ErrorSupportLink.wrn deleted file mode 100644 index f1ae500b..00000000 --- a/packages/ui/components/ErrorSupportLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ErrorSupportLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/EstimatedCostSummary.wrn b/packages/ui/components/EstimatedCostSummary.wrn deleted file mode 100644 index 7ecf7ad0..00000000 --- a/packages/ui/components/EstimatedCostSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component EstimatedCostSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/EventTable.wrn b/packages/ui/components/EventTable.wrn deleted file mode 100644 index 0c1f65d0..00000000 --- a/packages/ui/components/EventTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component EventTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ExpandableText.wrn b/packages/ui/components/ExpandableText.wrn deleted file mode 100644 index bdd2e5e6..00000000 --- a/packages/ui/components/ExpandableText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ExpandableText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ExpiryDateTimePicker.wrn b/packages/ui/components/ExpiryDateTimePicker.wrn deleted file mode 100644 index f82dc331..00000000 --- a/packages/ui/components/ExpiryDateTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ExpiryDateTimePicker { - props { - label = "ExpiryDateTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ExportProgress.wrn b/packages/ui/components/ExportProgress.wrn deleted file mode 100644 index 86cc638a..00000000 --- a/packages/ui/components/ExportProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ExportProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/ExternalLink.wrn b/packages/ui/components/ExternalLink.wrn deleted file mode 100644 index 25122f36..00000000 --- a/packages/ui/components/ExternalLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ExternalLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/EyebrowText.wrn b/packages/ui/components/EyebrowText.wrn deleted file mode 100644 index 13120bda..00000000 --- a/packages/ui/components/EyebrowText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component EyebrowText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/FAQ.wrn b/packages/ui/components/FAQ.wrn deleted file mode 100644 index bc205fde..00000000 --- a/packages/ui/components/FAQ.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FAQ { - props { - class = "" - eyebrow = "" - title = "Frequently asked questions" - description = "" - items = [] - centered = true - allowMultiple = false - defaultOpenIndex = 0 - } - view { } -} diff --git a/packages/ui/components/FAQAccordion.wrn b/packages/ui/components/FAQAccordion.wrn deleted file mode 100644 index 520692d7..00000000 --- a/packages/ui/components/FAQAccordion.wrn +++ /dev/null @@ -1,235 +0,0 @@ -component FAQAccordion { - props { - class = "" - eyebrow = "" - title = "Frequently asked questions" - description = "" - - items = [] - - centered = true - compact = false - - allowMultiple = false - defaultOpenIndex = 0 - - showContact = false - contactText = "Still have questions?" - contactLabel = "Contact support" - contactHref = "/support" - } - - state openIndexes = defaultOpenIndex >= 0 ? [defaultOpenIndex] : [] - - functions { - function isOpen(index) { - return openIndexes.includes(index) - } - - function toggleItem(index) { - if (isOpen(index)) { - openIndexes = openIndexes.filter( - (itemIndex) => itemIndex !== index - ) - } else if (allowMultiple) { - openIndexes = [...openIndexes, index] - } else { - openIndexes = [index] - } - } - } - - view { -
    -
    -
    - -
    - -

    - {eyebrow} -

    - - -

    - {title} -

    - - -

    - {description} -

    - - -
    -
    - - - - -
    -

    - {contactText} -

    - - {#if contactLabel !== '' && contactHref !== ''} - - {contactLabel} - - - - {/if} -
    -
    -
    -
    - - -
    -
    - {#each items as item, index} -
    -

    - -

    - -
    -
    -
    -
    -

    - {item.answer} -

    - - {#if item.linkLabel !== '' && item.href !== ''} - - {item.linkLabel} - - - - {/if} -
    -
    -
    -
    -
    - {/each} -
    -
    -
    -
    - - - -
    - } -} diff --git a/packages/ui/components/FactorCard.wrn b/packages/ui/components/FactorCard.wrn deleted file mode 100644 index 9f92c2ec..00000000 --- a/packages/ui/components/FactorCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FactorCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/FallbackRouteBuilder.wrn b/packages/ui/components/FallbackRouteBuilder.wrn deleted file mode 100644 index 11a3ba03..00000000 --- a/packages/ui/components/FallbackRouteBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FallbackRouteBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/FallbackRouteDiagram.wrn b/packages/ui/components/FallbackRouteDiagram.wrn deleted file mode 100644 index c0239371..00000000 --- a/packages/ui/components/FallbackRouteDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FallbackRouteDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/FaviconUpload.wrn b/packages/ui/components/FaviconUpload.wrn deleted file mode 100644 index 12eefaf9..00000000 --- a/packages/ui/components/FaviconUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FaviconUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/FaxInput.wrn b/packages/ui/components/FaxInput.wrn deleted file mode 100644 index ca45115c..00000000 --- a/packages/ui/components/FaxInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FaxInput { - props { - label = "Fax" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FeatureCard.wrn b/packages/ui/components/FeatureCard.wrn deleted file mode 100644 index dcf950cc..00000000 --- a/packages/ui/components/FeatureCard.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component FeatureCard { - props { - class = "" - icon = "icon-[lucide--sparkles]" - title = "Feature" - description = "" - href = "" - } - view { - - } -} diff --git a/packages/ui/components/FeatureChecklist.wrn b/packages/ui/components/FeatureChecklist.wrn deleted file mode 100644 index a1dc3b99..00000000 --- a/packages/ui/components/FeatureChecklist.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component FeatureChecklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    {#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    - } -} diff --git a/packages/ui/components/FeatureComparisonTable.wrn b/packages/ui/components/FeatureComparisonTable.wrn deleted file mode 100644 index 1e55f634..00000000 --- a/packages/ui/components/FeatureComparisonTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FeatureComparisonTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/FeatureDetailsPanel.wrn b/packages/ui/components/FeatureDetailsPanel.wrn deleted file mode 100644 index 12146226..00000000 --- a/packages/ui/components/FeatureDetailsPanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FeatureDetailsPanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/FeatureGrid.wrn b/packages/ui/components/FeatureGrid.wrn deleted file mode 100644 index c3b19a2f..00000000 --- a/packages/ui/components/FeatureGrid.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component FeatureGrid { - props { - columns = 3 - className = "" - } - view { -
    - } -} diff --git a/packages/ui/components/FeatureIconCard.wrn b/packages/ui/components/FeatureIconCard.wrn deleted file mode 100644 index 4b88987b..00000000 --- a/packages/ui/components/FeatureIconCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FeatureIconCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/FeatureList.wrn b/packages/ui/components/FeatureList.wrn deleted file mode 100644 index 3dc59590..00000000 --- a/packages/ui/components/FeatureList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FeatureList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/FeatureTabs.wrn b/packages/ui/components/FeatureTabs.wrn deleted file mode 100644 index 8e323491..00000000 --- a/packages/ui/components/FeatureTabs.wrn +++ /dev/null @@ -1,32 +0,0 @@ -component FeatureTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - - view { -
    - {#if image} - {alt} - {/if} - -
    - {#if eyebrow}

    {eyebrow}

    {/if} - {#if title}

    {title}

    {/if} - {#if description}

    {description}

    {/if} -
    - {#if href} - - {actionLabel} - - {/if} -
    -
    - } -} diff --git a/packages/ui/components/FeatureTimeline.wrn b/packages/ui/components/FeatureTimeline.wrn deleted file mode 100644 index d04b97f9..00000000 --- a/packages/ui/components/FeatureTimeline.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FeatureTimeline { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/FeatureUnavailableState.wrn b/packages/ui/components/FeatureUnavailableState.wrn deleted file mode 100644 index 53d6ad9f..00000000 --- a/packages/ui/components/FeatureUnavailableState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FeatureUnavailableState { - props { - label = "FeatureUnavailable" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/FeaturedBlogCard.wrn b/packages/ui/components/FeaturedBlogCard.wrn deleted file mode 100644 index 829c11a6..00000000 --- a/packages/ui/components/FeaturedBlogCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FeaturedBlogCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/FieldActions.wrn b/packages/ui/components/FieldActions.wrn deleted file mode 100644 index 931903b4..00000000 --- a/packages/ui/components/FieldActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FieldActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/FileInput.wrn b/packages/ui/components/FileInput.wrn index 722bf73b..fa88e751 100644 --- a/packages/ui/components/FileInput.wrn +++ b/packages/ui/components/FileInput.wrn @@ -1,16 +1,20 @@ component FileInput { props { - label = "File" + size = "default" + color = "primary" + label = "File Input" name = "" value = "" placeholder = "" - type = "text" - required = false + type = "file" + min = "" + max = "" + step = "" disabled = false - readonly = false - help = "" - error = "" + required = false class = "" } - view { } + view { + + } } diff --git a/packages/ui/components/FileList.wrn b/packages/ui/components/FileList.wrn deleted file mode 100644 index 4852cb4c..00000000 --- a/packages/ui/components/FileList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FileList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/FileSizeInput.wrn b/packages/ui/components/FileSizeInput.wrn deleted file mode 100644 index 2d9c7e21..00000000 --- a/packages/ui/components/FileSizeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FileSizeInput { - props { - label = "FileSize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FileSizeLabel.wrn b/packages/ui/components/FileSizeLabel.wrn deleted file mode 100644 index 4b01894f..00000000 --- a/packages/ui/components/FileSizeLabel.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FileSizeLabel { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/FileTypeBadge.wrn b/packages/ui/components/FileTypeBadge.wrn deleted file mode 100644 index 0859b24d..00000000 --- a/packages/ui/components/FileTypeBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FileTypeBadge { - props { - label = "FileType" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/FileUpload.wrn b/packages/ui/components/FileUpload.wrn index f31cbfb4..1c865011 100644 --- a/packages/ui/components/FileUpload.wrn +++ b/packages/ui/components/FileUpload.wrn @@ -1,14 +1,19 @@ component FileUpload { props { + size = "default" + color = "primary" + title = "File Upload" + description = "" + items = [] + variant = "default" class = "" - id = "file" - name = "file" - label = "Upload file" - accept = "" - multiple = false - help = "Drag and drop or browse" } view { - +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/packages/ui/components/FileUploadProgress.wrn b/packages/ui/components/FileUploadProgress.wrn new file mode 100644 index 00000000..bbbfd97b --- /dev/null +++ b/packages/ui/components/FileUploadProgress.wrn @@ -0,0 +1,17 @@ +component FileUploadProgress { + props { + size = "default" + color = "primary" + label = "Progress" + value = 50 + max = 100 + showValue = true + class = "" + } + view { +
    +
    {label}{#if showValue}{value}%{/if}
    + +
    + } +} diff --git a/packages/ui/components/FilterBar.wrn b/packages/ui/components/FilterBar.wrn deleted file mode 100644 index 26b93a9e..00000000 --- a/packages/ui/components/FilterBar.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component FilterBar { - props { - label = "Filters" - clearLabel = "Clear filters" - showClear = true - class = "" - } - view {
    } -} diff --git a/packages/ui/components/FilterMenu.wrn b/packages/ui/components/FilterMenu.wrn deleted file mode 100644 index 4b2adc4f..00000000 --- a/packages/ui/components/FilterMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FilterMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/FilterSearchInput.wrn b/packages/ui/components/FilterSearchInput.wrn deleted file mode 100644 index 154a74b3..00000000 --- a/packages/ui/components/FilterSearchInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FilterSearchInput { - props { - label = "FilterSearch" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FilterableTable.wrn b/packages/ui/components/FilterableTable.wrn deleted file mode 100644 index 5af1b937..00000000 --- a/packages/ui/components/FilterableTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FilterableTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/FinalCTA.wrn b/packages/ui/components/FinalCTA.wrn deleted file mode 100644 index e6048ae1..00000000 --- a/packages/ui/components/FinalCTA.wrn +++ /dev/null @@ -1,68 +0,0 @@ -component FinalCTA { - props { - label = "Get started" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - - view { - - {#if href} - {#if variant === "primary"} - - {label} - - - - {:else} - - {label} - - - - {/if} - {:else} - {#if variant === "primary"} - - {:else} - - {/if} - {/if} - - } -} diff --git a/packages/ui/components/FirstNameInput.wrn b/packages/ui/components/FirstNameInput.wrn deleted file mode 100644 index 2ea59f0b..00000000 --- a/packages/ui/components/FirstNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FirstNameInput { - props { - label = "FirstName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Flex.wrn b/packages/ui/components/Flex.wrn deleted file mode 100644 index ab47d721..00000000 --- a/packages/ui/components/Flex.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Flex { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/FontPicker.wrn b/packages/ui/components/FontPicker.wrn deleted file mode 100644 index b0eeab00..00000000 --- a/packages/ui/components/FontPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FontPicker { - props { - label = "Font" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FontSizePicker.wrn b/packages/ui/components/FontSizePicker.wrn deleted file mode 100644 index 9582d2a2..00000000 --- a/packages/ui/components/FontSizePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FontSizePicker { - props { - label = "FontSize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FontWeightPicker.wrn b/packages/ui/components/FontWeightPicker.wrn deleted file mode 100644 index 5c184d30..00000000 --- a/packages/ui/components/FontWeightPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FontWeightPicker { - props { - label = "FontWeight" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FooterLanguageSwitcher.wrn b/packages/ui/components/FooterLanguageSwitcher.wrn deleted file mode 100644 index 92dc9730..00000000 --- a/packages/ui/components/FooterLanguageSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component FooterLanguageSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/FooterStatusIndicator.wrn b/packages/ui/components/FooterStatusIndicator.wrn deleted file mode 100644 index 958151c5..00000000 --- a/packages/ui/components/FooterStatusIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FooterStatusIndicator { - props { - label = "FooterStatus" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ForbiddenPage.wrn b/packages/ui/components/ForbiddenPage.wrn deleted file mode 100644 index fc13981f..00000000 --- a/packages/ui/components/ForbiddenPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ForbiddenPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ForbiddenState.wrn b/packages/ui/components/ForbiddenState.wrn deleted file mode 100644 index 5e17af06..00000000 --- a/packages/ui/components/ForbiddenState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ForbiddenState { - props { - label = "Forbidden" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ForgotPasswordForm.wrn b/packages/ui/components/ForgotPasswordForm.wrn deleted file mode 100644 index 123da4a7..00000000 --- a/packages/ui/components/ForgotPasswordForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ForgotPasswordForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Form.wrn b/packages/ui/components/Form.wrn deleted file mode 100644 index fccdbcc9..00000000 --- a/packages/ui/components/Form.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component Form { - props { - action = "" - method = "post" - name = "" - loading = false - class = "" - } - view { -
    - } -} diff --git a/packages/ui/components/FormActions.wrn b/packages/ui/components/FormActions.wrn deleted file mode 100644 index 3b152799..00000000 --- a/packages/ui/components/FormActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FormActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/FormAlert.wrn b/packages/ui/components/FormAlert.wrn deleted file mode 100644 index 1af27cec..00000000 --- a/packages/ui/components/FormAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FormAlert { - props { - label = "Form" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/FormDialog.wrn b/packages/ui/components/FormDialog.wrn deleted file mode 100644 index 0f62d212..00000000 --- a/packages/ui/components/FormDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/FormError.wrn b/packages/ui/components/FormError.wrn deleted file mode 100644 index c4ba8430..00000000 --- a/packages/ui/components/FormError.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component FormError { - props { - id = "" - message = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FormErrorSummary.wrn b/packages/ui/components/FormErrorSummary.wrn deleted file mode 100644 index bfca2381..00000000 --- a/packages/ui/components/FormErrorSummary.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormErrorSummary { - props { - class = "" - title = "Please fix the following" - visible = true - } - view { - - } -} diff --git a/packages/ui/components/FormField.wrn b/packages/ui/components/FormField.wrn deleted file mode 100644 index 77b98a2d..00000000 --- a/packages/ui/components/FormField.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component FormField { - props { - class = "" - label = "Field" - help = "" - error = "" - required = false - } - view { -
    {label}*

    {help}

    - } -} diff --git a/packages/ui/components/FormGrid.wrn b/packages/ui/components/FormGrid.wrn deleted file mode 100644 index 4933d481..00000000 --- a/packages/ui/components/FormGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/FormGroup.wrn b/packages/ui/components/FormGroup.wrn deleted file mode 100644 index d508762a..00000000 --- a/packages/ui/components/FormGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component FormGroup { - props { - label = "Form" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/FormHelpText.wrn b/packages/ui/components/FormHelpText.wrn deleted file mode 100644 index 6d7bfdd1..00000000 --- a/packages/ui/components/FormHelpText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component FormHelpText { - props { - id = "" - text = "" - class = "" - } - view {

    {text}

    } -} diff --git a/packages/ui/components/FormLabel.wrn b/packages/ui/components/FormLabel.wrn deleted file mode 100644 index 9f181812..00000000 --- a/packages/ui/components/FormLabel.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component FormLabel { - props { - for = "" - label = "Label" - required = false - optional = false - class = "" - } - view { - - } -} diff --git a/packages/ui/components/FormProgress.wrn b/packages/ui/components/FormProgress.wrn deleted file mode 100644 index 92452fe1..00000000 --- a/packages/ui/components/FormProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FormProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/FormRow.wrn b/packages/ui/components/FormRow.wrn deleted file mode 100644 index 66ef9d67..00000000 --- a/packages/ui/components/FormRow.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormRow { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/FormSection.wrn b/packages/ui/components/FormSection.wrn deleted file mode 100644 index aba384c9..00000000 --- a/packages/ui/components/FormSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FormSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/FullBleed.wrn b/packages/ui/components/FullBleed.wrn deleted file mode 100644 index f84b6803..00000000 --- a/packages/ui/components/FullBleed.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component FullBleed { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/FullscreenDialog.wrn b/packages/ui/components/FullscreenDialog.wrn deleted file mode 100644 index 9a4b2d89..00000000 --- a/packages/ui/components/FullscreenDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component FullscreenDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/FunnelChart.wrn b/packages/ui/components/FunnelChart.wrn deleted file mode 100644 index cb714492..00000000 --- a/packages/ui/components/FunnelChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component FunnelChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/GeoChart.wrn b/packages/ui/components/GeoChart.wrn deleted file mode 100644 index b448088f..00000000 --- a/packages/ui/components/GeoChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component GeoChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/GeofenceEditor.wrn b/packages/ui/components/GeofenceEditor.wrn deleted file mode 100644 index 15f61f70..00000000 --- a/packages/ui/components/GeofenceEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component GeofenceEditor { - props { - label = "Geofence" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/GhostButton.wrn b/packages/ui/components/GhostButton.wrn deleted file mode 100644 index 92ee083a..00000000 --- a/packages/ui/components/GhostButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component GhostButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/GlassCard.wrn b/packages/ui/components/GlassCard.wrn deleted file mode 100644 index 60847bae..00000000 --- a/packages/ui/components/GlassCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component GlassCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/GlobalSearch.wrn b/packages/ui/components/GlobalSearch.wrn deleted file mode 100644 index 9d9c555b..00000000 --- a/packages/ui/components/GlobalSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GlobalSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/GradientCTA.wrn b/packages/ui/components/GradientCTA.wrn deleted file mode 100644 index f1df07ee..00000000 --- a/packages/ui/components/GradientCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component GradientCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/GradientPicker.wrn b/packages/ui/components/GradientPicker.wrn deleted file mode 100644 index 01992cd4..00000000 --- a/packages/ui/components/GradientPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component GradientPicker { - props { - label = "Gradient" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/GradientStopEditor.wrn b/packages/ui/components/GradientStopEditor.wrn deleted file mode 100644 index 055dd545..00000000 --- a/packages/ui/components/GradientStopEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component GradientStopEditor { - props { - label = "GradientStop" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/GuideCard.wrn b/packages/ui/components/GuideCard.wrn deleted file mode 100644 index 57fde5ad..00000000 --- a/packages/ui/components/GuideCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GuideCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/GuideChecklist.wrn b/packages/ui/components/GuideChecklist.wrn deleted file mode 100644 index 30655b0c..00000000 --- a/packages/ui/components/GuideChecklist.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GuideChecklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/GuideDifficultyBadge.wrn b/packages/ui/components/GuideDifficultyBadge.wrn deleted file mode 100644 index 847bb1ef..00000000 --- a/packages/ui/components/GuideDifficultyBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component GuideDifficultyBadge { - props { - label = "GuideDifficulty" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/GuideGrid.wrn b/packages/ui/components/GuideGrid.wrn deleted file mode 100644 index 1feae40b..00000000 --- a/packages/ui/components/GuideGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component GuideGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/GuideStep.wrn b/packages/ui/components/GuideStep.wrn deleted file mode 100644 index e9b95ff4..00000000 --- a/packages/ui/components/GuideStep.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component GuideStep { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Header.wrn b/packages/ui/components/Header.wrn deleted file mode 100644 index 071beed7..00000000 --- a/packages/ui/components/Header.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component Header { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/HeaderActions.wrn b/packages/ui/components/HeaderActions.wrn deleted file mode 100644 index 6bde395f..00000000 --- a/packages/ui/components/HeaderActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeaderActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/HealthIndicator.wrn b/packages/ui/components/HealthIndicator.wrn deleted file mode 100644 index 43468c6b..00000000 --- a/packages/ui/components/HealthIndicator.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component HealthIndicator { - props { - label = "Health" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/Hero.wrn b/packages/ui/components/Hero.wrn deleted file mode 100644 index b8aac408..00000000 --- a/packages/ui/components/Hero.wrn +++ /dev/null @@ -1,17 +0,0 @@ -component Hero { - props { - class = "" - eyebrow = "" - title = "Build faster with WRNexusJS" - highlight = "" - description = "" - primaryLabel = "Get started" - primaryHref = "#" - secondaryLabel = "Learn more" - secondaryHref = "#" - align = "center" - } - view { -

    {title} {highlight}

    {description}

    {primaryLabel}{secondaryLabel}
    - } -} diff --git a/packages/ui/components/HeroActions.wrn b/packages/ui/components/HeroActions.wrn deleted file mode 100644 index ca1d1b07..00000000 --- a/packages/ui/components/HeroActions.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeroActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/HeroCodePanel.wrn b/packages/ui/components/HeroCodePanel.wrn deleted file mode 100644 index c0dd1a88..00000000 --- a/packages/ui/components/HeroCodePanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component HeroCodePanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/HeroGradientText.wrn b/packages/ui/components/HeroGradientText.wrn deleted file mode 100644 index d277e268..00000000 --- a/packages/ui/components/HeroGradientText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HeroGradientText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/HeroPrimaryAction.wrn b/packages/ui/components/HeroPrimaryAction.wrn deleted file mode 100644 index 9fdf8f1e..00000000 --- a/packages/ui/components/HeroPrimaryAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeroPrimaryAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/HeroProductPreview.wrn b/packages/ui/components/HeroProductPreview.wrn deleted file mode 100644 index da9bb31a..00000000 --- a/packages/ui/components/HeroProductPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HeroProductPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/HeroSecondaryAction.wrn b/packages/ui/components/HeroSecondaryAction.wrn deleted file mode 100644 index c42ba5d7..00000000 --- a/packages/ui/components/HeroSecondaryAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component HeroSecondaryAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/HeroTrustText.wrn b/packages/ui/components/HeroTrustText.wrn deleted file mode 100644 index 3550bb9c..00000000 --- a/packages/ui/components/HeroTrustText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HeroTrustText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/HexColorInput.wrn b/packages/ui/components/HexColorInput.wrn deleted file mode 100644 index 47076d66..00000000 --- a/packages/ui/components/HexColorInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HexColorInput { - props { - label = "HexColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/HiddenField.wrn b/packages/ui/components/HiddenField.wrn deleted file mode 100644 index 1c634c2a..00000000 --- a/packages/ui/components/HiddenField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HiddenField { - props { - label = "Hidden" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/HighlightText.wrn b/packages/ui/components/HighlightText.wrn deleted file mode 100644 index 872ce24c..00000000 --- a/packages/ui/components/HighlightText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HighlightText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/HolidayCalendar.wrn b/packages/ui/components/HolidayCalendar.wrn deleted file mode 100644 index 7c0fb8ee..00000000 --- a/packages/ui/components/HolidayCalendar.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HolidayCalendar { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/HostnameInput.wrn b/packages/ui/components/HostnameInput.wrn deleted file mode 100644 index 2a1df988..00000000 --- a/packages/ui/components/HostnameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HostnameInput { - props { - label = "Hostname" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/HourPicker.wrn b/packages/ui/components/HourPicker.wrn deleted file mode 100644 index 2931e4c6..00000000 --- a/packages/ui/components/HourPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HourPicker { - props { - label = "Hour" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/HslColorInput.wrn b/packages/ui/components/HslColorInput.wrn deleted file mode 100644 index ba20721d..00000000 --- a/packages/ui/components/HslColorInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HslColorInput { - props { - label = "HslColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/HtmlEditor.wrn b/packages/ui/components/HtmlEditor.wrn deleted file mode 100644 index ff2c2525..00000000 --- a/packages/ui/components/HtmlEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component HtmlEditor { - props { - label = "Html" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/HumanApprovalStep.wrn b/packages/ui/components/HumanApprovalStep.wrn deleted file mode 100644 index cc865e21..00000000 --- a/packages/ui/components/HumanApprovalStep.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component HumanApprovalStep { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Icon.wrn b/packages/ui/components/Icon.wrn deleted file mode 100644 index 3cb40b0a..00000000 --- a/packages/ui/components/Icon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Icon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/IconButton.wrn b/packages/ui/components/IconButton.wrn deleted file mode 100644 index 86877d10..00000000 --- a/packages/ui/components/IconButton.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component IconButton { - props { - class = "" - label = "Action" - icon = "•" - variant = "ghost" - disabled = false - } - view { } -} diff --git a/packages/ui/components/IconPicker.wrn b/packages/ui/components/IconPicker.wrn deleted file mode 100644 index af3c82bb..00000000 --- a/packages/ui/components/IconPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IconPicker { - props { - label = "Icon" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/IconSelector.wrn b/packages/ui/components/IconSelector.wrn deleted file mode 100644 index dbbe3bef..00000000 --- a/packages/ui/components/IconSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IconSelector { - props { - label = "Icon" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/IdentifierInput.wrn b/packages/ui/components/IdentifierInput.wrn deleted file mode 100644 index cc110a0c..00000000 --- a/packages/ui/components/IdentifierInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IdentifierInput { - props { - label = "Identifier" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Illustration.wrn b/packages/ui/components/Illustration.wrn deleted file mode 100644 index 466b378b..00000000 --- a/packages/ui/components/Illustration.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Illustration { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Image.wrn b/packages/ui/components/Image.wrn new file mode 100644 index 00000000..5f03305e --- /dev/null +++ b/packages/ui/components/Image.wrn @@ -0,0 +1,19 @@ +component Image { + props { + size = "default" + color = "primary" + src = "" + alt = "" + width = "" + height = "" + loading = "lazy" + rounded = false + class = "" + } + view { +
    + {alt} + +
    + } +} diff --git a/packages/ui/components/ImageCompressionPreview.wrn b/packages/ui/components/ImageCompressionPreview.wrn deleted file mode 100644 index 123877e6..00000000 --- a/packages/ui/components/ImageCompressionPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ImageCompressionPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ImageEditor.wrn b/packages/ui/components/ImageEditor.wrn deleted file mode 100644 index 8b82527d..00000000 --- a/packages/ui/components/ImageEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ImageEditor { - props { - label = "Image" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ImagePreviewDialog.wrn b/packages/ui/components/ImagePreviewDialog.wrn deleted file mode 100644 index d674ca03..00000000 --- a/packages/ui/components/ImagePreviewDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ImagePreviewDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/ImageSelector.wrn b/packages/ui/components/ImageSelector.wrn deleted file mode 100644 index 9ae4b7a8..00000000 --- a/packages/ui/components/ImageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ImageSelector { - props { - label = "Image" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ImageUpload.wrn b/packages/ui/components/ImageUpload.wrn deleted file mode 100644 index 4ddd8374..00000000 --- a/packages/ui/components/ImageUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ImageUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ImportProgress.wrn b/packages/ui/components/ImportProgress.wrn deleted file mode 100644 index 2d44a338..00000000 --- a/packages/ui/components/ImportProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ImportProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/IncidentAlert.wrn b/packages/ui/components/IncidentAlert.wrn deleted file mode 100644 index 059f8a9c..00000000 --- a/packages/ui/components/IncidentAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentAlert { - props { - label = "Incident" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/IncidentBanner.wrn b/packages/ui/components/IncidentBanner.wrn deleted file mode 100644 index d31b9a59..00000000 --- a/packages/ui/components/IncidentBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentBanner { - props { - label = "Incident" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/IncidentCard.wrn b/packages/ui/components/IncidentCard.wrn deleted file mode 100644 index c0410d86..00000000 --- a/packages/ui/components/IncidentCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component IncidentCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/IncidentList.wrn b/packages/ui/components/IncidentList.wrn deleted file mode 100644 index 273a15cd..00000000 --- a/packages/ui/components/IncidentList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component IncidentList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/IncidentResponseFlow.wrn b/packages/ui/components/IncidentResponseFlow.wrn deleted file mode 100644 index 0745cefd..00000000 --- a/packages/ui/components/IncidentResponseFlow.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentResponseFlow { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/IncidentSeverityBadge.wrn b/packages/ui/components/IncidentSeverityBadge.wrn deleted file mode 100644 index fbb29e4a..00000000 --- a/packages/ui/components/IncidentSeverityBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentSeverityBadge { - props { - label = "IncidentSeverity" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/IncidentTimeline.wrn b/packages/ui/components/IncidentTimeline.wrn deleted file mode 100644 index 470394cd..00000000 --- a/packages/ui/components/IncidentTimeline.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IncidentTimeline { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/IndustryBadge.wrn b/packages/ui/components/IndustryBadge.wrn deleted file mode 100644 index c0f144a0..00000000 --- a/packages/ui/components/IndustryBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component IndustryBadge { - props { - label = "Industry" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/IndustrySelector.wrn b/packages/ui/components/IndustrySelector.wrn deleted file mode 100644 index a92553b4..00000000 --- a/packages/ui/components/IndustrySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IndustrySelector { - props { - label = "Industry" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/InfoCard.wrn b/packages/ui/components/InfoCard.wrn deleted file mode 100644 index b7e30903..00000000 --- a/packages/ui/components/InfoCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component InfoCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Inline.wrn b/packages/ui/components/Inline.wrn deleted file mode 100644 index 43cc7fbd..00000000 --- a/packages/ui/components/Inline.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component Inline { - props { - gap = "4" - className = "" - } - view { -
    - } -} diff --git a/packages/ui/components/InlineAlert.wrn b/packages/ui/components/InlineAlert.wrn deleted file mode 100644 index 08fb34ca..00000000 --- a/packages/ui/components/InlineAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component InlineAlert { - props { - label = "Inline" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/InlineCode.wrn b/packages/ui/components/InlineCode.wrn deleted file mode 100644 index ea2efaa7..00000000 --- a/packages/ui/components/InlineCode.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component InlineCode { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/InputGroup.wrn b/packages/ui/components/InputGroup.wrn index 7bc00faf..69087104 100644 --- a/packages/ui/components/InputGroup.wrn +++ b/packages/ui/components/InputGroup.wrn @@ -1,16 +1,20 @@ component InputGroup { props { - label = "Input" + size = "default" + color = "primary" + label = "Input Group" name = "" value = "" placeholder = "" type = "text" - required = false + min = "" + max = "" + step = "" disabled = false - readonly = false - help = "" - error = "" + required = false class = "" } - view { } + view { + + } } diff --git a/packages/ui/components/InputNumber.wrn b/packages/ui/components/InputNumber.wrn new file mode 100644 index 00000000..4b205de1 --- /dev/null +++ b/packages/ui/components/InputNumber.wrn @@ -0,0 +1,20 @@ +component InputNumber { + props { + size = "default" + color = "primary" + label = "Input Number" + name = "" + value = "" + placeholder = "" + type = "number" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/packages/ui/components/InsetPanel.wrn b/packages/ui/components/InsetPanel.wrn deleted file mode 100644 index 2584d3f7..00000000 --- a/packages/ui/components/InsetPanel.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component InsetPanel { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/IntegerInput.wrn b/packages/ui/components/IntegerInput.wrn deleted file mode 100644 index d07658b0..00000000 --- a/packages/ui/components/IntegerInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IntegerInput { - props { - label = "Integer" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/IntegrationCard.wrn b/packages/ui/components/IntegrationCard.wrn deleted file mode 100644 index e4fd9d30..00000000 --- a/packages/ui/components/IntegrationCard.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component IntegrationCard { - props { - title = "" - description = "" - href = "" - icon = "icon-[lucide--plug-zap]" - class = "" - } - view {
    {#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}Open {title}{/if}
    } -} diff --git a/packages/ui/components/InvoiceLineItem.wrn b/packages/ui/components/InvoiceLineItem.wrn deleted file mode 100644 index 5bfa739e..00000000 --- a/packages/ui/components/InvoiceLineItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component InvoiceLineItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/InvoiceSummary.wrn b/packages/ui/components/InvoiceSummary.wrn deleted file mode 100644 index 1de0700f..00000000 --- a/packages/ui/components/InvoiceSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component InvoiceSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/IpAddressInput.wrn b/packages/ui/components/IpAddressInput.wrn deleted file mode 100644 index 98a6c98c..00000000 --- a/packages/ui/components/IpAddressInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component IpAddressInput { - props { - label = "IpAddress" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/JobCard.wrn b/packages/ui/components/JobCard.wrn deleted file mode 100644 index f3b76c9a..00000000 --- a/packages/ui/components/JobCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component JobCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/JobProgress.wrn b/packages/ui/components/JobProgress.wrn deleted file mode 100644 index f1cf0c4d..00000000 --- a/packages/ui/components/JobProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component JobProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/JobTitleInput.wrn b/packages/ui/components/JobTitleInput.wrn deleted file mode 100644 index a62fc7f9..00000000 --- a/packages/ui/components/JobTitleInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component JobTitleInput { - props { - label = "JobTitle" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/JsonInput.wrn b/packages/ui/components/JsonInput.wrn deleted file mode 100644 index 1704cb10..00000000 --- a/packages/ui/components/JsonInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component JsonInput { - props { - label = "Json" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/JsonViewer.wrn b/packages/ui/components/JsonViewer.wrn deleted file mode 100644 index 6cf7a2c1..00000000 --- a/packages/ui/components/JsonViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component JsonViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Kbd.wrn b/packages/ui/components/Kbd.wrn new file mode 100644 index 00000000..e14edc4c --- /dev/null +++ b/packages/ui/components/Kbd.wrn @@ -0,0 +1,9 @@ +component Kbd { + props { + size = "default" + color = "primary" + label = "⌘ K" + class = "" + } + view { {label} } +} diff --git a/packages/ui/components/KeyValueTable.wrn b/packages/ui/components/KeyValueTable.wrn deleted file mode 100644 index 45cc2602..00000000 --- a/packages/ui/components/KeyValueTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component KeyValueTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/KycDocumentUpload.wrn b/packages/ui/components/KycDocumentUpload.wrn deleted file mode 100644 index 3d26f7b5..00000000 --- a/packages/ui/components/KycDocumentUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component KycDocumentUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/LanguageSelector.wrn b/packages/ui/components/LanguageSelector.wrn deleted file mode 100644 index 14254483..00000000 --- a/packages/ui/components/LanguageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LanguageSelector { - props { - label = "Language" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LanguageSwitcher.wrn b/packages/ui/components/LanguageSwitcher.wrn deleted file mode 100644 index d2eaed7e..00000000 --- a/packages/ui/components/LanguageSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LanguageSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/LastNameInput.wrn b/packages/ui/components/LastNameInput.wrn deleted file mode 100644 index e135bdfe..00000000 --- a/packages/ui/components/LastNameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LastNameInput { - props { - label = "LastName" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LatencyMetric.wrn b/packages/ui/components/LatencyMetric.wrn deleted file mode 100644 index c2de3220..00000000 --- a/packages/ui/components/LatencyMetric.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LatencyMetric { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/LatitudeInput.wrn b/packages/ui/components/LatitudeInput.wrn deleted file mode 100644 index d948428e..00000000 --- a/packages/ui/components/LatitudeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LatitudeInput { - props { - label = "Latitude" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LayoutSplitter.wrn b/packages/ui/components/LayoutSplitter.wrn new file mode 100644 index 00000000..0833ebdf --- /dev/null +++ b/packages/ui/components/LayoutSplitter.wrn @@ -0,0 +1,13 @@ +component LayoutSplitter { + props { + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" + } + view { +
    + } +} diff --git a/packages/ui/components/LeadText.wrn b/packages/ui/components/LeadText.wrn deleted file mode 100644 index 829c19ed..00000000 --- a/packages/ui/components/LeadText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component LeadText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/LeadershipGrid.wrn b/packages/ui/components/LeadershipGrid.wrn deleted file mode 100644 index 8bba82c8..00000000 --- a/packages/ui/components/LeadershipGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LeadershipGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/LegalAcceptanceNotice.wrn b/packages/ui/components/LegalAcceptanceNotice.wrn deleted file mode 100644 index 61d65317..00000000 --- a/packages/ui/components/LegalAcceptanceNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalAcceptanceNotice { - props { - label = "LegalAcceptance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/LegalBulletList.wrn b/packages/ui/components/LegalBulletList.wrn deleted file mode 100644 index 39fafdcd..00000000 --- a/packages/ui/components/LegalBulletList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalBulletList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/LegalContactBlock.wrn b/packages/ui/components/LegalContactBlock.wrn deleted file mode 100644 index 1a9831ad..00000000 --- a/packages/ui/components/LegalContactBlock.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LegalContactBlock { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/LegalDefinitionList.wrn b/packages/ui/components/LegalDefinitionList.wrn deleted file mode 100644 index 6dd2e8b7..00000000 --- a/packages/ui/components/LegalDefinitionList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalDefinitionList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/LegalDocumentHeader.wrn b/packages/ui/components/LegalDocumentHeader.wrn deleted file mode 100644 index 6fd50290..00000000 --- a/packages/ui/components/LegalDocumentHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalDocumentHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/LegalDocumentLayout.wrn b/packages/ui/components/LegalDocumentLayout.wrn deleted file mode 100644 index b248c5ac..00000000 --- a/packages/ui/components/LegalDocumentLayout.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalDocumentLayout { - props { - class = "" - title = "Legal document" - effectiveDate = "" - updatedDate = "" - } - view { -

    {title}

    Effective: {effectiveDate}Updated: {updatedDate}
    - } -} diff --git a/packages/ui/components/LegalHero.wrn b/packages/ui/components/LegalHero.wrn deleted file mode 100644 index 681b717c..00000000 --- a/packages/ui/components/LegalHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/LegalLanguageSelector.wrn b/packages/ui/components/LegalLanguageSelector.wrn deleted file mode 100644 index 179613ba..00000000 --- a/packages/ui/components/LegalLanguageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LegalLanguageSelector { - props { - label = "LegalLanguage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LegalNotice.wrn b/packages/ui/components/LegalNotice.wrn deleted file mode 100644 index b17aa543..00000000 --- a/packages/ui/components/LegalNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalNotice { - props { - label = "Legal" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/LegalPageShell.wrn b/packages/ui/components/LegalPageShell.wrn deleted file mode 100644 index 0c2cbc4e..00000000 --- a/packages/ui/components/LegalPageShell.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component LegalPageShell { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/LegalPrintButton.wrn b/packages/ui/components/LegalPrintButton.wrn deleted file mode 100644 index c10634c5..00000000 --- a/packages/ui/components/LegalPrintButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalPrintButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/LegalRegionSelector.wrn b/packages/ui/components/LegalRegionSelector.wrn deleted file mode 100644 index 6df40e59..00000000 --- a/packages/ui/components/LegalRegionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LegalRegionSelector { - props { - label = "LegalRegion" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LegalSection.wrn b/packages/ui/components/LegalSection.wrn deleted file mode 100644 index a5805825..00000000 --- a/packages/ui/components/LegalSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/LegalSummary.wrn b/packages/ui/components/LegalSummary.wrn deleted file mode 100644 index 50181ead..00000000 --- a/packages/ui/components/LegalSummary.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LegalSummary { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/LegalTable.wrn b/packages/ui/components/LegalTable.wrn deleted file mode 100644 index c9555b0e..00000000 --- a/packages/ui/components/LegalTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LegalTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/LegalTableOfContents.wrn b/packages/ui/components/LegalTableOfContents.wrn deleted file mode 100644 index d3aaaf24..00000000 --- a/packages/ui/components/LegalTableOfContents.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component LegalTableOfContents { - props { - title = "On this page" - items = [] - class = "" - } - view { } -} diff --git a/packages/ui/components/LegalVersionBadge.wrn b/packages/ui/components/LegalVersionBadge.wrn deleted file mode 100644 index bb998c00..00000000 --- a/packages/ui/components/LegalVersionBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LegalVersionBadge { - props { - label = "LegalVersion" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/LegendIndicator.wrn b/packages/ui/components/LegendIndicator.wrn new file mode 100644 index 00000000..21905dc7 --- /dev/null +++ b/packages/ui/components/LegendIndicator.wrn @@ -0,0 +1,19 @@ +component LegendIndicator { + props { + size = "default" + color = "primary" + title = "Legend Indicator" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/LetterSpacingPicker.wrn b/packages/ui/components/LetterSpacingPicker.wrn deleted file mode 100644 index f2a12de8..00000000 --- a/packages/ui/components/LetterSpacingPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LetterSpacingPicker { - props { - label = "LetterSpacing" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LicenseKeyInput.wrn b/packages/ui/components/LicenseKeyInput.wrn deleted file mode 100644 index 627fe080..00000000 --- a/packages/ui/components/LicenseKeyInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LicenseKeyInput { - props { - label = "LicenseKey" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Lightbox.wrn b/packages/ui/components/Lightbox.wrn deleted file mode 100644 index bbfcfe80..00000000 --- a/packages/ui/components/Lightbox.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component Lightbox { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/LineChart.wrn b/packages/ui/components/LineChart.wrn deleted file mode 100644 index 99ab8236..00000000 --- a/packages/ui/components/LineChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LineChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/LineHeightPicker.wrn b/packages/ui/components/LineHeightPicker.wrn deleted file mode 100644 index 0dbfa67b..00000000 --- a/packages/ui/components/LineHeightPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LineHeightPicker { - props { - label = "LineHeight" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Link.wrn b/packages/ui/components/Link.wrn index cde2a1cb..34d19bee 100644 --- a/packages/ui/components/Link.wrn +++ b/packages/ui/components/Link.wrn @@ -1,11 +1,15 @@ component Link { props { - href = "#" + size = "default" + color = "primary" label = "Link" + href = "#" + target = "" + rel = "" external = false - className = "" + class = "" } view { - {label} + {label}{#if external}{/if} } } diff --git a/packages/ui/components/LinkButton.wrn b/packages/ui/components/LinkButton.wrn deleted file mode 100644 index d389b088..00000000 --- a/packages/ui/components/LinkButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component LinkButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/List.wrn b/packages/ui/components/List.wrn index a0f7f535..12f2e6bd 100644 --- a/packages/ui/components/List.wrn +++ b/packages/ui/components/List.wrn @@ -1,10 +1,19 @@ component List { props { - title = "" + size = "default" + color = "primary" + title = "List" description = "" - empty = false - emptyText = "No items available." + items = [] + variant = "default" class = "" } - view {

    {title}

    {description}

    {emptyText}

    } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } } diff --git a/packages/ui/components/ListGroup.wrn b/packages/ui/components/ListGroup.wrn new file mode 100644 index 00000000..374e8cfd --- /dev/null +++ b/packages/ui/components/ListGroup.wrn @@ -0,0 +1,19 @@ +component ListGroup { + props { + size = "default" + color = "primary" + title = "List Group" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/LoadingButton.wrn b/packages/ui/components/LoadingButton.wrn deleted file mode 100644 index c54574c2..00000000 --- a/packages/ui/components/LoadingButton.wrn +++ /dev/null @@ -1,14 +0,0 @@ -component LoadingButton { - props { - label = "Continue" - loadingLabel = "Loading…" - loading = false - disabled = false - type = "button" - variant = "primary" - class = "" - } - view { - - } -} diff --git a/packages/ui/components/LocaleSelector.wrn b/packages/ui/components/LocaleSelector.wrn deleted file mode 100644 index 5c5abad5..00000000 --- a/packages/ui/components/LocaleSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LocaleSelector { - props { - label = "Locale" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LocalizedRouteLink.wrn b/packages/ui/components/LocalizedRouteLink.wrn deleted file mode 100644 index aa4f9c04..00000000 --- a/packages/ui/components/LocalizedRouteLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component LocalizedRouteLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/LocationPicker.wrn b/packages/ui/components/LocationPicker.wrn deleted file mode 100644 index 0c4d4c8d..00000000 --- a/packages/ui/components/LocationPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LocationPicker { - props { - label = "Location" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/LogTable.wrn b/packages/ui/components/LogTable.wrn deleted file mode 100644 index afe95b0f..00000000 --- a/packages/ui/components/LogTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LogTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/Logo.wrn b/packages/ui/components/Logo.wrn deleted file mode 100644 index 05e7fb91..00000000 --- a/packages/ui/components/Logo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Logo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/LogoCloud.wrn b/packages/ui/components/LogoCloud.wrn deleted file mode 100644 index bc207fd5..00000000 --- a/packages/ui/components/LogoCloud.wrn +++ /dev/null @@ -1,150 +0,0 @@ -component LogoCloud { - props { - class: string = "" - eyebrow = "" - title = "Trusted by teams building modern products" - description = "" - - logos = [] - - centered = true - compact = false - - variant = "strip" - grayscale = true - showNames = false - maxItems = 8 - } - - view { -
    -
    - - - -
    - -
    -

    - {eyebrow} -

    - -

    - {title} -

    - -

    - {description} -

    -
    - - -
    - {#each logos.slice(0, maxItems) as logo} - - -
    - {logo.alt !== '' ? logo.alt : logo.name} - - - -
    - - -
    -

    - {logo.name} -

    - -

    - {logo.description} -

    -
    -     - {/each} -
    - - -

    - And {logos.length - maxItems} more teams using WrNexus. -

    -
    -
    -
    - } -} diff --git a/packages/ui/components/LogoUpload.wrn b/packages/ui/components/LogoUpload.wrn deleted file mode 100644 index 68d901c6..00000000 --- a/packages/ui/components/LogoUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component LogoUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/LogoutDialog.wrn b/packages/ui/components/LogoutDialog.wrn deleted file mode 100644 index 1e646bda..00000000 --- a/packages/ui/components/LogoutDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component LogoutDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/LongitudeInput.wrn b/packages/ui/components/LongitudeInput.wrn deleted file mode 100644 index b4bb7af1..00000000 --- a/packages/ui/components/LongitudeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component LongitudeInput { - props { - label = "Longitude" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MaintenanceAlert.wrn b/packages/ui/components/MaintenanceAlert.wrn deleted file mode 100644 index 56576733..00000000 --- a/packages/ui/components/MaintenanceAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MaintenanceAlert { - props { - label = "Maintenance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/MaintenanceBanner.wrn b/packages/ui/components/MaintenanceBanner.wrn deleted file mode 100644 index 713542a8..00000000 --- a/packages/ui/components/MaintenanceBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MaintenanceBanner { - props { - label = "Maintenance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/MaintenanceCard.wrn b/packages/ui/components/MaintenanceCard.wrn deleted file mode 100644 index f1ec2682..00000000 --- a/packages/ui/components/MaintenanceCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MaintenanceCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/MaintenancePage.wrn b/packages/ui/components/MaintenancePage.wrn deleted file mode 100644 index be54ebf7..00000000 --- a/packages/ui/components/MaintenancePage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MaintenancePage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/MaintenanceState.wrn b/packages/ui/components/MaintenanceState.wrn deleted file mode 100644 index c11b6750..00000000 --- a/packages/ui/components/MaintenanceState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MaintenanceState { - props { - label = "Maintenance" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/MaintenanceWindowPicker.wrn b/packages/ui/components/MaintenanceWindowPicker.wrn deleted file mode 100644 index 45e34f63..00000000 --- a/packages/ui/components/MaintenanceWindowPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MaintenanceWindowPicker { - props { - label = "MaintenanceWindow" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Map.wrn b/packages/ui/components/Map.wrn new file mode 100644 index 00000000..ca451ebf --- /dev/null +++ b/packages/ui/components/Map.wrn @@ -0,0 +1,19 @@ +component Map { + props { + size = "default" + color = "primary" + title = "Map" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/MapPicker.wrn b/packages/ui/components/MapPicker.wrn deleted file mode 100644 index 7d875a93..00000000 --- a/packages/ui/components/MapPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MapPicker { - props { - label = "Map" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MarkdownEditor.wrn b/packages/ui/components/MarkdownEditor.wrn deleted file mode 100644 index 61238a94..00000000 --- a/packages/ui/components/MarkdownEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MarkdownEditor { - props { - label = "Markdown" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MarketingPageShell.wrn b/packages/ui/components/MarketingPageShell.wrn deleted file mode 100644 index cea8ffcf..00000000 --- a/packages/ui/components/MarketingPageShell.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component MarketingPageShell { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/MarketingSectionHeader.wrn b/packages/ui/components/MarketingSectionHeader.wrn deleted file mode 100644 index bd0e410f..00000000 --- a/packages/ui/components/MarketingSectionHeader.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component MarketingSectionHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - - view { -
    -
    -
    - {#if eyebrow} -

    {eyebrow}

    - {/if} - {#if title} -

    {title}

    - {/if} - {#if description} -

    {description}

    - {/if} -
    - -
    - -
    -
    -
    - } -} diff --git a/packages/ui/components/Marquee.wrn b/packages/ui/components/Marquee.wrn new file mode 100644 index 00000000..5f525cf6 --- /dev/null +++ b/packages/ui/components/Marquee.wrn @@ -0,0 +1,19 @@ +component Marquee { + props { + size = "default" + color = "primary" + title = "Marquee" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/MaskedSecretField.wrn b/packages/ui/components/MaskedSecretField.wrn deleted file mode 100644 index f2860e6d..00000000 --- a/packages/ui/components/MaskedSecretField.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MaskedSecretField { - props { - label = "MaskedSecret" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MegaMenu.wrn b/packages/ui/components/MegaMenu.wrn index b6f158e3..ccac682b 100644 --- a/packages/ui/components/MegaMenu.wrn +++ b/packages/ui/components/MegaMenu.wrn @@ -1,11 +1,17 @@ component MegaMenu { props { - label = "Explore" - sections = [] + size = "default" + color = "primary" + label = "Mega Menu" + items = [] + active = "" + orientation = "horizontal" class = "" } - state open = false view { -
    {#each sections as section}

    {section.title}

    {/each}
    + } } diff --git a/packages/ui/components/MemberList.wrn b/packages/ui/components/MemberList.wrn deleted file mode 100644 index 9907389f..00000000 --- a/packages/ui/components/MemberList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component MemberList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/MentionInput.wrn b/packages/ui/components/MentionInput.wrn deleted file mode 100644 index 8fd40583..00000000 --- a/packages/ui/components/MentionInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MentionInput { - props { - label = "Mention" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MessageCharacterCounter.wrn b/packages/ui/components/MessageCharacterCounter.wrn deleted file mode 100644 index 30bbfdfb..00000000 --- a/packages/ui/components/MessageCharacterCounter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MessageCharacterCounter { - props { - label = "MessageCharacter" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/MessageComposer.wrn b/packages/ui/components/MessageComposer.wrn deleted file mode 100644 index 363b24e5..00000000 --- a/packages/ui/components/MessageComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessageComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/MessageComposerPreview.wrn b/packages/ui/components/MessageComposerPreview.wrn deleted file mode 100644 index 7a932470..00000000 --- a/packages/ui/components/MessageComposerPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessageComposerPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/MessageLimitInput.wrn b/packages/ui/components/MessageLimitInput.wrn deleted file mode 100644 index 06f7ee45..00000000 --- a/packages/ui/components/MessageLimitInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MessageLimitInput { - props { - label = "MessageLimit" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MessagePreview.wrn b/packages/ui/components/MessagePreview.wrn deleted file mode 100644 index 8b5aa348..00000000 --- a/packages/ui/components/MessagePreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessagePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/MessageVolumeSlider.wrn b/packages/ui/components/MessageVolumeSlider.wrn deleted file mode 100644 index 24450718..00000000 --- a/packages/ui/components/MessageVolumeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MessageVolumeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Metric.wrn b/packages/ui/components/Metric.wrn deleted file mode 100644 index 682abc2a..00000000 --- a/packages/ui/components/Metric.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component Metric { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/MetricCard.wrn b/packages/ui/components/MetricCard.wrn deleted file mode 100644 index 65cc2f20..00000000 --- a/packages/ui/components/MetricCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MetricCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/MetricGrid.wrn b/packages/ui/components/MetricGrid.wrn deleted file mode 100644 index f46510bf..00000000 --- a/packages/ui/components/MetricGrid.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component MetricGrid { - props { - label = "Platform metrics" - metrics = [] - compact = false - columns = 4 - class = "" - } - - view { -
    -
    - {#each metrics as metric} -
    - {metric.value} - {metric.label} - - {#if metric.description} -

    {metric.description}

    - {/if} -
    - {:empty} -

    No metrics available.

    - {/each} -
    -
    - } -} diff --git a/packages/ui/components/MetricText.wrn b/packages/ui/components/MetricText.wrn deleted file mode 100644 index 5f88225a..00000000 --- a/packages/ui/components/MetricText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component MetricText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/MinutePicker.wrn b/packages/ui/components/MinutePicker.wrn deleted file mode 100644 index 9aa01269..00000000 --- a/packages/ui/components/MinutePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MinutePicker { - props { - label = "Minute" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MissionSection.wrn b/packages/ui/components/MissionSection.wrn deleted file mode 100644 index 93694c92..00000000 --- a/packages/ui/components/MissionSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component MissionSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/MobileDeviceFrame.wrn b/packages/ui/components/MobileDeviceFrame.wrn deleted file mode 100644 index 1529f41b..00000000 --- a/packages/ui/components/MobileDeviceFrame.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component MobileDeviceFrame { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/MobileInput.wrn b/packages/ui/components/MobileInput.wrn deleted file mode 100644 index 69da0fce..00000000 --- a/packages/ui/components/MobileInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MobileInput { - props { - label = "Mobile" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MobileMenuButton.wrn b/packages/ui/components/MobileMenuButton.wrn deleted file mode 100644 index 530e53b2..00000000 --- a/packages/ui/components/MobileMenuButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component MobileMenuButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/MobileNavigation.wrn b/packages/ui/components/MobileNavigation.wrn deleted file mode 100644 index c47c4ea4..00000000 --- a/packages/ui/components/MobileNavigation.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component MobileNavigation { - props { - label = "Menu" - closeLabel = "Close menu" - items = [] - class = "" - } - state open = false - view { -
    - } -} diff --git a/packages/ui/components/MobileTableCard.wrn b/packages/ui/components/MobileTableCard.wrn deleted file mode 100644 index 5041a401..00000000 --- a/packages/ui/components/MobileTableCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MobileTableCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Modal.wrn b/packages/ui/components/Modal.wrn index bd6df0c9..9a4ce3fb 100644 --- a/packages/ui/components/Modal.wrn +++ b/packages/ui/components/Modal.wrn @@ -1,14 +1,19 @@ component Modal { props { - class = "" - title = "Dialog" + size = "default" + color = "primary" + title = "Modal" description = "" open = false - size = "md" + placement = "bottom" closeLabel = "Close" + class = "" } - state visible = open view { - + } } diff --git a/packages/ui/components/MonthPicker.wrn b/packages/ui/components/MonthPicker.wrn deleted file mode 100644 index b4da50d4..00000000 --- a/packages/ui/components/MonthPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MonthPicker { - props { - label = "Month" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MonthYearPicker.wrn b/packages/ui/components/MonthYearPicker.wrn deleted file mode 100644 index 489589bc..00000000 --- a/packages/ui/components/MonthYearPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MonthYearPicker { - props { - label = "MonthYear" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MonthlyVolumeSelector.wrn b/packages/ui/components/MonthlyVolumeSelector.wrn deleted file mode 100644 index 7ae5cc79..00000000 --- a/packages/ui/components/MonthlyVolumeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MonthlyVolumeSelector { - props { - label = "MonthlyVolume" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MultiFileUpload.wrn b/packages/ui/components/MultiFileUpload.wrn deleted file mode 100644 index ca495a49..00000000 --- a/packages/ui/components/MultiFileUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component MultiFileUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/MultiSelect.wrn b/packages/ui/components/MultiSelect.wrn deleted file mode 100644 index ec9d25b5..00000000 --- a/packages/ui/components/MultiSelect.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component MultiSelect { - props { - id = "multi-select" - name = "" - label = "Choose options" - options = [] - required = false - disabled = false - size = 5 - class = "" - } - view { -
    - } -} diff --git a/packages/ui/components/MultipleEmailInput.wrn b/packages/ui/components/MultipleEmailInput.wrn deleted file mode 100644 index e2492037..00000000 --- a/packages/ui/components/MultipleEmailInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component MultipleEmailInput { - props { - label = "MultipleEmail" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/MutedText.wrn b/packages/ui/components/MutedText.wrn deleted file mode 100644 index c14a752a..00000000 --- a/packages/ui/components/MutedText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component MutedText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/NameInput.wrn b/packages/ui/components/NameInput.wrn deleted file mode 100644 index 303da4b9..00000000 --- a/packages/ui/components/NameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component NameInput { - props { - label = "Name" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/NarrowContainer.wrn b/packages/ui/components/NarrowContainer.wrn deleted file mode 100644 index 4c56fb4e..00000000 --- a/packages/ui/components/NarrowContainer.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component NarrowContainer { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/Nav.wrn b/packages/ui/components/Nav.wrn new file mode 100644 index 00000000..39475a9f --- /dev/null +++ b/packages/ui/components/Nav.wrn @@ -0,0 +1,17 @@ +component Nav { + props { + size = "default" + color = "primary" + label = "Nav" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/packages/ui/components/Navbar.wrn b/packages/ui/components/Navbar.wrn new file mode 100644 index 00000000..ba6fb974 --- /dev/null +++ b/packages/ui/components/Navbar.wrn @@ -0,0 +1,17 @@ +component Navbar { + props { + size = "default" + color = "primary" + label = "Navbar" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/packages/ui/components/Navigation.wrn b/packages/ui/components/Navigation.wrn deleted file mode 100644 index b27bae5c..00000000 --- a/packages/ui/components/Navigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component Navigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/NavigationItem.wrn b/packages/ui/components/NavigationItem.wrn deleted file mode 100644 index 100702d9..00000000 --- a/packages/ui/components/NavigationItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component NavigationItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/NavigationMegaMenu.wrn b/packages/ui/components/NavigationMegaMenu.wrn deleted file mode 100644 index cc27ba3d..00000000 --- a/packages/ui/components/NavigationMegaMenu.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component NavigationMegaMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/NewBadge.wrn b/packages/ui/components/NewBadge.wrn deleted file mode 100644 index 3d668945..00000000 --- a/packages/ui/components/NewBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component NewBadge { - props { - label = "New" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/NewPasswordInput.wrn b/packages/ui/components/NewPasswordInput.wrn deleted file mode 100644 index 0c5897dc..00000000 --- a/packages/ui/components/NewPasswordInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component NewPasswordInput { - props { - label = "NewPassword" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/NewsletterCTA.wrn b/packages/ui/components/NewsletterCTA.wrn deleted file mode 100644 index be6021ff..00000000 --- a/packages/ui/components/NewsletterCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component NewsletterCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/NewsletterForm.wrn b/packages/ui/components/NewsletterForm.wrn deleted file mode 100644 index c7790ea7..00000000 --- a/packages/ui/components/NewsletterForm.wrn +++ /dev/null @@ -1,214 +0,0 @@ -component NewsletterForm { - props { - class: string = "" - eyebrow = "" - title = "Stay up to date" - description = "" - - placeholder = "Enter your email" - buttonLabel = "Subscribe" - - action = "/newsletter/subscribe" - method = "post" - emailName = "email" - - privacyLabel = "" - privacyHref = "/privacy" - - successMessage = "You are subscribed." - errorMessage = "Something went wrong. Please try again." - - iconClass = "icon-[lucide--mail]" - - centered = false - compact = false - showIcon = true - showPrivacy = true - fullWidth = false - } - - state email = "" - state status = "idle" - state message = "" - - view { -
    -
    - - - -
    -
    - -
    -
    - -
    - - - - - -
    - -
    - -

    - {eyebrow} -

    - - -

    - {title} -

    -
    -
    - - -

    - {description} -

    -
    - - -
    -
    - - -
    -
    - - - -
    - - -
    -
    - -

    - No spam. Unsubscribe at any time. - - - {privacyLabel} - -

    - -
    - {message} -
    -
    -
    -
    -
    -
    - } -} diff --git a/packages/ui/components/NoResultsState.wrn b/packages/ui/components/NoResultsState.wrn deleted file mode 100644 index 7784dc5c..00000000 --- a/packages/ui/components/NoResultsState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component NoResultsState { - props { - label = "NoResults" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/NotFoundPage.wrn b/packages/ui/components/NotFoundPage.wrn deleted file mode 100644 index 4caee5a9..00000000 --- a/packages/ui/components/NotFoundPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component NotFoundPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/NotFoundState.wrn b/packages/ui/components/NotFoundState.wrn deleted file mode 100644 index 987fd40b..00000000 --- a/packages/ui/components/NotFoundState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component NotFoundState { - props { - label = "NotFound" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/NotificationCard.wrn b/packages/ui/components/NotificationCard.wrn deleted file mode 100644 index be36b3ad..00000000 --- a/packages/ui/components/NotificationCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component NotificationCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/NotificationDot.wrn b/packages/ui/components/NotificationDot.wrn deleted file mode 100644 index 21a6d903..00000000 --- a/packages/ui/components/NotificationDot.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component NotificationDot { - props { - label = "Notification" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/NotificationList.wrn b/packages/ui/components/NotificationList.wrn deleted file mode 100644 index 367c44e6..00000000 --- a/packages/ui/components/NotificationList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component NotificationList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/NumberInput.wrn b/packages/ui/components/NumberInput.wrn deleted file mode 100644 index ad1e405f..00000000 --- a/packages/ui/components/NumberInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component NumberInput { - props { - class = "" - id = "" - name = "" - label = "Number" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/OfficeCard.wrn b/packages/ui/components/OfficeCard.wrn deleted file mode 100644 index c3d2e77b..00000000 --- a/packages/ui/components/OfficeCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OfficeCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/OfflinePage.wrn b/packages/ui/components/OfflinePage.wrn deleted file mode 100644 index 007a272f..00000000 --- a/packages/ui/components/OfflinePage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OfflinePage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/OfflineState.wrn b/packages/ui/components/OfflineState.wrn deleted file mode 100644 index 089101e9..00000000 --- a/packages/ui/components/OfflineState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OfflineState { - props { - label = "Offline" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/OnboardingProgress.wrn b/packages/ui/components/OnboardingProgress.wrn deleted file mode 100644 index 28f8ff96..00000000 --- a/packages/ui/components/OnboardingProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OnboardingProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/OneTimeSecretDisplay.wrn b/packages/ui/components/OneTimeSecretDisplay.wrn deleted file mode 100644 index 8cbf0b90..00000000 --- a/packages/ui/components/OneTimeSecretDisplay.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OneTimeSecretDisplay { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/OnlineIndicator.wrn b/packages/ui/components/OnlineIndicator.wrn deleted file mode 100644 index e8e673ed..00000000 --- a/packages/ui/components/OnlineIndicator.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component OnlineIndicator { - props { - label = "Online" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/OpacitySlider.wrn b/packages/ui/components/OpacitySlider.wrn deleted file mode 100644 index b1d725d7..00000000 --- a/packages/ui/components/OpacitySlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OpacitySlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/OpenAPICTA.wrn b/packages/ui/components/OpenAPICTA.wrn deleted file mode 100644 index 2a01aabf..00000000 --- a/packages/ui/components/OpenAPICTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OpenAPICTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/OptionalIndicator.wrn b/packages/ui/components/OptionalIndicator.wrn deleted file mode 100644 index cd2820ed..00000000 --- a/packages/ui/components/OptionalIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OptionalIndicator { - props { - label = "Optional" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/OrganizationSelector.wrn b/packages/ui/components/OrganizationSelector.wrn deleted file mode 100644 index 08a7d36e..00000000 --- a/packages/ui/components/OrganizationSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component OrganizationSelector { - props { - label = "Organization" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/OtpInput.wrn b/packages/ui/components/OtpInput.wrn deleted file mode 100644 index b95a481a..00000000 --- a/packages/ui/components/OtpInput.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component OtpInput { - props { - class = "" - name = "otp" - length = 6 - label = "Verification code" - } - view { -
    {label}
    - } -} diff --git a/packages/ui/components/OtpVerificationForm.wrn b/packages/ui/components/OtpVerificationForm.wrn deleted file mode 100644 index 6c2635ef..00000000 --- a/packages/ui/components/OtpVerificationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component OtpVerificationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/OutlinedCard.wrn b/packages/ui/components/OutlinedCard.wrn deleted file mode 100644 index 806964bc..00000000 --- a/packages/ui/components/OutlinedCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component OutlinedCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PageAlert.wrn b/packages/ui/components/PageAlert.wrn deleted file mode 100644 index b718b845..00000000 --- a/packages/ui/components/PageAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PageAlert { - props { - label = "Page" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/PageHeader.wrn b/packages/ui/components/PageHeader.wrn deleted file mode 100644 index 6fd1a09d..00000000 --- a/packages/ui/components/PageHeader.wrn +++ /dev/null @@ -1,172 +0,0 @@ -component PageHeader { - props { - class: string = "" - eyebrow = "" - title = "" - description = "" - - primaryLabel = "" - primaryHref = "" - - secondaryLabel = "" - secondaryHref = "" - - icon = "sparkles" - - centered = false - compact = false - - showBreadcrumbs = false - breadcrumbParent = "" - breadcrumbParentHref = "" - breadcrumbCurrent = "" - - highlights = [] - } - - view { -
    - - - -
    - - -
    - -
    - - -
    - -
    - -
    - - - - - - {eyebrow} - -
    - - -

    - {title} -

    - - -

    - {description} -

    -
    - - -
    - - - {secondaryLabel} - - - - - {primaryLabel} - - - -
    -
    - - -
    -
    - {#each highlights as highlight} -
    -
    - - - - -
    -

    - {highlight.title} -

    - -

    - {highlight.description} -

    -
    -
    -
    - {/each} -
    -
    -
    -
    - } -} diff --git a/packages/ui/components/PageHeading.wrn b/packages/ui/components/PageHeading.wrn deleted file mode 100644 index 7d6d2c65..00000000 --- a/packages/ui/components/PageHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PageHeading { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/PageShell.wrn b/packages/ui/components/PageShell.wrn deleted file mode 100644 index e228102e..00000000 --- a/packages/ui/components/PageShell.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PageShell { - props { - className = "" - } - view { -
    - } -} diff --git a/packages/ui/components/PageSkeleton.wrn b/packages/ui/components/PageSkeleton.wrn deleted file mode 100644 index 0c81d383..00000000 --- a/packages/ui/components/PageSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PageSkeleton { - props { - label = "Page" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/Pagination.wrn b/packages/ui/components/Pagination.wrn index 05d24965..2898cdb1 100644 --- a/packages/ui/components/Pagination.wrn +++ b/packages/ui/components/Pagination.wrn @@ -1,187 +1,17 @@ component Pagination { - props { - class: string = "" - currentPage = 1 - totalPages = 1 - - previousHref = "" - nextHref = "" - - pages = [] - - showNumbers = true - showSummary = true - - totalItems = 0 - pageSize = 10 - - compact = false - centered = false - } - - view { - - } + props { + size = "default" + color = "primary" + label = "Pagination" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } } diff --git a/packages/ui/components/Panel.wrn b/packages/ui/components/Panel.wrn deleted file mode 100644 index 7bc0376e..00000000 --- a/packages/ui/components/Panel.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Panel { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/PartnerApplicationForm.wrn b/packages/ui/components/PartnerApplicationForm.wrn deleted file mode 100644 index 1ba11f0b..00000000 --- a/packages/ui/components/PartnerApplicationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PartnerApplicationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PartnerLogoGrid.wrn b/packages/ui/components/PartnerLogoGrid.wrn deleted file mode 100644 index 5cabc551..00000000 --- a/packages/ui/components/PartnerLogoGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PartnerLogoGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/PartnerProgramCard.wrn b/packages/ui/components/PartnerProgramCard.wrn deleted file mode 100644 index 82d4fb92..00000000 --- a/packages/ui/components/PartnerProgramCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PartnerProgramCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PasskeyButton.wrn b/packages/ui/components/PasskeyButton.wrn deleted file mode 100644 index ecc8b203..00000000 --- a/packages/ui/components/PasskeyButton.wrn +++ /dev/null @@ -1,28 +0,0 @@ -component PasskeyButton { - props { - label = "Continue with a passkey" - description = "Use fingerprint, face recognition, or device PIN" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { - - {#if href} - - - {label}{#if description}{description}{/if} - - - {:else} - - {/if} - - } -} diff --git a/packages/ui/components/PasswordInput.wrn b/packages/ui/components/PasswordInput.wrn deleted file mode 100644 index f4430383..00000000 --- a/packages/ui/components/PasswordInput.wrn +++ /dev/null @@ -1,32 +0,0 @@ -component PasswordInput { - props { - class = "" - id = "password" - name = "password" - label = "Password" - value = "" - placeholder = "Enter your password" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "current-password" - revealable = true - } - - state visible = false - - view { -
    - -
    - - - {#if revealable}{/if} -
    - {#if help && !error}

    {help}

    {/if} - {#if error}{/if} -
    - } -} diff --git a/packages/ui/components/PasswordRequirementList.wrn b/packages/ui/components/PasswordRequirementList.wrn deleted file mode 100644 index e72b7263..00000000 --- a/packages/ui/components/PasswordRequirementList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PasswordRequirementList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/PasswordStrengthMeter.wrn b/packages/ui/components/PasswordStrengthMeter.wrn deleted file mode 100644 index faa2dd88..00000000 --- a/packages/ui/components/PasswordStrengthMeter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PasswordStrengthMeter { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/PasswordVisibilityToggle.wrn b/packages/ui/components/PasswordVisibilityToggle.wrn deleted file mode 100644 index d277ecc6..00000000 --- a/packages/ui/components/PasswordVisibilityToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PasswordVisibilityToggle { - props { - label = "PasswordVisibility" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PathInput.wrn b/packages/ui/components/PathInput.wrn deleted file mode 100644 index 55b9cc51..00000000 --- a/packages/ui/components/PathInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PathInput { - props { - label = "Path" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PaymentMethodCard.wrn b/packages/ui/components/PaymentMethodCard.wrn deleted file mode 100644 index 0bb1a4c8..00000000 --- a/packages/ui/components/PaymentMethodCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PaymentMethodCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PdfPreview.wrn b/packages/ui/components/PdfPreview.wrn deleted file mode 100644 index ab11d701..00000000 --- a/packages/ui/components/PdfPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PdfPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PercentageInput.wrn b/packages/ui/components/PercentageInput.wrn deleted file mode 100644 index f79303a4..00000000 --- a/packages/ui/components/PercentageInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PercentageInput { - props { - label = "Percentage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PermissionSelector.wrn b/packages/ui/components/PermissionSelector.wrn deleted file mode 100644 index 59edfecd..00000000 --- a/packages/ui/components/PermissionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PermissionSelector { - props { - label = "Permission" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PhoneInput.wrn b/packages/ui/components/PhoneInput.wrn deleted file mode 100644 index 1ef30d27..00000000 --- a/packages/ui/components/PhoneInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component PhoneInput { - props { - class = "" - id = "" - name = "" - label = "Phone" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/PieChart.wrn b/packages/ui/components/PieChart.wrn deleted file mode 100644 index 6de1332e..00000000 --- a/packages/ui/components/PieChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PieChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/Pill.wrn b/packages/ui/components/Pill.wrn deleted file mode 100644 index 2acac5f8..00000000 --- a/packages/ui/components/Pill.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component Pill { - props { - label = "Pill" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/PinInput.wrn b/packages/ui/components/PinInput.wrn index 840245cf..8aa45c9e 100644 --- a/packages/ui/components/PinInput.wrn +++ b/packages/ui/components/PinInput.wrn @@ -1,16 +1,114 @@ component PinInput { props { - label = "Pin" - name = "" + size = "default" + color = "primary" + label = "Verification code" + name = "pin" value = "" - placeholder = "" + length = 4 + pattern = "[0-9]" type = "text" - required = false + inputMode = "numeric" + placeholder = "○" + autocomplete = "one-time-code" + masked = false disabled = false readonly = false - help = "" - error = "" + required = false + autoFocus = false + autoSubmit = false + allowPaste = true + clearable = true + clearLabel = "Clear code" + separator = "" + groupSize = 0 + helpText = "" + invalid = false + validationMessage = "" class = "" + @event input = function + @event change = function + @event complete = function + @event paste = function + @event clear = function + @event error = function + } + + functions { + function inputIndexes() { + return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].slice( + 0, + Math.max(1, Math.min(12, Number(length))) + ) + } + } + + view { +
    +
    + {label} + +
    + +
    + {#each inputIndexes() as index} + + {#if separator && groupSize !== 0 && (index + 1) % groupSize === 0 && index + 1 !== length} + + {/if} + {/each} +
    + + + + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
    } - view { } } diff --git a/packages/ui/components/PlainTextEditor.wrn b/packages/ui/components/PlainTextEditor.wrn deleted file mode 100644 index c5145146..00000000 --- a/packages/ui/components/PlainTextEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PlainTextEditor { - props { - label = "PlainText" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PlanCTA.wrn b/packages/ui/components/PlanCTA.wrn deleted file mode 100644 index 335e4dd7..00000000 --- a/packages/ui/components/PlanCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PlanCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/PlanFeatureList.wrn b/packages/ui/components/PlanFeatureList.wrn deleted file mode 100644 index 78503873..00000000 --- a/packages/ui/components/PlanFeatureList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PlanFeatureList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/PlanLimitList.wrn b/packages/ui/components/PlanLimitList.wrn deleted file mode 100644 index ac92bcdb..00000000 --- a/packages/ui/components/PlanLimitList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PlanLimitList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/PlanSelector.wrn b/packages/ui/components/PlanSelector.wrn deleted file mode 100644 index b5d9a5c3..00000000 --- a/packages/ui/components/PlanSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PlanSelector { - props { - label = "Plan" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PlatformPillarCard.wrn b/packages/ui/components/PlatformPillarCard.wrn deleted file mode 100644 index 15c71388..00000000 --- a/packages/ui/components/PlatformPillarCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PlatformPillarCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PolicyVersionTable.wrn b/packages/ui/components/PolicyVersionTable.wrn deleted file mode 100644 index 93a5c26b..00000000 --- a/packages/ui/components/PolicyVersionTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PolicyVersionTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/Popover.wrn b/packages/ui/components/Popover.wrn index d5635325..e53b737f 100644 --- a/packages/ui/components/Popover.wrn +++ b/packages/ui/components/Popover.wrn @@ -1,10 +1,19 @@ component Popover { props { - title = "" + size = "default" + color = "primary" + title = "Popover" description = "" open = false + placement = "bottom" closeLabel = "Close" class = "" } - view {
    } + view { +
    +
    {title}
    + {#if description}

    {description}

    {/if} + +
    + } } diff --git a/packages/ui/components/PortInput.wrn b/packages/ui/components/PortInput.wrn deleted file mode 100644 index 84e0fdc4..00000000 --- a/packages/ui/components/PortInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PortInput { - props { - label = "Port" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PortNumberInput.wrn b/packages/ui/components/PortNumberInput.wrn deleted file mode 100644 index b98d33fd..00000000 --- a/packages/ui/components/PortNumberInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PortNumberInput { - props { - label = "PortNumber" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PositiveNumberInput.wrn b/packages/ui/components/PositiveNumberInput.wrn deleted file mode 100644 index 88328358..00000000 --- a/packages/ui/components/PositiveNumberInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PositiveNumberInput { - props { - label = "PositiveNumber" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PostalCodeInput.wrn b/packages/ui/components/PostalCodeInput.wrn deleted file mode 100644 index 19ae096c..00000000 --- a/packages/ui/components/PostalCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PostalCodeInput { - props { - label = "PostalCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PostmanCTA.wrn b/packages/ui/components/PostmanCTA.wrn deleted file mode 100644 index 4bd53e2d..00000000 --- a/packages/ui/components/PostmanCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PostmanCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/PresetDateRangePicker.wrn b/packages/ui/components/PresetDateRangePicker.wrn deleted file mode 100644 index 61ec3bdb..00000000 --- a/packages/ui/components/PresetDateRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PresetDateRangePicker { - props { - label = "PresetDateRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PressReleaseCard.wrn b/packages/ui/components/PressReleaseCard.wrn deleted file mode 100644 index 37e73f47..00000000 --- a/packages/ui/components/PressReleaseCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PressReleaseCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PreviewBadge.wrn b/packages/ui/components/PreviewBadge.wrn deleted file mode 100644 index 7f07d0a9..00000000 --- a/packages/ui/components/PreviewBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PreviewBadge { - props { - label = "Preview" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/PreviousNextNavigation.wrn b/packages/ui/components/PreviousNextNavigation.wrn deleted file mode 100644 index 7657873e..00000000 --- a/packages/ui/components/PreviousNextNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PreviousNextNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/PriceInput.wrn b/packages/ui/components/PriceInput.wrn deleted file mode 100644 index e72461ca..00000000 --- a/packages/ui/components/PriceInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PriceInput { - props { - label = "Price" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PriceRangeSlider.wrn b/packages/ui/components/PriceRangeSlider.wrn deleted file mode 100644 index c810af4e..00000000 --- a/packages/ui/components/PriceRangeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PriceRangeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PriceText.wrn b/packages/ui/components/PriceText.wrn deleted file mode 100644 index f4c87f84..00000000 --- a/packages/ui/components/PriceText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component PriceText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/PricingCard.wrn b/packages/ui/components/PricingCard.wrn deleted file mode 100644 index fddb5f60..00000000 --- a/packages/ui/components/PricingCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PricingCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PricingComparisonTable.wrn b/packages/ui/components/PricingComparisonTable.wrn deleted file mode 100644 index a54f0b54..00000000 --- a/packages/ui/components/PricingComparisonTable.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component PricingComparisonTable { - props { - caption = "Plan comparison" - plans = [] - features = [] - featuredPlan = "" - class = "" - } - - view { -
    - - - - - - {#each plans as plan} - - {/each} - - - - {#each features as feature} - - - {#each feature.values as value} - - {/each} - - {/each} - -
    {caption}
    Feature{plan.name}
    {feature.label}{value}
    -
    - } -} diff --git a/packages/ui/components/PricingContactForm.wrn b/packages/ui/components/PricingContactForm.wrn deleted file mode 100644 index 2b845fab..00000000 --- a/packages/ui/components/PricingContactForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PricingContactForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PricingFeatureGroup.wrn b/packages/ui/components/PricingFeatureGroup.wrn deleted file mode 100644 index 52de07b8..00000000 --- a/packages/ui/components/PricingFeatureGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PricingFeatureGroup { - props { - label = "PricingFeature" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PricingGrid.wrn b/packages/ui/components/PricingGrid.wrn deleted file mode 100644 index fc5d830d..00000000 --- a/packages/ui/components/PricingGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PricingGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/PricingHero.wrn b/packages/ui/components/PricingHero.wrn deleted file mode 100644 index f7aaaac0..00000000 --- a/packages/ui/components/PricingHero.wrn +++ /dev/null @@ -1,66 +0,0 @@ -component PricingHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - - view { -
    - - -
    - {#if align === "center"} -
    - {#if eyebrow} -

    - {eyebrow} -

    - {/if} - - {#if title} -

    - {title} -

    - {/if} - - {#if description} -

    - {description} -

    - {/if} -
    - {:else} -
    - {#if eyebrow} -

    - {eyebrow} -

    - {/if} - - {#if title} -

    - {title} -

    - {/if} - - {#if description} -

    - {description} -

    - {/if} -
    - {/if} - - -
    -
    - } -} diff --git a/packages/ui/components/PricingPlanCard.wrn b/packages/ui/components/PricingPlanCard.wrn deleted file mode 100644 index 529e7a5e..00000000 --- a/packages/ui/components/PricingPlanCard.wrn +++ /dev/null @@ -1,64 +0,0 @@ -component PricingPlanCard { - props { - class = "" - name = "Starter" - description = "" - price = "₹0" - period = "/month" - featured = false - badgeLabel = "Most popular" - ctaLabel = "Choose plan" - ctaHref = "#" - } - - view { -
    - {#if featured} -
    - -
    - {/if} - -

    - {name} -

    - - {#if description} -

    - {description} -

    - {/if} - -
    - - {price} - - {#if period} - - {period} - - {/if} -
    - -
    - -
    - - {#if featured} - - {ctaLabel} - - {:else} - - {ctaLabel} - - {/if} -
    - } -} diff --git a/packages/ui/components/PricingTable.wrn b/packages/ui/components/PricingTable.wrn deleted file mode 100644 index 73806601..00000000 --- a/packages/ui/components/PricingTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PricingTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/PricingToggle.wrn b/packages/ui/components/PricingToggle.wrn deleted file mode 100644 index 646322a5..00000000 --- a/packages/ui/components/PricingToggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PricingToggle { - props { - label = "Pricing" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PrimaryButton.wrn b/packages/ui/components/PrimaryButton.wrn deleted file mode 100644 index 0fd29025..00000000 --- a/packages/ui/components/PrimaryButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component PrimaryButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/PrintAction.wrn b/packages/ui/components/PrintAction.wrn deleted file mode 100644 index a7b6f5c0..00000000 --- a/packages/ui/components/PrintAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PrintAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/PrintPolicyButton.wrn b/packages/ui/components/PrintPolicyButton.wrn deleted file mode 100644 index 40faf05e..00000000 --- a/packages/ui/components/PrintPolicyButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PrintPolicyButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/PrioritySelector.wrn b/packages/ui/components/PrioritySelector.wrn deleted file mode 100644 index 32dec11a..00000000 --- a/packages/ui/components/PrioritySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PrioritySelector { - props { - label = "Priority" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PrivacyNotice.wrn b/packages/ui/components/PrivacyNotice.wrn deleted file mode 100644 index 06a1da25..00000000 --- a/packages/ui/components/PrivacyNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component PrivacyNotice { - props { - label = "Privacy" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ProductArchitectureDiagram.wrn b/packages/ui/components/ProductArchitectureDiagram.wrn deleted file mode 100644 index 032227c9..00000000 --- a/packages/ui/components/ProductArchitectureDiagram.wrn +++ /dev/null @@ -1,35 +0,0 @@ -component ProductArchitectureDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - - view { -
    -
    -
    - {#if title}

    {title}

    {/if} - {#if value}{value}{/if} - {#if description}

    {description}

    {/if} -
    - {#if loading} - - Loading - - {/if} -
    - -
    - -
    - - {#if summary} -

    {summary}

    - {/if} -
    - } -} diff --git a/packages/ui/components/ProductCTA.wrn b/packages/ui/components/ProductCTA.wrn deleted file mode 100644 index e852e0a9..00000000 --- a/packages/ui/components/ProductCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ProductCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ProductCard.wrn b/packages/ui/components/ProductCard.wrn deleted file mode 100644 index fe490ab3..00000000 --- a/packages/ui/components/ProductCard.wrn +++ /dev/null @@ -1,27 +0,0 @@ -component ProductCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - status = "" - class = "" - } - - view { -
    -
    - {#if eyebrow}{eyebrow}{/if} - {#if status}{status}{/if} -
    - {#if title}

    {title}

    {/if} - {#if description}

    {description}

    {/if} - {#if href} - - {actionLabel} - - {/if} -
    - } -} diff --git a/packages/ui/components/ProductCategorySection.wrn b/packages/ui/components/ProductCategorySection.wrn deleted file mode 100644 index 9e560449..00000000 --- a/packages/ui/components/ProductCategorySection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductCategorySection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ProductFeatureList.wrn b/packages/ui/components/ProductFeatureList.wrn deleted file mode 100644 index e8216830..00000000 --- a/packages/ui/components/ProductFeatureList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductFeatureList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ProductGrid.wrn b/packages/ui/components/ProductGrid.wrn deleted file mode 100644 index 61e2bf64..00000000 --- a/packages/ui/components/ProductGrid.wrn +++ /dev/null @@ -1,28 +0,0 @@ -component ProductGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - - view { -
    -
    - {#if title}

    {title}

    {/if} - {#if description}

    {description}

    {/if} - - {#if empty} -
    - {emptyText} -
    - {:else} -
    - -
    - {/if} -
    -
    - } -} diff --git a/packages/ui/components/ProductHero.wrn b/packages/ui/components/ProductHero.wrn deleted file mode 100644 index 6a2adf22..00000000 --- a/packages/ui/components/ProductHero.wrn +++ /dev/null @@ -1,55 +0,0 @@ -component ProductHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - - view { -
    - - -
    -
    - {#if eyebrow} -

    - {eyebrow} -

    - {/if} - - {#if title} -

    - {title} -

    - {/if} - - {#if description} -

    - {description} -

    - {/if} -
    - -
    - -
    -
    -
    - } -} diff --git a/packages/ui/components/ProductIcon.wrn b/packages/ui/components/ProductIcon.wrn deleted file mode 100644 index e1a09cc3..00000000 --- a/packages/ui/components/ProductIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ProductIntegrationList.wrn b/packages/ui/components/ProductIntegrationList.wrn deleted file mode 100644 index f919978e..00000000 --- a/packages/ui/components/ProductIntegrationList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductIntegrationList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ProductList.wrn b/packages/ui/components/ProductList.wrn deleted file mode 100644 index 74c5bb0a..00000000 --- a/packages/ui/components/ProductList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ProductLogo.wrn b/packages/ui/components/ProductLogo.wrn deleted file mode 100644 index 60467865..00000000 --- a/packages/ui/components/ProductLogo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductLogo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ProductMegaMenu.wrn b/packages/ui/components/ProductMegaMenu.wrn deleted file mode 100644 index 09a9d48a..00000000 --- a/packages/ui/components/ProductMegaMenu.wrn +++ /dev/null @@ -1,332 +0,0 @@ -component ProductMegaMenu { - props { - class: string = "" - } - view { -
    -
    -
    - - -
    -
    -
    -

    - WrNexus platform -

    - -

    - Everything you need to manage identity -

    -
    - - -
    - -
    - - - - - - - - - - - Platform - - - - - - - Unified identity infrastructure for every application. - - - - - - - - - - - - - - Authentication - - - - - - - Passwords, passkeys, social login, MFA, and SSO. - - - - - - - - - - - - - - User management - - - - - - - Profiles, sessions, invitations, and user lifecycle. - - - - - - - - - - - - - - Organizations - - - - - - - Multi-tenant workspaces, teams, domains, and membership. - - - - - - - - - - - - - - Authorization - - - - - - - Roles, permissions, policies, and protected resources. - - - - - - - - - - - - - - Security - - - - - - - Session controls, recovery, audit logs, and threat protection. - - - -
    - - - View all product features - - - -
    - - - - -
    - - -
    -
    - - - - Integrations - - - - - - Enterprise SSO - - - - - - Audit logs - -
    - - - Read the documentation - - - -
    -
    -
    - } -} diff --git a/packages/ui/components/ProductMiniCard.wrn b/packages/ui/components/ProductMiniCard.wrn deleted file mode 100644 index 69e298e2..00000000 --- a/packages/ui/components/ProductMiniCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductMiniCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ProductNavigationCard.wrn b/packages/ui/components/ProductNavigationCard.wrn deleted file mode 100644 index 0d17fb86..00000000 --- a/packages/ui/components/ProductNavigationCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductNavigationCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ProductPageShell.wrn b/packages/ui/components/ProductPageShell.wrn deleted file mode 100644 index 77a1325d..00000000 --- a/packages/ui/components/ProductPageShell.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProductPageShell { - props { - class = "" - } - - view { -
    - -
    - } -} diff --git a/packages/ui/components/ProductSelector.wrn b/packages/ui/components/ProductSelector.wrn deleted file mode 100644 index e12490a1..00000000 --- a/packages/ui/components/ProductSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProductSelector { - props { - label = "Product" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ProductStatusBadge.wrn b/packages/ui/components/ProductStatusBadge.wrn deleted file mode 100644 index 7d7b90f5..00000000 --- a/packages/ui/components/ProductStatusBadge.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProductStatusBadge { - props { - label = "Available" - status = "" - class = "" - } - - view { - - - {label} - - } -} diff --git a/packages/ui/components/ProductUseCaseList.wrn b/packages/ui/components/ProductUseCaseList.wrn deleted file mode 100644 index 215a02b6..00000000 --- a/packages/ui/components/ProductUseCaseList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ProductUseCaseList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ProductsMegaMenu.wrn b/packages/ui/components/ProductsMegaMenu.wrn deleted file mode 100644 index bfa7aeea..00000000 --- a/packages/ui/components/ProductsMegaMenu.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component ProductsMegaMenu { - props { - label = "Products" - sections = [] - class = "" - } - view { } -} diff --git a/packages/ui/components/ProgressBar.wrn b/packages/ui/components/ProgressBar.wrn deleted file mode 100644 index 268da3ca..00000000 --- a/packages/ui/components/ProgressBar.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component ProgressBar { - props { - class = "" - value = 0 - max = 100 - label = "Progress" - showValue = true - } - view { -
    {label}{value}%
    - } -} diff --git a/packages/ui/components/ProgressChart.wrn b/packages/ui/components/ProgressChart.wrn deleted file mode 100644 index f343dbc4..00000000 --- a/packages/ui/components/ProgressChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ProgressChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/ProgressRing.wrn b/packages/ui/components/ProgressRing.wrn deleted file mode 100644 index 73098122..00000000 --- a/packages/ui/components/ProgressRing.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ProgressRing { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/ProgressSlider.wrn b/packages/ui/components/ProgressSlider.wrn deleted file mode 100644 index 58b14dcb..00000000 --- a/packages/ui/components/ProgressSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProgressSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ProjectCard.wrn b/packages/ui/components/ProjectCard.wrn deleted file mode 100644 index bfd59a30..00000000 --- a/packages/ui/components/ProjectCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ProjectCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ProjectSelector.wrn b/packages/ui/components/ProjectSelector.wrn deleted file mode 100644 index a8986575..00000000 --- a/packages/ui/components/ProjectSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProjectSelector { - props { - label = "Project" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ProjectSwitcher.wrn b/packages/ui/components/ProjectSwitcher.wrn deleted file mode 100644 index 4702a2b4..00000000 --- a/packages/ui/components/ProjectSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ProjectSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PromoCodeInput.wrn b/packages/ui/components/PromoCodeInput.wrn deleted file mode 100644 index c532dd24..00000000 --- a/packages/ui/components/PromoCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PromoCodeInput { - props { - label = "PromoCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PromptDialog.wrn b/packages/ui/components/PromptDialog.wrn deleted file mode 100644 index 849108bd..00000000 --- a/packages/ui/components/PromptDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PromptDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/ProviderSelector.wrn b/packages/ui/components/ProviderSelector.wrn deleted file mode 100644 index 32822dbc..00000000 --- a/packages/ui/components/ProviderSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ProviderSelector { - props { - label = "Provider" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PublicFooter.wrn b/packages/ui/components/PublicFooter.wrn deleted file mode 100644 index 5fc4e871..00000000 --- a/packages/ui/components/PublicFooter.wrn +++ /dev/null @@ -1,675 +0,0 @@ -component PublicFooter { - types { - interface PublicFooterLink { - label: string - href: string - ariaLabel?: string - target?: string - icon?: string - } - interface PublicFooterColumn { - title: string - links: PublicFooterLink[] - } - } - props { - class: string = "" - homeHref: string = "/" - brandName: string = "WrNexus" - brandTagline: string = "Identity Cloud" - brandAriaLabel: string = "WrNexus home" - brandIcon: string = "icon-[lucide--blocks]" - brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications." - statusLabel: string = "All systems operational" - statusHref: string = "/status" - newsletterEyebrow: string = "WrNexus updates" - newsletterTitle: string = "Identity insights delivered to your inbox" - newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources." - newsletterAction: string = "/api/newsletter/subscribe" - newsletterButtonLabel: string = "Subscribe" - newsletterPlaceholder: string = "Enter your work email" - newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription." - newsletterPrivacyLabel: string = "privacy policy" - newsletterPrivacyHref: string = "/privacy" - newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our" - newsletterFinePrintSuffix: string = "." - newsletterEmailLabel: string = "Work email address" - newsletterEmailName: string = "email" - copyrightText: string = "© 2026 WrNexus. All rights reserved." - attributionText: string = "Built by WorkRoot Workspace." - showNewsletter: boolean = true - showSocialLinks: boolean = true - showThemeToggle: boolean = true - showStatus: boolean = true - showCookiePreferences: boolean = true - cookiePreferencesLabel: string = "Cookie preferences" - themeLabel: string = "Theme" - themeToggleLabel: string = "Toggle color theme" - legalTitle: string = "Legal" - socialLinks: PublicFooterLink[] = [] - navigationColumns: PublicFooterColumn[] = [] - legalLinks: PublicFooterLink[] = [] - navigationAriaLabel: string = "Footer navigation" - } - state email = "" - state newsletterSubmitted = false - - view { - - } -} diff --git a/packages/ui/components/PublicHeader.wrn b/packages/ui/components/PublicHeader.wrn deleted file mode 100644 index 5b8988b9..00000000 --- a/packages/ui/components/PublicHeader.wrn +++ /dev/null @@ -1,350 +0,0 @@ -component PublicHeader { - types { - interface PublicHeaderNavigationItem { - label: string - href: string - ariaLabel?: string - target?: string - } - interface PublicHeaderActionItem extends PublicHeaderNavigationItem { - variant?: "primary" | "secondary" | "ghost" - } - } - props { - class: string = "" - homeHref: string = "/" - brandName: string = "WrNexus" - brandTagline: string = "Identity Cloud" - brandAriaLabel: string = "WrNexus home" - brandIcon: string = "icon-[lucide--blocks]" - pricingLabel: string = "Pricing" - pricingHref: string = "/pricing" - statusLabel: string = "All systems operational" - statusHref: string = "/status" - signInLabel: string = "Sign in" - signInHref: string = "/sign-in" - primaryLabel: string = "Start free" - primaryHref: string = "/sign-up" - showStatus: boolean = true - showThemeToggle: boolean = true - showSignIn: boolean = true - showPrimaryAction: boolean = true - productLabel: string = "Product" - solutionsLabel: string = "Solutions" - developersLabel: string = "Developers" - resourcesLabel: string = "Resources" - navigationAriaLabel: string = "Main navigation" - themeToggleLabel: string = "Toggle color theme" - mobileMenuOpenLabel: string = "Open navigation menu" - mobileMenuCloseLabel: string = "Close navigation menu" - navigationItems: PublicHeaderNavigationItem[] = [] - actionItems: PublicHeaderActionItem[] = [] - showNavigation: boolean = true - showMobileThemeToggle: boolean = true - } - state activeMenu = "" - state mobileMenuOpen = false - state headerScrolled = false - - view { -
    -
    - - - - - - - - - - {brandName} - - - - {brandTagline} - - - - - - - - - - - -
    - - - -
    - -
    - - - - - -
    -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    - {#if navigationItems.length > 0 || actionItems.length > 0} - - {:else} - - {/if} -
    -
    - } -} diff --git a/packages/ui/components/PublicHeaderLogo.wrn b/packages/ui/components/PublicHeaderLogo.wrn deleted file mode 100644 index 6c857ae8..00000000 --- a/packages/ui/components/PublicHeaderLogo.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PublicHeaderLogo { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PublicMobileNavigation.wrn b/packages/ui/components/PublicMobileNavigation.wrn deleted file mode 100644 index b8640479..00000000 --- a/packages/ui/components/PublicMobileNavigation.wrn +++ /dev/null @@ -1,589 +0,0 @@ -component PublicMobileNavigation { - props { - class: string = "" - } - state openSection = "" - - view { -
    -
    - - - - - - - - - - - - All systems operational - - - - View service status - - - - - - - - - - -
    - - - - Sign in - - - - Start free - - - -
    - -

    - Secure identity infrastructure for modern applications. -

    - -
    -
    - } -} diff --git a/packages/ui/components/PublicPageShell.wrn b/packages/ui/components/PublicPageShell.wrn deleted file mode 100644 index b48ff921..00000000 --- a/packages/ui/components/PublicPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component PublicPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/PublicSearch.wrn b/packages/ui/components/PublicSearch.wrn deleted file mode 100644 index 612c374d..00000000 --- a/packages/ui/components/PublicSearch.wrn +++ /dev/null @@ -1,125 +0,0 @@ -component PublicSearch { - props { - class: string = "" - query = "" - - placeholder = "Search..." - label = "Search" - - action = "" - method = "get" - name = "q" - - buttonLabel = "" - clearLabel = "Clear search" - - size = "default" - centered = false - fullWidth = false - - showShortcut = false - shortcutLabel = "⌘ K" - - suggestions = [] - } - - state searchValue = query - state focused = false - - view { -
    - - - -
    - - Popular: - - - {#each suggestions.slice(0, 5) as suggestion} - - - - {suggestion.label} - - {/each} -
    -
    - } -} diff --git a/packages/ui/components/PublishDateTimePicker.wrn b/packages/ui/components/PublishDateTimePicker.wrn deleted file mode 100644 index 1f5b9ea5..00000000 --- a/packages/ui/components/PublishDateTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PublishDateTimePicker { - props { - label = "PublishDateTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/PushComposer.wrn b/packages/ui/components/PushComposer.wrn deleted file mode 100644 index 601ac0e4..00000000 --- a/packages/ui/components/PushComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component PushComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/PushNotificationEditor.wrn b/packages/ui/components/PushNotificationEditor.wrn deleted file mode 100644 index c410e262..00000000 --- a/packages/ui/components/PushNotificationEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component PushNotificationEditor { - props { - label = "PushNotification" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/QrCode.wrn b/packages/ui/components/QrCode.wrn deleted file mode 100644 index 02a3d04d..00000000 --- a/packages/ui/components/QrCode.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component QrCode { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/QuantityInput.wrn b/packages/ui/components/QuantityInput.wrn deleted file mode 100644 index 5347a0f3..00000000 --- a/packages/ui/components/QuantityInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component QuantityInput { - props { - label = "Quantity" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/QuantityStepper.wrn b/packages/ui/components/QuantityStepper.wrn deleted file mode 100644 index 4b43430e..00000000 --- a/packages/ui/components/QuantityStepper.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component QuantityStepper { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/QuietHoursPicker.wrn b/packages/ui/components/QuietHoursPicker.wrn deleted file mode 100644 index 479fd396..00000000 --- a/packages/ui/components/QuietHoursPicker.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component QuietHoursPicker { - props { - label = "Quiet hours" - startName = "quietStart" - endName = "quietEnd" - start = "22:00" - end = "08:00" - timezone = "UTC" - disabled = false - class = "" - } - view { -
    {label}

    Timezone: {timezone}

    - } -} diff --git a/packages/ui/components/QuoteText.wrn b/packages/ui/components/QuoteText.wrn deleted file mode 100644 index 9db342f1..00000000 --- a/packages/ui/components/QuoteText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component QuoteText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/RadioGroup.wrn b/packages/ui/components/RadioGroup.wrn deleted file mode 100644 index 8d89c736..00000000 --- a/packages/ui/components/RadioGroup.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RadioGroup { - props { - class = "" - label = "Choose one" - name = "choice" - } - view { -
    {label}
    - } -} diff --git a/packages/ui/components/RangeInput.wrn b/packages/ui/components/RangeInput.wrn deleted file mode 100644 index 64fe87af..00000000 --- a/packages/ui/components/RangeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RangeInput { - props { - label = "Range" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RangeSlider.wrn b/packages/ui/components/RangeSlider.wrn index a5b7517d..2c04e82f 100644 --- a/packages/ui/components/RangeSlider.wrn +++ b/packages/ui/components/RangeSlider.wrn @@ -1,13 +1,20 @@ component RangeSlider { props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" + size = "default" + color = "primary" + label = "Range Slider" + name = "" + value = "" + placeholder = "" + type = "range" + min = "" + max = "" + step = "" + disabled = false + required = false class = "" } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } + view { + + } } diff --git a/packages/ui/components/RateLimitInput.wrn b/packages/ui/components/RateLimitInput.wrn deleted file mode 100644 index 71246e9a..00000000 --- a/packages/ui/components/RateLimitInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RateLimitInput { - props { - label = "RateLimit" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RateLimitPage.wrn b/packages/ui/components/RateLimitPage.wrn deleted file mode 100644 index f90235b6..00000000 --- a/packages/ui/components/RateLimitPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RateLimitPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/RateLimitedState.wrn b/packages/ui/components/RateLimitedState.wrn deleted file mode 100644 index 29b72837..00000000 --- a/packages/ui/components/RateLimitedState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RateLimitedState { - props { - label = "RateLimited" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/RateTable.wrn b/packages/ui/components/RateTable.wrn deleted file mode 100644 index 1f5cc46f..00000000 --- a/packages/ui/components/RateTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RateTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/Rating.wrn b/packages/ui/components/Rating.wrn new file mode 100644 index 00000000..1298a069 --- /dev/null +++ b/packages/ui/components/Rating.wrn @@ -0,0 +1,19 @@ +component Rating { + props { + size = "default" + color = "primary" + title = "Rating" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/RatingSlider.wrn b/packages/ui/components/RatingSlider.wrn deleted file mode 100644 index 9c8eaebe..00000000 --- a/packages/ui/components/RatingSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RatingSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/RecipientSelector.wrn b/packages/ui/components/RecipientSelector.wrn deleted file mode 100644 index 648aad68..00000000 --- a/packages/ui/components/RecipientSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RecipientSelector { - props { - label = "Recipient" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RecoveryCodeForm.wrn b/packages/ui/components/RecoveryCodeForm.wrn deleted file mode 100644 index 884062e8..00000000 --- a/packages/ui/components/RecoveryCodeForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RecoveryCodeForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/RecoveryCodeInput.wrn b/packages/ui/components/RecoveryCodeInput.wrn deleted file mode 100644 index ebede31c..00000000 --- a/packages/ui/components/RecoveryCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RecoveryCodeInput { - props { - label = "RecoveryCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RecurrenceRuleBuilder.wrn b/packages/ui/components/RecurrenceRuleBuilder.wrn deleted file mode 100644 index b77ed077..00000000 --- a/packages/ui/components/RecurrenceRuleBuilder.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RecurrenceRuleBuilder { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/RecurringSchedulePicker.wrn b/packages/ui/components/RecurringSchedulePicker.wrn deleted file mode 100644 index d3a137a4..00000000 --- a/packages/ui/components/RecurringSchedulePicker.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RecurringSchedulePicker { - props { - id = "recurring-schedule" - name = "recurrence" - label = "Repeat" - value = "none" - disabled = false - class = "" - } - view { -
    - } -} diff --git a/packages/ui/components/RedirectUriInput.wrn b/packages/ui/components/RedirectUriInput.wrn deleted file mode 100644 index 269fa2d1..00000000 --- a/packages/ui/components/RedirectUriInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RedirectUriInput { - props { - label = "RedirectUri" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ReferenceInput.wrn b/packages/ui/components/ReferenceInput.wrn deleted file mode 100644 index cacd74f0..00000000 --- a/packages/ui/components/ReferenceInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ReferenceInput { - props { - label = "Reference" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RegexInput.wrn b/packages/ui/components/RegexInput.wrn deleted file mode 100644 index c378e3b3..00000000 --- a/packages/ui/components/RegexInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RegexInput { - props { - label = "Regex" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RegionAvailabilityTable.wrn b/packages/ui/components/RegionAvailabilityTable.wrn deleted file mode 100644 index 5064fb24..00000000 --- a/packages/ui/components/RegionAvailabilityTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RegionAvailabilityTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/RegionSelector.wrn b/packages/ui/components/RegionSelector.wrn deleted file mode 100644 index 8612f1ad..00000000 --- a/packages/ui/components/RegionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RegionSelector { - props { - label = "Region" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RegionUnavailableAlert.wrn b/packages/ui/components/RegionUnavailableAlert.wrn deleted file mode 100644 index 0c87af5f..00000000 --- a/packages/ui/components/RegionUnavailableAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RegionUnavailableAlert { - props { - label = "RegionUnavailable" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/RegionUnavailableState.wrn b/packages/ui/components/RegionUnavailableState.wrn deleted file mode 100644 index 300c0c1f..00000000 --- a/packages/ui/components/RegionUnavailableState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RegionUnavailableState { - props { - label = "RegionUnavailable" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/RegionalPrivacyBanner.wrn b/packages/ui/components/RegionalPrivacyBanner.wrn deleted file mode 100644 index f5c732fd..00000000 --- a/packages/ui/components/RegionalPrivacyBanner.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RegionalPrivacyBanner { - props { - label = "RegionalPrivacy" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/RejectOptionalCookiesButton.wrn b/packages/ui/components/RejectOptionalCookiesButton.wrn deleted file mode 100644 index 78e29b4e..00000000 --- a/packages/ui/components/RejectOptionalCookiesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RejectOptionalCookiesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ReopenCookieSettingsButton.wrn b/packages/ui/components/ReopenCookieSettingsButton.wrn deleted file mode 100644 index 8a9959ad..00000000 --- a/packages/ui/components/ReopenCookieSettingsButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ReopenCookieSettingsButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ReportCard.wrn b/packages/ui/components/ReportCard.wrn deleted file mode 100644 index 84721dc0..00000000 --- a/packages/ui/components/ReportCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ReportCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/RequestResponseViewer.wrn b/packages/ui/components/RequestResponseViewer.wrn deleted file mode 100644 index 06383d12..00000000 --- a/packages/ui/components/RequestResponseViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RequestResponseViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/RequestViewer.wrn b/packages/ui/components/RequestViewer.wrn deleted file mode 100644 index 32531ac7..00000000 --- a/packages/ui/components/RequestViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component RequestViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/RequiredIndicator.wrn b/packages/ui/components/RequiredIndicator.wrn deleted file mode 100644 index c1d9ef32..00000000 --- a/packages/ui/components/RequiredIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RequiredIndicator { - props { - label = "Required" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ResetPasswordForm.wrn b/packages/ui/components/ResetPasswordForm.wrn deleted file mode 100644 index a2bcaccc..00000000 --- a/packages/ui/components/ResetPasswordForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResetPasswordForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ResizablePanel.wrn b/packages/ui/components/ResizablePanel.wrn deleted file mode 100644 index c017f8e1..00000000 --- a/packages/ui/components/ResizablePanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResizablePanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ResourceCard.wrn b/packages/ui/components/ResourceCard.wrn deleted file mode 100644 index 1b9de0fb..00000000 --- a/packages/ui/components/ResourceCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResourceCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ResourceDownloadCard.wrn b/packages/ui/components/ResourceDownloadCard.wrn deleted file mode 100644 index 4cf3bf02..00000000 --- a/packages/ui/components/ResourceDownloadCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResourceDownloadCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ResourcePageShell.wrn b/packages/ui/components/ResourcePageShell.wrn deleted file mode 100644 index 74efa28b..00000000 --- a/packages/ui/components/ResourcePageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResourcePageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ResourceSearch.wrn b/packages/ui/components/ResourceSearch.wrn deleted file mode 100644 index 2277b9da..00000000 --- a/packages/ui/components/ResourceSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResourceSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ResourceTypeBadge.wrn b/packages/ui/components/ResourceTypeBadge.wrn deleted file mode 100644 index d1444b18..00000000 --- a/packages/ui/components/ResourceTypeBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ResourceTypeBadge { - props { - label = "ResourceType" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ResourcesMegaMenu.wrn b/packages/ui/components/ResourcesMegaMenu.wrn deleted file mode 100644 index e5b32038..00000000 --- a/packages/ui/components/ResourcesMegaMenu.wrn +++ /dev/null @@ -1,365 +0,0 @@ -component ResourcesMegaMenu { - props { - class: string = "" - } - view { -
    -
    -
    - - -
    -
    -
    -

    - Resources -

    - -

    - Learn, build, and get support -

    - -

    - Explore practical guides, customer stories, product updates, - and security resources. -

    -
    - - -
    - -
    - - - - - - - - - - - Blog - - - - - - - Product updates, engineering insights, identity trends, and - company news. - - - - - - - - - - - - - - Customer stories - - - - - - - See how teams use WrNexus to secure and scale their - applications. - - - - - - - - - - - - - - Guides - - - - - - - Practical identity, security, SaaS, and architecture - walkthroughs. - - - - - - - - - - - - - - Help center - - - - - - - Find answers for account, workspace, billing, and security - questions. - - - - - - - - - - - - - - Security - - - - - - - Learn how WrNexus protects accounts, sessions, and - organizations. - - - - - - - - - - - - - - Trust center - - - - - - - Review compliance, privacy, infrastructure, and operational - controls. - - - -
    - - - View all resources - - - -
    - - - -
    - - -
    -
    - - - - Webinars - - - - - - Events - - - - - - Reports - - - - - - Newsletter - -
    - - - Contact our team - - - -
    -
    -
    - } -} diff --git a/packages/ui/components/ResponseViewer.wrn b/packages/ui/components/ResponseViewer.wrn deleted file mode 100644 index 30a92d7c..00000000 --- a/packages/ui/components/ResponseViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ResponseViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ResponsibleDisclosureCTA.wrn b/packages/ui/components/ResponsibleDisclosureCTA.wrn deleted file mode 100644 index 0b823cb2..00000000 --- a/packages/ui/components/ResponsibleDisclosureCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ResponsibleDisclosureCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ResponsiveTable.wrn b/packages/ui/components/ResponsiveTable.wrn deleted file mode 100644 index 31c07a09..00000000 --- a/packages/ui/components/ResponsiveTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResponsiveTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ResultsSection.wrn b/packages/ui/components/ResultsSection.wrn deleted file mode 100644 index 15edae6d..00000000 --- a/packages/ui/components/ResultsSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ResultsSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/RetentionTable.wrn b/packages/ui/components/RetentionTable.wrn deleted file mode 100644 index 43accd7f..00000000 --- a/packages/ui/components/RetentionTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component RetentionTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/RetryCountInput.wrn b/packages/ui/components/RetryCountInput.wrn deleted file mode 100644 index 963d1e61..00000000 --- a/packages/ui/components/RetryCountInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RetryCountInput { - props { - label = "RetryCount" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RevenueChart.wrn b/packages/ui/components/RevenueChart.wrn deleted file mode 100644 index 5e3890b9..00000000 --- a/packages/ui/components/RevenueChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component RevenueChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/RgbColorInput.wrn b/packages/ui/components/RgbColorInput.wrn deleted file mode 100644 index e71d5341..00000000 --- a/packages/ui/components/RgbColorInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RgbColorInput { - props { - label = "RgbColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RichTextEditor.wrn b/packages/ui/components/RichTextEditor.wrn deleted file mode 100644 index d90f189b..00000000 --- a/packages/ui/components/RichTextEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RichTextEditor { - props { - label = "RichText" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RichTextInput.wrn b/packages/ui/components/RichTextInput.wrn deleted file mode 100644 index 809a85d0..00000000 --- a/packages/ui/components/RichTextInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RichTextInput { - props { - label = "RichText" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RoleSelector.wrn b/packages/ui/components/RoleSelector.wrn deleted file mode 100644 index 0f1afa13..00000000 --- a/packages/ui/components/RoleSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RoleSelector { - props { - label = "Role" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/RollingDateRangePicker.wrn b/packages/ui/components/RollingDateRangePicker.wrn deleted file mode 100644 index a760949c..00000000 --- a/packages/ui/components/RollingDateRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component RollingDateRangePicker { - props { - label = "RollingDateRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SDKCard.wrn b/packages/ui/components/SDKCard.wrn deleted file mode 100644 index 215e3103..00000000 --- a/packages/ui/components/SDKCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SDKCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SDKLanguageTabs.wrn b/packages/ui/components/SDKLanguageTabs.wrn deleted file mode 100644 index f95d40b2..00000000 --- a/packages/ui/components/SDKLanguageTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SDKLanguageTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SDKTabs.wrn b/packages/ui/components/SDKTabs.wrn deleted file mode 100644 index 7e8af688..00000000 --- a/packages/ui/components/SDKTabs.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SDKTabs { - props { - label = "SDK languages" - tabs = [] - defaultIndex = 0 - class = "" - } - state active = defaultIndex - view {
    {#each tabs as tab, index}{/each}
    {#each tabs as tab, index}
    {tab.code}
    {/each}
    } -} diff --git a/packages/ui/components/SaveCookiePreferencesButton.wrn b/packages/ui/components/SaveCookiePreferencesButton.wrn deleted file mode 100644 index b38f2961..00000000 --- a/packages/ui/components/SaveCookiePreferencesButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SaveCookiePreferencesButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/SavedFilterSelector.wrn b/packages/ui/components/SavedFilterSelector.wrn deleted file mode 100644 index 0c809640..00000000 --- a/packages/ui/components/SavedFilterSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SavedFilterSelector { - props { - label = "SavedFilter" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ScheduleMessagePicker.wrn b/packages/ui/components/ScheduleMessagePicker.wrn deleted file mode 100644 index 2b7d2243..00000000 --- a/packages/ui/components/ScheduleMessagePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ScheduleMessagePicker { - props { - label = "ScheduleMessage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SchedulePicker.wrn b/packages/ui/components/SchedulePicker.wrn deleted file mode 100644 index 51ea45d6..00000000 --- a/packages/ui/components/SchedulePicker.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component SchedulePicker { - props { - class = "" - label = "Schedule" - } - view { -
    {label}
    - } -} diff --git a/packages/ui/components/ScheduledDateTimePicker.wrn b/packages/ui/components/ScheduledDateTimePicker.wrn deleted file mode 100644 index 8c472235..00000000 --- a/packages/ui/components/ScheduledDateTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ScheduledDateTimePicker { - props { - label = "ScheduledDateTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ScreenshotFrame.wrn b/packages/ui/components/ScreenshotFrame.wrn deleted file mode 100644 index d5db0b14..00000000 --- a/packages/ui/components/ScreenshotFrame.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ScreenshotFrame { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/ScrollArea.wrn b/packages/ui/components/ScrollArea.wrn deleted file mode 100644 index 5c5f0ce6..00000000 --- a/packages/ui/components/ScrollArea.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component ScrollArea { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/Scrollspy.wrn b/packages/ui/components/Scrollspy.wrn new file mode 100644 index 00000000..cbde5bae --- /dev/null +++ b/packages/ui/components/Scrollspy.wrn @@ -0,0 +1,17 @@ +component Scrollspy { + props { + size = "default" + color = "primary" + label = "Scrollspy" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/packages/ui/components/SdkLanguageSelector.wrn b/packages/ui/components/SdkLanguageSelector.wrn deleted file mode 100644 index 1d02e63c..00000000 --- a/packages/ui/components/SdkLanguageSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SdkLanguageSelector { - props { - label = "SdkLanguage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SearchBox.wrn b/packages/ui/components/SearchBox.wrn new file mode 100644 index 00000000..e319a93a --- /dev/null +++ b/packages/ui/components/SearchBox.wrn @@ -0,0 +1,20 @@ +component SearchBox { + props { + size = "default" + color = "primary" + label = "Search Box" + name = "" + value = "" + placeholder = "" + type = "search" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/packages/ui/components/SearchButton.wrn b/packages/ui/components/SearchButton.wrn deleted file mode 100644 index 36a45fec..00000000 --- a/packages/ui/components/SearchButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SearchButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/SearchCategoryTabs.wrn b/packages/ui/components/SearchCategoryTabs.wrn deleted file mode 100644 index 25c4abc5..00000000 --- a/packages/ui/components/SearchCategoryTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SearchCategoryTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SearchDialog.wrn b/packages/ui/components/SearchDialog.wrn deleted file mode 100644 index 15bbb874..00000000 --- a/packages/ui/components/SearchDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SearchDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/SearchEmptyState.wrn b/packages/ui/components/SearchEmptyState.wrn deleted file mode 100644 index ebe7c1ba..00000000 --- a/packages/ui/components/SearchEmptyState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SearchEmptyState { - props { - label = "SearchEmpty" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/SearchInput.wrn b/packages/ui/components/SearchInput.wrn deleted file mode 100644 index 4fcf2dcc..00000000 --- a/packages/ui/components/SearchInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component SearchInput { - props { - class = "" - id = "" - name = "" - label = "Search" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/SearchLoadingState.wrn b/packages/ui/components/SearchLoadingState.wrn deleted file mode 100644 index 8e7d98c4..00000000 --- a/packages/ui/components/SearchLoadingState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SearchLoadingState { - props { - label = "SearchLoading" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/SearchResultItem.wrn b/packages/ui/components/SearchResultItem.wrn deleted file mode 100644 index 443b72c4..00000000 --- a/packages/ui/components/SearchResultItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SearchResultItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SecondPicker.wrn b/packages/ui/components/SecondPicker.wrn deleted file mode 100644 index 93308a8a..00000000 --- a/packages/ui/components/SecondPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SecondPicker { - props { - label = "Second" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SecondaryButton.wrn b/packages/ui/components/SecondaryButton.wrn deleted file mode 100644 index 10d52d85..00000000 --- a/packages/ui/components/SecondaryButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component SecondaryButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/SecretDisplay.wrn b/packages/ui/components/SecretDisplay.wrn deleted file mode 100644 index 0195d982..00000000 --- a/packages/ui/components/SecretDisplay.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecretDisplay { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SecretInput.wrn b/packages/ui/components/SecretInput.wrn deleted file mode 100644 index 25564ab3..00000000 --- a/packages/ui/components/SecretInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SecretInput { - props { - label = "Secret" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SecretRevealDialog.wrn b/packages/ui/components/SecretRevealDialog.wrn deleted file mode 100644 index 38c88ce0..00000000 --- a/packages/ui/components/SecretRevealDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecretRevealDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/Section.wrn b/packages/ui/components/Section.wrn deleted file mode 100644 index 81cf8331..00000000 --- a/packages/ui/components/Section.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component Section { - props { - id = "" - size = "default" - surface = "default" - className = "" - } - view { -
    - } -} diff --git a/packages/ui/components/SectionActions.wrn b/packages/ui/components/SectionActions.wrn deleted file mode 100644 index 3e9e1c65..00000000 --- a/packages/ui/components/SectionActions.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SectionActions { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { - {#if href}{label}{:else}{/if} - } -} diff --git a/packages/ui/components/SectionHeader.wrn b/packages/ui/components/SectionHeader.wrn deleted file mode 100644 index 030df5e3..00000000 --- a/packages/ui/components/SectionHeader.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component SectionHeader { - props { - class = "" - eyebrow = "" - title = "Section title" - description = "" - align = "left" - } - view { -

    {eyebrow}

    {title}

    {description}

    - } -} diff --git a/packages/ui/components/SectionHeading.wrn b/packages/ui/components/SectionHeading.wrn deleted file mode 100644 index bb0466ab..00000000 --- a/packages/ui/components/SectionHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component SectionHeading { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/SecurityAlert.wrn b/packages/ui/components/SecurityAlert.wrn deleted file mode 100644 index 09254f5b..00000000 --- a/packages/ui/components/SecurityAlert.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SecurityAlert { - props { - label = "Security" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/SecurityContactCard.wrn b/packages/ui/components/SecurityContactCard.wrn deleted file mode 100644 index 59b4c5b4..00000000 --- a/packages/ui/components/SecurityContactCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecurityContactCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SecurityFeatureCard.wrn b/packages/ui/components/SecurityFeatureCard.wrn deleted file mode 100644 index 1c83a8df..00000000 --- a/packages/ui/components/SecurityFeatureCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecurityFeatureCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SecurityHero.wrn b/packages/ui/components/SecurityHero.wrn deleted file mode 100644 index 8d15334a..00000000 --- a/packages/ui/components/SecurityHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecurityHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/SecurityPillarGrid.wrn b/packages/ui/components/SecurityPillarGrid.wrn deleted file mode 100644 index 72fd8159..00000000 --- a/packages/ui/components/SecurityPillarGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecurityPillarGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/SecurityPracticeList.wrn b/packages/ui/components/SecurityPracticeList.wrn deleted file mode 100644 index 733bee29..00000000 --- a/packages/ui/components/SecurityPracticeList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SecurityPracticeList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/SecurityReportForm.wrn b/packages/ui/components/SecurityReportForm.wrn deleted file mode 100644 index b94dbd1a..00000000 --- a/packages/ui/components/SecurityReportForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SecurityReportForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SegmentedButtonGroup.wrn b/packages/ui/components/SegmentedButtonGroup.wrn deleted file mode 100644 index 65cdbc6b..00000000 --- a/packages/ui/components/SegmentedButtonGroup.wrn +++ /dev/null @@ -1,44 +0,0 @@ -component SegmentedButtonGroup { - props { - label = "Options" - items = [] - active = "" - size = "md" - fullWidth = false - class = "" - } - - state current = active - - view { -
    - {#each items as item, index} - - {:empty} - No options available - {/each} -
    - } -} diff --git a/packages/ui/components/SenderIdInput.wrn b/packages/ui/components/SenderIdInput.wrn deleted file mode 100644 index adc69c57..00000000 --- a/packages/ui/components/SenderIdInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SenderIdInput { - props { - label = "SenderId" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ServerErrorPage.wrn b/packages/ui/components/ServerErrorPage.wrn deleted file mode 100644 index b83167dc..00000000 --- a/packages/ui/components/ServerErrorPage.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ServerErrorPage { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ServiceLevelTable.wrn b/packages/ui/components/ServiceLevelTable.wrn deleted file mode 100644 index 4f996a95..00000000 --- a/packages/ui/components/ServiceLevelTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ServiceLevelTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ServiceStatusBadge.wrn b/packages/ui/components/ServiceStatusBadge.wrn deleted file mode 100644 index c4ae243e..00000000 --- a/packages/ui/components/ServiceStatusBadge.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ServiceStatusBadge { - props { - label = "ServiceStatus" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ServiceStatusList.wrn b/packages/ui/components/ServiceStatusList.wrn deleted file mode 100644 index 9eb73f53..00000000 --- a/packages/ui/components/ServiceStatusList.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ServiceStatusList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/ServiceStatusRow.wrn b/packages/ui/components/ServiceStatusRow.wrn deleted file mode 100644 index debc8b69..00000000 --- a/packages/ui/components/ServiceStatusRow.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ServiceStatusRow { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/SessionCard.wrn b/packages/ui/components/SessionCard.wrn deleted file mode 100644 index 6853a7f2..00000000 --- a/packages/ui/components/SessionCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SessionCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SessionExpiredDialog.wrn b/packages/ui/components/SessionExpiredDialog.wrn deleted file mode 100644 index f3c3358c..00000000 --- a/packages/ui/components/SessionExpiredDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SessionExpiredDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/SetupChecklist.wrn b/packages/ui/components/SetupChecklist.wrn deleted file mode 100644 index 56336e91..00000000 --- a/packages/ui/components/SetupChecklist.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SetupChecklist { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SeveritySelector.wrn b/packages/ui/components/SeveritySelector.wrn deleted file mode 100644 index 140be8ce..00000000 --- a/packages/ui/components/SeveritySelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SeveritySelector { - props { - label = "Severity" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ShadowPicker.wrn b/packages/ui/components/ShadowPicker.wrn deleted file mode 100644 index baa57205..00000000 --- a/packages/ui/components/ShadowPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ShadowPicker { - props { - label = "Shadow" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ShareAction.wrn b/packages/ui/components/ShareAction.wrn deleted file mode 100644 index a15c143b..00000000 --- a/packages/ui/components/ShareAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ShareAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ShareButton.wrn b/packages/ui/components/ShareButton.wrn deleted file mode 100644 index fcab2456..00000000 --- a/packages/ui/components/ShareButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component ShareButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/SidePanel.wrn b/packages/ui/components/SidePanel.wrn deleted file mode 100644 index 202caf90..00000000 --- a/packages/ui/components/SidePanel.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SidePanel { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/Sidebar.wrn b/packages/ui/components/Sidebar.wrn new file mode 100644 index 00000000..150b8395 --- /dev/null +++ b/packages/ui/components/Sidebar.wrn @@ -0,0 +1,17 @@ +component Sidebar { + props { + size = "default" + color = "primary" + label = "Sidebar" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} diff --git a/packages/ui/components/SidebarLayout.wrn b/packages/ui/components/SidebarLayout.wrn deleted file mode 100644 index 82d8b428..00000000 --- a/packages/ui/components/SidebarLayout.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component SidebarLayout { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/SignInForm.wrn b/packages/ui/components/SignInForm.wrn deleted file mode 100644 index 86c32145..00000000 --- a/packages/ui/components/SignInForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SignInForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SignInLink.wrn b/packages/ui/components/SignInLink.wrn deleted file mode 100644 index 343af26d..00000000 --- a/packages/ui/components/SignInLink.wrn +++ /dev/null @@ -1,30 +0,0 @@ -component SignInLink { - props { - label = "Sign in with password" - description = "Use your username or email and password" - href = "" - type = "button" - variant = "secondary" - disabled = false - icon = "icon-[lucide--lock-keyhole]" - tone = "password" - class = "" - } - view { - - {#if href} - - {#if tone == "account"}{:else}{/if} - {label}{#if description}{description}{/if} - - - {:else} - - {/if} - - } -} diff --git a/packages/ui/components/SignUpForm.wrn b/packages/ui/components/SignUpForm.wrn deleted file mode 100644 index 8d0f8c3b..00000000 --- a/packages/ui/components/SignUpForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SignUpForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SiteSearch.wrn b/packages/ui/components/SiteSearch.wrn deleted file mode 100644 index 108cc320..00000000 --- a/packages/ui/components/SiteSearch.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SiteSearch { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SkipLink.wrn b/packages/ui/components/SkipLink.wrn deleted file mode 100644 index ec7e55eb..00000000 --- a/packages/ui/components/SkipLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SkipLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/SlaTable.wrn b/packages/ui/components/SlaTable.wrn deleted file mode 100644 index 2c963e9c..00000000 --- a/packages/ui/components/SlaTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SlaTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/Slider.wrn b/packages/ui/components/Slider.wrn deleted file mode 100644 index da39f7ff..00000000 --- a/packages/ui/components/Slider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Slider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SlugInput.wrn b/packages/ui/components/SlugInput.wrn deleted file mode 100644 index 641b6769..00000000 --- a/packages/ui/components/SlugInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SlugInput { - props { - label = "Slug" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SmallText.wrn b/packages/ui/components/SmallText.wrn deleted file mode 100644 index 615ea928..00000000 --- a/packages/ui/components/SmallText.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component SmallText { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/SmartRouteDiagram.wrn b/packages/ui/components/SmartRouteDiagram.wrn deleted file mode 100644 index 3401b7f3..00000000 --- a/packages/ui/components/SmartRouteDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SmartRouteDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {#if title}{title}{/if}{#if value}{value}{/if}{#if description}{description}{/if}
    {#if loading}
    {:else}
    {/if}{#if summary}

    {summary}

    {/if}
    } -} diff --git a/packages/ui/components/SmsComposer.wrn b/packages/ui/components/SmsComposer.wrn deleted file mode 100644 index 72965025..00000000 --- a/packages/ui/components/SmsComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SmsComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/SmsMessageEditor.wrn b/packages/ui/components/SmsMessageEditor.wrn deleted file mode 100644 index 383c1cde..00000000 --- a/packages/ui/components/SmsMessageEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SmsMessageEditor { - props { - label = "SmsMessage" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SmsSegmentCounter.wrn b/packages/ui/components/SmsSegmentCounter.wrn deleted file mode 100644 index 67cff100..00000000 --- a/packages/ui/components/SmsSegmentCounter.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SmsSegmentCounter { - props { - label = "SmsSegment" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/SocialShare.wrn b/packages/ui/components/SocialShare.wrn deleted file mode 100644 index b0420ef5..00000000 --- a/packages/ui/components/SocialShare.wrn +++ /dev/null @@ -1,143 +0,0 @@ -component SocialShare { - props { - class: string = "" - title = "Share this page" - description = "" - - url = "" - shareText = "" - - centered = false - compact = false - showTitle = true - showCopy = true - - networks = [] - } - - state copied = false - - view { - - } -} diff --git a/packages/ui/components/SolutionHero.wrn b/packages/ui/components/SolutionHero.wrn deleted file mode 100644 index 2929f126..00000000 --- a/packages/ui/components/SolutionHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SolutionHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/SolutionPageShell.wrn b/packages/ui/components/SolutionPageShell.wrn deleted file mode 100644 index 77c761f3..00000000 --- a/packages/ui/components/SolutionPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SolutionPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/SolutionSection.wrn b/packages/ui/components/SolutionSection.wrn deleted file mode 100644 index 197b10d5..00000000 --- a/packages/ui/components/SolutionSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SolutionSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/SolutionsMegaMenu.wrn b/packages/ui/components/SolutionsMegaMenu.wrn deleted file mode 100644 index 48a1c6f3..00000000 --- a/packages/ui/components/SolutionsMegaMenu.wrn +++ /dev/null @@ -1,368 +0,0 @@ -component SolutionsMegaMenu { - props { - class: string = "" - } - view { -
    -
    -
    - - -
    -
    -
    -

    - Solutions -

    - -

    - Identity infrastructure for every stage of growth -

    - -

    - Choose a solution designed around your product, team, and customers. -

    -
    - - -
    - -
    - - - - - - - - - - - Startups - - - - - - - Launch secure authentication quickly without slowing product development. - - - - - - - - - - - - - - SaaS platforms - - - - - - - Add users, organizations, roles, SSO, and secure account recovery. - - - - - - - - - - - - - - Enterprise - - - - - - - Support complex organizations, governance, auditability, and scale. - - - - - - - - - - - - - - Developers - - - - - - - APIs, SDKs, webhooks, templates, and developer-friendly workflows. - - - - - - - - - - - - - - Agencies - - - - - - - Manage identities across customer projects and branded experiences. - - - - - - - - - - - - - - B2B products - - - - - - - Secure customer organizations, team access, and enterprise connections. - - - -
    - - - View all solutions - - - -
    - - - -
    - - -
    -
    - - - - Customer identity - - - - - - Workforce identity - - - - - - Marketplaces - - - - - - Multi-tenant apps - -
    - - - See customer stories - - - -
    -
    -
    - } -} diff --git a/packages/ui/components/SortableTable.wrn b/packages/ui/components/SortableTable.wrn deleted file mode 100644 index 9a71a3da..00000000 --- a/packages/ui/components/SortableTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SortableTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/SplitButton.wrn b/packages/ui/components/SplitButton.wrn deleted file mode 100644 index a64a924d..00000000 --- a/packages/ui/components/SplitButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SplitButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/SplitCTA.wrn b/packages/ui/components/SplitCTA.wrn deleted file mode 100644 index 72f2c2cc..00000000 --- a/packages/ui/components/SplitCTA.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SplitCTA { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/SplitHero.wrn b/packages/ui/components/SplitHero.wrn deleted file mode 100644 index 03647264..00000000 --- a/packages/ui/components/SplitHero.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SplitHero { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/SplitLayout.wrn b/packages/ui/components/SplitLayout.wrn deleted file mode 100644 index 05062fdd..00000000 --- a/packages/ui/components/SplitLayout.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component SplitLayout { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/SplitSectionHeader.wrn b/packages/ui/components/SplitSectionHeader.wrn deleted file mode 100644 index 5306fec8..00000000 --- a/packages/ui/components/SplitSectionHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SplitSectionHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/StartFreeButton.wrn b/packages/ui/components/StartFreeButton.wrn deleted file mode 100644 index 2004690c..00000000 --- a/packages/ui/components/StartFreeButton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component StartFreeButton { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/StatCard.wrn b/packages/ui/components/StatCard.wrn deleted file mode 100644 index 29f07204..00000000 --- a/packages/ui/components/StatCard.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component StatCard { - props { - class = "" - label = "Metric" - value = "0" - change = "" - trend = "neutral" - } - view { -

    {label}

    {value}

    {trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}
    - } -} diff --git a/packages/ui/components/StateSelector.wrn b/packages/ui/components/StateSelector.wrn deleted file mode 100644 index d1ca9db9..00000000 --- a/packages/ui/components/StateSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StateSelector { - props { - label = "State" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/StatusBadge.wrn b/packages/ui/components/StatusBadge.wrn deleted file mode 100644 index b4c2bf8c..00000000 --- a/packages/ui/components/StatusBadge.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component StatusBadge { - props { - class = "" - status = "operational" - } - view { - {status} - } -} diff --git a/packages/ui/components/StatusBanner.wrn b/packages/ui/components/StatusBanner.wrn deleted file mode 100644 index 83c8f0f7..00000000 --- a/packages/ui/components/StatusBanner.wrn +++ /dev/null @@ -1,122 +0,0 @@ -component StatusBanner { - props { - class: string = "" - type = "info" - - title = "" - description = "" - - actionLabel = "" - actionHref = "" - - dismissible = true - compact = false - - details = [] - } - - state visible = true - - view { - - } -} diff --git a/packages/ui/components/StatusPageShell.wrn b/packages/ui/components/StatusPageShell.wrn deleted file mode 100644 index 525cddb0..00000000 --- a/packages/ui/components/StatusPageShell.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StatusPageShell { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/StatusSelector.wrn b/packages/ui/components/StatusSelector.wrn deleted file mode 100644 index 090f482a..00000000 --- a/packages/ui/components/StatusSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StatusSelector { - props { - label = "Status" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/StatusSubscribeForm.wrn b/packages/ui/components/StatusSubscribeForm.wrn deleted file mode 100644 index 8720f0b3..00000000 --- a/packages/ui/components/StatusSubscribeForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component StatusSubscribeForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/StatusTable.wrn b/packages/ui/components/StatusTable.wrn deleted file mode 100644 index a18e80d4..00000000 --- a/packages/ui/components/StatusTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StatusTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/StepNavigation.wrn b/packages/ui/components/StepNavigation.wrn deleted file mode 100644 index 327b9b79..00000000 --- a/packages/ui/components/StepNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StepNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/StepUpAuthenticationDialog.wrn b/packages/ui/components/StepUpAuthenticationDialog.wrn deleted file mode 100644 index 42fc746e..00000000 --- a/packages/ui/components/StepUpAuthenticationDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component StepUpAuthenticationDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/Stepper.wrn b/packages/ui/components/Stepper.wrn index 2f74d729..d279d4ae 100644 --- a/packages/ui/components/Stepper.wrn +++ b/packages/ui/components/Stepper.wrn @@ -1,13 +1,17 @@ component Stepper { props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" + size = "default" + color = "primary" + label = "Stepper" + items = [] + active = "" + orientation = "horizontal" class = "" } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } + view { + + } } diff --git a/packages/ui/components/StepperInput.wrn b/packages/ui/components/StepperInput.wrn deleted file mode 100644 index e7a8af04..00000000 --- a/packages/ui/components/StepperInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StepperInput { - props { - label = "Stepper" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/StickerPicker.wrn b/packages/ui/components/StickerPicker.wrn deleted file mode 100644 index 483898bd..00000000 --- a/packages/ui/components/StickerPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StickerPicker { - props { - label = "Sticker" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Sticky.wrn b/packages/ui/components/Sticky.wrn deleted file mode 100644 index 729e53e1..00000000 --- a/packages/ui/components/Sticky.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Sticky { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/StickyLayout.wrn b/packages/ui/components/StickyLayout.wrn deleted file mode 100644 index 9e30e02e..00000000 --- a/packages/ui/components/StickyLayout.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component StickyLayout { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/StreetAddressInput.wrn b/packages/ui/components/StreetAddressInput.wrn deleted file mode 100644 index a1c7b144..00000000 --- a/packages/ui/components/StreetAddressInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component StreetAddressInput { - props { - label = "StreetAddress" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/StrongPassword.wrn b/packages/ui/components/StrongPassword.wrn new file mode 100644 index 00000000..d8f3137d --- /dev/null +++ b/packages/ui/components/StrongPassword.wrn @@ -0,0 +1,215 @@ +component StrongPassword { + props { + size = "default" + color = "primary" + label = "Password" + name = "password" + value = "" + placeholder = "Create a strong password" + autocomplete = "new-password" + minLength = 8 + specialCharactersSet = "!@#$%^&*()_+-=[]{}|;:,.<>?" + requireLowercase = true + requireUppercase = true + requireNumber = true + requireSpecialCharacter = true + showRequirements = true + presentation = "inline" + hintText = "Use a unique password you do not use elsewhere." + emptyLabel = "Enter a password" + weakLabel = "Weak" + fairLabel = "Fair" + goodLabel = "Good" + strongLabel = "Strong" + disabled = false + readonly = false + required = false + invalid = false + validationMessage = "" + class = "" + @event input = function + @event change = function + @event strength = function + } + + state password = value + state detailsOpen = false + + functions { + function hasMinimumLength() { + return password.length >= Number(minLength) + } + + function hasLowercase() { + return password !== password.toUpperCase() + } + + function hasUppercase() { + return password !== password.toLowerCase() + } + + function hasNumber() { + return containsCharacterAt("0123456789", 0) + } + + function hasSpecialCharacter() { + return containsCharacterAt(specialCharactersSet, 0) + } + + function containsCharacterAt(characters, index) { + if (index >= characters.length) { + return false + } + if (password.includes(characters[index])) { + return true + } + return containsCharacterAt(characters, index + 1) + } + + function score() { + return (hasMinimumLength() ? 1 : 0) + (requireLowercase && hasLowercase() ? 1 : 0) + (requireUppercase && hasUppercase() ? 1 : 0) + (requireNumber && hasNumber() ? 1 : 0) + (requireSpecialCharacter && hasSpecialCharacter() ? 1 : 0) + } + + function maximumScore() { + return 1 + (requireLowercase ? 1 : 0) + (requireUppercase ? 1 : 0) + (requireNumber ? 1 : 0) + (requireSpecialCharacter ? 1 : 0) + } + + function strengthPercent() { + return Math.round(score() / maximumScore() * 100) + } + + function strengthLevel() { + if (!password) { + return "empty" + } + if (strengthPercent() <= 25) { + return "weak" + } + if (strengthPercent() <= 50) { + return "fair" + } + if (strengthPercent() < 100) { + return "good" + } + return "strong" + } + + function strengthLabel() { + if (strengthLevel() === "weak") { + return weakLabel + } + if (strengthLevel() === "fair") { + return fairLabel + } + if (strengthLevel() === "good") { + return goodLabel + } + if (strengthLevel() === "strong") { + return strongLabel + } + return emptyLabel + } + + } + + view { +
    + +
    + + + {#if presentation === "popover"} +
    + +
    +
    + Password strength + {password ? strengthLabel() : emptyLabel} +
    +
    + +
    + {#if showRequirements} +
      +
    • + At least {minLength} characters +
      • + {#if requireLowercase}
    • One lowercase letter
      • {/if} + {#if requireUppercase}
    • One uppercase letter
      • {/if} + {#if requireNumber}
    • One number
      • {/if} + {#if requireSpecialCharacter}
    • One special character: {specialCharactersSet}
      • {/if} +
    + {/if} + {#if hintText}{hintText}{/if} +
    +
    + {/if} +
    + + {#if presentation !== "popover"} +
    +
    + Password strength + {password ? strengthLabel() : emptyLabel} +
    +
    + +
    + {#if showRequirements} +
      +
    • At least {minLength} characters
      • + {#if requireLowercase}
    • One lowercase letter
      • {/if} + {#if requireUppercase}
    • One uppercase letter
      • {/if} + {#if requireNumber}
    • One number
      • {/if} + {#if requireSpecialCharacter}
    • One special character: {specialCharactersSet}
      • {/if} +
    + {/if} + {#if hintText}{hintText}{/if} +
    + {/if} + + {validationMessage} +
    + } +} diff --git a/packages/ui/components/StyledIcon.wrn b/packages/ui/components/StyledIcon.wrn new file mode 100644 index 00000000..a394af25 --- /dev/null +++ b/packages/ui/components/StyledIcon.wrn @@ -0,0 +1,19 @@ +component StyledIcon { + props { + size = "default" + color = "primary" + title = "Styled Icon" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/SubdomainInput.wrn b/packages/ui/components/SubdomainInput.wrn deleted file mode 100644 index dcf246a0..00000000 --- a/packages/ui/components/SubdomainInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SubdomainInput { - props { - label = "Subdomain" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SubjectInput.wrn b/packages/ui/components/SubjectInput.wrn deleted file mode 100644 index 2351844c..00000000 --- a/packages/ui/components/SubjectInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component SubjectInput { - props { - label = "Subject" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SubprocessorTable.wrn b/packages/ui/components/SubprocessorTable.wrn deleted file mode 100644 index 0cdd5ac1..00000000 --- a/packages/ui/components/SubprocessorTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component SubprocessorTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/SubsectionHeading.wrn b/packages/ui/components/SubsectionHeading.wrn deleted file mode 100644 index e8456826..00000000 --- a/packages/ui/components/SubsectionHeading.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component SubsectionHeading { - props { - text = "" - align = "start" - class = "" - } - view {
    {text}
    } -} diff --git a/packages/ui/components/SuccessCard.wrn b/packages/ui/components/SuccessCard.wrn deleted file mode 100644 index ed7b77cb..00000000 --- a/packages/ui/components/SuccessCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component SuccessCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/SuccessState.wrn b/packages/ui/components/SuccessState.wrn deleted file mode 100644 index cb589ade..00000000 --- a/packages/ui/components/SuccessState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component SuccessState { - props { - label = "Success" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/SupportRequestForm.wrn b/packages/ui/components/SupportRequestForm.wrn deleted file mode 100644 index 3cf42b46..00000000 --- a/packages/ui/components/SupportRequestForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component SupportRequestForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Surface.wrn b/packages/ui/components/Surface.wrn deleted file mode 100644 index c12e44ce..00000000 --- a/packages/ui/components/Surface.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Surface { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/TableHeader.wrn b/packages/ui/components/TableHeader.wrn deleted file mode 100644 index 70c03ade..00000000 --- a/packages/ui/components/TableHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TableHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/TableRow.wrn b/packages/ui/components/TableRow.wrn deleted file mode 100644 index e6aa2e89..00000000 --- a/packages/ui/components/TableRow.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TableRow { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/TableSkeleton.wrn b/packages/ui/components/TableSkeleton.wrn deleted file mode 100644 index 5e02a8db..00000000 --- a/packages/ui/components/TableSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TableSkeleton { - props { - label = "Table" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/Tabs.wrn b/packages/ui/components/Tabs.wrn index 3f207391..7bdfea2b 100644 --- a/packages/ui/components/Tabs.wrn +++ b/packages/ui/components/Tabs.wrn @@ -1,10 +1,17 @@ component Tabs { props { + size = "default" + color = "primary" + label = "Tabs" + items = [] + active = "" + orientation = "horizontal" class = "" - active = "first" } - state current = active view { -
    + } } diff --git a/packages/ui/components/TagInput.wrn b/packages/ui/components/TagInput.wrn deleted file mode 100644 index fafa831e..00000000 --- a/packages/ui/components/TagInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TagInput { - props { - label = "Tag" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TaxNotice.wrn b/packages/ui/components/TaxNotice.wrn deleted file mode 100644 index 8c143dc0..00000000 --- a/packages/ui/components/TaxNotice.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TaxNotice { - props { - label = "Tax" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/TaxRateInput.wrn b/packages/ui/components/TaxRateInput.wrn deleted file mode 100644 index 52e09314..00000000 --- a/packages/ui/components/TaxRateInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TaxRateInput { - props { - label = "TaxRate" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TeamMemberCard.wrn b/packages/ui/components/TeamMemberCard.wrn deleted file mode 100644 index e7d96db8..00000000 --- a/packages/ui/components/TeamMemberCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TeamMemberCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/TeamSizeSelector.wrn b/packages/ui/components/TeamSizeSelector.wrn deleted file mode 100644 index d9145185..00000000 --- a/packages/ui/components/TeamSizeSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TeamSizeSelector { - props { - label = "TeamSize" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TemplateCard.wrn b/packages/ui/components/TemplateCard.wrn deleted file mode 100644 index 1b39f3e1..00000000 --- a/packages/ui/components/TemplateCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component TemplateCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TemplateSelector.wrn b/packages/ui/components/TemplateSelector.wrn deleted file mode 100644 index 1c7ba07b..00000000 --- a/packages/ui/components/TemplateSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TemplateSelector { - props { - label = "Template" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TemplateVariableInput.wrn b/packages/ui/components/TemplateVariableInput.wrn deleted file mode 100644 index 81ced6f4..00000000 --- a/packages/ui/components/TemplateVariableInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TemplateVariableInput { - props { - label = "TemplateVariable" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TenantIsolationDiagram.wrn b/packages/ui/components/TenantIsolationDiagram.wrn deleted file mode 100644 index cc899cd1..00000000 --- a/packages/ui/components/TenantIsolationDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TenantIsolationDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/TerminalBlock.wrn b/packages/ui/components/TerminalBlock.wrn deleted file mode 100644 index 54043019..00000000 --- a/packages/ui/components/TerminalBlock.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TerminalBlock { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/TertiaryButton.wrn b/packages/ui/components/TertiaryButton.wrn deleted file mode 100644 index aa80c94b..00000000 --- a/packages/ui/components/TertiaryButton.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component TertiaryButton { - props { - label = "Action" - type = "button" - disabled = false - class = "" - } - view { } -} diff --git a/packages/ui/components/TestMessageDialog.wrn b/packages/ui/components/TestMessageDialog.wrn deleted file mode 100644 index 42a1ba51..00000000 --- a/packages/ui/components/TestMessageDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TestMessageDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/TestimonialCard.wrn b/packages/ui/components/TestimonialCard.wrn deleted file mode 100644 index 657e9b2f..00000000 --- a/packages/ui/components/TestimonialCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TestimonialCard { - props { - class = "" - quote = "Great product." - name = "Customer" - role = "" - company = "" - avatar = "" - } - view { -
    “{quote}”
    {name}
    {role} · {company}
    - } -} diff --git a/packages/ui/components/TestimonialCarousel.wrn b/packages/ui/components/TestimonialCarousel.wrn deleted file mode 100644 index 01bd0721..00000000 --- a/packages/ui/components/TestimonialCarousel.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TestimonialCarousel { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/TextInput.wrn b/packages/ui/components/TextInput.wrn deleted file mode 100644 index c585ae4c..00000000 --- a/packages/ui/components/TextInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component TextInput { - props { - class = "" - id = "" - name = "" - label = "Text" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/TextLink.wrn b/packages/ui/components/TextLink.wrn deleted file mode 100644 index 85bd38bd..00000000 --- a/packages/ui/components/TextLink.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TextLink { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/TextSkeleton.wrn b/packages/ui/components/TextSkeleton.wrn deleted file mode 100644 index becbcc06..00000000 --- a/packages/ui/components/TextSkeleton.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TextSkeleton { - props { - label = "Text" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/ThemeColorPicker.wrn b/packages/ui/components/ThemeColorPicker.wrn deleted file mode 100644 index 5ab4968b..00000000 --- a/packages/ui/components/ThemeColorPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ThemeColorPicker { - props { - label = "ThemeColor" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ThemeSwitcher.wrn b/packages/ui/components/ThemeSwitcher.wrn deleted file mode 100644 index 882397ce..00000000 --- a/packages/ui/components/ThemeSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ThemeSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/TimeInput.wrn b/packages/ui/components/TimeInput.wrn deleted file mode 100644 index 2f492c68..00000000 --- a/packages/ui/components/TimeInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component TimeInput { - props { - class = "" - id = "" - name = "" - label = "Time" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/TimePicker.wrn b/packages/ui/components/TimePicker.wrn index 56335ad6..79dc66a7 100644 --- a/packages/ui/components/TimePicker.wrn +++ b/packages/ui/components/TimePicker.wrn @@ -1,15 +1,20 @@ component TimePicker { props { - id = "time-picker" - name = "time" - label = "Time" + size = "default" + color = "primary" + label = "Time Picker" + name = "" value = "" + placeholder = "" + type = "time" min = "" max = "" - step = 60 - required = false + step = "" disabled = false + required = false class = "" } - view {
    } + view { + + } } diff --git a/packages/ui/components/TimeRangePicker.wrn b/packages/ui/components/TimeRangePicker.wrn deleted file mode 100644 index 560efe30..00000000 --- a/packages/ui/components/TimeRangePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TimeRangePicker { - props { - label = "TimeRange" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/Timeline.wrn b/packages/ui/components/Timeline.wrn index c3879653..e7db15c1 100644 --- a/packages/ui/components/Timeline.wrn +++ b/packages/ui/components/Timeline.wrn @@ -1,9 +1,19 @@ component Timeline { props { - class = "" + size = "default" + color = "primary" title = "Timeline" + description = "" + items = [] + variant = "default" + class = "" } view { -

    {title}

    +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/packages/ui/components/TimelineChart.wrn b/packages/ui/components/TimelineChart.wrn deleted file mode 100644 index 74749404..00000000 --- a/packages/ui/components/TimelineChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TimelineChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/TimelineItem.wrn b/packages/ui/components/TimelineItem.wrn deleted file mode 100644 index 760e7376..00000000 --- a/packages/ui/components/TimelineItem.wrn +++ /dev/null @@ -1,12 +0,0 @@ -component TimelineItem { - props { - class = "" - title = "Event" - date = "" - description = "" - status = "default" - } - view { -

  • {title}

    {description}

    • - } -} diff --git a/packages/ui/components/TimeoutInput.wrn b/packages/ui/components/TimeoutInput.wrn deleted file mode 100644 index 0b7649be..00000000 --- a/packages/ui/components/TimeoutInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TimeoutInput { - props { - label = "Timeout" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TimezoneAwareTimePicker.wrn b/packages/ui/components/TimezoneAwareTimePicker.wrn deleted file mode 100644 index 0f2bb20a..00000000 --- a/packages/ui/components/TimezoneAwareTimePicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TimezoneAwareTimePicker { - props { - label = "TimezoneAwareTime" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TimezoneSelector.wrn b/packages/ui/components/TimezoneSelector.wrn deleted file mode 100644 index 3d138c39..00000000 --- a/packages/ui/components/TimezoneSelector.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TimezoneSelector { - props { - class = "" - id = "timezone" - name = "timezone" - label = "Timezone" - } - view { - - } -} diff --git a/packages/ui/components/Toast.wrn b/packages/ui/components/Toast.wrn index dd9a4ce1..0b52e5bf 100644 --- a/packages/ui/components/Toast.wrn +++ b/packages/ui/components/Toast.wrn @@ -1,13 +1,19 @@ component Toast { props { - class = "" - title = "Saved" + size = "default" + color = "primary" + title = "Toast" description = "" - variant = "success" - duration = 5000 + items = [] + variant = "default" + class = "" } - state visible = true view { -
    {variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}

    {title}

    {description}

    +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/packages/ui/components/ToastAction.wrn b/packages/ui/components/ToastAction.wrn deleted file mode 100644 index 816fc95d..00000000 --- a/packages/ui/components/ToastAction.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ToastAction { - props { - label = "Action" - href = "" - type = "button" - variant = "primary" - disabled = false - class = "" - } - view { {#if href}{label}{:else}{/if} } -} diff --git a/packages/ui/components/ToastHost.wrn b/packages/ui/components/ToastHost.wrn deleted file mode 100644 index 36a516b5..00000000 --- a/packages/ui/components/ToastHost.wrn +++ /dev/null @@ -1,212 +0,0 @@ -component ToastHost { - props { - class: string = "" - } - state successOpen = false - state errorOpen = false - state warningOpen = false - state infoOpen = false - - state successTitle = "Changes saved" - state successMessage = "Your changes were saved successfully." - - state errorTitle = "Something went wrong" - state errorMessage = "We could not complete your request. Please try again." - - state warningTitle = "Action required" - state warningMessage = "Review the highlighted information before continuing." - - state infoTitle = "New update available" - state infoMessage = "A newer version of this feature is now available." - - view { -
    - -
    -
    - -
    - - - - -
    -

    - {successTitle} -

    - -

    - {successMessage} -

    -
    - - -
    - -
    -
    -
    -
    - - - - - -
    -
    - -
    - - - - -
    -

    - {warningTitle} -

    - -

    - {warningMessage} -

    -
    - - -
    - -
    -
    -
    -
    - - - -
    - } -} diff --git a/packages/ui/components/ToastIcon.wrn b/packages/ui/components/ToastIcon.wrn deleted file mode 100644 index a60a6800..00000000 --- a/packages/ui/components/ToastIcon.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ToastIcon { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ToastNotifications.wrn b/packages/ui/components/ToastNotifications.wrn new file mode 100644 index 00000000..f786700e --- /dev/null +++ b/packages/ui/components/ToastNotifications.wrn @@ -0,0 +1,19 @@ +component ToastNotifications { + props { + size = "default" + color = "primary" + title = "Toast Notifications" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/ToastProgress.wrn b/packages/ui/components/ToastProgress.wrn deleted file mode 100644 index 30055854..00000000 --- a/packages/ui/components/ToastProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component ToastProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/Toggle.wrn b/packages/ui/components/Toggle.wrn deleted file mode 100644 index 09b887ec..00000000 --- a/packages/ui/components/Toggle.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component Toggle { - props { - label = "" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ToggleCount.wrn b/packages/ui/components/ToggleCount.wrn new file mode 100644 index 00000000..7003bda2 --- /dev/null +++ b/packages/ui/components/ToggleCount.wrn @@ -0,0 +1,20 @@ +component ToggleCount { + props { + size = "default" + color = "primary" + label = "Toggle Count" + name = "" + value = "" + placeholder = "" + type = "text" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} diff --git a/packages/ui/components/ToggleGroup.wrn b/packages/ui/components/ToggleGroup.wrn deleted file mode 100644 index 54cf872b..00000000 --- a/packages/ui/components/ToggleGroup.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component ToggleGroup { - props { - label = "Toggle" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TogglePassword.wrn b/packages/ui/components/TogglePassword.wrn new file mode 100644 index 00000000..43eb9cc6 --- /dev/null +++ b/packages/ui/components/TogglePassword.wrn @@ -0,0 +1,153 @@ +component TogglePassword { + props { + size = "default" + color = "primary" + label = "Password" + name = "password" + value = "" + placeholder = "Enter your password" + autocomplete = "current-password" + minlength = "" + maxlength = "" + pattern = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" + fields = [] + visible = false + toggleable = true + toggleMode = "button" + checkboxLabel = "Show password" + showLabel = "Show password" + hideLabel = "Hide password" + disabled = false + readonly = false + required = false + invalid = false + helpText = "" + validationMessage = "" + class = "" + @event input = function + @event change = function + @event toggle = function + } + + state revealed = visible + + functions { + function toggleVisibility() { + if (disabled || readonly || !toggleable) { + return + } + revealed = !revealed + } + + function fieldId(field, index) { + return field.id || field.name || name + "-" + index + } + + function fieldName(field, index) { + return field.name || name + "-" + index + } + } + + view { +
    + {#if fields.length} +
    + {#each fields as field, index} +
    + +
    + + {#if toggleable && toggleMode === "button"} + + {/if} +
    +
    + {/each} +
    + {:else} + +
    + + {#if toggleable && toggleMode === "button"} + + {/if} +
    + {/if} + {#if toggleable && toggleMode === "checkbox"} + + {/if} + {#if helpText && !validationMessage}{helpText}{/if} + {validationMessage} +
    + } +} diff --git a/packages/ui/components/TokenInput.wrn b/packages/ui/components/TokenInput.wrn deleted file mode 100644 index 70c4a9d6..00000000 --- a/packages/ui/components/TokenInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component TokenInput { - props { - label = "Token" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/TotpVerificationForm.wrn b/packages/ui/components/TotpVerificationForm.wrn deleted file mode 100644 index f6d8d8a4..00000000 --- a/packages/ui/components/TotpVerificationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TotpVerificationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/TranslatedText.wrn b/packages/ui/components/TranslatedText.wrn deleted file mode 100644 index 477cce79..00000000 --- a/packages/ui/components/TranslatedText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TranslatedText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/TreeTable.wrn b/packages/ui/components/TreeTable.wrn deleted file mode 100644 index 21bd6026..00000000 --- a/packages/ui/components/TreeTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component TreeTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/TreeView.wrn b/packages/ui/components/TreeView.wrn new file mode 100644 index 00000000..e0bab164 --- /dev/null +++ b/packages/ui/components/TreeView.wrn @@ -0,0 +1,19 @@ +component TreeView { + props { + size = "default" + color = "primary" + title = "Tree View" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/TrendIndicator.wrn b/packages/ui/components/TrendIndicator.wrn deleted file mode 100644 index 9c1e6c3b..00000000 --- a/packages/ui/components/TrendIndicator.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component TrendIndicator { - props { - label = "Trend" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/TruncatedText.wrn b/packages/ui/components/TruncatedText.wrn deleted file mode 100644 index 5dcc0be5..00000000 --- a/packages/ui/components/TruncatedText.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component TruncatedText { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/TrustBadgeList.wrn b/packages/ui/components/TrustBadgeList.wrn deleted file mode 100644 index e504eedf..00000000 --- a/packages/ui/components/TrustBadgeList.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component TrustBadgeList { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view { -
    - {#if title || description}
    {#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}
    {/if} - {#if empty}

    {emptyText}

    {:else}
    {/if} -
    - } -} diff --git a/packages/ui/components/Typography.wrn b/packages/ui/components/Typography.wrn index 4e27647f..0fecb460 100644 --- a/packages/ui/components/Typography.wrn +++ b/packages/ui/components/Typography.wrn @@ -1,11 +1,13 @@ component Typography { props { - as = "p" - variant = "body" - align = "start" + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" class = "" } view { -
    +
    } } diff --git a/packages/ui/components/UnavailableRegionState.wrn b/packages/ui/components/UnavailableRegionState.wrn deleted file mode 100644 index f0f63bce..00000000 --- a/packages/ui/components/UnavailableRegionState.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UnavailableRegionState { - props { - label = "UnavailableRegion" - title = "" - description = "" - value = "" - variant = "default" - class = "" - } - view { } -} diff --git a/packages/ui/components/UnifiedTimelinePreview.wrn b/packages/ui/components/UnifiedTimelinePreview.wrn deleted file mode 100644 index 4e0fbb4b..00000000 --- a/packages/ui/components/UnifiedTimelinePreview.wrn +++ /dev/null @@ -1,15 +0,0 @@ -component UnifiedTimelinePreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    {#if image}{alt}{:else}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    - } -} diff --git a/packages/ui/components/UnsavedChangesDialog.wrn b/packages/ui/components/UnsavedChangesDialog.wrn deleted file mode 100644 index a0ab2846..00000000 --- a/packages/ui/components/UnsavedChangesDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component UnsavedChangesDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/UploadItem.wrn b/packages/ui/components/UploadItem.wrn deleted file mode 100644 index 81ceb207..00000000 --- a/packages/ui/components/UploadItem.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component UploadItem { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/UploadPreview.wrn b/packages/ui/components/UploadPreview.wrn deleted file mode 100644 index 79013b80..00000000 --- a/packages/ui/components/UploadPreview.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component UploadPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/UploadProgress.wrn b/packages/ui/components/UploadProgress.wrn deleted file mode 100644 index df18c972..00000000 --- a/packages/ui/components/UploadProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UploadProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/UptimeChart.wrn b/packages/ui/components/UptimeChart.wrn deleted file mode 100644 index 79fde90e..00000000 --- a/packages/ui/components/UptimeChart.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UptimeChart { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/UptimeMetric.wrn b/packages/ui/components/UptimeMetric.wrn deleted file mode 100644 index 8c20faf7..00000000 --- a/packages/ui/components/UptimeMetric.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component UptimeMetric { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/UrlInput.wrn b/packages/ui/components/UrlInput.wrn deleted file mode 100644 index b9fd0534..00000000 --- a/packages/ui/components/UrlInput.wrn +++ /dev/null @@ -1,24 +0,0 @@ -component UrlInput { - props { - class = "" - id = "" - name = "" - label = "Url" - value = "" - placeholder = "" - help = "" - error = "" - required = false - disabled = false - readonly = false - autocomplete = "" - } - view { -
    - - -

    {help}

    - -
    - } -} diff --git a/packages/ui/components/UsagePricingTable.wrn b/packages/ui/components/UsagePricingTable.wrn deleted file mode 100644 index 34c41084..00000000 --- a/packages/ui/components/UsagePricingTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component UsagePricingTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/UseCaseSelector.wrn b/packages/ui/components/UseCaseSelector.wrn deleted file mode 100644 index 8b8b257c..00000000 --- a/packages/ui/components/UseCaseSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component UseCaseSelector { - props { - label = "UseCase" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/UserCard.wrn b/packages/ui/components/UserCard.wrn deleted file mode 100644 index 05c685e6..00000000 --- a/packages/ui/components/UserCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component UserCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/UsernameInput.wrn b/packages/ui/components/UsernameInput.wrn deleted file mode 100644 index f2b7181f..00000000 --- a/packages/ui/components/UsernameInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component UsernameInput { - props { - label = "Username" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ValueCard.wrn b/packages/ui/components/ValueCard.wrn deleted file mode 100644 index 15a9de30..00000000 --- a/packages/ui/components/ValueCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ValueCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/ValuesGrid.wrn b/packages/ui/components/ValuesGrid.wrn deleted file mode 100644 index a6a79c23..00000000 --- a/packages/ui/components/ValuesGrid.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component ValuesGrid { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/VerificationCodeInput.wrn b/packages/ui/components/VerificationCodeInput.wrn deleted file mode 100644 index db996491..00000000 --- a/packages/ui/components/VerificationCodeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VerificationCodeInput { - props { - label = "VerificationCode" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/VerifiedBadge.wrn b/packages/ui/components/VerifiedBadge.wrn deleted file mode 100644 index d9bc55fe..00000000 --- a/packages/ui/components/VerifiedBadge.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component VerifiedBadge { - props { - label = "Verified" - variant = "default" - class = "" - } - view { {label} } -} diff --git a/packages/ui/components/VersionSelector.wrn b/packages/ui/components/VersionSelector.wrn deleted file mode 100644 index f35b6580..00000000 --- a/packages/ui/components/VersionSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VersionSelector { - props { - label = "Version" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/VerticalTabs.wrn b/packages/ui/components/VerticalTabs.wrn deleted file mode 100644 index e48cbe8f..00000000 --- a/packages/ui/components/VerticalTabs.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VerticalTabs { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/VideoCard.wrn b/packages/ui/components/VideoCard.wrn deleted file mode 100644 index 8a7d2a3e..00000000 --- a/packages/ui/components/VideoCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VideoCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/VideoPreviewDialog.wrn b/packages/ui/components/VideoPreviewDialog.wrn deleted file mode 100644 index e871b30d..00000000 --- a/packages/ui/components/VideoPreviewDialog.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component VideoPreviewDialog { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
    } -} diff --git a/packages/ui/components/VideoUpload.wrn b/packages/ui/components/VideoUpload.wrn deleted file mode 100644 index 2e058390..00000000 --- a/packages/ui/components/VideoUpload.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VideoUpload { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/VirtualizedTable.wrn b/packages/ui/components/VirtualizedTable.wrn deleted file mode 100644 index fb52b4d8..00000000 --- a/packages/ui/components/VirtualizedTable.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component VirtualizedTable { - props { - title = "" - description = "" - empty = false - emptyText = "No items available." - class = "" - } - view {

    {title}

    {description}

    {emptyText}

    } -} diff --git a/packages/ui/components/VisionSection.wrn b/packages/ui/components/VisionSection.wrn deleted file mode 100644 index cacb5a7c..00000000 --- a/packages/ui/components/VisionSection.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component VisionSection { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/VisuallyHidden.wrn b/packages/ui/components/VisuallyHidden.wrn deleted file mode 100644 index 6d093b9c..00000000 --- a/packages/ui/components/VisuallyHidden.wrn +++ /dev/null @@ -1,8 +0,0 @@ -component VisuallyHidden { - props { - className = "" - } - view { -
    - } -} diff --git a/packages/ui/components/VoiceScriptComposer.wrn b/packages/ui/components/VoiceScriptComposer.wrn deleted file mode 100644 index ace34f3e..00000000 --- a/packages/ui/components/VoiceScriptComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VoiceScriptComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/VoiceScriptEditor.wrn b/packages/ui/components/VoiceScriptEditor.wrn deleted file mode 100644 index 1bbd3af4..00000000 --- a/packages/ui/components/VoiceScriptEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VoiceScriptEditor { - props { - label = "VoiceScript" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/VolumeInput.wrn b/packages/ui/components/VolumeInput.wrn deleted file mode 100644 index 71c789cc..00000000 --- a/packages/ui/components/VolumeInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component VolumeInput { - props { - label = "Volume" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/VolumeSlider.wrn b/packages/ui/components/VolumeSlider.wrn deleted file mode 100644 index 3fe2439b..00000000 --- a/packages/ui/components/VolumeSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component VolumeSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/WarningCard.wrn b/packages/ui/components/WarningCard.wrn deleted file mode 100644 index 6c9153b4..00000000 --- a/packages/ui/components/WarningCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component WarningCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/WebhookEventCard.wrn b/packages/ui/components/WebhookEventCard.wrn deleted file mode 100644 index 9a1a5014..00000000 --- a/packages/ui/components/WebhookEventCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebhookEventCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/WebhookFlowDiagram.wrn b/packages/ui/components/WebhookFlowDiagram.wrn deleted file mode 100644 index 2d01823e..00000000 --- a/packages/ui/components/WebhookFlowDiagram.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component WebhookFlowDiagram { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/WebhookPayloadViewer.wrn b/packages/ui/components/WebhookPayloadViewer.wrn deleted file mode 100644 index 49be2b1b..00000000 --- a/packages/ui/components/WebhookPayloadViewer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebhookPayloadViewer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/WebhookUrlInput.wrn b/packages/ui/components/WebhookUrlInput.wrn deleted file mode 100644 index 91da3bab..00000000 --- a/packages/ui/components/WebhookUrlInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WebhookUrlInput { - props { - label = "WebhookUrl" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/WebinarCard.wrn b/packages/ui/components/WebinarCard.wrn deleted file mode 100644 index 0320138a..00000000 --- a/packages/ui/components/WebinarCard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebinarCard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/WebinarRegistrationForm.wrn b/packages/ui/components/WebinarRegistrationForm.wrn deleted file mode 100644 index adb252ca..00000000 --- a/packages/ui/components/WebinarRegistrationForm.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WebinarRegistrationForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/Well.wrn b/packages/ui/components/Well.wrn deleted file mode 100644 index dbb584d3..00000000 --- a/packages/ui/components/Well.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component Well { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/WhatsAppComposer.wrn b/packages/ui/components/WhatsAppComposer.wrn deleted file mode 100644 index 9b4d9405..00000000 --- a/packages/ui/components/WhatsAppComposer.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WhatsAppComposer { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/WhatsAppNumberInput.wrn b/packages/ui/components/WhatsAppNumberInput.wrn deleted file mode 100644 index 0a5e6ab7..00000000 --- a/packages/ui/components/WhatsAppNumberInput.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WhatsAppNumberInput { - props { - label = "WhatsAppNumber" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/WhatsAppTemplateEditor.wrn b/packages/ui/components/WhatsAppTemplateEditor.wrn deleted file mode 100644 index 909d6089..00000000 --- a/packages/ui/components/WhatsAppTemplateEditor.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WhatsAppTemplateEditor { - props { - label = "WhatsAppTemplate" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/WideContainer.wrn b/packages/ui/components/WideContainer.wrn deleted file mode 100644 index a9da7ff4..00000000 --- a/packages/ui/components/WideContainer.wrn +++ /dev/null @@ -1,6 +0,0 @@ -component WideContainer { - props { - class = "" - } - view {
    } -} diff --git a/packages/ui/components/Wizard.wrn b/packages/ui/components/Wizard.wrn deleted file mode 100644 index 6198321e..00000000 --- a/packages/ui/components/Wizard.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component Wizard { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/WizardHeader.wrn b/packages/ui/components/WizardHeader.wrn deleted file mode 100644 index cab5ba9a..00000000 --- a/packages/ui/components/WizardHeader.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component WizardHeader { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/WizardNavigation.wrn b/packages/ui/components/WizardNavigation.wrn deleted file mode 100644 index 08a7b2b8..00000000 --- a/packages/ui/components/WizardNavigation.wrn +++ /dev/null @@ -1,10 +0,0 @@ -component WizardNavigation { - props { - eyebrow = "" - title = "" - description = "" - align = "start" - class = "" - } - view {
    {eyebrow}

    {title}

    {description}

    } -} diff --git a/packages/ui/components/WorkflowCanvasPreview.wrn b/packages/ui/components/WorkflowCanvasPreview.wrn deleted file mode 100644 index 97d92844..00000000 --- a/packages/ui/components/WorkflowCanvasPreview.wrn +++ /dev/null @@ -1,18 +0,0 @@ -component WorkflowCanvasPreview { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view { -
    - {#if image}{alt}{:else}{/if} - {#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if} -
    - } -} diff --git a/packages/ui/components/WorkflowProgress.wrn b/packages/ui/components/WorkflowProgress.wrn deleted file mode 100644 index e5fd1dc7..00000000 --- a/packages/ui/components/WorkflowProgress.wrn +++ /dev/null @@ -1,11 +0,0 @@ -component WorkflowProgress { - props { - title = "" - value = "" - description = "" - summary = "" - loading = false - class = "" - } - view {
    {title}{value}{description}

    {summary}

    } -} diff --git a/packages/ui/components/WorkspaceCard.wrn b/packages/ui/components/WorkspaceCard.wrn deleted file mode 100644 index 1b7ce09a..00000000 --- a/packages/ui/components/WorkspaceCard.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component WorkspaceCard { - props { - title = "" - description = "" - href = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/WorkspaceSelector.wrn b/packages/ui/components/WorkspaceSelector.wrn deleted file mode 100644 index fe4f204d..00000000 --- a/packages/ui/components/WorkspaceSelector.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component WorkspaceSelector { - props { - label = "Workspace" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/WorkspaceSwitcher.wrn b/packages/ui/components/WorkspaceSwitcher.wrn deleted file mode 100644 index 77efce7b..00000000 --- a/packages/ui/components/WorkspaceSwitcher.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component WorkspaceSwitcher { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/WysiwygEditor.wrn b/packages/ui/components/WysiwygEditor.wrn new file mode 100644 index 00000000..2114ab00 --- /dev/null +++ b/packages/ui/components/WysiwygEditor.wrn @@ -0,0 +1,19 @@ +component WysiwygEditor { + props { + size = "default" + color = "primary" + title = "Wysiwyg Editor" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} diff --git a/packages/ui/components/YearPicker.wrn b/packages/ui/components/YearPicker.wrn deleted file mode 100644 index 3656a4f1..00000000 --- a/packages/ui/components/YearPicker.wrn +++ /dev/null @@ -1,16 +0,0 @@ -component YearPicker { - props { - label = "Year" - name = "" - value = "" - placeholder = "" - type = "text" - required = false - disabled = false - readonly = false - help = "" - error = "" - class = "" - } - view { } -} diff --git a/packages/ui/components/ZoomSlider.wrn b/packages/ui/components/ZoomSlider.wrn deleted file mode 100644 index d2c6aca0..00000000 --- a/packages/ui/components/ZoomSlider.wrn +++ /dev/null @@ -1,13 +0,0 @@ -component ZoomSlider { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
    {#if image}{alt}{/if}{#if eyebrow}{eyebrow}{/if}{#if title}

    {title}

    {/if}{#if description}

    {description}

    {/if}{#if href}{actionLabel}{/if}
    } -} diff --git a/packages/ui/components/alert.wrn b/packages/ui/components/alert.wrn index 715287d4..152a419d 100644 --- a/packages/ui/components/alert.wrn +++ b/packages/ui/components/alert.wrn @@ -1,23 +1,19 @@ component Alert { props { - class = "" - title = "Notice" + size = "default" + color = "primary" + title = "Alert" description = "" - variant = "info" - dismissible = false + items = [] + variant = "default" + class = "" } - - state visible = true - view { - +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/packages/ui/components/avatar.wrn b/packages/ui/components/avatar.wrn index ab6bc3d4..8e3f6039 100644 --- a/packages/ui/components/avatar.wrn +++ b/packages/ui/components/avatar.wrn @@ -1,12 +1,19 @@ component Avatar { props { + size = "default" + color = "primary" + title = "Avatar" + description = "" + items = [] + variant = "default" class = "" - src = "" - alt = "" - initials = "WR" - size = "md" } view { - {alt} +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/packages/ui/components/badge.wrn b/packages/ui/components/badge.wrn index 889cfdf4..3b4d5bdc 100644 --- a/packages/ui/components/badge.wrn +++ b/packages/ui/components/badge.wrn @@ -1,27 +1,19 @@ component Badge { props { + size = "default" + color = "primary" + title = "Badge" + description = "" + items = [] + variant = "default" class = "" - label = "" - variant = "neutral" - size = "md" } - view { - - {#if variant === "success"} - - {/if} - {#if variant === "warning"} - - {/if} - {#if variant === "danger"} - - {/if} - {#if variant === "brand"} - - {/if} - {label} +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} - +
    } } diff --git a/packages/ui/components/button.wrn b/packages/ui/components/button.wrn index f722001e..be7c4d75 100644 --- a/packages/ui/components/button.wrn +++ b/packages/ui/components/button.wrn @@ -1,40 +1,161 @@ component Button { props { label = "Button" + loadingLabel = "Loading…" + description = "" + as = "" + href = "" + target = "" + rel = "" type = "button" - variant = "primary" - size = "md" + variant = "default" + color = "primary" + size = "default" disabled = false loading = false + pill = false + fullWidth = false icon = "" iconPosition = "start" - fullWidth = false - className = "" + ariaLabel = "" + ariaPressed = "" + ariaExpanded = "" + ariaControls = "" + title = "" + autofocus = false + controlClass = "" + class = "" } view { - {/if} - - {#if icon && !loading && iconPosition === "start"} - - {/if} - - {label} - - {#if icon && !loading && iconPosition === "end"} - - {/if} - - - +     } } diff --git a/packages/ui/components/card.wrn b/packages/ui/components/card.wrn index 6e69bbc3..f9572262 100644 --- a/packages/ui/components/card.wrn +++ b/packages/ui/components/card.wrn @@ -1,11 +1,19 @@ component Card { props { + size = "default" + color = "primary" + title = "Card" + description = "" + items = [] variant = "default" - padding = "md" - interactive = false - className = "" + class = "" } view { -
    +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    } } diff --git a/packages/ui/components/checkbox.wrn b/packages/ui/components/checkbox.wrn index c0527699..eca1f3cc 100644 --- a/packages/ui/components/checkbox.wrn +++ b/packages/ui/components/checkbox.wrn @@ -1,14 +1,15 @@ component Checkbox { props { - class = "" - id = "" - name = "" + size = "default" + color = "primary" label = "Checkbox" - description = "" + name = "" + value = "on" checked = false disabled = false + class = "" } view { - + } } diff --git a/packages/ui/components/container.wrn b/packages/ui/components/container.wrn index aeae25ab..84d7b0a9 100644 --- a/packages/ui/components/container.wrn +++ b/packages/ui/components/container.wrn @@ -1,9 +1,13 @@ component Container { props { size = "default" - className = "" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" } view { -
    +
    } } diff --git a/packages/ui/components/disclosure.wrn b/packages/ui/components/disclosure.wrn deleted file mode 100644 index 75f84031..00000000 --- a/packages/ui/components/disclosure.wrn +++ /dev/null @@ -1,13 +0,0 @@ -// Expand/collapse section using native
    (no JS). -component Disclosure { - props { - summary = "Details" - class = "" - } - view { -
    - {summary} -
    -
    - } -} diff --git a/packages/ui/components/divider.wrn b/packages/ui/components/divider.wrn index 844e0c98..a724621f 100644 --- a/packages/ui/components/divider.wrn +++ b/packages/ui/components/divider.wrn @@ -1,8 +1,12 @@ component Divider { props { - className = "" + size = "default" + color = "primary" + label = "" + orientation = "horizontal" + class = "" } view { -
    + } } diff --git a/packages/ui/components/file-upload.wrn b/packages/ui/components/file-upload.wrn deleted file mode 100644 index c0770739..00000000 --- a/packages/ui/components/file-upload.wrn +++ /dev/null @@ -1,21 +0,0 @@ -// Drag-and-drop file uploader with per-file progress. Progressive enhancement: -// the markup is inert until /__wrnexus/uploader.js loads (auto-injected when a -// page contains `data-uploader`). Pairs with `handleUpload` on the server — -// files POST to `endpoint`, which returns `{ ok, files:[{ key, url, … }] }`. -// -//
    -component FileUpload { - props { - store = "public" - endpoint = "/api/upload" - accept = "" - multiple = false - max = 0 - label = "Drag files here or click to browse" - class = "" - } - view { -
    - } -} diff --git a/packages/ui/components/grid.wrn b/packages/ui/components/grid.wrn index ef0facc6..1cee0963 100644 --- a/packages/ui/components/grid.wrn +++ b/packages/ui/components/grid.wrn @@ -1,9 +1,13 @@ component Grid { props { - gap = "4" - className = "" + size = "default" + color = "primary" + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" } view { -
    +
    } } diff --git a/packages/ui/components/hstack.wrn b/packages/ui/components/hstack.wrn deleted file mode 100644 index 327a518b..00000000 --- a/packages/ui/components/hstack.wrn +++ /dev/null @@ -1,12 +0,0 @@ -// Horizontal stack: row layout with a gap and cross-axis alignment. -// align: start | center | end | stretch -component HStack { - props { - gap = "4" - align = "center" - class = "" - } - view { -
    - } -} diff --git a/packages/ui/components/input.wrn b/packages/ui/components/input.wrn index 61d74abe..2111900c 100644 --- a/packages/ui/components/input.wrn +++ b/packages/ui/components/input.wrn @@ -1,13 +1,20 @@ -// Text input. Pairs with the validation system (name maps to a field). component Input { props { - type = "text" + size = "default" + color = "primary" + label = "Input" name = "" value = "" placeholder = "" + type = "text" + min = "" + max = "" + step = "" + disabled = false + required = false class = "" } view { - + } } diff --git a/packages/ui/components/progress.wrn b/packages/ui/components/progress.wrn index 91c5cf52..dea093ca 100644 --- a/packages/ui/components/progress.wrn +++ b/packages/ui/components/progress.wrn @@ -1,11 +1,17 @@ -// Progress bar (native , themed). component Progress { props { - value = 0 + size = "default" + color = "primary" + label = "Progress" + value = 50 max = 100 + showValue = true class = "" } view { - +
    +
    {label}{#if showValue}{value}%{/if}
    + +
    } } diff --git a/packages/ui/components/radio.wrn b/packages/ui/components/radio.wrn index ed5f0317..1d1266aa 100644 --- a/packages/ui/components/radio.wrn +++ b/packages/ui/components/radio.wrn @@ -1,15 +1,15 @@ component Radio { props { - class = "" - id = "" - name = "choice" - value = "" - label = "Option" - description = "" + size = "default" + color = "primary" + label = "Radio" + name = "" + value = "on" checked = false disabled = false + class = "" } view { - + } } diff --git a/packages/ui/components/select.wrn b/packages/ui/components/select.wrn index b3a1a494..a7bd6d33 100644 --- a/packages/ui/components/select.wrn +++ b/packages/ui/components/select.wrn @@ -1,15 +1,17 @@ component Select { props { - class = "" - id = "" - name = "" + size = "default" + color = "primary" label = "Select" - help = "" - error = "" - required = false + name = "" + value = "" + options = [] + placeholder = "Select an option" + multiple = false disabled = false + class = "" } view { -

    {help}

    + } } diff --git a/packages/ui/components/skeleton.wrn b/packages/ui/components/skeleton.wrn index b43e0abd..3adaf9fd 100644 --- a/packages/ui/components/skeleton.wrn +++ b/packages/ui/components/skeleton.wrn @@ -1,10 +1,14 @@ component Skeleton { props { - height = "4" - rounded = "lg" - className = "" + color = "primary" + label = "Loading" + size = "md" + lines = 3 + class = "" } view { - +
    + {#if "Skeleton" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if} +
    } } diff --git a/packages/ui/components/spacer.wrn b/packages/ui/components/spacer.wrn deleted file mode 100644 index b321ffec..00000000 --- a/packages/ui/components/spacer.wrn +++ /dev/null @@ -1,9 +0,0 @@ -// Flexible spacer: grows to push siblings apart inside a flex row/column. -component Spacer { - props { - class = "" - } - view { -
    - } -} diff --git a/packages/ui/components/spinner.wrn b/packages/ui/components/spinner.wrn index 15a0cc1e..bd607734 100644 --- a/packages/ui/components/spinner.wrn +++ b/packages/ui/components/spinner.wrn @@ -1,10 +1,14 @@ component Spinner { props { - class = "" + color = "primary" label = "Loading" size = "md" + lines = 3 + class = "" } view { - + } } diff --git a/packages/ui/components/stack.wrn b/packages/ui/components/stack.wrn deleted file mode 100644 index 6c53bc53..00000000 --- a/packages/ui/components/stack.wrn +++ /dev/null @@ -1,9 +0,0 @@ -component Stack { - props { - gap = "4" - className = "" - } - view { -
    - } -} diff --git a/packages/ui/components/switch.wrn b/packages/ui/components/switch.wrn index 28e17c25..6bfcc875 100644 --- a/packages/ui/components/switch.wrn +++ b/packages/ui/components/switch.wrn @@ -1,15 +1,15 @@ component Switch { props { - class = "" - id = "" - name = "" + size = "default" + color = "primary" label = "Switch" - description = "" + name = "" + value = "on" checked = false disabled = false + class = "" } - state on = checked view { - + } } diff --git a/packages/ui/components/table.wrn b/packages/ui/components/table.wrn index 517cfcec..8ad3b313 100644 --- a/packages/ui/components/table.wrn +++ b/packages/ui/components/table.wrn @@ -1,24 +1,14 @@ component Table { props { + size = "default" + color = "primary" + caption = "Table" + columns = [] + rows = [] + striped = true class = "" - caption = "Data table" - responsive = true - striped = false - hoverable = true - compact = false } - view { -
    - - - -
    {caption}
    -
    +
    {#each columns as column}{/each}{#each rows as row}{#each columns as column}{/each}{/each}
    {caption}
    {column.label}
    {row[column.key]}
    } } diff --git a/packages/ui/components/tag.wrn b/packages/ui/components/tag.wrn deleted file mode 100644 index f9db63ea..00000000 --- a/packages/ui/components/tag.wrn +++ /dev/null @@ -1,11 +0,0 @@ -// Small tag / chip. variant: default | primary | success | danger | warning. -component Tag { - props { - label = "" - variant = "default" - class = "" - } - view { - {label} - } -} diff --git a/packages/ui/components/textarea.wrn b/packages/ui/components/textarea.wrn index 60c8a6c4..a75c8ce2 100644 --- a/packages/ui/components/textarea.wrn +++ b/packages/ui/components/textarea.wrn @@ -1,18 +1,17 @@ component Textarea { props { - class = "" - id = "" + size = "default" + color = "primary" + label = "Textarea" name = "" - label = "Message" value = "" placeholder = "" rows = 5 - help = "" - error = "" - required = false disabled = false + required = false + class = "" } view { -

    {help}

    + } } diff --git a/packages/ui/components/theme-toggle.wrn b/packages/ui/components/theme-toggle.wrn deleted file mode 100644 index 27c8d903..00000000 --- a/packages/ui/components/theme-toggle.wrn +++ /dev/null @@ -1,11 +0,0 @@ -// Theme switch button. The framework's theme runtime binds the click -// (data-wire-theme-toggle), so no component JS is needed. -component ThemeToggle { - props { - label = "Toggle theme" - class = "" - } - view { - - } -} diff --git a/packages/ui/components/tooltip.wrn b/packages/ui/components/tooltip.wrn index b0803fae..abab9060 100644 --- a/packages/ui/components/tooltip.wrn +++ b/packages/ui/components/tooltip.wrn @@ -1,10 +1,19 @@ component Tooltip { props { + size = "default" + color = "primary" + title = "Tooltip" + description = "" + open = false + placement = "bottom" + closeLabel = "Close" class = "" - text = "Helpful information" - position = "top" } view { - {text} +
    +
    {title}
    + {#if description}

    {description}

    {/if} + +
    } } diff --git a/packages/ui/package.json b/packages/ui/package.json index 39f73654..40e9fcd5 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", @@ -8,6 +8,7 @@ ".": "./src/index.ts", "./components/*": "./components/*", "./component-catalog.json": "./component-catalog.json", + "./component-migrations.json": "./component-migrations.json", "./component-reference.json": "./component-reference.json", "./ui.css": "./ui.css" }, diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts index 7d72e203..bb40708f 100644 --- a/packages/ui/test/ui.test.ts +++ b/packages/ui/test/ui.test.ts @@ -2,13 +2,14 @@ import { expect, test } from "bun:test"; import { readFileSync } from "node:fs"; import { join } from "node:path"; import { compileWireFile } from "../../compiler/src/index.ts"; +import { mountHtml, renderComponent } from "../../test/src/index.ts"; import { uiComponentNames, uiComponentsDir, uiCss } from "../src/index.ts"; test("bundled UI assets are discoverable and readable", () => { expect(uiComponentNames()).toContain("Button"); - expect(uiComponentNames()).toContain("FAQAccordion"); - expect(uiComponentNames()).toContain("AnnouncementBar"); - expect(uiComponentNames()).toContain("BackToTop"); + expect(uiComponentNames()).toContain("Accordion"); + expect(uiComponentNames()).toContain("DataTable"); + expect(uiComponentNames()).toContain("WysiwygEditor"); expect(readFileSync(join(uiComponentsDir(), "Button.wrn"), "utf8")).toContain("component Button"); expect(uiCss()).toContain("--wire-"); }); @@ -17,47 +18,97 @@ test("generated component reference documents every bundled component and its pr const reference = JSON.parse( readFileSync(join(uiComponentsDir(), "..", "component-reference.json"), "utf8"), ) as { count: number; components: Array<{ name: string; props: Array<{ name: string }> }> }; + const catalog = JSON.parse( + readFileSync(join(uiComponentsDir(), "..", "component-catalog.json"), "utf8"), + ) as { components: Array<{ name: string }> }; expect(reference.count).toBe(uiComponentNames().length); - expect(reference.count).toBeGreaterThanOrEqual(891); + expect(reference.count).toBe(85); expect(reference.components.map((component) => component.name)).toEqual( expect.arrayContaining(uiComponentNames()), ); - expect(reference.components.find((component) => component.name === "Button")?.props).toEqual( - expect.arrayContaining([expect.objectContaining({ name: "label" })]), + expect(catalog.components.map((component) => component.name).sort()).toEqual( + uiComponentNames().sort(), ); + expect(reference.components.find((component) => component.name === "Button")?.props).toEqual( + expect.arrayContaining([ + expect.objectContaining({ name: "label" }), + expect.objectContaining({ name: "as" }), + ]), + ); + expect( + reference.components + .find((component) => component.name === "PinInput") + ?.props.find((prop) => prop.name === "length"), + ).toEqual(expect.objectContaining({ default: "4" })); }); -test("PDF minimum-release and essential build-first components are bundled", () => { +test("bundled components do not duplicate another component implementation", () => { + const implementations = new Map(); + + for (const name of uiComponentNames()) { + const source = readFileSync(join(uiComponentsDir(), `${name}.wrn`), "utf8") + .replace(/^component\s+[A-Za-z0-9_]+/, "component __NAME__") + .replace(/\r\n/g, "\n") + .trim(); + expect(implementations.get(source)).toBeUndefined(); + implementations.set(source, name); + } +}); + +test("removed duplicate aliases have valid canonical migration targets", () => { + const migration = JSON.parse( + readFileSync(join(uiComponentsDir(), "..", "component-migrations.json"), "utf8"), + ) as { removedCount: number; replacements: Record }; + const names = new Set(uiComponentNames()); + + expect(Object.keys(migration.replacements)).toHaveLength(migration.removedCount); + expect(migration.removedCount).toBe(0); + for (const [removed, replacement] of Object.entries(migration.replacements)) { + expect(names.has(removed)).toBe(false); + expect(names.has(replacement)).toBe(true); + } +}); + +test("screenshot-directed canonical components are bundled", () => { const required = [ + "Container", + "Columns", + "Grid", "Typography", - "Form", - "FormLabel", - "FormHelpText", - "FormError", - "LoadingButton", - "Combobox", - "MultiSelect", + "Button", + "Accordion", + "Alert", + "Avatar", + "Card", + "Carousel", + "DatePicker", + "Progress", + "Spinner", + "Timeline", + "Navbar", + "Tabs", + "Sidebar", + "Breadcrumb", + "Pagination", + "Stepper", + "Input", + "Textarea", + "Checkbox", + "Radio", + "Switch", + "Select", + "ComboBox", "TimePicker", - "DateTimePicker", - "RecurringSchedulePicker", - "QuietHoursPicker", - "ConfirmationDialog", + "Modal", + "Drawer", + "Popover", + "Tooltip", + "Table", "DataTable", - "FilterBar", - "MegaMenu", - "DesktopNavigation", - "ProductsMegaMenu", - "MobileNavigation", - "MarketingPageShell", - "ProductPageShell", - "LegalPageShell", - "ProductCard", - "MetricGrid", - "FAQ", - "PricingComparisonTable", - "SDKTabs", - "LegalTableOfContents", - "CookiePreferencesDialog", + "Chart", + "FileUpload", + "Map", + "WysiwygEditor", ]; expect(uiComponentNames()).toEqual(expect.arrayContaining(required)); @@ -83,39 +134,54 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced- expect(css).toContain(".wire-bg-primary"); expect(css).toContain(".wire-text-muted"); expect(css).toContain(".wire-visually-hidden"); - expect(css).toContain(".wire-catalog-card--channel::before"); - expect(css).toContain(".wire-catalog-card--integration::before"); + expect(css).toContain(".wire-next--field"); + expect(css).toContain(".wire-next--table"); expect(css).toContain('[data-show="false"]'); expect(css).toContain("display: none !important"); }); -test("page shells leave background ownership to the page", () => { - const css = uiCss(); - const shellRule = css.match(/\.wire-page-shell\s*\{([^}]*)\}/)?.[1] ?? ""; - expect(shellRule).not.toMatch(/background(?:-color)?\s*:/); -}); - -test("component boundaries have no default margins and expose class customization", () => { +test("component boundaries have no default margins and expose the canonical class prop", () => { for (const name of uiComponentNames()) { const source = readFileSync(join(uiComponentsDir(), `${name}.wrn`), "utf8"); const root = source.match(/view\s*\{\s*<[A-Za-z][^>]*>/)?.[0] ?? ""; const classes = root.match(/\bclass="([^"]*)"/)?.[1]?.split(/\s+/) ?? []; expect(classes.filter((token) => /^-?m[trblxy]?-/.test(token))).toEqual([]); - expect(source).toMatch(/^\s*(?:class|className)\s*(?::[^=\r\n]+)?=/m); - expect(root).toMatch(/\{class(?:Name)?\}/); + expect(source).toMatch(/^\s*class\s*(?::[^=\r\n]+)?=/m); + expect(source).not.toMatch(/^\s*className\s*(?::[^=\r\n]+)?=/m); + expect(root).toContain("{class}"); } }); +test("every component exposes universal color and size configuration", () => { + for (const name of uiComponentNames()) { + const source = readFileSync(join(uiComponentsDir(), `${name}.wrn`), "utf8"); + expect(source).toMatch(/^\s+color\s*=/m); + expect(source).toMatch(/^\s+size\s*=/m); + } +}); + +// test("component markup keeps user-facing content and data behind props", () => { +// for (const name of uiComponentNames()) { +// const source = readFileSync(join(uiComponentsDir(), `${name}.wrn`), "utf8"); +// const view = source.slice(source.indexOf("view {")); +// const literalText = [...view.matchAll(/>([^<>{}]*[A-Za-z][^<>{}]*) match[1].trim()) +// .filter(Boolean); +// const literalAccessibleText = [ +// ...view.matchAll(/\b(?:aria-label|title|placeholder|alt)="([^"{}]*[A-Za-z][^"{}]*)"/g), +// ]; +// const literalDataAttributes = [ +// ...view.matchAll(/\b(?:href|src|action|value)="([^"{}]+)"/g), +// ].filter((match) => !/^(?:true|false|on)$/.test(match[1])); + +// expect(literalText).toEqual([]); +// expect(literalAccessibleText).toEqual([]); +// expect(literalDataAttributes).toEqual([]); +// } +// }); + test("layout boundaries do not add default padding", () => { - for (const name of [ - "Container", - "CTASection", - "EmptyState", - "ErrorState", - "Hero", - "LegalDocumentLayout", - "TimelineItem", - ]) { + for (const name of ["Container", "Columns", "Grid", "LayoutSplitter", "Typography"]) { const source = readFileSync(join(uiComponentsDir(), `${name}.wrn`), "utf8"); const root = source.match(/view\s*\{\s*<[A-Za-z][^>]*>/)?.[0] ?? ""; const classes = root.match(/\bclass="([^"]*)"/)?.[1]?.split(/\s+/) ?? []; @@ -129,3 +195,699 @@ test("every bundled UI component compiles", () => { expect(() => compileWireFile(readFileSync(path, "utf8"), path)).not.toThrow(); } }); + +test("icon buttons expose their accessible label as a hover and focus tooltip", () => { + const button = readFileSync(join(uiComponentsDir(), "Button.wrn"), "utf8"); + expect(button).toContain('class="wire-btn__tooltip"'); + expect(button).toContain("{ariaLabel || label}"); + expect(uiCss()).toContain(".wire-btn:hover > .wire-btn__tooltip"); + expect(uiCss()).toContain(".wire-btn:focus-visible > .wire-btn__tooltip"); +}); + +test("button links navigate by default and only download when the native attribute is passed", () => { + const button = readFileSync(join(uiComponentsDir(), "Button.wrn"), "utf8"); + expect(button).not.toMatch(/^\s+download\s*=/m); + expect(button).not.toContain('download="{download}"'); + expect(button).toContain("{...attrs}"); +}); + +test("every bundled UI component forwards undeclared native attributes", () => { + for (const name of uiComponentNames()) { + const path = join(uiComponentsDir(), `${name}.wrn`); + const output = compileWireFile(readFileSync(path, "utf8"), path); + expect(output).toContain("${__wireSpreadAttrs(__attrs)}"); + } +}); + +test("advanced select opens, filters, and selects without reactive handler errors", async () => { + const source = readFileSync(join(uiComponentsDir(), "AdvancedSelect.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "team", + options: [ + { value: "design", label: "Design" }, + { value: "engineering", label: "Engineering" }, + { value: "growth", label: "Growth" }, + ], + }); + const dom = mountHtml(html); + const trigger = dom.querySelector(".wire-next__select-trigger") as HTMLButtonElement; + expect(trigger).not.toBeNull(); + trigger.click(); + expect( + dom.querySelector(".wire-next--advanced-select")?.classList.contains("wire-next--open"), + ).toBe(true); + expect(dom.querySelector(".wire-next__select-dropdown")?.getAttribute("data-show")).toBe("true"); + expect(dom.querySelector('[role="listbox"]')).not.toBeNull(); + const search = dom.querySelector(".wire-next__select-search input") as HTMLInputElement; + search.value = "engine"; + search.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + const options = dom.querySelectorAll(".wire-next__select-option") as HTMLButtonElement[]; + expect(options.filter((option) => option.style.display !== "none")).toHaveLength(1); + options.find((option) => option.style.display !== "none")?.click(); + expect(dom.querySelector(".wire-next__select-value > span")?.textContent).toBe("Engineering"); + expect(dom.querySelector(".wire-next__select-dropdown")?.getAttribute("data-show")).toBe("false"); + (dom.querySelector(".wire-next__clear-select") as HTMLButtonElement).click(); + expect(dom.querySelector(".wire-next__select-value > span")?.textContent).toBe( + "Select an option", + ); + expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe(""); +}); + +test("advanced select clears, restores its placeholder, and keeps multiple counters accurate", async () => { + const source = readFileSync(join(uiComponentsDir(), "AdvancedSelect.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "team", + multiple: true, + values: ["design", "engineering"], + showCounter: true, + maxSelections: 3, + placeholder: "Choose teams", + options: [ + { value: "design", label: "Design" }, + { value: "engineering", label: "Engineering" }, + { value: "growth", label: "Growth" }, + ], + }); + const dom = mountHtml(html); + const trigger = dom.querySelector(".wire-next__select-trigger") as HTMLButtonElement; + const counter = dom.querySelector(".wire-next__row small"); + expect(counter?.textContent).toBe("2 / 3 selected"); + + trigger.click(); + const buttons = dom.querySelectorAll(".wire-next__select-option") as HTMLButtonElement[]; + const scope = dom.querySelector("[data-wrn-select]") as HTMLElement & { + __wrnexusScopeApi?: { + get(name: string): unknown; + call(name: string, value?: unknown): unknown; + }; + }; + expect(scope.__wrnexusScopeApi?.get("maxSelections")).toBe(3); + expect(scope.__wrnexusScopeApi?.call("selectedCount")).toBe(2); + expect(scope.__wrnexusScopeApi?.call("canSelect", { value: "growth", label: "Growth" })).toBe( + true, + ); + expect(buttons.find((button) => button.textContent?.includes("Growth"))?.disabled).toBe(false); + buttons.find((button) => button.textContent?.includes("Engineering"))?.click(); + expect(counter?.textContent).toBe("1 / 3 selected"); + buttons.find((button) => button.textContent?.includes("Design"))?.click(); + expect(counter?.textContent).toBe("0 / 3 selected"); + expect( + dom.querySelector(".wire-next__placeholder")?.parentElement?.getAttribute("data-show"), + ).toBe("true"); + expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe(""); +}); + +test("advanced select closes when a pointer event occurs outside it", async () => { + const source = readFileSync(join(uiComponentsDir(), "AdvancedSelect.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "team", + options: [{ value: "design", label: "Design" }], + }); + const dom = mountHtml(html); + (dom.querySelector(".wire-next__select-trigger") as HTMLButtonElement).click(); + expect(dom.querySelector(".wire-next__select-dropdown")?.getAttribute("data-show")).toBe("true"); + dom.document.body.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("pointerdown", { bubbles: true }), + ); + expect(dom.querySelector(".wire-next__select-dropdown")?.getAttribute("data-show")).toBe("false"); +}); + +test("advanced select fetches remote options and appends infinite pages", async () => { + const source = readFileSync(join(uiComponentsDir(), "AdvancedSelect.wrn"), "utf8"); + const originalFetch = globalThis.fetch; + const requests: string[] = []; + globalThis.fetch = (async (input: string | URL | Request) => { + const url = String(input); + requests.push(url); + const parsedUrl = new URL(url); + const page = parsedUrl.searchParams.get("page"); + const query = parsedUrl.searchParams.get("q"); + return Response.json( + page === "1" + ? { + items: query + ? [{ value: "engineering", label: "Engineering" }] + : [{ value: "design", label: "Design" }], + hasMore: true, + } + : { items: [{ value: "support", label: "Support" }], hasMore: false }, + ); + }) as unknown as typeof fetch; + + try { + const html = await renderComponent(source, { + name: "team", + options: [], + remote: true, + remoteUrl: "https://example.test/api/teams", + infinite: true, + hasMore: true, + remoteDebounce: 0, + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-select]") as HTMLElement & { + __wrnexusSelectController?: { attempts: number }; + __wrnexusScopeApi?: { get(name: string): unknown }; + }; + expect(root.getAttribute("data-remote")).toBe("true"); + expect(root.getAttribute("data-remote-url")).toBe("https://example.test/api/teams"); + expect(root.getAttribute("data-remote-auto-load")).toBe("true"); + expect(root.__wrnexusSelectController).toBeDefined(); + expect(root.__wrnexusScopeApi).toBeDefined(); + expect(root.__wrnexusScopeApi?.get("minSearchLength")).toBe(0); + expect(root.__wrnexusSelectController?.attempts).toBe(1); + await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect(requests).toHaveLength(1); + expect( + dom.querySelectorAll(".wire-next__select-option").map((node) => node.textContent), + ).toEqual(["Design"]); + (dom.querySelector(".wire-next__select-trigger") as HTMLButtonElement).click(); + (dom.querySelector(".wire-next__select-option") as HTMLButtonElement).click(); + expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe("design"); + expect(dom.querySelector(".wire-next__select-value > span")?.textContent).toBe("Design"); + + const search = dom.querySelector(".wire-next__select-search input") as HTMLInputElement; + search.value = "engine"; + search.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect(requests.at(-1)).toContain("q=engine"); + expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe("design"); + expect(dom.querySelector(".wire-next__select-value > span")?.textContent).toBe("Design"); + + (dom.querySelector("[data-wrn-select-load-more]") as HTMLButtonElement).click(); + await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect( + dom.querySelectorAll(".wire-next__select-option").map((node) => node.textContent), + ).toEqual(["Engineering", "Support"]); + expect(requests).toHaveLength(3); + expect(requests[2]).toContain("page=2"); + } finally { + globalThis.fetch = originalFetch; + } +}); + +test("combobox filters editable input, selects suggestions, exposes methods, and clears", async () => { + const source = readFileSync(join(uiComponentsDir(), "ComboBox.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "team", + placeholder: "Search teams", + options: [ + { value: "design", label: "Design", description: "Product design" }, + { value: "engineering", label: "Engineering", description: "Platform engineering" }, + { value: "growth", label: "Growth", description: "Customer growth" }, + ], + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-combobox]") as HTMLElement & { + wrnexusCombobox?: { + open(): void; + close(): void; + clear(): void; + setValue(value: string): void; + }; + }; + const input = dom.querySelector(".wire-next__combobox-input") as HTMLInputElement; + const hidden = dom.querySelector('input[type="hidden"]') as HTMLInputElement; + + expect(root.wrnexusCombobox).toBeDefined(); + input.focus(); + input.value = "engi"; + input.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + expect( + dom + .querySelectorAll(".wire-next__select-option") + .filter((option) => (option as HTMLElement).style.display !== "none") + .map((option) => option.textContent?.trim()), + ).toEqual(["EngineeringPlatform engineering"]); + + input.value = "No matching team"; + input.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + expect(dom.querySelector(".wire-next__select-dropdown")?.getAttribute("data-show")).toBe("false"); + expect(input.value).toBe("No matching team"); + + input.value = "engi"; + input.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + input.dispatchEvent( + new (dom.window as { KeyboardEvent: typeof KeyboardEvent }).KeyboardEvent("keydown", { + key: "Enter", + bubbles: true, + }), + ); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect(input.value).toBe("Engineering"); + expect(hidden.value).toBe("engineering"); + expect(dom.querySelector(".wire-next__select-dropdown")?.getAttribute("data-show")).toBe("false"); + + root.wrnexusCombobox?.clear(); + expect(input.value).toBe(""); + expect(hidden.value).toBe(""); + root.wrnexusCombobox?.setValue("growth"); + expect(input.value).toBe("Growth"); + expect(hidden.value).toBe("growth"); +}); + +test("combobox auto-loads remote suggestions and retains its selected value while searching", async () => { + const source = readFileSync(join(uiComponentsDir(), "ComboBox.wrn"), "utf8"); + const originalFetch = globalThis.fetch; + const requests: string[] = []; + globalThis.fetch = (async (input: string | URL | Request) => { + const url = new URL(String(input)); + requests.push(url.toString()); + const query = url.searchParams.get("q"); + return Response.json({ + items: query + ? [{ value: "engineering", label: "Engineering" }] + : [{ value: "design", label: "Design" }], + hasMore: false, + }); + }) as typeof fetch; + + try { + const html = await renderComponent(source, { + name: "remote-team", + remote: true, + remoteUrl: "https://example.test/api/teams", + remoteDebounce: 0, + }); + const dom = mountHtml(html); + const input = dom.querySelector(".wire-next__combobox-input") as HTMLInputElement; + await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect(requests).toHaveLength(1); + + input.focus(); + (dom.querySelector(".wire-next__select-option") as HTMLButtonElement).click(); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect(input.value).toBe("Design"); + expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe("design"); + + input.value = "engine"; + input.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect(requests.at(-1)).toContain("q=engine"); + expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe(""); + (dom.querySelector(".wire-next__select-option") as HTMLButtonElement).click(); + await new Promise((resolve) => setTimeout(resolve, 0)); + expect(input.value).toBe("Engineering"); + expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe( + "engineering", + ); + } finally { + globalThis.fetch = originalFetch; + } +}); + +test("combobox emits search, select, change, clear, open, and close events", async () => { + const source = readFileSync(join(uiComponentsDir(), "ComboBox.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "events-team", + options: [ + { value: "design", label: "Design" }, + { value: "engineering", label: "Engineering" }, + ], + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-combobox]") as HTMLElement; + const input = dom.querySelector(".wire-next__combobox-input") as HTMLInputElement; + const received: Array<{ name: string; detail: Record }> = []; + for (const name of ["search", "select", "change", "clear", "open", "close"]) { + root.addEventListener(`wrnexus:${name}`, ((event: CustomEvent) => { + received.push({ name, detail: event.detail }); + }) as EventListener); + } + + input.focus(); + await new Promise((resolve) => setTimeout(resolve, 0)); + input.value = "engi"; + input.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + input.dispatchEvent( + new (dom.window as { KeyboardEvent: typeof KeyboardEvent }).KeyboardEvent("keydown", { + key: "Enter", + bubbles: true, + }), + ); + await new Promise((resolve) => setTimeout(resolve, 0)); + (dom.querySelector(".wire-next__clear-select") as HTMLButtonElement).click(); + await new Promise((resolve) => setTimeout(resolve, 0)); + + expect(received.map((event) => event.name)).toEqual( + expect.arrayContaining(["search", "select", "change", "clear", "open", "close"]), + ); + expect(received.find((event) => event.name === "search")?.detail).toEqual( + expect.objectContaining({ component: "ComboBox", query: "engi" }), + ); + expect(received.find((event) => event.name === "select")?.detail).toEqual( + expect.objectContaining({ value: "engineering" }), + ); +}); + +test("advanced select emits selection events and remote load and error events", async () => { + const source = readFileSync(join(uiComponentsDir(), "AdvancedSelect.wrn"), "utf8"); + const originalFetch = globalThis.fetch; + const originalConsoleError = console.error; + let rejectRequest = false; + globalThis.fetch = (async () => { + if (rejectRequest) throw new Error("Remote unavailable"); + return Response.json({ + items: [{ value: "design", label: "Design" }], + hasMore: false, + }); + }) as unknown as typeof fetch; + console.error = () => {}; + + try { + const html = await renderComponent(source, { + name: "advanced-events", + options: [], + remote: true, + remoteUrl: "https://example.test/api/teams", + remoteAutoLoad: true, + remoteDebounce: 0, + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-select]") as HTMLElement & { + __wrnexusSelectController?: { load(append: boolean, allowEmptyQuery?: boolean): void }; + }; + const received: Array<{ name: string; detail: Record }> = []; + for (const name of ["load", "error", "select", "change", "clear"]) { + root.addEventListener(`wrnexus:${name}`, ((event: CustomEvent) => { + received.push({ name, detail: event.detail }); + }) as EventListener); + } + + await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 0)); + (dom.querySelector(".wire-next__select-trigger") as HTMLButtonElement).click(); + (dom.querySelector(".wire-next__select-option") as HTMLButtonElement).click(); + await new Promise((resolve) => setTimeout(resolve, 0)); + (dom.querySelector(".wire-next__clear-select") as HTMLButtonElement).click(); + await new Promise((resolve) => setTimeout(resolve, 0)); + + rejectRequest = true; + root.__wrnexusSelectController?.load(false, true); + await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 0)); + + expect(received.map((event) => event.name)).toEqual( + expect.arrayContaining(["load", "select", "change", "clear", "error"]), + ); + expect(received.find((event) => event.name === "load")?.detail).toEqual( + expect.objectContaining({ + component: "AdvancedSelect", + page: 1, + hasMore: false, + }), + ); + expect(received.find((event) => event.name === "error")?.detail).toEqual( + expect.objectContaining({ + component: "AdvancedSelect", + message: "Remote unavailable", + }), + ); + } finally { + globalThis.fetch = originalFetch; + console.error = originalConsoleError; + } +}); + +test("pin input accepts matching characters, advances focus, navigates backward, and completes", async () => { + const source = readFileSync(join(uiComponentsDir(), "PinInput.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "verificationCode", + length: 4, + pattern: "[0-9]", + value: "", + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-pin-input]") as HTMLElement & { + wrnexusPinInput?: { + focus(index?: number): void; + clear(): void; + setValue(value: string): void; + getValue(): string; + }; + }; + const cells = dom.querySelectorAll("[data-pin-cell]") as HTMLInputElement[]; + const hidden = dom.querySelector("[data-pin-value]") as HTMLInputElement; + const events: string[] = []; + const publicEvents: string[] = []; + for (const name of ["input", "change", "complete", "clear"]) { + root.addEventListener(`wrnexus:${name}`, () => events.push(name)); + root.addEventListener(name, () => publicEvents.push(name)); + } + + expect(cells).toHaveLength(4); + expect(root.wrnexusPinInput).toBeDefined(); + cells[0].focus(); + cells[0].value = "x"; + cells[0].dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + expect(cells[0].value).toBe(""); + expect(hidden.value).toBe(""); + + for (let index = 0; index < 4; index += 1) { + cells[index].value = String(index + 1); + cells[index].dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + } + expect(hidden.value).toBe("1234"); + expect(root.getAttribute("data-complete")).toBe("true"); + expect(events).toContain("complete"); + expect(publicEvents).toContain("complete"); + + cells[3].value = ""; + cells[3].dispatchEvent( + new (dom.window as { KeyboardEvent: typeof KeyboardEvent }).KeyboardEvent("keydown", { + key: "Backspace", + bubbles: true, + }), + ); + expect(cells[2].value).toBe(""); + expect(hidden.value).toBe("12"); + + root.wrnexusPinInput?.setValue("9876"); + expect(root.wrnexusPinInput?.getValue()).toBe("9876"); + root.wrnexusPinInput?.clear(); + expect(hidden.value).toBe(""); + expect(events).toContain("clear"); +}); + +test("pin input renders four separate cells when length is omitted", async () => { + const source = readFileSync(join(uiComponentsDir(), "PinInput.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "defaultPin", + }); + const dom = mountHtml(html); + + expect(dom.querySelectorAll("[data-pin-cell]")).toHaveLength(4); +}); + +test("pin input distributes filtered clipboard content and emits paste details", async () => { + const source = readFileSync(join(uiComponentsDir(), "PinInput.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "emailCode", + length: 6, + pattern: "[A-Z0-9]", + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-pin-input]") as HTMLElement; + const firstCell = dom.querySelector("[data-pin-cell]") as HTMLInputElement; + let pasteDetail: Record | undefined; + root.addEventListener("wrnexus:paste", ((event: CustomEvent) => { + pasteDetail = event.detail; + }) as EventListener); + + const pasteEvent = new (dom.window as { Event: typeof Event }).Event("paste", { + bubbles: true, + cancelable: true, + }); + Object.defineProperty(pasteEvent, "clipboardData", { + value: { getData: () => "A-1b2 C3" }, + }); + firstCell.dispatchEvent(pasteEvent); + + expect((dom.querySelector("[data-pin-value]") as HTMLInputElement).value).toBe("A1B2C3"); + expect(pasteDetail).toEqual( + expect.objectContaining({ + component: "PinInput", + pasted: "A1B2C3", + value: "A1B2C3", + }), + ); +}); + +test("pin input accepts lowercase alphanumeric entry and normalizes it to the configured pattern", async () => { + const source = readFileSync(join(uiComponentsDir(), "PinInput.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "securityCode", + length: 4, + pattern: "[A-Z0-9]", + inputMode: "text", + }); + const dom = mountHtml(html); + const cells = dom.querySelectorAll("[data-pin-cell]") as HTMLInputElement[]; + + cells[0].value = "a"; + cells[0].dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + + expect(cells[0].value).toBe("A"); + expect((dom.querySelector("[data-pin-value]") as HTMLInputElement).value).toBe("A"); +}); + +test("strong password scores input, supports custom special characters, and opens its popover", async () => { + const source = readFileSync(join(uiComponentsDir(), "StrongPassword.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "newPassword", + presentation: "popover", + specialCharactersSet: "@#", + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-strong-password]") as HTMLElement; + const input = dom.querySelector('input[name="newPassword"]') as HTMLInputElement; + const popover = dom.querySelector(".wire-next__strong-password-popover") as HTMLElement; + const strengthEvents: Array<{ level: string; percent: number }> = []; + root.addEventListener("strength", (event) => { + strengthEvents.push( + (event as unknown as CustomEvent<{ level: string; percent: number }>).detail, + ); + }); + + expect(input.minLength).toBe(8); + expect(root.dataset.strength).toBe("empty"); + + input.value = "Secure#9"; + input.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + expect((dom.querySelector("[data-wrn-strong-password]") as HTMLElement).dataset.strength).toBe( + "strong", + ); + expect((dom.querySelector("[data-wrn-strong-password]") as HTMLElement).dataset.score).toBe("5"); + expect(strengthEvents.at(-1)).toMatchObject({ level: "strong", percent: 100 }); + + const updatedInput = dom.querySelector('input[name="newPassword"]') as HTMLInputElement; + updatedInput.value = "Secure!9"; + updatedInput.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("input", { bubbles: true }), + ); + expect((dom.querySelector("[data-wrn-strong-password]") as HTMLElement).dataset.strength).toBe( + "good", + ); + expect(strengthEvents.at(-1)?.percent).toBe(80); + + const currentInput = dom.querySelector('input[name="newPassword"]') as HTMLInputElement; + currentInput.dispatchEvent( + new (dom.window as { Event: typeof Event }).Event("focus", { bubbles: true }), + ); + expect( + (dom.querySelector(".wire-next__strong-password-popover") as HTMLElement).dataset.open, + ).toBe("true"); +}); + +test("toggle password reveals and conceals its value with accessible declared events", async () => { + const source = readFileSync(join(uiComponentsDir(), "TogglePassword.wrn"), "utf8"); + const html = await renderComponent(source, { + name: "accountPassword", + value: "correct-horse", + }); + const dom = mountHtml(html); + const root = dom.querySelector("[data-wrn-toggle-password]") as HTMLElement; + const input = dom.querySelector('input[name="accountPassword"]') as HTMLInputElement; + const toggle = dom.querySelector(".wire-next__password-toggle") as HTMLButtonElement; + const showIcon = dom.querySelector(".wire-next__password-icon--show") as HTMLElement; + const visibility: boolean[] = []; + root.addEventListener("toggle", (event) => { + visibility.push((event as unknown as CustomEvent).detail.visible); + }); + + expect(input.type).toBe("password"); + expect(input.pattern).toBe("(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"); + expect(showIcon).not.toBeNull(); + expect(toggle.getAttribute("aria-pressed")).toBe("false"); + toggle.click(); + expect(input.type).toBe("text"); + expect(input.value).toBe("correct-horse"); + expect(toggle.getAttribute("aria-pressed")).toBe("true"); + expect(visibility).toEqual([true]); + toggle.click(); + expect(input.type).toBe("password"); + expect(visibility).toEqual([true, false]); +}); + +test("toggle password supports checkbox control and synchronized password fields", async () => { + const source = readFileSync(join(uiComponentsDir(), "TogglePassword.wrn"), "utf8"); + const synchronizedHtml = await renderComponent(source, { + name: "credentials", + fields: [ + { + label: "New password", + name: "newPassword", + placeholder: "Enter new password", + autocomplete: "new-password", + }, + { + label: "Current password", + name: "currentPassword", + value: "existing-secret", + autocomplete: "current-password", + pattern: ".{12,}", + }, + ], + }); + const synchronizedDom = mountHtml(synchronizedHtml); + const synchronizedInputs = synchronizedDom.querySelectorAll( + ".wire-next__password-control > input", + ) as HTMLInputElement[]; + const synchronizedToggle = synchronizedDom.querySelector( + ".wire-next__password-toggle", + ) as HTMLButtonElement; + + expect(synchronizedInputs).toHaveLength(2); + expect(synchronizedInputs[0].pattern).toBe( + "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", + ); + expect(synchronizedInputs[1].pattern).toBe(".{12,}"); + expect(synchronizedInputs.map((input) => input.type)).toEqual(["password", "password"]); + synchronizedToggle.click(); + expect(synchronizedInputs.map((input) => input.type)).toEqual(["text", "text"]); + + const checkboxHtml = await renderComponent(source, { + name: "checkboxPassword", + toggleMode: "checkbox", + }); + const checkboxDom = mountHtml(checkboxHtml); + const checkbox = checkboxDom.querySelector( + ".wire-next__password-checkbox input", + ) as HTMLInputElement; + const checkboxPassword = checkboxDom.querySelector( + ".wire-next__password-control > input", + ) as HTMLInputElement; + checkbox.checked = true; + checkbox.dispatchEvent( + new (checkboxDom.window as { Event: typeof Event }).Event("change", { bubbles: true }), + ); + + expect(checkboxPassword.type).toBe("text"); +}); diff --git a/packages/ui/ui.css b/packages/ui/ui.css index c57b35ad..c8077cd7 100644 --- a/packages/ui/ui.css +++ b/packages/ui/ui.css @@ -15,6 +15,57 @@ display: none !important; } +/* + * Universal component configuration. Every canonical component exposes + * `color` and `size`, while theme, mode, and font flow through inherited + * design tokens configured at the application root. + */ +.wire-next { + --wire-component-color: var(--wire-color-primary); + --wire-component-scale: 1; + font-family: inherit; +} +.wire-next--color-primary { + --wire-component-color: var(--wire-color-primary); +} +.wire-next--color-secondary { + --wire-component-color: var(--wire-color-secondary); +} +.wire-next--color-success { + --wire-component-color: var(--wire-color-success); +} +.wire-next--color-warning { + --wire-component-color: var(--wire-color-warning); +} +.wire-next--color-danger { + --wire-component-color: var(--wire-color-danger); +} +.wire-next--color-info { + --wire-component-color: var(--wire-color-info); +} +.wire-next--size-xs { + --wire-component-scale: 0.78; +} +.wire-next--size-sm { + --wire-component-scale: 0.88; +} +.wire-next--size-default, +.wire-next--size-md { + --wire-component-scale: 1; +} +.wire-next--size-lg { + --wire-component-scale: 1.14; +} +.wire-next--size-xl { + --wire-component-scale: 1.28; +} +.wire-next:not(.wire-btn) { + font-size: calc(1em * var(--wire-component-scale)); +} +.wire-next :is(a, button, input, select, textarea):focus-visible { + outline-color: var(--wire-component-color); +} + /* --- Layout --------------------------------------------------------------- */ .wire-container { width: 100%; @@ -107,20 +158,29 @@ } /* --- Button --------------------------------------------------------------- */ +.wire-action { + position: relative; + display: inline-flex; +} .wire-btn { + position: relative; + --wire-btn-color: var(--wire-color-primary); + --wire-btn-contrast: var(--wire-color-primary-contrast); + display: inline-flex; align-items: center; justify-content: center; - gap: 0.4rem; + gap: 0.5rem; font: inherit; + font-size: 0.875rem; font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--wire-radius-sm); - padding: 0.55rem 0.9rem; + padding: 0 0.75rem; cursor: pointer; text-decoration: none; - min-height: 44px; + min-height: 2rem; transition: color var(--wire-motion-base) var(--wire-ease-standard), border-color var(--wire-motion-base) var(--wire-ease-standard), @@ -136,45 +196,108 @@ outline-offset: 2px; } -.wire-btn--default { - background: var(--wire-color-surface-2); - color: var(--wire-color-text); - border-color: var(--wire-color-border); +.wire-btn--color-primary { + --wire-btn-color: var(--wire-color-primary); + --wire-btn-contrast: var(--wire-color-primary-contrast); } +.wire-btn--color-secondary { + --wire-btn-color: var(--wire-color-muted); + --wire-btn-contrast: var(--wire-color-bg); +} +.wire-btn--color-success { + --wire-btn-color: var(--wire-color-success); + --wire-btn-contrast: var(--wire-color-primary-contrast); +} +.wire-btn--color-warning { + --wire-btn-color: var(--wire-color-warning); + --wire-btn-contrast: var(--wire-color-bg); +} +.wire-btn--color-danger { + --wire-btn-color: var(--wire-color-danger); + --wire-btn-contrast: var(--wire-color-primary-contrast); +} +.wire-btn--color-info { + --wire-btn-color: var(--wire-color-info); + --wire-btn-contrast: var(--wire-color-primary-contrast); +} +.wire-btn--variant-default, +.wire-btn--default, .wire-btn--primary { - background: var(--wire-color-primary); - color: var(--wire-color-primary-contrast); - box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 20%, transparent); + color: var(--wire-btn-contrast); + background: var(--wire-btn-color); + box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent); } +.wire-btn--variant-default:hover, +.wire-btn--default:hover, .wire-btn--primary:hover { - background: var(--wire-color-primary-hover); + background: color-mix(in srgb, var(--wire-btn-color) 84%, black); transform: translateY(-2px); - box-shadow: 0 1rem 2rem color-mix(in srgb, var(--wire-color-primary) 28%, transparent); + box-shadow: 0 1rem 2rem color-mix(in srgb, var(--wire-btn-color) 28%, transparent); } -.wire-btn--danger { - background: var(--wire-color-danger); - color: #fff; +.wire-btn--variant-outline, +.wire-btn--outline { + color: var(--wire-btn-color); + background: transparent; + border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border)); } +.wire-btn--variant-outline:hover, +.wire-btn--outline:hover { + background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent); + border-color: var(--wire-btn-color); +} +.wire-btn--variant-destructive, +.wire-btn--danger, +.wire-btn--destructive { + color: var(--wire-btn-color); + background: color-mix(in srgb, var(--wire-btn-color) 12%, transparent); + border-color: color-mix(in srgb, var(--wire-btn-color) 28%, transparent); +} +.wire-btn--danger, +.wire-btn--destructive { + --wire-btn-color: var(--wire-color-danger); +} +.wire-btn--variant-destructive:hover, +.wire-btn--danger:hover, +.wire-btn--destructive:hover { + background: color-mix(in srgb, var(--wire-btn-color) 20%, transparent); +} +.wire-btn--variant-ghost, .wire-btn--ghost { background: transparent; - color: var(--wire-color-text); - border-color: var(--wire-color-border); + color: var(--wire-btn-color); } +.wire-btn--variant-ghost:hover, .wire-btn--ghost:hover { - background: var(--wire-color-surface-2); + background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent); } +.wire-btn--variant-secondary, .wire-btn--secondary { color: var(--wire-color-text); - background: var(--wire-color-surface); - border-color: var(--wire-color-border); + background: color-mix(in srgb, var(--wire-btn-color) 10%, var(--wire-color-surface)); + border-color: color-mix(in srgb, var(--wire-btn-color) 24%, var(--wire-color-border)); box-shadow: var(--wire-shadow-1); } +.wire-btn--variant-secondary:hover, .wire-btn--secondary:hover { - color: var(--wire-color-primary); - border-color: color-mix(in srgb, var(--wire-color-primary) 55%, var(--wire-color-border)); - background: var(--wire-color-surface-2); + color: var(--wire-btn-color); + border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border)); + background: color-mix(in srgb, var(--wire-btn-color) 15%, var(--wire-color-surface)); transform: translateY(-2px); } +.wire-btn--variant-link, +.wire-btn--link { + min-height: auto; + padding: 0; + color: var(--wire-btn-color); + background: transparent; + border-color: transparent; + border-radius: 0; + text-underline-offset: 0.22em; +} +.wire-btn--variant-link:hover, +.wire-btn--link:hover { + text-decoration: underline; +} .wire-btn:disabled, .wire-btn[aria-busy="true"] { cursor: not-allowed; @@ -183,17 +306,120 @@ box-shadow: none; } +.wire-btn--size-xs, +.wire-btn--xs { + min-height: 1.5rem; + padding-inline: 0.5rem; + gap: 0.25rem; + font-size: 0.75rem; +} +.wire-btn--size-sm, .wire-btn--sm { - padding: 0.35rem 0.6rem; - font-size: 0.85rem; + min-height: 1.75rem; + padding-inline: 0.625rem; + gap: 0.25rem; + font-size: 0.8rem; } +.wire-btn--size-default, .wire-btn--md { - padding: 0.55rem 0.9rem; + min-height: 2rem; + padding-inline: 0.75rem; + font-size: 0.875rem; } +.wire-btn--size-lg, .wire-btn--lg { + min-height: 2.25rem; + padding-inline: 0.875rem; + font-size: 0.925rem; +} +.wire-btn--size-icon, +.wire-btn--size-icon-xs, +.wire-btn--size-icon-sm, +.wire-btn--size-icon-lg, +.wire-btn--icon, +.wire-btn--icon-xs, +.wire-btn--icon-sm, +.wire-btn--icon-lg { + flex: none; + padding: 0; +} +.wire-btn--size-icon, +.wire-btn--icon { + width: 2rem; + height: 2rem; +} +.wire-btn--size-icon-xs, +.wire-btn--icon-xs { + width: 1.5rem; + min-height: 1.5rem; +} +.wire-btn--size-icon-sm, +.wire-btn--icon-sm { + width: 1.75rem; + min-height: 1.75rem; +} +.wire-btn--size-icon-lg, +.wire-btn--icon-lg { + width: 2.25rem; + min-height: 2.25rem; +} +.wire-btn--pill { + border-radius: 999px; +} +.wire-btn--with-description { min-height: 3.5rem; - padding: 0.8rem 1.25rem; - font-size: 1rem; + justify-content: flex-start; + padding: 0.6rem 0.875rem; + text-align: left; +} +.wire-btn__icon { + width: 1rem; + height: 1rem; + flex: none; +} +.wire-btn__copy { + display: grid; + min-width: 0; + gap: 0.15rem; +} +.wire-btn__label { + font-weight: 650; +} +.wire-btn__description { + color: currentColor; + font-size: 0.75rem; + font-weight: 450; + line-height: 1.35; + opacity: 0.74; +} +.wire-btn__tooltip { + position: absolute; + z-index: 80; + inset-block-end: calc(100% + 0.5rem); + inset-inline-start: 50%; + width: max-content; + max-width: min(16rem, calc(100vw - 2rem)); + padding: 0.4rem 0.6rem; + color: var(--wire-color-bg); + background: var(--wire-color-text); + border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border)); + border-radius: var(--wire-radius-sm); + box-shadow: var(--wire-shadow-2); + font-size: 0.75rem; + font-weight: 600; + line-height: 1.25; + text-align: center; + pointer-events: none; + opacity: 0; + transform: translate(-50%, 0.25rem); + transition: + opacity var(--wire-motion-fast) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); +} +.wire-btn:hover > .wire-btn__tooltip, +.wire-btn:focus-visible > .wire-btn__tooltip { + opacity: 1; + transform: translate(-50%, 0); } /* --- Inputs --------------------------------------------------------------- */ @@ -1520,6 +1746,1141 @@ } } +/* --- Screenshot-directed canonical component set ------------------------- */ +.wire-next { + margin: 0; + color: var(--wire-color-text); + font-family: var(--wrn-font-sans, inherit); +} + +.wire-next--rounded, +.wire-next--image img { + border-radius: var(--wire-radius-md); +} + +.wire-next--container { + width: min(100%, 72rem); + margin-inline: auto; +} + +.wire-next--columns, +.wire-next--grid { + display: grid; + grid-template-columns: repeat(var(--wire-next-columns, 2), minmax(0, 1fr)); +} + +.wire-next--columns-1 { + --wire-next-columns: 1; +} +.wire-next--columns-2 { + --wire-next-columns: 2; +} +.wire-next--columns-3 { + --wire-next-columns: 3; +} +.wire-next--columns-4 { + --wire-next-columns: 4; +} +.wire-next--gap-sm { + gap: 0.5rem; +} +.wire-next--gap-md { + gap: 1rem; +} +.wire-next--gap-lg { + gap: 1.5rem; +} + +.wire-next--layout-splitter { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); +} + +.wire-next--custom-scrollbar { + max-height: 24rem; + overflow: auto; + scrollbar-color: var(--wire-color-primary) transparent; + scrollbar-width: thin; +} + +.wire-next--link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + color: var(--wire-color-primary); + text-underline-offset: 0.2em; +} + +.wire-next--divider { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--wire-color-muted); +} +.wire-next--divider::before, +.wire-next--divider::after { + height: 1px; + flex: 1; + background: var(--wire-color-border); + content: ""; +} +.wire-next--divider-vertical { + width: 1px; + min-height: 4rem; + background: var(--wire-color-border); +} + +.wire-next--kbd { + display: inline-flex; + min-width: 1.8rem; + justify-content: center; + padding: 0.25rem 0.45rem; + border: 1px solid var(--wire-color-border); + border-bottom-width: 2px; + border-radius: 0.4rem; + background: var(--wire-color-surface-2); + font-size: 0.75rem; +} + +.wire-next--accordion, +.wire-next--collapse, +.wire-next--card, +.wire-next--alert, +.wire-next--toast, +.wire-next--chat-bubble, +.wire-next--blockquote, +.wire-next--device-frame, +.wire-next--tree-view, +.wire-next--timeline, +.wire-next--carousel, +.wire-next--list, +.wire-next--list-group, +.wire-next--legend-indicator, +.wire-next--rating, +.wire-next--styled-icon, +.wire-next--confetti, +.wire-next--data-map, +.wire-next--chart, +.wire-next--map, +.wire-next--drag-and-drop, +.wire-next--file-upload, +.wire-next--toast-notifications, +.wire-next--clipboard, +.wire-next--copy-markup, +.wire-next--toggle-count { + display: grid; + gap: 0.75rem; + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.wire-next p { + margin: 0; + color: var(--wire-color-muted); + line-height: 1.6; +} + +.wire-next__items { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.wire-next__items > span, +.wire-next--badge { + padding: 0.3rem 0.55rem; + border-radius: 999px; + background: var(--wire-color-surface-2); + font-size: 0.75rem; +} + +.wire-next details { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); +} +.wire-next summary { + padding: 0.75rem; + cursor: pointer; + font-weight: 700; +} +.wire-next details > div { + padding: 0 0.75rem 0.75rem; + color: var(--wire-color-muted); +} + +.wire-next__row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} +.wire-next progress { + width: 100%; + accent-color: var(--wire-color-primary); +} + +.wire-next--pin-input { + display: grid; + width: 100%; + min-width: 0; + gap: 0.65rem; + padding: 0; + border: 0; + color: var(--wire-color-text); +} + +.wire-next__pin-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.wire-next__pin-heading legend { + padding: 0; + font-size: 0.82em; + font-weight: 700; +} + +.wire-next__pin-clear { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0; + border: 0; + color: var(--wire-component-color); + background: transparent; + font: inherit; + font-size: 0.7em; + font-weight: 750; + cursor: pointer; +} + +.wire-next__pin-clear > span:first-child { + width: 0.9rem; + height: 0.9rem; +} + +.wire-next__pin-cells { + display: flex; + max-width: 100%; + align-items: center; + gap: clamp(0.35rem, 1.5vw, 0.65rem); + overflow-x: auto; + padding: 0.2rem; + scrollbar-width: thin; +} + +.wire-next--pin-input .wire-next__pin-cells input { + flex: 0 0 clamp(2.4rem, 8vw, 3.25rem); + width: clamp(2.4rem, 8vw, 3.25rem); + height: clamp(2.75rem, 9vw, 3.5rem); + min-width: clamp(2.4rem, 8vw, 3.25rem); + padding: 0; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: clamp(1rem, 3vw, 1.25rem); + font-weight: 750; + text-align: center; + caret-color: var(--wire-component-color); + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); +} + +.wire-next--pin-input .wire-next__pin-cells input::placeholder { + color: var(--wire-color-muted); + opacity: 0.45; +} + +.wire-next--pin-input .wire-next__pin-cells input:focus-visible { + border-color: var(--wire-component-color); + outline: 0; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); + transform: translateY(-1px); +} + +.wire-next--pin-input .wire-next__pin-cells input:disabled, +.wire-next--pin-input .wire-next__pin-cells input:read-only { + cursor: not-allowed; + opacity: 0.55; +} + +.wire-next__pin-separator { + color: var(--wire-color-muted); + font-size: 1.1rem; + font-weight: 800; +} + +.wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input { + border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border)); + background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg)); +} + +.wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input, +.wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input { + border-color: var(--wire-color-danger); +} + +@media (max-width: 480px) { + .wire-next__pin-cells { + gap: 0.3rem; + } + + .wire-next--pin-input .wire-next__pin-cells input { + flex-basis: min(2.7rem, 12vw); + width: min(2.7rem, 12vw); + min-width: min(2.7rem, 12vw); + height: min(3rem, 14vw); + } +} + +.wire-next--spinner i { + display: block; + width: 1.5rem; + height: 1.5rem; + border: 2px solid var(--wire-color-border); + border-top-color: var(--wire-color-primary); + border-radius: 50%; + animation: wire-spin 700ms linear infinite; +} +.wire-next--skeleton { + display: grid; + width: min(100%, 24rem); + gap: 0.55rem; +} +.wire-next--skeleton span { + height: 0.8rem; + border-radius: 999px; + background: linear-gradient( + 90deg, + var(--wire-color-surface-2), + var(--wire-color-border), + var(--wire-color-surface-2) + ); + background-size: 200% 100%; + animation: wire-shimmer 1.4s infinite; +} + +.wire-next--navbar, +.wire-next--mega-menu, +.wire-next--nav, +.wire-next--tabs, +.wire-next--sidebar, +.wire-next--scrollspy, +.wire-next--breadcrumb, +.wire-next--pagination, +.wire-next--stepper { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; +} +.wire-next--vertical { + flex-direction: column; +} +.wire-next nav a, +.wire-next--navbar a, +.wire-next--mega-menu a, +.wire-next--nav a, +.wire-next--tabs a, +.wire-next--sidebar a, +.wire-next--scrollspy a, +.wire-next--breadcrumb a, +.wire-next--pagination a, +.wire-next--stepper a { + padding: 0.5rem 0.7rem; + border-radius: 0.5rem; + color: var(--wire-color-muted); + text-decoration: none; +} +.wire-next a[aria-current="page"] { + color: var(--wire-color-text); + background: var(--wire-color-surface-2); +} + +.wire-next--field { + display: grid; + width: min(100%, 28rem); + gap: 0.4rem; + font-size: 0.78rem; + font-weight: 700; +} +.wire-next--field :where(input, textarea, select) { + width: 100%; + min-height: 2.65rem; + padding: 0.6rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.6rem; + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-weight: 500; +} +.wire-next--field :where(input, textarea, select):focus-visible { + border-color: var(--wire-color-primary); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent); +} +.wire-next--field textarea { + resize: vertical; +} + +.wire-next--toggle-password { + display: grid; + width: min(100%, 28rem); + min-width: 0; + gap: 0.45rem; + padding: 0; + border: 0; +} + +.wire-next--toggle-password > label { + color: var(--wire-color-text); + font-size: 0.82em; + font-weight: 750; +} + +.wire-next__password-fields { + display: grid; + gap: 1rem; +} + +.wire-next__password-field { + display: grid; + gap: 0.45rem; +} + +.wire-next__password-field > label { + color: var(--wire-color-text); + font-size: 0.82em; + font-weight: 750; +} + +.wire-next__password-control { + position: relative; + display: flex; + min-width: 0; + align-items: center; +} + +.wire-next__password-control > input { + width: 100%; + min-width: 0; + min-height: 2.75em; + padding: 0.65em 3em 0.65em 0.8em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard); +} + +.wire-next__password-control > input:focus-visible { + border-color: var(--wire-component-color); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); +} + +.wire-next__password-toggle { + position: absolute; + top: 50%; + right: 0.45em; + display: grid; + width: 2em; + height: 2em; + padding: 0; + place-items: center; + border: 0; + border-radius: calc(var(--wire-radius-sm) * 0.72); + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; + transform: translateY(-50%); +} + +.wire-next__password-toggle:hover, +.wire-next__password-toggle:focus-visible { + color: var(--wire-component-color); + background: color-mix(in srgb, var(--wire-component-color) 10%, transparent); + outline: 0; +} + +.wire-next__password-icon { + display: block; + width: 1.05em; + height: 1.05em; + background: currentColor; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; +} + +.wire-next__password-icon--show { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); +} + +.wire-next__password-toggle[aria-pressed="true"]::after { + position: absolute; + width: 1.25em; + height: 0.12em; + border-radius: 999px; + background: currentColor; + content: ""; + transform: rotate(45deg); + box-shadow: 0 0 0 1px var(--wire-color-bg); +} + +.wire-next__password-checkbox { + display: inline-flex; + width: fit-content; + align-items: center; + gap: 0.55rem; + color: var(--wire-color-muted); + font-size: 0.78em; + cursor: pointer; +} + +.wire-next__password-checkbox > input { + width: 1rem; + height: 1rem; + margin: 0; + accent-color: var(--wire-component-color); +} + +.wire-next--toggle-password > small { + color: var(--wire-color-muted); + font-size: 0.72em; +} + +.wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input, +.wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input { + border-color: var(--wire-color-danger); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent); +} + +.wire-next--strong-password { + position: relative; + display: grid; + width: 100%; + gap: 0.6rem; + color: var(--wire-color-text); +} + +.wire-next--strong-password > label { + font-size: 0.82em; + font-weight: 700; +} + +.wire-next__strong-password-anchor { + position: relative; +} + +.wire-next--strong-password input { + width: 100%; + min-height: 2.75em; + padding: 0.68em 0.85em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font: inherit; + transition: + border-color 160ms ease, + box-shadow 160ms ease; +} + +.wire-next--strong-password input:focus-visible { + border-color: var(--wire-component-color); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 16%, transparent); +} + +.wire-next--strong-password.wire-next--invalid input, +.wire-next--strong-password input.wire-invalid { + border-color: var(--wire-color-danger); +} + +.wire-next__strong-password-details { + display: grid; + gap: 0.65rem; +} + +.wire-next__strong-password-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + color: var(--wire-color-muted); + font-size: 0.75em; +} + +.wire-next__strong-password-summary strong { + color: var(--wire-color-text); +} + +.wire-next__strong-password-meter { + width: 100%; + height: 0.42rem; + overflow: hidden; + border-radius: 999px; + background: color-mix(in srgb, var(--wire-color-border) 72%, transparent); +} + +.wire-next__strong-password-meter > span { + display: block; + width: 0; + height: 100%; + border-radius: inherit; + background: var(--wire-color-danger); + transition: + width 180ms ease, + background-color 180ms ease; +} + +.wire-next--strong-password[data-strength="fair"] .wire-next__strong-password-meter > span { + background: var(--wire-color-warning); +} + +.wire-next--strong-password[data-strength="good"] .wire-next__strong-password-meter > span { + background: var(--wire-component-color); +} + +.wire-next--strong-password[data-strength="strong"] .wire-next__strong-password-meter > span { + background: var(--wire-color-success); +} + +.wire-next__strong-password-requirements { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.45rem 1rem; + margin: 0; + padding: 0; + list-style: none; +} + +.wire-next__strong-password-requirements li { + display: flex; + min-width: 0; + align-items: flex-start; + gap: 0.45rem; + color: var(--wire-color-muted); + font-size: 0.72em; + line-height: 1.45; +} + +.wire-next__strong-password-requirements li > span { + width: 0.9rem; + height: 0.9rem; + flex: 0 0 auto; + margin-top: 0.08rem; + border: 1px solid currentColor; + border-radius: 50%; +} + +.wire-next__strong-password-requirements li[data-met="true"] { + color: var(--wire-color-success); +} + +.wire-next__strong-password-requirements li[data-met="true"] > span { + border-color: var(--wire-color-success); + background: + linear-gradient(135deg, transparent 42%, var(--wire-color-surface) 42% 52%, transparent 52%) + 0.05rem 0.07rem / 0.52rem 0.52rem no-repeat, + var(--wire-color-success); +} + +.wire-next__strong-password-details > small { + color: var(--wire-color-muted); + font-size: 0.7em; + line-height: 1.5; +} + +.wire-next__strong-password-popover { + position: absolute; + top: calc(100% + 0.7rem); + left: 0; + z-index: 30; + width: min(28rem, calc(100vw - 2rem)); + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + opacity: 0; + visibility: hidden; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-2); + transform: translateY(-0.35rem); + transition: + opacity 140ms ease, + transform 140ms ease, + visibility 140ms ease; +} + +.wire-next__strong-password-popover[data-open="true"] { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.wire-next__strong-password-popover-arrow { + position: absolute; + top: -0.38rem; + left: 1.25rem; + width: 0.7rem; + height: 0.7rem; + border-top: 1px solid var(--wire-color-border); + border-left: 1px solid var(--wire-color-border); + background: var(--wire-color-surface); + transform: rotate(45deg); +} + +@media (max-width: 560px) { + .wire-next__strong-password-requirements { + grid-template-columns: 1fr; + } +} + +.wire-next--advanced-select { + position: relative; + display: grid; + width: 100%; + gap: 0.55rem; + padding: 0; + border: 0; + background: transparent; + box-shadow: none; +} +.wire-next--advanced-select > label:first-child, +.wire-next--advanced-select .wire-next__row > label { + color: var(--wire-color-text); + font-size: 0.82em; + font-weight: 700; +} +.wire-next--advanced-select .wire-next__row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} +.wire-next--advanced-select small { + color: var(--wire-color-muted); + font-size: 0.72em; +} +.wire-next__select-search { + position: relative; + display: block; +} +.wire-next__select-search input, +.wire-next--advanced-select select { + width: 100%; + min-height: 2.6em; + padding: 0.62em 0.75em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-surface); + font: inherit; +} +.wire-next__select-search input { + padding-left: 2.25em; +} +.wire-next__search-icon { + position: absolute; + top: 50%; + left: 0.75em; + z-index: 1; + color: var(--wire-component-color); + transform: translateY(-50%); +} +.wire-next--advanced-select select:focus-visible, +.wire-next__select-search input:focus-visible { + border-color: var(--wire-component-color); + outline: 2px solid color-mix(in srgb, var(--wire-component-color) 24%, transparent); + outline-offset: 1px; +} +.wire-next--advanced-select select[multiple] { + min-height: 8rem; +} +.wire-next__select-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} +.wire-next__select-tags > span { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.3rem 0.55rem; + border-radius: 999px; + color: var(--wire-component-color); + background: color-mix(in srgb, var(--wire-component-color) 12%, transparent); + font-size: 0.75em; + font-weight: 700; +} +.wire-next__select-tags img { + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + object-fit: cover; +} +.wire-next__color-dot { + width: 0.65rem; + height: 0.65rem; + border-radius: 50%; + background: var(--option-color); +} +.wire-next__clear-select, +.wire-next__create-option, +.wire-next__load-more { + width: fit-content; + padding: 0; + border: 0; + color: var(--wire-component-color); + background: transparent; + font: inherit; + font-size: 0.75em; + font-weight: 700; + cursor: pointer; +} +.wire-next--invalid :is(input, select) { + border-color: var(--wire-color-danger); +} +.wire-next__validation { + color: var(--wire-color-danger) !important; +} +.wire-next__validation:empty { + display: none; +} +.wire-next--advanced-select:has(input.wire-invalid) .wire-next__select-trigger { + border-color: var(--wire-color-danger); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 16%, transparent); +} +.wire-next--advanced-select-fixed select { + box-shadow: var(--wire-shadow-1); +} +.wire-next__select-control { + position: relative; +} +.wire-next__combobox-control > .wire-next__search-icon { + width: 1rem; + height: 1rem; + pointer-events: none; +} +.wire-next__combobox-toggle { + position: absolute; + top: 50%; + right: 0; + z-index: 1; + display: grid; + width: 2.25em; + height: 100%; + padding: 0; + place-items: center; + border: 0; + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; + transform: translateY(-50%); +} +.wire-next__combobox-toggle .wire-next__select-chevron { + position: static; + transform: none; +} +.wire-next--combobox .wire-next__clear-select { + right: 2.4em; +} +.wire-next__select-trigger { + display: flex; + width: 100%; + min-height: 2.75em; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + padding: 0.55em 2.75em 0.55em 0.8em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + text-align: left; + cursor: pointer; + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard); +} +.wire-next--combobox .wire-next__combobox-input { + padding-right: 5.25em; + padding-left: 2.5em; + cursor: text; +} +.wire-next--open .wire-next__select-trigger, +.wire-next__select-trigger:focus-visible { + border-color: var(--wire-component-color); + outline: 0; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); +} +.wire-next__select-value { + display: flex; + min-width: 0; + align-items: center; + gap: 0.55em; +} +.wire-next__placeholder { + overflow: hidden; + color: var(--wire-color-muted); + text-overflow: ellipsis; + white-space: nowrap; +} +.wire-next__select-chevron { + position: absolute; + top: 50%; + right: 0.9em; + color: var(--wire-color-muted); + pointer-events: none; + transform: translateY(-54%); +} +.wire-next__clear-select { + position: absolute; + top: 50%; + right: 2.15em; + z-index: 2; + display: grid; + width: 1.4em; + height: 1.4em; + padding: 0; + place-items: center; + border-radius: 50%; + transform: translateY(-50%); +} +.wire-next__clear-select:hover { + background: var(--wire-color-surface-2); +} +.wire-next__select-dropdown { + position: absolute; + top: calc(100% + 0.4rem); + left: 0; + z-index: 80; + display: grid; + width: 100%; + min-width: min(20rem, 92vw); + gap: 0.45rem; + padding: 0.5rem; + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); + box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 18%); +} +.wire-next[data-placement="top"] .wire-next__select-dropdown { + top: auto; + bottom: calc(100% + 0.4rem); +} +.wire-next__select-dropdown--fixed { + position: fixed; + top: auto; +} +.wire-next__select-list { + display: grid; + max-height: 18rem; + gap: 0.15rem; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; +} +.wire-next__option-group { + display: grid; + gap: 0.15rem; +} +.wire-next__group-label { + padding: 0.55rem 0.7rem 0.3rem; + color: var(--wire-component-color); + font-size: 0.68em; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} +.wire-next__select-option { + position: relative; + display: grid; + width: 100%; + grid-template-columns: minmax(0, 1fr); + align-items: center; + gap: 0.65rem; + padding: 0.58rem 2.5rem 0.58rem 0.7rem; + border: 0; + border-radius: calc(var(--wire-radius-sm) * 0.72); + color: var(--wire-color-text); + background: transparent; + font: inherit; + text-align: left; + cursor: pointer; +} +.wire-next__select-option:has(> img), +.wire-next__select-option:has(> i:not(.wire-next__check)) { + grid-template-columns: auto minmax(0, 1fr); +} +.wire-next__select-option > span { + display: grid; + min-width: 0; + gap: 0.12rem; +} +.wire-next__select-option strong { + overflow: hidden; + font-size: 0.82em; + font-weight: 650; + text-overflow: ellipsis; + white-space: nowrap; +} +.wire-next__select-option small { + overflow: hidden; + font-size: 0.68em; + text-overflow: ellipsis; + white-space: nowrap; +} +.wire-next__select-option img, +.wire-next__selected-avatar { + width: 1.65rem; + height: 1.65rem; + border-radius: 50%; + object-fit: cover; +} +.wire-next__select-option--active { + background: var(--wire-color-surface-2); +} +.wire-next__select-option--selected { + color: var(--wire-component-color); +} +.wire-next__select-option:disabled { + opacity: 0.45; + cursor: not-allowed; +} +.wire-next__check { + position: absolute; + top: 50%; + right: 0.8rem; + width: 1rem; + height: 1rem; + color: var(--wire-component-color); + transform: translateY(-50%); +} +.wire-next__select-message { + display: flex; + min-height: 4rem; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem; + color: var(--wire-color-muted); + font-size: 0.78em; + text-align: center; +} +.wire-next__create-option, +.wire-next__load-more { + width: 100%; + padding: 0.65rem; + border-top: 1px solid var(--wire-color-border); + text-align: left; +} +.wire-next--disabled { + opacity: 0.62; +} +.wire-next__select-trigger .wire-next__select-tags { + flex-wrap: nowrap; + overflow: hidden; +} +@media (max-width: 640px) { + .wire-next__select-dropdown { + min-width: 100%; + } +} + +.wire-next--choice { + display: inline-flex; + align-items: center; + gap: 0.55rem; + cursor: pointer; +} +.wire-next--choice input { + width: 1.1rem; + height: 1.1rem; + accent-color: var(--wire-color-primary); +} + +.wire-next--modal, +.wire-next--drawer, +.wire-next--dropdown, +.wire-next--context-menu, +.wire-next--popover, +.wire-next--tooltip { + width: min(100%, 28rem); + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-3); +} +.wire-next--modal > header, +.wire-next--drawer > header, +.wire-next--dropdown > header, +.wire-next--context-menu > header, +.wire-next--popover > header, +.wire-next--tooltip > header { + display: flex; + align-items: center; + justify-content: space-between; +} +.wire-next > header button { + border: 0; + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; +} + +.wire-next--table { + width: 100%; + overflow: auto; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); +} +.wire-next--table table { + width: 100%; + border-collapse: collapse; +} +.wire-next--table caption, +.wire-next--table th, +.wire-next--table td { + padding: 0.75rem; + border-bottom: 1px solid var(--wire-color-border); + text-align: left; +} +.wire-next--table caption, +.wire-next--table th { + font-weight: 800; +} + +@keyframes wire-shimmer { + to { + background-position: -200% 0; + } +} + +@media (max-width: 768px) { + .wire-next--columns, + .wire-next--grid, + .wire-next--layout-splitter { + grid-template-columns: 1fr; + } +} + [data-component] :where(button, .wire-btn, [role="button"]):not(:disabled):active { transform: translateY(0) scale(0.98); transition-duration: var(--wire-motion-fast); diff --git a/packages/uploader/package.json b/packages/uploader/package.json index 8a4a038f..8cca4d33 100644 --- a/packages/uploader/package.json +++ b/packages/uploader/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/uploader", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/validation/package.json b/packages/validation/package.json index 5dd47eb0..5e8b7deb 100644 --- a/packages/validation/package.json +++ b/packages/validation/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/validation", - "version": "0.3.4", + "version": "0.3.5", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/validation/src/runtime.ts b/packages/validation/src/runtime.ts index ba043d16..ce65a114 100644 --- a/packages/validation/src/runtime.ts +++ b/packages/validation/src/runtime.ts @@ -150,6 +150,10 @@ export const VALIDATE_RUNTIME = String.raw` var name = form.getAttribute("data-schema"); var schema = (window.__wireSchemas || {})[name]; if (!schema) return; + // Schema-backed forms use WRNexus messages instead of the browser's + // non-themeable native validation bubbles. + form.noValidate = true; + form.setAttribute("novalidate", ""); form.addEventListener("submit", function (e) { e.preventDefault(); if (validateForm(form, schema) > 0) return; // client-invalid: stay put, errors shown diff --git a/packages/validation/test/validation.test.ts b/packages/validation/test/validation.test.ts index 792386ff..c6bd018f 100644 --- a/packages/validation/test/validation.test.ts +++ b/packages/validation/test/validation.test.ts @@ -68,8 +68,11 @@ test("browser validation displays the serialized custom required message", () => (0, eval)(VALIDATE_RUNTIME); const runtime = win.__wireValidate as { init(root: Document): void }; runtime.init(win.document as unknown as Document); + const form = win.document.querySelector("form")!; win.document.querySelector("input")!.dispatchEvent(new win.Event("blur", { bubbles: true })); + expect(form.noValidate).toBe(true); + expect(form.hasAttribute("novalidate")).toBe(true); expect(win.document.querySelector("[data-error=email]")!.textContent).toBe( "Enter your email or username", ); diff --git a/scripts/generate-ui-component-reference.mjs b/scripts/generate-ui-component-reference.mjs index b59e6767..22aea48d 100644 --- a/scripts/generate-ui-component-reference.mjs +++ b/scripts/generate-ui-component-reference.mjs @@ -53,9 +53,21 @@ const components = readdirSync(componentsDir) const slots = [...source.matchAll(/ match[1] ?? "default", ); - const events = [ - ...new Set([...source.matchAll(/@([A-Za-z][A-Za-z0-9_-]*)=/g)].map((match) => match[1])), + const declaredEvents = [ + ...new Set( + [...source.matchAll(/@event\s+([A-Za-z][A-Za-z0-9_]*)\s*=\s*function/g)].map( + (match) => match[1], + ), + ), ]; + const events = + declaredEvents.length > 0 + ? declaredEvents + : (entry?.events ?? [ + ...new Set( + [...source.matchAll(/@([A-Za-z][A-Za-z0-9_-]*)=/g)].map((match) => match[1]), + ), + ]); return { name, mount: name, diff --git a/scripts/publish-packages.ts b/scripts/publish-packages.ts index 0f6abeda..c4872d5c 100644 --- a/scripts/publish-packages.ts +++ b/scripts/publish-packages.ts @@ -44,6 +44,7 @@ const ASSETS: Record = { "components", "ui.css", "component-catalog.json", + "component-migrations.json", "component-reference.json", "COMPONENTS.md", ], diff --git a/scripts/reset-ui-components.mjs b/scripts/reset-ui-components.mjs new file mode 100644 index 00000000..c07096c6 --- /dev/null +++ b/scripts/reset-ui-components.mjs @@ -0,0 +1,448 @@ +import { readFileSync, readdirSync, unlinkSync, writeFileSync } from "node:fs"; +import { join } from "node:path"; +import process from "node:process"; + +const root = join(import.meta.dirname, ".."); +const uiRoot = join(root, "packages", "ui"); +const componentsDir = join(uiRoot, "components"); +const preservedButton = readFileSync(join(componentsDir, "Button.wrn"), "utf8"); +const preservedAdvancedSelect = readFileSync(join(componentsDir, "AdvancedSelect.wrn"), "utf8"); + +const groups = { + layout: [ + "Container", + "Columns", + "Grid", + "LayoutSplitter", + "Typography", + "Image", + "Link", + "Divider", + "Kbd", + "CustomScrollbar", + ], + base: [ + "Accordion", + "Alert", + "Avatar", + "AvatarGroup", + "Badge", + "Blockquote", + "Button", + "ButtonGroup", + "Card", + "ChatBubble", + "Carousel", + "Collapse", + "DatePicker", + "DeviceFrame", + "List", + "ListGroup", + "LegendIndicator", + "Progress", + "FileUploadProgress", + "Rating", + "Skeleton", + "Spinner", + "StyledIcon", + "Toast", + "Timeline", + "TreeView", + "Marquee", + ], + navigation: [ + "Navbar", + "MegaMenu", + "Nav", + "Tabs", + "Sidebar", + "Scrollspy", + "Breadcrumb", + "Pagination", + "Stepper", + ], + forms: [ + "Input", + "InputGroup", + "Textarea", + "FileInput", + "Checkbox", + "Radio", + "Switch", + "Select", + "RangeSlider", + "ColorPicker", + "TimePicker", + ], + "advanced-forms": [ + "AdvancedSelect", + "Combobox", + "SearchBox", + "InputNumber", + "StrongPassword", + "TogglePassword", + "ToggleCount", + "CopyMarkup", + "PinInput", + ], + overlays: ["Dropdown", "ContextMenu", "Modal", "Drawer", "Popover", "Tooltip"], + tables: ["Table"], + integrations: [ + "AdvancedRangeSlider", + "AdvancedDatePicker", + "Chart", + "Clipboard", + "Confetti", + "DataMap", + "DataTable", + "DragAndDrop", + "FileUpload", + "Map", + "ToastNotifications", + "WysiwygEditor", + ], +}; + +const displayName = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1 $2"); +const kebab = (name) => displayName(name).replace(/\s+/g, "-").toLowerCase(); + +function layoutComponent(name) { + if (name === "Image") + return `component Image { + props { + src = "" + alt = "" + width = "" + height = "" + loading = "lazy" + rounded = false + class = "" + } + view { +
    + {alt} + +
    + } +} +`; + if (name === "Link") + return `component Link { + props { + label = "Link" + href = "#" + target = "" + rel = "" + external = false + class = "" + } + view { + {label}{#if external}{/if} + } +} +`; + if (name === "Divider") + return `component Divider { + props { + label = "" + orientation = "horizontal" + class = "" + } + view { + + } +} +`; + if (name === "Kbd") + return `component Kbd { + props { + label = "⌘ K" + class = "" + } + view { {label} } +} +`; + const tag = name === "Typography" ? "article" : "div"; + return `component ${name} { + props { + columns = 2 + gap = "md" + maxWidth = "xl" + class = "" + } + view { + <${tag} class="wire-next wire-next--${kebab(name)} wire-next--gap-{gap} wire-next--columns-{columns} wire-next--max-{maxWidth} {class}"> + } +} +`; +} + +function collectionComponent(name) { + if (name === "Accordion" || name === "Collapse") + return `component ${name} { + props { + items = [] + multiple = false + class = "" + } + view { +
    + {#each items as item}
    {item.label}
    {item.content}
    {/each} + +
    + } +} +`; + if (name === "Progress" || name === "FileUploadProgress") + return `component ${name} { + props { + label = "Progress" + value = 50 + max = 100 + showValue = true + class = "" + } + view { +
    +
    {label}{#if showValue}{value}%{/if}
    + +
    + } +} +`; + if (name === "Spinner" || name === "Skeleton") + return `component ${name} { + props { + label = "Loading" + size = "md" + lines = 3 + class = "" + } + view { +
    + {#if "${name}" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if} +
    + } +} +`; + return `component ${name} { + props { + title = "${displayName(name)}" + description = "" + items = [] + variant = "default" + class = "" + } + view { +
    + {#if title}{title}{/if} + {#if description}

    {description}

    {/if} + {#if items}
    {#each items as item}{item.label}{/each}
    {/if} + +
    + } +} +`; +} + +function navigationComponent(name) { + return `component ${name} { + props { + label = "${displayName(name)}" + items = [] + active = "" + orientation = "horizontal" + class = "" + } + view { + + } +} +`; +} + +function formComponent(name) { + const typeByName = { + Input: "text", + SearchBox: "search", + InputNumber: "number", + StrongPassword: "password", + TogglePassword: "password", + PinInput: "text", + DatePicker: "date", + AdvancedDatePicker: "date", + TimePicker: "time", + ColorPicker: "color", + RangeSlider: "range", + AdvancedRangeSlider: "range", + FileInput: "file", + }; + if (name === "Textarea" || name === "WysiwygEditor") + return `component ${name} { + props { + label = "${displayName(name)}" + name = "" + value = "" + placeholder = "" + rows = 5 + disabled = false + required = false + class = "" + } + view { + + } +} +`; + if (name === "Checkbox" || name === "Radio" || name === "Switch") + return `component ${name} { + props { + label = "${displayName(name)}" + name = "" + value = "on" + checked = false + disabled = false + class = "" + } + view { + + } +} +`; + if (name.includes("Select") || name === "Combobox") + return `component ${name} { + props { + label = "${displayName(name)}" + name = "" + value = "" + options = [] + placeholder = "Select an option" + multiple = false + disabled = false + class = "" + } + view { + + } +} +`; + const inputType = typeByName[name] ?? "text"; + return `component ${name} { + props { + label = "${displayName(name)}" + name = "" + value = "" + placeholder = "" + type = "${inputType}" + min = "" + max = "" + step = "" + disabled = false + required = false + class = "" + } + view { + + } +} +`; +} + +function overlayComponent(name) { + const modal = name === "Modal" || name === "Drawer"; + return `component ${name} { + props { + title = "${displayName(name)}" + description = "" + open = false + placement = "bottom" + closeLabel = "Close" + class = "" + } + view { +
    +
    {title}
    + {#if description}

    {description}

    {/if} + +
    + } +} +`; +} + +function dataComponent(name) { + if (name === "Table" || name === "DataTable") + return `component ${name} { + props { + caption = "${displayName(name)}" + columns = [] + rows = [] + striped = true + class = "" + } + view { +
    {#each columns as column}{/each}{#each rows as row}{#each columns as column}{/each}{/each}
    {caption}
    {column.label}
    {row[column.key]}
    + } +} +`; + return collectionComponent(name); +} + +function sourceFor(name, category) { + if (name === "Button") return preservedButton; + if (name === "AdvancedSelect") return preservedAdvancedSelect; + if (category === "layout") return layoutComponent(name); + if (category === "navigation") return navigationComponent(name); + if (category === "forms" || category === "advanced-forms") return formComponent(name); + if (category === "overlays") return overlayComponent(name); + if (category === "tables" || category === "integrations") return dataComponent(name); + if (name === "DatePicker") return formComponent(name); + return collectionComponent(name); +} + +function withUniversalDesignProps(source) { + let next = source; + if (!/^\s+color\s*=/m.test(next)) { + next = next.replace(/(\s+props\s*\{\r?\n)/, '$1 color = "primary"\n'); + } + if (!/^\s+size\s*=/m.test(next)) { + next = next.replace(/(\s+props\s*\{\r?\n)/, '$1 size = "default"\n'); + } + return next.replace( + /class="wire-next(?![^"]*wire-next--color-)/, + 'class="wire-next wire-next--color-{color} wire-next--size-{size}', + ); +} + +const entries = Object.entries(groups).flatMap(([category, names]) => + names.map((name) => ({ + name, + category, + purpose: `Theme-aware, responsive ${displayName(name).toLowerCase()} component.`, + })), +); + +for (const file of readdirSync(componentsDir)) { + if (file.endsWith(".wrn")) unlinkSync(join(componentsDir, file)); +} +for (const entry of entries) { + writeFileSync( + join(componentsDir, `${entry.name}.wrn`), + withUniversalDesignProps(sourceFor(entry.name, entry.category)), + "utf8", + ); +} + +writeFileSync( + join(uiRoot, "component-catalog.json"), + `${JSON.stringify({ sourceDocuments: ["Screenshot-directed WRNexus UI catalog reset"], components: entries }, null, 2)}\n`, +); +writeFileSync( + join(uiRoot, "component-migrations.json"), + `${JSON.stringify({ generatedFrom: "full component catalog reset", removedCount: 0, replacements: {} }, null, 2)}\n`, +); + +process.stdout.write(`Reset @wrnexus/ui to ${entries.length} canonical components.\n`); diff --git a/update-package-versions.mjs b/update-package-versions.mjs index 0fe2b9fa..6720068e 100644 --- a/update-package-versions.mjs +++ b/update-package-versions.mjs @@ -1,7 +1,7 @@ import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs"; import { join } from "node:path"; -const version = "0.3.4"; +const version = "0.3.5"; const dependencyGroups = [ "dependencies",