From 45f28208712be4a04cd4ec9022eaac47fd7749e1 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Sun, 19 Jul 2026 23:21:33 +0530 Subject: [PATCH] docs(ui): publish complete component catalog --- app/docs.test.ts | 32 + app/pages/404.wrn | 4 +- app/pages/access.wrn | 4 +- app/pages/architecture.wrn | 4 +- app/pages/benchmarks.wrn | 4 +- app/pages/changelog.wrn | 4 +- app/pages/components.wrn | 923 ++ .../components/accept-all-cookies-button.wrn | 32 + app/pages/components/accessible-accordion.wrn | 34 + app/pages/components/accessible-carousel.wrn | 34 + .../components/accessible-chart-summary.wrn | 34 + app/pages/components/accessible-dialog.wrn | 31 + .../components/accessible-error-summary.wrn | 34 + app/pages/components/accessible-icon.wrn | 34 + app/pages/components/accessible-menu.wrn | 31 + app/pages/components/accessible-tabs.wrn | 34 + app/pages/components/accessible-tooltip.wrn | 34 + app/pages/components/accordion.wrn | 52 + app/pages/components/account-menu.wrn | 31 + .../components/account-status-banner.wrn | 32 + app/pages/components/action-menu.wrn | 31 + app/pages/components/active-filter-list.wrn | 31 + app/pages/components/activity-list.wrn | 31 + app/pages/components/add-on-card.wrn | 34 + app/pages/components/address-input.wrn | 37 + app/pages/components/address-preview.wrn | 34 + .../components/advanced-filter-builder.wrn | 34 + app/pages/components/alert-dialog.wrn | 31 + app/pages/components/alert.wrn | 64 + app/pages/components/amount-input.wrn | 37 + .../analytics-dashboard-preview.wrn | 34 + app/pages/components/anchor-navigation.wrn | 31 + app/pages/components/announcement-bar.wrn | 110 + app/pages/components/apartment-input.wrn | 37 + .../components/api-authentication-notice.wrn | 32 + app/pages/components/api-endpoint-card.wrn | 55 + app/pages/components/api-error-example.wrn | 34 + app/pages/components/api-header-table.wrn | 31 + .../components/api-key-create-dialog.wrn | 31 + app/pages/components/api-key-display.wrn | 34 + app/pages/components/api-key-input.wrn | 37 + app/pages/components/api-method-badge.wrn | 32 + app/pages/components/api-parameter-table.wrn | 31 + .../components/api-rate-limit-notice.wrn | 32 + app/pages/components/api-request-example.wrn | 34 + app/pages/components/api-response-example.wrn | 34 + app/pages/components/api-schema-table.wrn | 31 + app/pages/components/api-schema-viewer.wrn | 34 + app/pages/components/api-version-badge.wrn | 32 + app/pages/components/app-header.wrn | 31 + app/pages/components/architecture-section.wrn | 31 + app/pages/components/area-chart.wrn | 32 + app/pages/components/article-hero.wrn | 31 + app/pages/components/article-layout.wrn | 31 + .../components/article-newsletter-cta.wrn | 32 + app/pages/components/article-page-shell.wrn | 31 + .../components/article-share-actions.wrn | 32 + app/pages/components/aspect-ratio.wrn | 27 + app/pages/components/asset-card.wrn | 30 + app/pages/components/attachment-picker.wrn | 37 + app/pages/components/attachment-upload.wrn | 34 + app/pages/components/audio-upload.wrn | 34 + app/pages/components/audit-log-preview.wrn | 34 + app/pages/components/audit-table.wrn | 31 + .../components/authenticator-code-input.wrn | 37 + app/pages/components/author-avatar.wrn | 34 + app/pages/components/author-card.wrn | 34 + .../authorized-application-card.wrn | 34 + app/pages/components/auto-grid.wrn | 27 + .../components/automation-example-card.wrn | 34 + .../components/availability-calendar.wrn | 34 + app/pages/components/avatar-group.wrn | 37 + app/pages/components/avatar-upload.wrn | 34 + app/pages/components/avatar.wrn | 33 + app/pages/components/back-button.wrn | 30 + app/pages/components/back-to-top.wrn | 115 + app/pages/components/badge.wrn | 31 + .../components/bank-transfer-details.wrn | 34 + app/pages/components/banner.wrn | 33 + app/pages/components/bar-chart.wrn | 32 + app/pages/components/beta-badge.wrn | 29 + app/pages/components/billing-address-form.wrn | 34 + app/pages/components/billing-example.wrn | 34 + .../components/billing-period-toggle.wrn | 37 + app/pages/components/blackout-date-picker.wrn | 37 + app/pages/components/blog-card.wrn | 34 + app/pages/components/blog-grid.wrn | 31 + app/pages/components/blog-list.wrn | 31 + app/pages/components/blog-search.wrn | 34 + app/pages/components/body-text.wrn | 29 + app/pages/components/border-radius-picker.wrn | 37 + app/pages/components/bottom-navigation.wrn | 31 + app/pages/components/brand-color-picker.wrn | 37 + app/pages/components/brand-selector.wrn | 37 + app/pages/components/breadcrumbs.wrn | 126 + app/pages/components/browser-frame.wrn | 31 + app/pages/components/budget-range-slider.wrn | 34 + app/pages/components/budget-selector.wrn | 37 + .../components/business-hours-picker.wrn | 37 + app/pages/components/button-group.wrn | 37 + app/pages/components/button-selector.wrn | 37 + app/pages/components/button.wrn | 39 + app/pages/components/calendar-grid.wrn | 31 + app/pages/components/calendar-header.wrn | 31 + app/pages/components/calendar-navigation.wrn | 31 + app/pages/components/calendar.wrn | 34 + app/pages/components/callback-url-input.wrn | 37 + app/pages/components/campaign-card.wrn | 30 + .../campaign-performance-preview.wrn | 34 + app/pages/components/campaign-progress.wrn | 32 + app/pages/components/capability-grid.wrn | 31 + app/pages/components/captcha-field.wrn | 37 + app/pages/components/card-payment-form.wrn | 34 + app/pages/components/card-selector.wrn | 37 + app/pages/components/card-skeleton.wrn | 32 + app/pages/components/card.wrn | 32 + .../components/career-application-form.wrn | 34 + app/pages/components/career-benefits-grid.wrn | 31 + app/pages/components/carousel.wrn | 34 + app/pages/components/case-study-card.wrn | 34 + app/pages/components/case-study-hero.wrn | 31 + app/pages/components/case-study-preview.wrn | 34 + app/pages/components/centered-cta.wrn | 32 + app/pages/components/centered-hero.wrn | 31 + .../components/centered-section-header.wrn | 31 + app/pages/components/certificate-upload.wrn | 34 + app/pages/components/certification-badge.wrn | 32 + app/pages/components/challenge-section.wrn | 31 + app/pages/components/channel-badge.wrn | 32 + app/pages/components/channel-card.wrn | 30 + .../components/channel-comparison-chart.wrn | 32 + .../components/channel-comparison-table.wrn | 31 + .../components/channel-fallback-diagram.wrn | 32 + app/pages/components/channel-flow.wrn | 32 + app/pages/components/channel-icon.wrn | 34 + app/pages/components/channel-rate-table.wrn | 31 + app/pages/components/channel-selector.wrn | 37 + app/pages/components/character-counter.wrn | 32 + app/pages/components/chart-empty-state.wrn | 32 + app/pages/components/chart-tooltip.wrn | 34 + app/pages/components/checkbox-group.wrn | 37 + app/pages/components/checkbox.wrn | 35 + app/pages/components/checklist-progress.wrn | 32 + app/pages/components/checklist.wrn | 34 + app/pages/components/chip-input.wrn | 37 + app/pages/components/chip.wrn | 29 + app/pages/components/circular-progress.wrn | 32 + app/pages/components/city-selector.wrn | 37 + app/pages/components/clear-filters-button.wrn | 32 + app/pages/components/clickable-card.wrn | 30 + app/pages/components/close-button.wrn | 30 + app/pages/components/cluster.wrn | 30 + app/pages/components/code-block.wrn | 33 + app/pages/components/code-copy-button.wrn | 32 + app/pages/components/code-header.wrn | 31 + app/pages/components/code-input.wrn | 37 + app/pages/components/code-language-badge.wrn | 32 + app/pages/components/code-tabs.wrn | 34 + app/pages/components/code-text.wrn | 29 + app/pages/components/code.wrn | 34 + app/pages/components/cohort-chart.wrn | 32 + app/pages/components/color-grid.wrn | 31 + app/pages/components/color-hex-input.wrn | 37 + app/pages/components/color-picker.wrn | 37 + app/pages/components/color-selector.wrn | 37 + app/pages/components/color-swatch.wrn | 34 + app/pages/components/combobox.wrn | 36 + app/pages/components/coming-soon-badge.wrn | 29 + app/pages/components/coming-soon-state.wrn | 32 + app/pages/components/command-block.wrn | 34 + app/pages/components/command-menu.wrn | 31 + app/pages/components/command-search-input.wrn | 37 + app/pages/components/company-hero.wrn | 31 + app/pages/components/company-name-input.wrn | 37 + app/pages/components/company-page-shell.wrn | 31 + .../components/company-size-selector.wrn | 37 + .../comparison-date-range-picker.wrn | 37 + app/pages/components/comparison-table.wrn | 31 + app/pages/components/completion-meter.wrn | 32 + .../components/compliance-badge-list.wrn | 31 + .../components/compliance-program-card.wrn | 34 + .../components/confirm-password-input.wrn | 37 + app/pages/components/confirmation-dialog.wrn | 36 + .../components/connected-account-card.wrn | 34 + app/pages/components/connection-card.wrn | 30 + .../components/consent-timeline-preview.wrn | 34 + app/pages/components/contact-card.wrn | 30 + app/pages/components/contact-cta.wrn | 32 + app/pages/components/contact-form.wrn | 34 + app/pages/components/contact-hero.wrn | 31 + app/pages/components/contact-page-shell.wrn | 31 + app/pages/components/contact-sales-banner.wrn | 216 + app/pages/components/contact-sales-button.wrn | 32 + app/pages/components/contact-sales-form.wrn | 34 + app/pages/components/container.wrn | 30 + app/pages/components/context-menu.wrn | 31 + app/pages/components/context-switcher.wrn | 34 + app/pages/components/conversation-list.wrn | 31 + app/pages/components/conversation-preview.wrn | 34 + app/pages/components/conversion-chart.wrn | 32 + app/pages/components/cookie-banner.wrn | 33 + app/pages/components/cookie-category-list.wrn | 31 + .../components/cookie-category-toggle.wrn | 37 + app/pages/components/cookie-consent.wrn | 393 + app/pages/components/cookie-details-table.wrn | 31 + .../components/cookie-preferences-dialog.wrn | 38 + app/pages/components/cookie-table.wrn | 31 + app/pages/components/coordinates-input.wrn | 37 + app/pages/components/coordinates-picker.wrn | 37 + app/pages/components/copy-button.wrn | 30 + app/pages/components/copy-code-button.wrn | 32 + app/pages/components/copy-secret-field.wrn | 37 + app/pages/components/cost-breakdown-chart.wrn | 32 + app/pages/components/cost-summary.wrn | 34 + app/pages/components/counter.wrn | 29 + .../components/country-calling-code-input.wrn | 37 + .../country-calling-code-selector.wrn | 37 + app/pages/components/country-selector.wrn | 37 + app/pages/components/coupon-input.wrn | 37 + app/pages/components/credit-amount-input.wrn | 37 + app/pages/components/cron-builder.wrn | 34 + app/pages/components/cron-input.wrn | 37 + app/pages/components/csv-upload.wrn | 34 + app/pages/components/ctasection.wrn | 36 + app/pages/components/currency-input.wrn | 37 + app/pages/components/currency-selector.wrn | 37 + .../components/current-password-input.wrn | 37 + app/pages/components/customer-logo.wrn | 34 + app/pages/components/customer-story-card.wrn | 34 + app/pages/components/danger-button.wrn | 30 + app/pages/components/data-protection-card.wrn | 34 + app/pages/components/data-retention-table.wrn | 31 + app/pages/components/data-table.wrn | 34 + app/pages/components/date-input.wrn | 45 + app/pages/components/date-picker.wrn | 36 + app/pages/components/date-range-calendar.wrn | 34 + app/pages/components/date-range-picker.wrn | 32 + app/pages/components/date-range-slider.wrn | 34 + app/pages/components/date-time-input.wrn | 45 + app/pages/components/date-time-picker.wrn | 35 + .../components/date-time-range-picker.wrn | 37 + app/pages/components/decimal-input.wrn | 37 + app/pages/components/definition-list.wrn | 31 + .../components/delete-confirmation-dialog.wrn | 31 + app/pages/components/delivery-preview.wrn | 34 + .../components/delivery-status-chart.wrn | 32 + .../components/delivery-status-timeline.wrn | 32 + app/pages/components/demo-request-form.wrn | 34 + app/pages/components/department-input.wrn | 37 + .../components/deprecated-feature-alert.wrn | 32 + app/pages/components/description-list.wrn | 31 + app/pages/components/desktop-navigation.wrn | 29 + app/pages/components/developer-cta.wrn | 32 + app/pages/components/developer-hero.wrn | 31 + app/pages/components/developer-page-shell.wrn | 31 + app/pages/components/developer-search.wrn | 34 + app/pages/components/developers-mega-menu.wrn | 442 + app/pages/components/developers-menu.wrn | 31 + app/pages/components/device-card.wrn | 34 + app/pages/components/disclosure.wrn | 34 + app/pages/components/discount-input.wrn | 37 + app/pages/components/display-heading.wrn | 29 + app/pages/components/display-name-input.wrn | 37 + app/pages/components/divider.wrn | 29 + app/pages/components/do-not-sell-link.wrn | 32 + app/pages/components/document-preview.wrn | 34 + app/pages/components/document-upload.wrn | 34 + app/pages/components/domain-input.wrn | 37 + app/pages/components/donut-chart.wrn | 32 + app/pages/components/download-action.wrn | 32 + app/pages/components/download-button.wrn | 30 + app/pages/components/download-gate-form.wrn | 34 + .../components/download-policy-button.wrn | 32 + .../components/download-resource-form.wrn | 34 + app/pages/components/drawer.wrn | 33 + app/pages/components/dropdown-menu.wrn | 31 + app/pages/components/dropdown-navigation.wrn | 31 + app/pages/components/duration-input.wrn | 37 + app/pages/components/duration-picker.wrn | 37 + app/pages/components/duration-slider.wrn | 34 + app/pages/components/elevated-card.wrn | 30 + app/pages/components/email-body-editor.wrn | 37 + app/pages/components/email-composer.wrn | 34 + app/pages/components/email-input.wrn | 45 + app/pages/components/emoji-picker.wrn | 37 + app/pages/components/empty-state.wrn | 188 + app/pages/components/encryption-diagram.wrn | 32 + app/pages/components/enterprise-cta.wrn | 32 + app/pages/components/enterprise-hero.wrn | 31 + .../components/enterprise-pricing-card.wrn | 34 + app/pages/components/environment-selector.wrn | 37 + app/pages/components/environment-switcher.wrn | 34 + app/pages/components/error-actions.wrn | 32 + app/pages/components/error-card.wrn | 30 + app/pages/components/error-code.wrn | 34 + app/pages/components/error-hero.wrn | 31 + app/pages/components/error-illustration.wrn | 34 + app/pages/components/error-page-shell.wrn | 31 + app/pages/components/error-page.wrn | 34 + app/pages/components/error-state.wrn | 214 + app/pages/components/error-support-link.wrn | 32 + .../components/estimated-cost-summary.wrn | 34 + app/pages/components/event-table.wrn | 31 + app/pages/components/expandable-text.wrn | 34 + .../components/expiry-date-time-picker.wrn | 37 + app/pages/components/export-progress.wrn | 32 + app/pages/components/external-link.wrn | 32 + app/pages/components/eyebrow-text.wrn | 29 + app/pages/components/factor-card.wrn | 34 + .../components/fallback-route-builder.wrn | 34 + .../components/fallback-route-diagram.wrn | 32 + app/pages/components/faq.wrn | 34 + app/pages/components/faqaccordion.wrn | 256 + app/pages/components/favicon-upload.wrn | 34 + app/pages/components/fax-input.wrn | 37 + app/pages/components/feature-card.wrn | 33 + app/pages/components/feature-checklist.wrn | 34 + .../components/feature-comparison-table.wrn | 31 + .../components/feature-details-panel.wrn | 31 + app/pages/components/feature-grid.wrn | 30 + app/pages/components/feature-icon-card.wrn | 34 + app/pages/components/feature-list.wrn | 31 + app/pages/components/feature-tabs.wrn | 34 + app/pages/components/feature-timeline.wrn | 32 + .../components/feature-unavailable-state.wrn | 32 + app/pages/components/featured-blog-card.wrn | 34 + app/pages/components/field-actions.wrn | 32 + app/pages/components/file-input.wrn | 37 + app/pages/components/file-list.wrn | 31 + app/pages/components/file-size-input.wrn | 37 + app/pages/components/file-size-label.wrn | 34 + app/pages/components/file-type-badge.wrn | 32 + .../components/file-upload-primitive.wrn | 42 + app/pages/components/file-upload.wrn | 35 + app/pages/components/filter-bar.wrn | 30 + app/pages/components/filter-menu.wrn | 31 + app/pages/components/filter-search-input.wrn | 37 + app/pages/components/filterable-table.wrn | 31 + app/pages/components/final-cta.wrn | 32 + app/pages/components/first-name-input.wrn | 37 + app/pages/components/flex.wrn | 27 + app/pages/components/font-picker.wrn | 37 + app/pages/components/font-size-picker.wrn | 37 + app/pages/components/font-weight-picker.wrn | 37 + .../components/footer-language-switcher.wrn | 34 + .../components/footer-status-indicator.wrn | 32 + app/pages/components/forbidden-page.wrn | 34 + app/pages/components/forbidden-state.wrn | 32 + app/pages/components/forgot-password-form.wrn | 34 + app/pages/components/form-actions.wrn | 32 + app/pages/components/form-alert.wrn | 32 + app/pages/components/form-dialog.wrn | 31 + app/pages/components/form-error-summary.wrn | 31 + app/pages/components/form-error.wrn | 29 + app/pages/components/form-field.wrn | 33 + app/pages/components/form-grid.wrn | 31 + app/pages/components/form-group.wrn | 37 + app/pages/components/form-help-text.wrn | 29 + app/pages/components/form-label.wrn | 33 + app/pages/components/form-progress.wrn | 32 + app/pages/components/form-row.wrn | 31 + app/pages/components/form-section.wrn | 31 + app/pages/components/form.wrn | 33 + app/pages/components/full-bleed.wrn | 27 + app/pages/components/fullscreen-dialog.wrn | 31 + app/pages/components/funnel-chart.wrn | 32 + app/pages/components/geo-chart.wrn | 32 + app/pages/components/geofence-editor.wrn | 37 + app/pages/components/ghost-button.wrn | 30 + app/pages/components/glass-card.wrn | 30 + app/pages/components/global-search.wrn | 34 + app/pages/components/gradient-cta.wrn | 32 + app/pages/components/gradient-picker.wrn | 37 + app/pages/components/gradient-stop-editor.wrn | 37 + app/pages/components/grid.wrn | 30 + app/pages/components/guide-card.wrn | 34 + app/pages/components/guide-checklist.wrn | 34 + .../components/guide-difficulty-badge.wrn | 32 + app/pages/components/guide-grid.wrn | 31 + app/pages/components/guide-step.wrn | 34 + app/pages/components/header-actions.wrn | 32 + app/pages/components/header.wrn | 31 + app/pages/components/health-indicator.wrn | 29 + app/pages/components/hero-actions.wrn | 32 + app/pages/components/hero-code-panel.wrn | 31 + app/pages/components/hero-gradient-text.wrn | 34 + app/pages/components/hero-primary-action.wrn | 32 + app/pages/components/hero-product-preview.wrn | 34 + .../components/hero-secondary-action.wrn | 32 + app/pages/components/hero-trust-text.wrn | 34 + app/pages/components/hero.wrn | 38 + app/pages/components/hex-color-input.wrn | 37 + app/pages/components/hidden-field.wrn | 37 + app/pages/components/highlight-text.wrn | 34 + app/pages/components/holiday-calendar.wrn | 34 + app/pages/components/hostname-input.wrn | 37 + app/pages/components/hour-picker.wrn | 37 + app/pages/components/hsl-color-input.wrn | 37 + app/pages/components/hstack.wrn | 33 + app/pages/components/html-editor.wrn | 37 + app/pages/components/human-approval-step.wrn | 34 + app/pages/components/icon-button.wrn | 31 + app/pages/components/icon-picker.wrn | 37 + app/pages/components/icon-selector.wrn | 37 + app/pages/components/icon.wrn | 34 + app/pages/components/identifier-input.wrn | 37 + app/pages/components/illustration.wrn | 34 + .../components/image-compression-preview.wrn | 34 + app/pages/components/image-editor.wrn | 37 + app/pages/components/image-preview-dialog.wrn | 31 + app/pages/components/image-selector.wrn | 37 + app/pages/components/image-upload.wrn | 34 + app/pages/components/import-progress.wrn | 32 + app/pages/components/incident-alert.wrn | 32 + app/pages/components/incident-banner.wrn | 32 + app/pages/components/incident-card.wrn | 34 + app/pages/components/incident-list.wrn | 31 + .../components/incident-response-flow.wrn | 32 + .../components/incident-severity-badge.wrn | 32 + app/pages/components/incident-timeline.wrn | 32 + app/pages/components/industry-badge.wrn | 32 + app/pages/components/industry-selector.wrn | 37 + app/pages/components/info-card.wrn | 30 + app/pages/components/inline-alert.wrn | 32 + app/pages/components/inline-code.wrn | 29 + app/pages/components/inline.wrn | 30 + app/pages/components/input-group.wrn | 37 + app/pages/components/input.wrn | 34 + app/pages/components/inset-panel.wrn | 27 + app/pages/components/integer-input.wrn | 37 + app/pages/components/integration-card.wrn | 30 + app/pages/components/invoice-line-item.wrn | 34 + app/pages/components/invoice-summary.wrn | 34 + app/pages/components/ip-address-input.wrn | 37 + app/pages/components/job-card.wrn | 34 + app/pages/components/job-progress.wrn | 32 + app/pages/components/job-title-input.wrn | 37 + app/pages/components/json-input.wrn | 37 + app/pages/components/json-viewer.wrn | 34 + app/pages/components/key-value-table.wrn | 31 + app/pages/components/kyc-document-upload.wrn | 34 + app/pages/components/language-selector.wrn | 37 + app/pages/components/language-switcher.wrn | 34 + app/pages/components/last-name-input.wrn | 37 + app/pages/components/latency-metric.wrn | 32 + app/pages/components/latitude-input.wrn | 37 + app/pages/components/lead-text.wrn | 29 + app/pages/components/leadership-grid.wrn | 31 + .../components/legal-acceptance-notice.wrn | 32 + app/pages/components/legal-bullet-list.wrn | 31 + app/pages/components/legal-contact-block.wrn | 34 + .../components/legal-definition-list.wrn | 31 + .../components/legal-document-header.wrn | 31 + .../components/legal-document-layout.wrn | 32 + app/pages/components/legal-hero.wrn | 31 + .../components/legal-language-selector.wrn | 37 + app/pages/components/legal-notice.wrn | 32 + app/pages/components/legal-page-shell.wrn | 27 + app/pages/components/legal-print-button.wrn | 32 + .../components/legal-region-selector.wrn | 37 + app/pages/components/legal-section.wrn | 31 + app/pages/components/legal-summary.wrn | 34 + .../components/legal-table-of-contents.wrn | 29 + app/pages/components/legal-table.wrn | 31 + app/pages/components/legal-version-badge.wrn | 32 + .../components/letter-spacing-picker.wrn | 37 + app/pages/components/license-key-input.wrn | 37 + app/pages/components/lightbox.wrn | 31 + app/pages/components/line-chart.wrn | 32 + app/pages/components/line-height-picker.wrn | 37 + app/pages/components/link-button.wrn | 30 + app/pages/components/link.wrn | 32 + app/pages/components/list.wrn | 31 + app/pages/components/loading-button.wrn | 35 + app/pages/components/locale-selector.wrn | 37 + app/pages/components/localized-route-link.wrn | 32 + app/pages/components/location-picker.wrn | 37 + app/pages/components/log-table.wrn | 31 + app/pages/components/logo-cloud.wrn | 171 + app/pages/components/logo-upload.wrn | 34 + app/pages/components/logo.wrn | 34 + app/pages/components/logout-dialog.wrn | 31 + app/pages/components/longitude-input.wrn | 37 + app/pages/components/maintenance-alert.wrn | 32 + app/pages/components/maintenance-banner.wrn | 32 + app/pages/components/maintenance-card.wrn | 34 + app/pages/components/maintenance-page.wrn | 34 + app/pages/components/maintenance-state.wrn | 32 + .../components/maintenance-window-picker.wrn | 37 + app/pages/components/map-picker.wrn | 37 + app/pages/components/markdown-editor.wrn | 37 + app/pages/components/marketing-page-shell.wrn | 27 + .../components/marketing-section-header.wrn | 31 + app/pages/components/masked-secret-field.wrn | 37 + app/pages/components/mega-menu.wrn | 32 + app/pages/components/member-list.wrn | 31 + app/pages/components/mention-input.wrn | 37 + .../components/message-character-counter.wrn | 32 + .../components/message-composer-preview.wrn | 34 + app/pages/components/message-composer.wrn | 34 + app/pages/components/message-limit-input.wrn | 37 + app/pages/components/message-preview.wrn | 34 + .../components/message-volume-slider.wrn | 34 + app/pages/components/metric-card.wrn | 34 + app/pages/components/metric-grid.wrn | 29 + app/pages/components/metric-text.wrn | 29 + app/pages/components/metric.wrn | 32 + app/pages/components/minute-picker.wrn | 37 + app/pages/components/mission-section.wrn | 31 + app/pages/components/mobile-device-frame.wrn | 31 + app/pages/components/mobile-input.wrn | 37 + app/pages/components/mobile-menu-button.wrn | 32 + app/pages/components/mobile-navigation.wrn | 33 + app/pages/components/mobile-table-card.wrn | 34 + app/pages/components/modal.wrn | 35 + app/pages/components/month-picker.wrn | 37 + app/pages/components/month-year-picker.wrn | 37 + .../components/monthly-volume-selector.wrn | 37 + app/pages/components/multi-file-upload.wrn | 34 + app/pages/components/multi-select.wrn | 36 + app/pages/components/multiple-email-input.wrn | 37 + app/pages/components/muted-text.wrn | 29 + app/pages/components/name-input.wrn | 37 + app/pages/components/narrow-container.wrn | 27 + app/pages/components/navigation-item.wrn | 34 + app/pages/components/navigation-mega-menu.wrn | 31 + app/pages/components/navigation.wrn | 31 + app/pages/components/new-badge.wrn | 29 + app/pages/components/new-password-input.wrn | 37 + app/pages/components/newsletter-cta.wrn | 32 + app/pages/components/newsletter-form.wrn | 235 + app/pages/components/no-results-state.wrn | 32 + app/pages/components/not-found-page.wrn | 34 + app/pages/components/not-found-state.wrn | 32 + app/pages/components/notification-card.wrn | 30 + app/pages/components/notification-dot.wrn | 29 + app/pages/components/notification-list.wrn | 31 + app/pages/components/number-input.wrn | 45 + app/pages/components/office-card.wrn | 34 + app/pages/components/offline-page.wrn | 34 + app/pages/components/offline-state.wrn | 32 + app/pages/components/onboarding-progress.wrn | 32 + .../components/one-time-secret-display.wrn | 34 + app/pages/components/online-indicator.wrn | 29 + app/pages/components/opacity-slider.wrn | 34 + app/pages/components/open-apicta.wrn | 32 + app/pages/components/optional-indicator.wrn | 32 + .../components/organization-selector.wrn | 37 + app/pages/components/otp-input.wrn | 32 + .../components/otp-verification-form.wrn | 34 + app/pages/components/outlined-card.wrn | 30 + app/pages/components/page-alert.wrn | 32 + app/pages/components/page-header.wrn | 193 + app/pages/components/page-heading.wrn | 29 + app/pages/components/page-shell.wrn | 29 + app/pages/components/page-skeleton.wrn | 32 + app/pages/components/pagination.wrn | 208 + app/pages/components/panel.wrn | 27 + .../components/partner-application-form.wrn | 34 + app/pages/components/partner-logo-grid.wrn | 31 + app/pages/components/partner-program-card.wrn | 34 + app/pages/components/passkey-button.wrn | 32 + app/pages/components/password-input.wrn | 45 + .../components/password-requirement-list.wrn | 31 + .../components/password-strength-meter.wrn | 32 + .../components/password-visibility-toggle.wrn | 37 + app/pages/components/path-input.wrn | 37 + app/pages/components/payment-method-card.wrn | 34 + app/pages/components/pdf-preview.wrn | 34 + app/pages/components/percentage-input.wrn | 37 + app/pages/components/permission-selector.wrn | 37 + app/pages/components/phone-input.wrn | 45 + app/pages/components/pie-chart.wrn | 32 + app/pages/components/pill.wrn | 29 + app/pages/components/pin-input.wrn | 37 + app/pages/components/plain-text-editor.wrn | 37 + app/pages/components/plan-cta.wrn | 32 + app/pages/components/plan-feature-list.wrn | 31 + app/pages/components/plan-limit-list.wrn | 31 + app/pages/components/plan-selector.wrn | 37 + app/pages/components/platform-pillar-card.wrn | 34 + app/pages/components/policy-version-table.wrn | 31 + app/pages/components/popover.wrn | 31 + app/pages/components/port-input.wrn | 37 + app/pages/components/port-number-input.wrn | 37 + .../components/positive-number-input.wrn | 37 + app/pages/components/postal-code-input.wrn | 37 + app/pages/components/postman-cta.wrn | 32 + .../components/preset-date-range-picker.wrn | 37 + app/pages/components/press-release-card.wrn | 34 + app/pages/components/preview-badge.wrn | 29 + .../components/previous-next-navigation.wrn | 31 + app/pages/components/price-input.wrn | 37 + app/pages/components/price-range-slider.wrn | 34 + app/pages/components/price-text.wrn | 29 + app/pages/components/pricing-card.wrn | 34 + .../components/pricing-comparison-table.wrn | 30 + app/pages/components/pricing-contact-form.wrn | 34 + .../components/pricing-feature-group.wrn | 37 + app/pages/components/pricing-grid.wrn | 31 + app/pages/components/pricing-hero.wrn | 31 + app/pages/components/pricing-plan-card.wrn | 36 + app/pages/components/pricing-table.wrn | 31 + app/pages/components/pricing-toggle.wrn | 37 + app/pages/components/primary-button.wrn | 30 + app/pages/components/print-action.wrn | 32 + app/pages/components/print-policy-button.wrn | 32 + app/pages/components/priority-selector.wrn | 37 + app/pages/components/privacy-notice.wrn | 32 + .../product-architecture-diagram.wrn | 32 + app/pages/components/product-card.wrn | 33 + .../components/product-category-section.wrn | 31 + app/pages/components/product-cta.wrn | 32 + app/pages/components/product-feature-list.wrn | 31 + app/pages/components/product-grid.wrn | 31 + app/pages/components/product-hero.wrn | 31 + app/pages/components/product-icon.wrn | 34 + .../components/product-integration-list.wrn | 31 + app/pages/components/product-list.wrn | 31 + app/pages/components/product-logo.wrn | 34 + app/pages/components/product-mega-menu.wrn | 353 + app/pages/components/product-mini-card.wrn | 34 + .../components/product-navigation-card.wrn | 34 + app/pages/components/product-page-shell.wrn | 27 + app/pages/components/product-selector.wrn | 37 + app/pages/components/product-status-badge.wrn | 29 + .../components/product-use-case-list.wrn | 31 + app/pages/components/products-mega-menu.wrn | 29 + app/pages/components/progress-bar.wrn | 33 + app/pages/components/progress-chart.wrn | 32 + app/pages/components/progress-ring.wrn | 32 + app/pages/components/progress-slider.wrn | 34 + app/pages/components/progress.wrn | 32 + app/pages/components/project-card.wrn | 30 + app/pages/components/project-selector.wrn | 37 + app/pages/components/project-switcher.wrn | 34 + app/pages/components/promo-code-input.wrn | 37 + app/pages/components/prompt-dialog.wrn | 31 + app/pages/components/provider-selector.wrn | 37 + app/pages/components/public-footer.wrn | 629 + app/pages/components/public-header-logo.wrn | 34 + app/pages/components/public-header.wrn | 305 + .../components/public-mobile-navigation.wrn | 610 + app/pages/components/public-page-shell.wrn | 31 + app/pages/components/public-search.wrn | 146 + .../components/publish-date-time-picker.wrn | 37 + app/pages/components/push-composer.wrn | 34 + .../components/push-notification-editor.wrn | 37 + app/pages/components/qr-code.wrn | 34 + app/pages/components/quantity-input.wrn | 37 + app/pages/components/quantity-stepper.wrn | 34 + app/pages/components/quiet-hours-picker.wrn | 36 + app/pages/components/quote-text.wrn | 29 + app/pages/components/radio-group.wrn | 31 + app/pages/components/radio.wrn | 36 + app/pages/components/range-input.wrn | 37 + app/pages/components/range-slider.wrn | 34 + app/pages/components/rate-limit-input.wrn | 37 + app/pages/components/rate-limit-page.wrn | 34 + app/pages/components/rate-limited-state.wrn | 32 + app/pages/components/rate-table.wrn | 31 + app/pages/components/rating-slider.wrn | 34 + app/pages/components/recipient-selector.wrn | 37 + app/pages/components/recovery-code-form.wrn | 34 + app/pages/components/recovery-code-input.wrn | 37 + .../components/recurrence-rule-builder.wrn | 34 + .../components/recurring-schedule-picker.wrn | 34 + app/pages/components/redirect-uri-input.wrn | 37 + app/pages/components/reference-input.wrn | 37 + app/pages/components/regex-input.wrn | 37 + .../components/region-availability-table.wrn | 31 + app/pages/components/region-selector.wrn | 37 + .../components/region-unavailable-alert.wrn | 32 + .../components/region-unavailable-state.wrn | 32 + .../components/regional-privacy-banner.wrn | 32 + .../reject-optional-cookies-button.wrn | 32 + .../reopen-cookie-settings-button.wrn | 32 + app/pages/components/report-card.wrn | 34 + .../components/request-response-viewer.wrn | 34 + app/pages/components/request-viewer.wrn | 34 + app/pages/components/required-indicator.wrn | 32 + app/pages/components/reset-password-form.wrn | 34 + app/pages/components/resizable-panel.wrn | 31 + app/pages/components/resource-card.wrn | 34 + .../components/resource-download-card.wrn | 34 + app/pages/components/resource-page-shell.wrn | 31 + app/pages/components/resource-search.wrn | 34 + app/pages/components/resource-type-badge.wrn | 32 + app/pages/components/resources-mega-menu.wrn | 386 + app/pages/components/response-viewer.wrn | 34 + .../components/responsible-disclosure-cta.wrn | 32 + app/pages/components/responsive-table.wrn | 31 + app/pages/components/results-section.wrn | 31 + app/pages/components/retention-table.wrn | 31 + app/pages/components/retry-count-input.wrn | 37 + app/pages/components/revenue-chart.wrn | 32 + app/pages/components/rgb-color-input.wrn | 37 + app/pages/components/rich-text-editor.wrn | 37 + app/pages/components/rich-text-input.wrn | 37 + app/pages/components/role-selector.wrn | 37 + .../components/rolling-date-range-picker.wrn | 37 + .../save-cookie-preferences-button.wrn | 32 + .../components/saved-filter-selector.wrn | 37 + .../components/schedule-message-picker.wrn | 37 + app/pages/components/schedule-picker.wrn | 30 + .../components/scheduled-date-time-picker.wrn | 37 + app/pages/components/screenshot-frame.wrn | 31 + app/pages/components/scroll-area.wrn | 27 + .../components/sdk-language-selector.wrn | 37 + app/pages/components/sdkcard.wrn | 34 + app/pages/components/sdklanguage-tabs.wrn | 34 + app/pages/components/sdktabs.wrn | 31 + app/pages/components/search-button.wrn | 32 + app/pages/components/search-category-tabs.wrn | 34 + app/pages/components/search-dialog.wrn | 31 + app/pages/components/search-empty-state.wrn | 32 + app/pages/components/search-input.wrn | 45 + app/pages/components/search-loading-state.wrn | 32 + app/pages/components/search-result-item.wrn | 34 + app/pages/components/second-picker.wrn | 37 + app/pages/components/secondary-button.wrn | 30 + app/pages/components/secret-display.wrn | 34 + app/pages/components/secret-input.wrn | 37 + app/pages/components/secret-reveal-dialog.wrn | 31 + app/pages/components/section-actions.wrn | 32 + app/pages/components/section-header.wrn | 33 + app/pages/components/section-heading.wrn | 29 + app/pages/components/section.wrn | 32 + app/pages/components/security-alert.wrn | 32 + .../components/security-contact-card.wrn | 34 + .../components/security-feature-card.wrn | 34 + app/pages/components/security-hero.wrn | 31 + app/pages/components/security-pillar-grid.wrn | 31 + .../components/security-practice-list.wrn | 31 + app/pages/components/security-report-form.wrn | 34 + app/pages/components/select.wrn | 36 + app/pages/components/sender-id-input.wrn | 37 + app/pages/components/server-error-page.wrn | 34 + app/pages/components/service-level-table.wrn | 31 + app/pages/components/service-status-badge.wrn | 32 + app/pages/components/service-status-list.wrn | 31 + app/pages/components/service-status-row.wrn | 31 + app/pages/components/session-card.wrn | 34 + .../components/session-expired-dialog.wrn | 31 + app/pages/components/setup-checklist.wrn | 34 + app/pages/components/severity-selector.wrn | 37 + app/pages/components/shadow-picker.wrn | 37 + app/pages/components/share-action.wrn | 32 + app/pages/components/share-button.wrn | 30 + app/pages/components/side-panel.wrn | 31 + app/pages/components/sidebar-layout.wrn | 27 + app/pages/components/sign-in-form.wrn | 34 + app/pages/components/sign-in-link.wrn | 32 + app/pages/components/sign-up-form.wrn | 34 + app/pages/components/site-search.wrn | 34 + app/pages/components/skeleton.wrn | 31 + app/pages/components/skip-link.wrn | 32 + app/pages/components/sla-table.wrn | 31 + app/pages/components/slider.wrn | 34 + app/pages/components/slug-input.wrn | 37 + app/pages/components/small-text.wrn | 29 + app/pages/components/smart-route-diagram.wrn | 32 + app/pages/components/sms-composer.wrn | 34 + app/pages/components/sms-message-editor.wrn | 37 + app/pages/components/sms-segment-counter.wrn | 32 + app/pages/components/social-share.wrn | 164 + app/pages/components/solution-hero.wrn | 31 + app/pages/components/solution-page-shell.wrn | 31 + app/pages/components/solution-section.wrn | 31 + app/pages/components/solutions-mega-menu.wrn | 389 + app/pages/components/sortable-table.wrn | 31 + app/pages/components/spacer.wrn | 30 + app/pages/components/spinner.wrn | 31 + app/pages/components/split-button.wrn | 32 + app/pages/components/split-cta.wrn | 32 + app/pages/components/split-hero.wrn | 31 + app/pages/components/split-layout.wrn | 27 + app/pages/components/split-section-header.wrn | 31 + app/pages/components/stack.wrn | 30 + app/pages/components/start-free-button.wrn | 32 + app/pages/components/stat-card.wrn | 33 + app/pages/components/state-selector.wrn | 37 + app/pages/components/status-badge.wrn | 30 + app/pages/components/status-banner.wrn | 143 + app/pages/components/status-page-shell.wrn | 31 + app/pages/components/status-selector.wrn | 37 + .../components/status-subscribe-form.wrn | 34 + app/pages/components/status-table.wrn | 31 + app/pages/components/step-navigation.wrn | 31 + .../step-up-authentication-dialog.wrn | 31 + app/pages/components/stepper-input.wrn | 37 + app/pages/components/stepper.wrn | 34 + app/pages/components/sticker-picker.wrn | 37 + app/pages/components/sticky-layout.wrn | 27 + app/pages/components/sticky.wrn | 27 + app/pages/components/street-address-input.wrn | 37 + app/pages/components/subdomain-input.wrn | 37 + app/pages/components/subject-input.wrn | 37 + app/pages/components/subprocessor-table.wrn | 31 + app/pages/components/subsection-heading.wrn | 29 + app/pages/components/success-card.wrn | 30 + app/pages/components/success-state.wrn | 32 + app/pages/components/support-request-form.wrn | 34 + app/pages/components/surface.wrn | 27 + app/pages/components/switch.wrn | 36 + app/pages/components/table-header.wrn | 31 + app/pages/components/table-row.wrn | 31 + app/pages/components/table-skeleton.wrn | 32 + app/pages/components/table.wrn | 31 + app/pages/components/tabs.wrn | 31 + app/pages/components/tag-input.wrn | 37 + app/pages/components/tag.wrn | 32 + app/pages/components/tax-notice.wrn | 32 + app/pages/components/tax-rate-input.wrn | 37 + app/pages/components/team-member-card.wrn | 34 + app/pages/components/team-size-selector.wrn | 37 + app/pages/components/template-card.wrn | 30 + app/pages/components/template-selector.wrn | 37 + .../components/template-variable-input.wrn | 37 + .../components/tenant-isolation-diagram.wrn | 32 + app/pages/components/terminal-block.wrn | 34 + app/pages/components/tertiary-button.wrn | 30 + app/pages/components/test-message-dialog.wrn | 31 + app/pages/components/testimonial-card.wrn | 34 + app/pages/components/testimonial-carousel.wrn | 34 + app/pages/components/text-input.wrn | 45 + app/pages/components/text-link.wrn | 32 + app/pages/components/text-skeleton.wrn | 32 + app/pages/components/textarea.wrn | 39 + app/pages/components/theme-color-picker.wrn | 37 + app/pages/components/theme-switcher.wrn | 34 + app/pages/components/theme-toggle.wrn | 32 + app/pages/components/time-input.wrn | 45 + app/pages/components/time-picker.wrn | 36 + app/pages/components/time-range-picker.wrn | 37 + app/pages/components/timeline-chart.wrn | 32 + app/pages/components/timeline-item.wrn | 33 + app/pages/components/timeline.wrn | 30 + app/pages/components/timeout-input.wrn | 37 + .../components/timezone-aware-time-picker.wrn | 37 + app/pages/components/timezone-selector.wrn | 32 + app/pages/components/toast-action.wrn | 32 + app/pages/components/toast-host.wrn | 233 + app/pages/components/toast-icon.wrn | 34 + app/pages/components/toast-progress.wrn | 32 + app/pages/components/toast.wrn | 34 + app/pages/components/toggle-group.wrn | 37 + app/pages/components/toggle.wrn | 37 + app/pages/components/token-input.wrn | 37 + app/pages/components/tooltip.wrn | 31 + .../components/totp-verification-form.wrn | 34 + app/pages/components/translated-text.wrn | 34 + app/pages/components/tree-table.wrn | 31 + app/pages/components/trend-indicator.wrn | 32 + app/pages/components/truncated-text.wrn | 34 + app/pages/components/trust-badge-list.wrn | 31 + app/pages/components/typography.wrn | 32 + .../components/unavailable-region-state.wrn | 32 + .../components/unified-timeline-preview.wrn | 34 + .../components/unsaved-changes-dialog.wrn | 31 + app/pages/components/upload-item.wrn | 34 + app/pages/components/upload-preview.wrn | 34 + app/pages/components/upload-progress.wrn | 32 + app/pages/components/uptime-chart.wrn | 32 + app/pages/components/uptime-metric.wrn | 32 + app/pages/components/url-input.wrn | 45 + app/pages/components/usage-pricing-table.wrn | 31 + app/pages/components/use-case-selector.wrn | 37 + app/pages/components/user-card.wrn | 30 + app/pages/components/username-input.wrn | 37 + app/pages/components/value-card.wrn | 34 + app/pages/components/values-grid.wrn | 31 + .../components/verification-code-input.wrn | 37 + app/pages/components/verified-badge.wrn | 29 + app/pages/components/version-selector.wrn | 37 + app/pages/components/vertical-tabs.wrn | 34 + app/pages/components/video-card.wrn | 34 + app/pages/components/video-preview-dialog.wrn | 31 + app/pages/components/video-upload.wrn | 34 + app/pages/components/virtualized-table.wrn | 31 + app/pages/components/vision-section.wrn | 31 + app/pages/components/visually-hidden.wrn | 29 + .../components/voice-script-composer.wrn | 34 + app/pages/components/voice-script-editor.wrn | 37 + app/pages/components/volume-input.wrn | 37 + app/pages/components/volume-slider.wrn | 34 + app/pages/components/warning-card.wrn | 30 + app/pages/components/webhook-event-card.wrn | 34 + app/pages/components/webhook-flow-diagram.wrn | 32 + .../components/webhook-payload-viewer.wrn | 34 + app/pages/components/webhook-url-input.wrn | 37 + app/pages/components/webinar-card.wrn | 34 + .../components/webinar-registration-form.wrn | 34 + app/pages/components/well.wrn | 27 + app/pages/components/whats-app-composer.wrn | 34 + .../components/whats-app-number-input.wrn | 37 + .../components/whats-app-template-editor.wrn | 37 + app/pages/components/wide-container.wrn | 27 + app/pages/components/wizard-header.wrn | 31 + app/pages/components/wizard-navigation.wrn | 31 + app/pages/components/wizard.wrn | 34 + .../components/workflow-canvas-preview.wrn | 34 + app/pages/components/workflow-progress.wrn | 32 + app/pages/components/workspace-card.wrn | 30 + app/pages/components/workspace-selector.wrn | 37 + app/pages/components/workspace-switcher.wrn | 34 + app/pages/components/year-picker.wrn | 37 + app/pages/components/zoom-slider.wrn | 34 + app/pages/examples.wrn | 4 +- app/pages/getting-started.wrn | 4 +- app/pages/guides/api-routes.wrn | 4 +- app/pages/guides/authentication.wrn | 4 +- app/pages/guides/authorization.wrn | 4 +- .../guides/configuration-and-profiles.wrn | 4 +- app/pages/guides/database.wrn | 4 +- app/pages/guides/deployment.wrn | 4 +- app/pages/guides/forms-and-validation.wrn | 4 +- app/pages/guides/i18n-and-themes.wrn | 4 +- app/pages/guides/middleware.wrn | 4 +- app/pages/guides/mobile.wrn | 4 +- app/pages/guides/observability.wrn | 4 +- app/pages/guides/pages-and-components.wrn | 4 +- app/pages/guides/project-structure.wrn | 4 +- app/pages/guides/pubsub.wrn | 4 +- app/pages/guides/queues.wrn | 4 +- app/pages/guides/realtime.wrn | 4 +- app/pages/guides/routing.wrn | 4 +- app/pages/guides/security.wrn | 4 +- app/pages/guides/server-data.wrn | 4 +- app/pages/guides/testing.wrn | 4 +- app/pages/guides/troubleshooting.wrn | 4 +- app/pages/guides/upgrading.wrn | 4 +- app/pages/guides/uploads.wrn | 4 +- app/pages/guides/workspaces-and-gateway.wrn | 4 +- app/pages/index.wrn | 4 +- app/pages/language.wrn | 4 +- app/pages/license.wrn | 4 +- app/pages/packages.wrn | 4 +- app/pages/packages/ai.wrn | 13 +- app/pages/packages/authz.wrn | 13 +- app/pages/packages/cli.wrn | 13 +- app/pages/packages/compiler.wrn | 13 +- app/pages/packages/core.wrn | 13 +- app/pages/packages/csr.wrn | 13 +- app/pages/packages/db.wrn | 13 +- app/pages/packages/dev-server.wrn | 13 +- app/pages/packages/encryption.wrn | 13 +- app/pages/packages/helpers.wrn | 13 +- app/pages/packages/i18n.wrn | 13 +- app/pages/packages/jwt.wrn | 13 +- app/pages/packages/mobile.wrn | 13 +- app/pages/packages/native.wrn | 13 +- app/pages/packages/oauth.wrn | 13 +- app/pages/packages/pubsub.wrn | 13 +- app/pages/packages/queue.wrn | 13 +- app/pages/packages/reactive.wrn | 13 +- app/pages/packages/router.wrn | 13 +- app/pages/packages/ssr.wrn | 13 +- app/pages/packages/styles.wrn | 13 +- app/pages/packages/test.wrn | 13 +- app/pages/packages/tracking.wrn | 13 +- app/pages/packages/ui.wrn | 17 +- app/pages/packages/uploader.wrn | 13 +- app/pages/packages/validation.wrn | 13 +- app/pages/releases/0.2.64.wrn | 4 +- app/pages/roadmap.wrn | 4 +- app/pages/search.wrn | 6 +- app/pages/security.wrn | 4 +- app/pages/showcase.wrn | 4 +- app/pages/support.wrn | 4 +- app/pages/tutorial.wrn | 4 +- app/styles/global.css | 146 + public/llms.txt | 12622 ++++++++++++++++ scripts/generate-docs.ts | 108 +- scripts/generate-portal.ts | 20 +- 975 files changed, 49638 insertions(+), 294 deletions(-) create mode 100644 app/pages/components.wrn create mode 100644 app/pages/components/accept-all-cookies-button.wrn create mode 100644 app/pages/components/accessible-accordion.wrn create mode 100644 app/pages/components/accessible-carousel.wrn create mode 100644 app/pages/components/accessible-chart-summary.wrn create mode 100644 app/pages/components/accessible-dialog.wrn create mode 100644 app/pages/components/accessible-error-summary.wrn create mode 100644 app/pages/components/accessible-icon.wrn create mode 100644 app/pages/components/accessible-menu.wrn create mode 100644 app/pages/components/accessible-tabs.wrn create mode 100644 app/pages/components/accessible-tooltip.wrn create mode 100644 app/pages/components/accordion.wrn create mode 100644 app/pages/components/account-menu.wrn create mode 100644 app/pages/components/account-status-banner.wrn create mode 100644 app/pages/components/action-menu.wrn create mode 100644 app/pages/components/active-filter-list.wrn create mode 100644 app/pages/components/activity-list.wrn create mode 100644 app/pages/components/add-on-card.wrn create mode 100644 app/pages/components/address-input.wrn create mode 100644 app/pages/components/address-preview.wrn create mode 100644 app/pages/components/advanced-filter-builder.wrn create mode 100644 app/pages/components/alert-dialog.wrn create mode 100644 app/pages/components/alert.wrn create mode 100644 app/pages/components/amount-input.wrn create mode 100644 app/pages/components/analytics-dashboard-preview.wrn create mode 100644 app/pages/components/anchor-navigation.wrn create mode 100644 app/pages/components/announcement-bar.wrn create mode 100644 app/pages/components/apartment-input.wrn create mode 100644 app/pages/components/api-authentication-notice.wrn create mode 100644 app/pages/components/api-endpoint-card.wrn create mode 100644 app/pages/components/api-error-example.wrn create mode 100644 app/pages/components/api-header-table.wrn create mode 100644 app/pages/components/api-key-create-dialog.wrn create mode 100644 app/pages/components/api-key-display.wrn create mode 100644 app/pages/components/api-key-input.wrn create mode 100644 app/pages/components/api-method-badge.wrn create mode 100644 app/pages/components/api-parameter-table.wrn create mode 100644 app/pages/components/api-rate-limit-notice.wrn create mode 100644 app/pages/components/api-request-example.wrn create mode 100644 app/pages/components/api-response-example.wrn create mode 100644 app/pages/components/api-schema-table.wrn create mode 100644 app/pages/components/api-schema-viewer.wrn create mode 100644 app/pages/components/api-version-badge.wrn create mode 100644 app/pages/components/app-header.wrn create mode 100644 app/pages/components/architecture-section.wrn create mode 100644 app/pages/components/area-chart.wrn create mode 100644 app/pages/components/article-hero.wrn create mode 100644 app/pages/components/article-layout.wrn create mode 100644 app/pages/components/article-newsletter-cta.wrn create mode 100644 app/pages/components/article-page-shell.wrn create mode 100644 app/pages/components/article-share-actions.wrn create mode 100644 app/pages/components/aspect-ratio.wrn create mode 100644 app/pages/components/asset-card.wrn create mode 100644 app/pages/components/attachment-picker.wrn create mode 100644 app/pages/components/attachment-upload.wrn create mode 100644 app/pages/components/audio-upload.wrn create mode 100644 app/pages/components/audit-log-preview.wrn create mode 100644 app/pages/components/audit-table.wrn create mode 100644 app/pages/components/authenticator-code-input.wrn create mode 100644 app/pages/components/author-avatar.wrn create mode 100644 app/pages/components/author-card.wrn create mode 100644 app/pages/components/authorized-application-card.wrn create mode 100644 app/pages/components/auto-grid.wrn create mode 100644 app/pages/components/automation-example-card.wrn create mode 100644 app/pages/components/availability-calendar.wrn create mode 100644 app/pages/components/avatar-group.wrn create mode 100644 app/pages/components/avatar-upload.wrn create mode 100644 app/pages/components/avatar.wrn create mode 100644 app/pages/components/back-button.wrn create mode 100644 app/pages/components/back-to-top.wrn create mode 100644 app/pages/components/badge.wrn create mode 100644 app/pages/components/bank-transfer-details.wrn create mode 100644 app/pages/components/banner.wrn create mode 100644 app/pages/components/bar-chart.wrn create mode 100644 app/pages/components/beta-badge.wrn create mode 100644 app/pages/components/billing-address-form.wrn create mode 100644 app/pages/components/billing-example.wrn create mode 100644 app/pages/components/billing-period-toggle.wrn create mode 100644 app/pages/components/blackout-date-picker.wrn create mode 100644 app/pages/components/blog-card.wrn create mode 100644 app/pages/components/blog-grid.wrn create mode 100644 app/pages/components/blog-list.wrn create mode 100644 app/pages/components/blog-search.wrn create mode 100644 app/pages/components/body-text.wrn create mode 100644 app/pages/components/border-radius-picker.wrn create mode 100644 app/pages/components/bottom-navigation.wrn create mode 100644 app/pages/components/brand-color-picker.wrn create mode 100644 app/pages/components/brand-selector.wrn create mode 100644 app/pages/components/breadcrumbs.wrn create mode 100644 app/pages/components/browser-frame.wrn create mode 100644 app/pages/components/budget-range-slider.wrn create mode 100644 app/pages/components/budget-selector.wrn create mode 100644 app/pages/components/business-hours-picker.wrn create mode 100644 app/pages/components/button-group.wrn create mode 100644 app/pages/components/button-selector.wrn create mode 100644 app/pages/components/button.wrn create mode 100644 app/pages/components/calendar-grid.wrn create mode 100644 app/pages/components/calendar-header.wrn create mode 100644 app/pages/components/calendar-navigation.wrn create mode 100644 app/pages/components/calendar.wrn create mode 100644 app/pages/components/callback-url-input.wrn create mode 100644 app/pages/components/campaign-card.wrn create mode 100644 app/pages/components/campaign-performance-preview.wrn create mode 100644 app/pages/components/campaign-progress.wrn create mode 100644 app/pages/components/capability-grid.wrn create mode 100644 app/pages/components/captcha-field.wrn create mode 100644 app/pages/components/card-payment-form.wrn create mode 100644 app/pages/components/card-selector.wrn create mode 100644 app/pages/components/card-skeleton.wrn create mode 100644 app/pages/components/card.wrn create mode 100644 app/pages/components/career-application-form.wrn create mode 100644 app/pages/components/career-benefits-grid.wrn create mode 100644 app/pages/components/carousel.wrn create mode 100644 app/pages/components/case-study-card.wrn create mode 100644 app/pages/components/case-study-hero.wrn create mode 100644 app/pages/components/case-study-preview.wrn create mode 100644 app/pages/components/centered-cta.wrn create mode 100644 app/pages/components/centered-hero.wrn create mode 100644 app/pages/components/centered-section-header.wrn create mode 100644 app/pages/components/certificate-upload.wrn create mode 100644 app/pages/components/certification-badge.wrn create mode 100644 app/pages/components/challenge-section.wrn create mode 100644 app/pages/components/channel-badge.wrn create mode 100644 app/pages/components/channel-card.wrn create mode 100644 app/pages/components/channel-comparison-chart.wrn create mode 100644 app/pages/components/channel-comparison-table.wrn create mode 100644 app/pages/components/channel-fallback-diagram.wrn create mode 100644 app/pages/components/channel-flow.wrn create mode 100644 app/pages/components/channel-icon.wrn create mode 100644 app/pages/components/channel-rate-table.wrn create mode 100644 app/pages/components/channel-selector.wrn create mode 100644 app/pages/components/character-counter.wrn create mode 100644 app/pages/components/chart-empty-state.wrn create mode 100644 app/pages/components/chart-tooltip.wrn create mode 100644 app/pages/components/checkbox-group.wrn create mode 100644 app/pages/components/checkbox.wrn create mode 100644 app/pages/components/checklist-progress.wrn create mode 100644 app/pages/components/checklist.wrn create mode 100644 app/pages/components/chip-input.wrn create mode 100644 app/pages/components/chip.wrn create mode 100644 app/pages/components/circular-progress.wrn create mode 100644 app/pages/components/city-selector.wrn create mode 100644 app/pages/components/clear-filters-button.wrn create mode 100644 app/pages/components/clickable-card.wrn create mode 100644 app/pages/components/close-button.wrn create mode 100644 app/pages/components/cluster.wrn create mode 100644 app/pages/components/code-block.wrn create mode 100644 app/pages/components/code-copy-button.wrn create mode 100644 app/pages/components/code-header.wrn create mode 100644 app/pages/components/code-input.wrn create mode 100644 app/pages/components/code-language-badge.wrn create mode 100644 app/pages/components/code-tabs.wrn create mode 100644 app/pages/components/code-text.wrn create mode 100644 app/pages/components/code.wrn create mode 100644 app/pages/components/cohort-chart.wrn create mode 100644 app/pages/components/color-grid.wrn create mode 100644 app/pages/components/color-hex-input.wrn create mode 100644 app/pages/components/color-picker.wrn create mode 100644 app/pages/components/color-selector.wrn create mode 100644 app/pages/components/color-swatch.wrn create mode 100644 app/pages/components/combobox.wrn create mode 100644 app/pages/components/coming-soon-badge.wrn create mode 100644 app/pages/components/coming-soon-state.wrn create mode 100644 app/pages/components/command-block.wrn create mode 100644 app/pages/components/command-menu.wrn create mode 100644 app/pages/components/command-search-input.wrn create mode 100644 app/pages/components/company-hero.wrn create mode 100644 app/pages/components/company-name-input.wrn create mode 100644 app/pages/components/company-page-shell.wrn create mode 100644 app/pages/components/company-size-selector.wrn create mode 100644 app/pages/components/comparison-date-range-picker.wrn create mode 100644 app/pages/components/comparison-table.wrn create mode 100644 app/pages/components/completion-meter.wrn create mode 100644 app/pages/components/compliance-badge-list.wrn create mode 100644 app/pages/components/compliance-program-card.wrn create mode 100644 app/pages/components/confirm-password-input.wrn create mode 100644 app/pages/components/confirmation-dialog.wrn create mode 100644 app/pages/components/connected-account-card.wrn create mode 100644 app/pages/components/connection-card.wrn create mode 100644 app/pages/components/consent-timeline-preview.wrn create mode 100644 app/pages/components/contact-card.wrn create mode 100644 app/pages/components/contact-cta.wrn create mode 100644 app/pages/components/contact-form.wrn create mode 100644 app/pages/components/contact-hero.wrn create mode 100644 app/pages/components/contact-page-shell.wrn create mode 100644 app/pages/components/contact-sales-banner.wrn create mode 100644 app/pages/components/contact-sales-button.wrn create mode 100644 app/pages/components/contact-sales-form.wrn create mode 100644 app/pages/components/container.wrn create mode 100644 app/pages/components/context-menu.wrn create mode 100644 app/pages/components/context-switcher.wrn create mode 100644 app/pages/components/conversation-list.wrn create mode 100644 app/pages/components/conversation-preview.wrn create mode 100644 app/pages/components/conversion-chart.wrn create mode 100644 app/pages/components/cookie-banner.wrn create mode 100644 app/pages/components/cookie-category-list.wrn create mode 100644 app/pages/components/cookie-category-toggle.wrn create mode 100644 app/pages/components/cookie-consent.wrn create mode 100644 app/pages/components/cookie-details-table.wrn create mode 100644 app/pages/components/cookie-preferences-dialog.wrn create mode 100644 app/pages/components/cookie-table.wrn create mode 100644 app/pages/components/coordinates-input.wrn create mode 100644 app/pages/components/coordinates-picker.wrn create mode 100644 app/pages/components/copy-button.wrn create mode 100644 app/pages/components/copy-code-button.wrn create mode 100644 app/pages/components/copy-secret-field.wrn create mode 100644 app/pages/components/cost-breakdown-chart.wrn create mode 100644 app/pages/components/cost-summary.wrn create mode 100644 app/pages/components/counter.wrn create mode 100644 app/pages/components/country-calling-code-input.wrn create mode 100644 app/pages/components/country-calling-code-selector.wrn create mode 100644 app/pages/components/country-selector.wrn create mode 100644 app/pages/components/coupon-input.wrn create mode 100644 app/pages/components/credit-amount-input.wrn create mode 100644 app/pages/components/cron-builder.wrn create mode 100644 app/pages/components/cron-input.wrn create mode 100644 app/pages/components/csv-upload.wrn create mode 100644 app/pages/components/ctasection.wrn create mode 100644 app/pages/components/currency-input.wrn create mode 100644 app/pages/components/currency-selector.wrn create mode 100644 app/pages/components/current-password-input.wrn create mode 100644 app/pages/components/customer-logo.wrn create mode 100644 app/pages/components/customer-story-card.wrn create mode 100644 app/pages/components/danger-button.wrn create mode 100644 app/pages/components/data-protection-card.wrn create mode 100644 app/pages/components/data-retention-table.wrn create mode 100644 app/pages/components/data-table.wrn create mode 100644 app/pages/components/date-input.wrn create mode 100644 app/pages/components/date-picker.wrn create mode 100644 app/pages/components/date-range-calendar.wrn create mode 100644 app/pages/components/date-range-picker.wrn create mode 100644 app/pages/components/date-range-slider.wrn create mode 100644 app/pages/components/date-time-input.wrn create mode 100644 app/pages/components/date-time-picker.wrn create mode 100644 app/pages/components/date-time-range-picker.wrn create mode 100644 app/pages/components/decimal-input.wrn create mode 100644 app/pages/components/definition-list.wrn create mode 100644 app/pages/components/delete-confirmation-dialog.wrn create mode 100644 app/pages/components/delivery-preview.wrn create mode 100644 app/pages/components/delivery-status-chart.wrn create mode 100644 app/pages/components/delivery-status-timeline.wrn create mode 100644 app/pages/components/demo-request-form.wrn create mode 100644 app/pages/components/department-input.wrn create mode 100644 app/pages/components/deprecated-feature-alert.wrn create mode 100644 app/pages/components/description-list.wrn create mode 100644 app/pages/components/desktop-navigation.wrn create mode 100644 app/pages/components/developer-cta.wrn create mode 100644 app/pages/components/developer-hero.wrn create mode 100644 app/pages/components/developer-page-shell.wrn create mode 100644 app/pages/components/developer-search.wrn create mode 100644 app/pages/components/developers-mega-menu.wrn create mode 100644 app/pages/components/developers-menu.wrn create mode 100644 app/pages/components/device-card.wrn create mode 100644 app/pages/components/disclosure.wrn create mode 100644 app/pages/components/discount-input.wrn create mode 100644 app/pages/components/display-heading.wrn create mode 100644 app/pages/components/display-name-input.wrn create mode 100644 app/pages/components/divider.wrn create mode 100644 app/pages/components/do-not-sell-link.wrn create mode 100644 app/pages/components/document-preview.wrn create mode 100644 app/pages/components/document-upload.wrn create mode 100644 app/pages/components/domain-input.wrn create mode 100644 app/pages/components/donut-chart.wrn create mode 100644 app/pages/components/download-action.wrn create mode 100644 app/pages/components/download-button.wrn create mode 100644 app/pages/components/download-gate-form.wrn create mode 100644 app/pages/components/download-policy-button.wrn create mode 100644 app/pages/components/download-resource-form.wrn create mode 100644 app/pages/components/drawer.wrn create mode 100644 app/pages/components/dropdown-menu.wrn create mode 100644 app/pages/components/dropdown-navigation.wrn create mode 100644 app/pages/components/duration-input.wrn create mode 100644 app/pages/components/duration-picker.wrn create mode 100644 app/pages/components/duration-slider.wrn create mode 100644 app/pages/components/elevated-card.wrn create mode 100644 app/pages/components/email-body-editor.wrn create mode 100644 app/pages/components/email-composer.wrn create mode 100644 app/pages/components/email-input.wrn create mode 100644 app/pages/components/emoji-picker.wrn create mode 100644 app/pages/components/empty-state.wrn create mode 100644 app/pages/components/encryption-diagram.wrn create mode 100644 app/pages/components/enterprise-cta.wrn create mode 100644 app/pages/components/enterprise-hero.wrn create mode 100644 app/pages/components/enterprise-pricing-card.wrn create mode 100644 app/pages/components/environment-selector.wrn create mode 100644 app/pages/components/environment-switcher.wrn create mode 100644 app/pages/components/error-actions.wrn create mode 100644 app/pages/components/error-card.wrn create mode 100644 app/pages/components/error-code.wrn create mode 100644 app/pages/components/error-hero.wrn create mode 100644 app/pages/components/error-illustration.wrn create mode 100644 app/pages/components/error-page-shell.wrn create mode 100644 app/pages/components/error-page.wrn create mode 100644 app/pages/components/error-state.wrn create mode 100644 app/pages/components/error-support-link.wrn create mode 100644 app/pages/components/estimated-cost-summary.wrn create mode 100644 app/pages/components/event-table.wrn create mode 100644 app/pages/components/expandable-text.wrn create mode 100644 app/pages/components/expiry-date-time-picker.wrn create mode 100644 app/pages/components/export-progress.wrn create mode 100644 app/pages/components/external-link.wrn create mode 100644 app/pages/components/eyebrow-text.wrn create mode 100644 app/pages/components/factor-card.wrn create mode 100644 app/pages/components/fallback-route-builder.wrn create mode 100644 app/pages/components/fallback-route-diagram.wrn create mode 100644 app/pages/components/faq.wrn create mode 100644 app/pages/components/faqaccordion.wrn create mode 100644 app/pages/components/favicon-upload.wrn create mode 100644 app/pages/components/fax-input.wrn create mode 100644 app/pages/components/feature-card.wrn create mode 100644 app/pages/components/feature-checklist.wrn create mode 100644 app/pages/components/feature-comparison-table.wrn create mode 100644 app/pages/components/feature-details-panel.wrn create mode 100644 app/pages/components/feature-grid.wrn create mode 100644 app/pages/components/feature-icon-card.wrn create mode 100644 app/pages/components/feature-list.wrn create mode 100644 app/pages/components/feature-tabs.wrn create mode 100644 app/pages/components/feature-timeline.wrn create mode 100644 app/pages/components/feature-unavailable-state.wrn create mode 100644 app/pages/components/featured-blog-card.wrn create mode 100644 app/pages/components/field-actions.wrn create mode 100644 app/pages/components/file-input.wrn create mode 100644 app/pages/components/file-list.wrn create mode 100644 app/pages/components/file-size-input.wrn create mode 100644 app/pages/components/file-size-label.wrn create mode 100644 app/pages/components/file-type-badge.wrn create mode 100644 app/pages/components/file-upload-primitive.wrn create mode 100644 app/pages/components/file-upload.wrn create mode 100644 app/pages/components/filter-bar.wrn create mode 100644 app/pages/components/filter-menu.wrn create mode 100644 app/pages/components/filter-search-input.wrn create mode 100644 app/pages/components/filterable-table.wrn create mode 100644 app/pages/components/final-cta.wrn create mode 100644 app/pages/components/first-name-input.wrn create mode 100644 app/pages/components/flex.wrn create mode 100644 app/pages/components/font-picker.wrn create mode 100644 app/pages/components/font-size-picker.wrn create mode 100644 app/pages/components/font-weight-picker.wrn create mode 100644 app/pages/components/footer-language-switcher.wrn create mode 100644 app/pages/components/footer-status-indicator.wrn create mode 100644 app/pages/components/forbidden-page.wrn create mode 100644 app/pages/components/forbidden-state.wrn create mode 100644 app/pages/components/forgot-password-form.wrn create mode 100644 app/pages/components/form-actions.wrn create mode 100644 app/pages/components/form-alert.wrn create mode 100644 app/pages/components/form-dialog.wrn create mode 100644 app/pages/components/form-error-summary.wrn create mode 100644 app/pages/components/form-error.wrn create mode 100644 app/pages/components/form-field.wrn create mode 100644 app/pages/components/form-grid.wrn create mode 100644 app/pages/components/form-group.wrn create mode 100644 app/pages/components/form-help-text.wrn create mode 100644 app/pages/components/form-label.wrn create mode 100644 app/pages/components/form-progress.wrn create mode 100644 app/pages/components/form-row.wrn create mode 100644 app/pages/components/form-section.wrn create mode 100644 app/pages/components/form.wrn create mode 100644 app/pages/components/full-bleed.wrn create mode 100644 app/pages/components/fullscreen-dialog.wrn create mode 100644 app/pages/components/funnel-chart.wrn create mode 100644 app/pages/components/geo-chart.wrn create mode 100644 app/pages/components/geofence-editor.wrn create mode 100644 app/pages/components/ghost-button.wrn create mode 100644 app/pages/components/glass-card.wrn create mode 100644 app/pages/components/global-search.wrn create mode 100644 app/pages/components/gradient-cta.wrn create mode 100644 app/pages/components/gradient-picker.wrn create mode 100644 app/pages/components/gradient-stop-editor.wrn create mode 100644 app/pages/components/grid.wrn create mode 100644 app/pages/components/guide-card.wrn create mode 100644 app/pages/components/guide-checklist.wrn create mode 100644 app/pages/components/guide-difficulty-badge.wrn create mode 100644 app/pages/components/guide-grid.wrn create mode 100644 app/pages/components/guide-step.wrn create mode 100644 app/pages/components/header-actions.wrn create mode 100644 app/pages/components/header.wrn create mode 100644 app/pages/components/health-indicator.wrn create mode 100644 app/pages/components/hero-actions.wrn create mode 100644 app/pages/components/hero-code-panel.wrn create mode 100644 app/pages/components/hero-gradient-text.wrn create mode 100644 app/pages/components/hero-primary-action.wrn create mode 100644 app/pages/components/hero-product-preview.wrn create mode 100644 app/pages/components/hero-secondary-action.wrn create mode 100644 app/pages/components/hero-trust-text.wrn create mode 100644 app/pages/components/hero.wrn create mode 100644 app/pages/components/hex-color-input.wrn create mode 100644 app/pages/components/hidden-field.wrn create mode 100644 app/pages/components/highlight-text.wrn create mode 100644 app/pages/components/holiday-calendar.wrn create mode 100644 app/pages/components/hostname-input.wrn create mode 100644 app/pages/components/hour-picker.wrn create mode 100644 app/pages/components/hsl-color-input.wrn create mode 100644 app/pages/components/hstack.wrn create mode 100644 app/pages/components/html-editor.wrn create mode 100644 app/pages/components/human-approval-step.wrn create mode 100644 app/pages/components/icon-button.wrn create mode 100644 app/pages/components/icon-picker.wrn create mode 100644 app/pages/components/icon-selector.wrn create mode 100644 app/pages/components/icon.wrn create mode 100644 app/pages/components/identifier-input.wrn create mode 100644 app/pages/components/illustration.wrn create mode 100644 app/pages/components/image-compression-preview.wrn create mode 100644 app/pages/components/image-editor.wrn create mode 100644 app/pages/components/image-preview-dialog.wrn create mode 100644 app/pages/components/image-selector.wrn create mode 100644 app/pages/components/image-upload.wrn create mode 100644 app/pages/components/import-progress.wrn create mode 100644 app/pages/components/incident-alert.wrn create mode 100644 app/pages/components/incident-banner.wrn create mode 100644 app/pages/components/incident-card.wrn create mode 100644 app/pages/components/incident-list.wrn create mode 100644 app/pages/components/incident-response-flow.wrn create mode 100644 app/pages/components/incident-severity-badge.wrn create mode 100644 app/pages/components/incident-timeline.wrn create mode 100644 app/pages/components/industry-badge.wrn create mode 100644 app/pages/components/industry-selector.wrn create mode 100644 app/pages/components/info-card.wrn create mode 100644 app/pages/components/inline-alert.wrn create mode 100644 app/pages/components/inline-code.wrn create mode 100644 app/pages/components/inline.wrn create mode 100644 app/pages/components/input-group.wrn create mode 100644 app/pages/components/input.wrn create mode 100644 app/pages/components/inset-panel.wrn create mode 100644 app/pages/components/integer-input.wrn create mode 100644 app/pages/components/integration-card.wrn create mode 100644 app/pages/components/invoice-line-item.wrn create mode 100644 app/pages/components/invoice-summary.wrn create mode 100644 app/pages/components/ip-address-input.wrn create mode 100644 app/pages/components/job-card.wrn create mode 100644 app/pages/components/job-progress.wrn create mode 100644 app/pages/components/job-title-input.wrn create mode 100644 app/pages/components/json-input.wrn create mode 100644 app/pages/components/json-viewer.wrn create mode 100644 app/pages/components/key-value-table.wrn create mode 100644 app/pages/components/kyc-document-upload.wrn create mode 100644 app/pages/components/language-selector.wrn create mode 100644 app/pages/components/language-switcher.wrn create mode 100644 app/pages/components/last-name-input.wrn create mode 100644 app/pages/components/latency-metric.wrn create mode 100644 app/pages/components/latitude-input.wrn create mode 100644 app/pages/components/lead-text.wrn create mode 100644 app/pages/components/leadership-grid.wrn create mode 100644 app/pages/components/legal-acceptance-notice.wrn create mode 100644 app/pages/components/legal-bullet-list.wrn create mode 100644 app/pages/components/legal-contact-block.wrn create mode 100644 app/pages/components/legal-definition-list.wrn create mode 100644 app/pages/components/legal-document-header.wrn create mode 100644 app/pages/components/legal-document-layout.wrn create mode 100644 app/pages/components/legal-hero.wrn create mode 100644 app/pages/components/legal-language-selector.wrn create mode 100644 app/pages/components/legal-notice.wrn create mode 100644 app/pages/components/legal-page-shell.wrn create mode 100644 app/pages/components/legal-print-button.wrn create mode 100644 app/pages/components/legal-region-selector.wrn create mode 100644 app/pages/components/legal-section.wrn create mode 100644 app/pages/components/legal-summary.wrn create mode 100644 app/pages/components/legal-table-of-contents.wrn create mode 100644 app/pages/components/legal-table.wrn create mode 100644 app/pages/components/legal-version-badge.wrn create mode 100644 app/pages/components/letter-spacing-picker.wrn create mode 100644 app/pages/components/license-key-input.wrn create mode 100644 app/pages/components/lightbox.wrn create mode 100644 app/pages/components/line-chart.wrn create mode 100644 app/pages/components/line-height-picker.wrn create mode 100644 app/pages/components/link-button.wrn create mode 100644 app/pages/components/link.wrn create mode 100644 app/pages/components/list.wrn create mode 100644 app/pages/components/loading-button.wrn create mode 100644 app/pages/components/locale-selector.wrn create mode 100644 app/pages/components/localized-route-link.wrn create mode 100644 app/pages/components/location-picker.wrn create mode 100644 app/pages/components/log-table.wrn create mode 100644 app/pages/components/logo-cloud.wrn create mode 100644 app/pages/components/logo-upload.wrn create mode 100644 app/pages/components/logo.wrn create mode 100644 app/pages/components/logout-dialog.wrn create mode 100644 app/pages/components/longitude-input.wrn create mode 100644 app/pages/components/maintenance-alert.wrn create mode 100644 app/pages/components/maintenance-banner.wrn create mode 100644 app/pages/components/maintenance-card.wrn create mode 100644 app/pages/components/maintenance-page.wrn create mode 100644 app/pages/components/maintenance-state.wrn create mode 100644 app/pages/components/maintenance-window-picker.wrn create mode 100644 app/pages/components/map-picker.wrn create mode 100644 app/pages/components/markdown-editor.wrn create mode 100644 app/pages/components/marketing-page-shell.wrn create mode 100644 app/pages/components/marketing-section-header.wrn create mode 100644 app/pages/components/masked-secret-field.wrn create mode 100644 app/pages/components/mega-menu.wrn create mode 100644 app/pages/components/member-list.wrn create mode 100644 app/pages/components/mention-input.wrn create mode 100644 app/pages/components/message-character-counter.wrn create mode 100644 app/pages/components/message-composer-preview.wrn create mode 100644 app/pages/components/message-composer.wrn create mode 100644 app/pages/components/message-limit-input.wrn create mode 100644 app/pages/components/message-preview.wrn create mode 100644 app/pages/components/message-volume-slider.wrn create mode 100644 app/pages/components/metric-card.wrn create mode 100644 app/pages/components/metric-grid.wrn create mode 100644 app/pages/components/metric-text.wrn create mode 100644 app/pages/components/metric.wrn create mode 100644 app/pages/components/minute-picker.wrn create mode 100644 app/pages/components/mission-section.wrn create mode 100644 app/pages/components/mobile-device-frame.wrn create mode 100644 app/pages/components/mobile-input.wrn create mode 100644 app/pages/components/mobile-menu-button.wrn create mode 100644 app/pages/components/mobile-navigation.wrn create mode 100644 app/pages/components/mobile-table-card.wrn create mode 100644 app/pages/components/modal.wrn create mode 100644 app/pages/components/month-picker.wrn create mode 100644 app/pages/components/month-year-picker.wrn create mode 100644 app/pages/components/monthly-volume-selector.wrn create mode 100644 app/pages/components/multi-file-upload.wrn create mode 100644 app/pages/components/multi-select.wrn create mode 100644 app/pages/components/multiple-email-input.wrn create mode 100644 app/pages/components/muted-text.wrn create mode 100644 app/pages/components/name-input.wrn create mode 100644 app/pages/components/narrow-container.wrn create mode 100644 app/pages/components/navigation-item.wrn create mode 100644 app/pages/components/navigation-mega-menu.wrn create mode 100644 app/pages/components/navigation.wrn create mode 100644 app/pages/components/new-badge.wrn create mode 100644 app/pages/components/new-password-input.wrn create mode 100644 app/pages/components/newsletter-cta.wrn create mode 100644 app/pages/components/newsletter-form.wrn create mode 100644 app/pages/components/no-results-state.wrn create mode 100644 app/pages/components/not-found-page.wrn create mode 100644 app/pages/components/not-found-state.wrn create mode 100644 app/pages/components/notification-card.wrn create mode 100644 app/pages/components/notification-dot.wrn create mode 100644 app/pages/components/notification-list.wrn create mode 100644 app/pages/components/number-input.wrn create mode 100644 app/pages/components/office-card.wrn create mode 100644 app/pages/components/offline-page.wrn create mode 100644 app/pages/components/offline-state.wrn create mode 100644 app/pages/components/onboarding-progress.wrn create mode 100644 app/pages/components/one-time-secret-display.wrn create mode 100644 app/pages/components/online-indicator.wrn create mode 100644 app/pages/components/opacity-slider.wrn create mode 100644 app/pages/components/open-apicta.wrn create mode 100644 app/pages/components/optional-indicator.wrn create mode 100644 app/pages/components/organization-selector.wrn create mode 100644 app/pages/components/otp-input.wrn create mode 100644 app/pages/components/otp-verification-form.wrn create mode 100644 app/pages/components/outlined-card.wrn create mode 100644 app/pages/components/page-alert.wrn create mode 100644 app/pages/components/page-header.wrn create mode 100644 app/pages/components/page-heading.wrn create mode 100644 app/pages/components/page-shell.wrn create mode 100644 app/pages/components/page-skeleton.wrn create mode 100644 app/pages/components/pagination.wrn create mode 100644 app/pages/components/panel.wrn create mode 100644 app/pages/components/partner-application-form.wrn create mode 100644 app/pages/components/partner-logo-grid.wrn create mode 100644 app/pages/components/partner-program-card.wrn create mode 100644 app/pages/components/passkey-button.wrn create mode 100644 app/pages/components/password-input.wrn create mode 100644 app/pages/components/password-requirement-list.wrn create mode 100644 app/pages/components/password-strength-meter.wrn create mode 100644 app/pages/components/password-visibility-toggle.wrn create mode 100644 app/pages/components/path-input.wrn create mode 100644 app/pages/components/payment-method-card.wrn create mode 100644 app/pages/components/pdf-preview.wrn create mode 100644 app/pages/components/percentage-input.wrn create mode 100644 app/pages/components/permission-selector.wrn create mode 100644 app/pages/components/phone-input.wrn create mode 100644 app/pages/components/pie-chart.wrn create mode 100644 app/pages/components/pill.wrn create mode 100644 app/pages/components/pin-input.wrn create mode 100644 app/pages/components/plain-text-editor.wrn create mode 100644 app/pages/components/plan-cta.wrn create mode 100644 app/pages/components/plan-feature-list.wrn create mode 100644 app/pages/components/plan-limit-list.wrn create mode 100644 app/pages/components/plan-selector.wrn create mode 100644 app/pages/components/platform-pillar-card.wrn create mode 100644 app/pages/components/policy-version-table.wrn create mode 100644 app/pages/components/popover.wrn create mode 100644 app/pages/components/port-input.wrn create mode 100644 app/pages/components/port-number-input.wrn create mode 100644 app/pages/components/positive-number-input.wrn create mode 100644 app/pages/components/postal-code-input.wrn create mode 100644 app/pages/components/postman-cta.wrn create mode 100644 app/pages/components/preset-date-range-picker.wrn create mode 100644 app/pages/components/press-release-card.wrn create mode 100644 app/pages/components/preview-badge.wrn create mode 100644 app/pages/components/previous-next-navigation.wrn create mode 100644 app/pages/components/price-input.wrn create mode 100644 app/pages/components/price-range-slider.wrn create mode 100644 app/pages/components/price-text.wrn create mode 100644 app/pages/components/pricing-card.wrn create mode 100644 app/pages/components/pricing-comparison-table.wrn create mode 100644 app/pages/components/pricing-contact-form.wrn create mode 100644 app/pages/components/pricing-feature-group.wrn create mode 100644 app/pages/components/pricing-grid.wrn create mode 100644 app/pages/components/pricing-hero.wrn create mode 100644 app/pages/components/pricing-plan-card.wrn create mode 100644 app/pages/components/pricing-table.wrn create mode 100644 app/pages/components/pricing-toggle.wrn create mode 100644 app/pages/components/primary-button.wrn create mode 100644 app/pages/components/print-action.wrn create mode 100644 app/pages/components/print-policy-button.wrn create mode 100644 app/pages/components/priority-selector.wrn create mode 100644 app/pages/components/privacy-notice.wrn create mode 100644 app/pages/components/product-architecture-diagram.wrn create mode 100644 app/pages/components/product-card.wrn create mode 100644 app/pages/components/product-category-section.wrn create mode 100644 app/pages/components/product-cta.wrn create mode 100644 app/pages/components/product-feature-list.wrn create mode 100644 app/pages/components/product-grid.wrn create mode 100644 app/pages/components/product-hero.wrn create mode 100644 app/pages/components/product-icon.wrn create mode 100644 app/pages/components/product-integration-list.wrn create mode 100644 app/pages/components/product-list.wrn create mode 100644 app/pages/components/product-logo.wrn create mode 100644 app/pages/components/product-mega-menu.wrn create mode 100644 app/pages/components/product-mini-card.wrn create mode 100644 app/pages/components/product-navigation-card.wrn create mode 100644 app/pages/components/product-page-shell.wrn create mode 100644 app/pages/components/product-selector.wrn create mode 100644 app/pages/components/product-status-badge.wrn create mode 100644 app/pages/components/product-use-case-list.wrn create mode 100644 app/pages/components/products-mega-menu.wrn create mode 100644 app/pages/components/progress-bar.wrn create mode 100644 app/pages/components/progress-chart.wrn create mode 100644 app/pages/components/progress-ring.wrn create mode 100644 app/pages/components/progress-slider.wrn create mode 100644 app/pages/components/progress.wrn create mode 100644 app/pages/components/project-card.wrn create mode 100644 app/pages/components/project-selector.wrn create mode 100644 app/pages/components/project-switcher.wrn create mode 100644 app/pages/components/promo-code-input.wrn create mode 100644 app/pages/components/prompt-dialog.wrn create mode 100644 app/pages/components/provider-selector.wrn create mode 100644 app/pages/components/public-footer.wrn create mode 100644 app/pages/components/public-header-logo.wrn create mode 100644 app/pages/components/public-header.wrn create mode 100644 app/pages/components/public-mobile-navigation.wrn create mode 100644 app/pages/components/public-page-shell.wrn create mode 100644 app/pages/components/public-search.wrn create mode 100644 app/pages/components/publish-date-time-picker.wrn create mode 100644 app/pages/components/push-composer.wrn create mode 100644 app/pages/components/push-notification-editor.wrn create mode 100644 app/pages/components/qr-code.wrn create mode 100644 app/pages/components/quantity-input.wrn create mode 100644 app/pages/components/quantity-stepper.wrn create mode 100644 app/pages/components/quiet-hours-picker.wrn create mode 100644 app/pages/components/quote-text.wrn create mode 100644 app/pages/components/radio-group.wrn create mode 100644 app/pages/components/radio.wrn create mode 100644 app/pages/components/range-input.wrn create mode 100644 app/pages/components/range-slider.wrn create mode 100644 app/pages/components/rate-limit-input.wrn create mode 100644 app/pages/components/rate-limit-page.wrn create mode 100644 app/pages/components/rate-limited-state.wrn create mode 100644 app/pages/components/rate-table.wrn create mode 100644 app/pages/components/rating-slider.wrn create mode 100644 app/pages/components/recipient-selector.wrn create mode 100644 app/pages/components/recovery-code-form.wrn create mode 100644 app/pages/components/recovery-code-input.wrn create mode 100644 app/pages/components/recurrence-rule-builder.wrn create mode 100644 app/pages/components/recurring-schedule-picker.wrn create mode 100644 app/pages/components/redirect-uri-input.wrn create mode 100644 app/pages/components/reference-input.wrn create mode 100644 app/pages/components/regex-input.wrn create mode 100644 app/pages/components/region-availability-table.wrn create mode 100644 app/pages/components/region-selector.wrn create mode 100644 app/pages/components/region-unavailable-alert.wrn create mode 100644 app/pages/components/region-unavailable-state.wrn create mode 100644 app/pages/components/regional-privacy-banner.wrn create mode 100644 app/pages/components/reject-optional-cookies-button.wrn create mode 100644 app/pages/components/reopen-cookie-settings-button.wrn create mode 100644 app/pages/components/report-card.wrn create mode 100644 app/pages/components/request-response-viewer.wrn create mode 100644 app/pages/components/request-viewer.wrn create mode 100644 app/pages/components/required-indicator.wrn create mode 100644 app/pages/components/reset-password-form.wrn create mode 100644 app/pages/components/resizable-panel.wrn create mode 100644 app/pages/components/resource-card.wrn create mode 100644 app/pages/components/resource-download-card.wrn create mode 100644 app/pages/components/resource-page-shell.wrn create mode 100644 app/pages/components/resource-search.wrn create mode 100644 app/pages/components/resource-type-badge.wrn create mode 100644 app/pages/components/resources-mega-menu.wrn create mode 100644 app/pages/components/response-viewer.wrn create mode 100644 app/pages/components/responsible-disclosure-cta.wrn create mode 100644 app/pages/components/responsive-table.wrn create mode 100644 app/pages/components/results-section.wrn create mode 100644 app/pages/components/retention-table.wrn create mode 100644 app/pages/components/retry-count-input.wrn create mode 100644 app/pages/components/revenue-chart.wrn create mode 100644 app/pages/components/rgb-color-input.wrn create mode 100644 app/pages/components/rich-text-editor.wrn create mode 100644 app/pages/components/rich-text-input.wrn create mode 100644 app/pages/components/role-selector.wrn create mode 100644 app/pages/components/rolling-date-range-picker.wrn create mode 100644 app/pages/components/save-cookie-preferences-button.wrn create mode 100644 app/pages/components/saved-filter-selector.wrn create mode 100644 app/pages/components/schedule-message-picker.wrn create mode 100644 app/pages/components/schedule-picker.wrn create mode 100644 app/pages/components/scheduled-date-time-picker.wrn create mode 100644 app/pages/components/screenshot-frame.wrn create mode 100644 app/pages/components/scroll-area.wrn create mode 100644 app/pages/components/sdk-language-selector.wrn create mode 100644 app/pages/components/sdkcard.wrn create mode 100644 app/pages/components/sdklanguage-tabs.wrn create mode 100644 app/pages/components/sdktabs.wrn create mode 100644 app/pages/components/search-button.wrn create mode 100644 app/pages/components/search-category-tabs.wrn create mode 100644 app/pages/components/search-dialog.wrn create mode 100644 app/pages/components/search-empty-state.wrn create mode 100644 app/pages/components/search-input.wrn create mode 100644 app/pages/components/search-loading-state.wrn create mode 100644 app/pages/components/search-result-item.wrn create mode 100644 app/pages/components/second-picker.wrn create mode 100644 app/pages/components/secondary-button.wrn create mode 100644 app/pages/components/secret-display.wrn create mode 100644 app/pages/components/secret-input.wrn create mode 100644 app/pages/components/secret-reveal-dialog.wrn create mode 100644 app/pages/components/section-actions.wrn create mode 100644 app/pages/components/section-header.wrn create mode 100644 app/pages/components/section-heading.wrn create mode 100644 app/pages/components/section.wrn create mode 100644 app/pages/components/security-alert.wrn create mode 100644 app/pages/components/security-contact-card.wrn create mode 100644 app/pages/components/security-feature-card.wrn create mode 100644 app/pages/components/security-hero.wrn create mode 100644 app/pages/components/security-pillar-grid.wrn create mode 100644 app/pages/components/security-practice-list.wrn create mode 100644 app/pages/components/security-report-form.wrn create mode 100644 app/pages/components/select.wrn create mode 100644 app/pages/components/sender-id-input.wrn create mode 100644 app/pages/components/server-error-page.wrn create mode 100644 app/pages/components/service-level-table.wrn create mode 100644 app/pages/components/service-status-badge.wrn create mode 100644 app/pages/components/service-status-list.wrn create mode 100644 app/pages/components/service-status-row.wrn create mode 100644 app/pages/components/session-card.wrn create mode 100644 app/pages/components/session-expired-dialog.wrn create mode 100644 app/pages/components/setup-checklist.wrn create mode 100644 app/pages/components/severity-selector.wrn create mode 100644 app/pages/components/shadow-picker.wrn create mode 100644 app/pages/components/share-action.wrn create mode 100644 app/pages/components/share-button.wrn create mode 100644 app/pages/components/side-panel.wrn create mode 100644 app/pages/components/sidebar-layout.wrn create mode 100644 app/pages/components/sign-in-form.wrn create mode 100644 app/pages/components/sign-in-link.wrn create mode 100644 app/pages/components/sign-up-form.wrn create mode 100644 app/pages/components/site-search.wrn create mode 100644 app/pages/components/skeleton.wrn create mode 100644 app/pages/components/skip-link.wrn create mode 100644 app/pages/components/sla-table.wrn create mode 100644 app/pages/components/slider.wrn create mode 100644 app/pages/components/slug-input.wrn create mode 100644 app/pages/components/small-text.wrn create mode 100644 app/pages/components/smart-route-diagram.wrn create mode 100644 app/pages/components/sms-composer.wrn create mode 100644 app/pages/components/sms-message-editor.wrn create mode 100644 app/pages/components/sms-segment-counter.wrn create mode 100644 app/pages/components/social-share.wrn create mode 100644 app/pages/components/solution-hero.wrn create mode 100644 app/pages/components/solution-page-shell.wrn create mode 100644 app/pages/components/solution-section.wrn create mode 100644 app/pages/components/solutions-mega-menu.wrn create mode 100644 app/pages/components/sortable-table.wrn create mode 100644 app/pages/components/spacer.wrn create mode 100644 app/pages/components/spinner.wrn create mode 100644 app/pages/components/split-button.wrn create mode 100644 app/pages/components/split-cta.wrn create mode 100644 app/pages/components/split-hero.wrn create mode 100644 app/pages/components/split-layout.wrn create mode 100644 app/pages/components/split-section-header.wrn create mode 100644 app/pages/components/stack.wrn create mode 100644 app/pages/components/start-free-button.wrn create mode 100644 app/pages/components/stat-card.wrn create mode 100644 app/pages/components/state-selector.wrn create mode 100644 app/pages/components/status-badge.wrn create mode 100644 app/pages/components/status-banner.wrn create mode 100644 app/pages/components/status-page-shell.wrn create mode 100644 app/pages/components/status-selector.wrn create mode 100644 app/pages/components/status-subscribe-form.wrn create mode 100644 app/pages/components/status-table.wrn create mode 100644 app/pages/components/step-navigation.wrn create mode 100644 app/pages/components/step-up-authentication-dialog.wrn create mode 100644 app/pages/components/stepper-input.wrn create mode 100644 app/pages/components/stepper.wrn create mode 100644 app/pages/components/sticker-picker.wrn create mode 100644 app/pages/components/sticky-layout.wrn create mode 100644 app/pages/components/sticky.wrn create mode 100644 app/pages/components/street-address-input.wrn create mode 100644 app/pages/components/subdomain-input.wrn create mode 100644 app/pages/components/subject-input.wrn create mode 100644 app/pages/components/subprocessor-table.wrn create mode 100644 app/pages/components/subsection-heading.wrn create mode 100644 app/pages/components/success-card.wrn create mode 100644 app/pages/components/success-state.wrn create mode 100644 app/pages/components/support-request-form.wrn create mode 100644 app/pages/components/surface.wrn create mode 100644 app/pages/components/switch.wrn create mode 100644 app/pages/components/table-header.wrn create mode 100644 app/pages/components/table-row.wrn create mode 100644 app/pages/components/table-skeleton.wrn create mode 100644 app/pages/components/table.wrn create mode 100644 app/pages/components/tabs.wrn create mode 100644 app/pages/components/tag-input.wrn create mode 100644 app/pages/components/tag.wrn create mode 100644 app/pages/components/tax-notice.wrn create mode 100644 app/pages/components/tax-rate-input.wrn create mode 100644 app/pages/components/team-member-card.wrn create mode 100644 app/pages/components/team-size-selector.wrn create mode 100644 app/pages/components/template-card.wrn create mode 100644 app/pages/components/template-selector.wrn create mode 100644 app/pages/components/template-variable-input.wrn create mode 100644 app/pages/components/tenant-isolation-diagram.wrn create mode 100644 app/pages/components/terminal-block.wrn create mode 100644 app/pages/components/tertiary-button.wrn create mode 100644 app/pages/components/test-message-dialog.wrn create mode 100644 app/pages/components/testimonial-card.wrn create mode 100644 app/pages/components/testimonial-carousel.wrn create mode 100644 app/pages/components/text-input.wrn create mode 100644 app/pages/components/text-link.wrn create mode 100644 app/pages/components/text-skeleton.wrn create mode 100644 app/pages/components/textarea.wrn create mode 100644 app/pages/components/theme-color-picker.wrn create mode 100644 app/pages/components/theme-switcher.wrn create mode 100644 app/pages/components/theme-toggle.wrn create mode 100644 app/pages/components/time-input.wrn create mode 100644 app/pages/components/time-picker.wrn create mode 100644 app/pages/components/time-range-picker.wrn create mode 100644 app/pages/components/timeline-chart.wrn create mode 100644 app/pages/components/timeline-item.wrn create mode 100644 app/pages/components/timeline.wrn create mode 100644 app/pages/components/timeout-input.wrn create mode 100644 app/pages/components/timezone-aware-time-picker.wrn create mode 100644 app/pages/components/timezone-selector.wrn create mode 100644 app/pages/components/toast-action.wrn create mode 100644 app/pages/components/toast-host.wrn create mode 100644 app/pages/components/toast-icon.wrn create mode 100644 app/pages/components/toast-progress.wrn create mode 100644 app/pages/components/toast.wrn create mode 100644 app/pages/components/toggle-group.wrn create mode 100644 app/pages/components/toggle.wrn create mode 100644 app/pages/components/token-input.wrn create mode 100644 app/pages/components/tooltip.wrn create mode 100644 app/pages/components/totp-verification-form.wrn create mode 100644 app/pages/components/translated-text.wrn create mode 100644 app/pages/components/tree-table.wrn create mode 100644 app/pages/components/trend-indicator.wrn create mode 100644 app/pages/components/truncated-text.wrn create mode 100644 app/pages/components/trust-badge-list.wrn create mode 100644 app/pages/components/typography.wrn create mode 100644 app/pages/components/unavailable-region-state.wrn create mode 100644 app/pages/components/unified-timeline-preview.wrn create mode 100644 app/pages/components/unsaved-changes-dialog.wrn create mode 100644 app/pages/components/upload-item.wrn create mode 100644 app/pages/components/upload-preview.wrn create mode 100644 app/pages/components/upload-progress.wrn create mode 100644 app/pages/components/uptime-chart.wrn create mode 100644 app/pages/components/uptime-metric.wrn create mode 100644 app/pages/components/url-input.wrn create mode 100644 app/pages/components/usage-pricing-table.wrn create mode 100644 app/pages/components/use-case-selector.wrn create mode 100644 app/pages/components/user-card.wrn create mode 100644 app/pages/components/username-input.wrn create mode 100644 app/pages/components/value-card.wrn create mode 100644 app/pages/components/values-grid.wrn create mode 100644 app/pages/components/verification-code-input.wrn create mode 100644 app/pages/components/verified-badge.wrn create mode 100644 app/pages/components/version-selector.wrn create mode 100644 app/pages/components/vertical-tabs.wrn create mode 100644 app/pages/components/video-card.wrn create mode 100644 app/pages/components/video-preview-dialog.wrn create mode 100644 app/pages/components/video-upload.wrn create mode 100644 app/pages/components/virtualized-table.wrn create mode 100644 app/pages/components/vision-section.wrn create mode 100644 app/pages/components/visually-hidden.wrn create mode 100644 app/pages/components/voice-script-composer.wrn create mode 100644 app/pages/components/voice-script-editor.wrn create mode 100644 app/pages/components/volume-input.wrn create mode 100644 app/pages/components/volume-slider.wrn create mode 100644 app/pages/components/warning-card.wrn create mode 100644 app/pages/components/webhook-event-card.wrn create mode 100644 app/pages/components/webhook-flow-diagram.wrn create mode 100644 app/pages/components/webhook-payload-viewer.wrn create mode 100644 app/pages/components/webhook-url-input.wrn create mode 100644 app/pages/components/webinar-card.wrn create mode 100644 app/pages/components/webinar-registration-form.wrn create mode 100644 app/pages/components/well.wrn create mode 100644 app/pages/components/whats-app-composer.wrn create mode 100644 app/pages/components/whats-app-number-input.wrn create mode 100644 app/pages/components/whats-app-template-editor.wrn create mode 100644 app/pages/components/wide-container.wrn create mode 100644 app/pages/components/wizard-header.wrn create mode 100644 app/pages/components/wizard-navigation.wrn create mode 100644 app/pages/components/wizard.wrn create mode 100644 app/pages/components/workflow-canvas-preview.wrn create mode 100644 app/pages/components/workflow-progress.wrn create mode 100644 app/pages/components/workspace-card.wrn create mode 100644 app/pages/components/workspace-selector.wrn create mode 100644 app/pages/components/workspace-switcher.wrn create mode 100644 app/pages/components/year-picker.wrn create mode 100644 app/pages/components/zoom-slider.wrn diff --git a/app/docs.test.ts b/app/docs.test.ts index 82d3a306..eaeb5bec 100644 --- a/app/docs.test.ts +++ b/app/docs.test.ts @@ -60,6 +60,38 @@ test("every package page contains installation, guide, and complete API sections } }); +test("UI components have a dedicated catalog and complete detail pages", () => { + const reference = JSON.parse( + readFileSync(join(root, "node_modules", "@wrnexus", "ui", "component-reference.json"), "utf8"), + ) as { count: number; components: Array<{ name: string; props: unknown[] }> }; + const catalog = readFileSync(join(root, "app", "pages", "components.wrn"), "utf8"); + const details = readdirSync(join(root, "app", "pages", "components")).filter((file) => + file.endsWith(".wrn"), + ); + expect(catalog).toContain(`@wrnexus/ui · ${reference.count} components`); + expect(catalog.match(/class="component-card"/g)).toHaveLength(reference.count); + expect(details).toHaveLength(reference.count); + const button = readFileSync(join(root, "app", "pages", "components", "button.wrn"), "utf8"); + expect(button).toContain("Props and attributes"); + expect(button).toContain("Requirement"); + expect(button).toContain("Default"); + expect(button).toContain('id="usage"'); + expect(button).toContain('id="source"'); + const uiPackage = readFileSync(join(packagePages, "ui.wrn"), "utf8"); + expect(uiPackage).toContain('href="/components"'); + expect(uiPackage).not.toContain("All 901 UI components and props"); +}); + +test("primary navigation exposes the component catalog", () => { + for (const file of [ + join(root, "app", "pages", "index.wrn"), + join(root, "app", "pages", "getting-started.wrn"), + join(root, "app", "pages", "packages", "core.wrn"), + ]) { + expect(readFileSync(file, "utf8")).toContain('Components'); + } +}); + test("every package page shows multiple named usage examples", () => { for (const name of expected) { const source = readFileSync(join(packagePages, `${name}.wrn`), "utf8"); diff --git a/app/pages/404.wrn b/app/pages/404.wrn index 92953d2e..c19f52aa 100644 --- a/app/pages/404.wrn +++ b/app/pages/404.wrn @@ -7,8 +7,8 @@ page Pagenotfound { view {
-
W WRNexusJS
Preview · v0.2.64
-
Browse documentation
+
W WRNexusJS
Preview · v0.2.64
+
Browse documentation
diff --git a/app/pages/access.wrn b/app/pages/access.wrn index 011d4e69..82e4f693 100644 --- a/app/pages/access.wrn +++ b/app/pages/access.wrn @@ -7,8 +7,8 @@ page Access { view {
-
W WRNexusJS
Preview · v0.2.64
-
Browse documentation
+
W WRNexusJS
Preview · v0.2.64
+
Browse documentation

Request preview access

WRNexusJS 0.2.64 packages are not available from the public npm registry. Installation requires approval and private registry credentials supplied by WorkRoot. Never paste registry tokens into source control, issue reports, or support messages.

Request process

  1. Contact WorkRoot through the public contact path at workroot.in.
  2. Describe the application, team, expected deployment, and Bun environment.
  3. After approval, follow the registry instructions supplied privately.
  4. Use the canonical scaffold command below only after authentication.
bunx @wrnexus/cli@0.2.64 create my-app

Access approval, response time, licensing terms, and support level remain owner-controlled. This site does not collect access requests directly.

diff --git a/app/pages/architecture.wrn b/app/pages/architecture.wrn index 280acbbb..94f16a15 100644 --- a/app/pages/architecture.wrn +++ b/app/pages/architecture.wrn @@ -7,8 +7,8 @@ page Architecture { view {
-
W WRNexusJS
Preview · v0.2.64
-
Browse documentation
+
W WRNexusJS
Preview · v0.2.64
+
Browse documentation
Framework architecture · 0.2.64

Architecture

WRNexusJS is Bun-native and SSR-first. File discovery maps pages and API handlers; middleware enriches or short-circuits a request; the compiler turns .wrn declarations into server render functions and small feature runtimes.

Request and build lifecycle

  1. DiscoverPages, APIs, middleware, components, layouts, schemas, rooms
  2. CompileParse .wrn, validate grammar, generate server code
  3. RequestLimits, security, locale, session, middleware
  4. MatchStatic and dynamic file route
  5. RenderSSR data, escaped interpolation, components, metadata
  6. EnhanceOnly required reactive/directive runtimes

Package boundaries

core owns contexts, middleware, sessions and rooms; router discovers routes; compiler parses .wrn; ssr renders documents; csr supplies browser runtimes; dev-server and cli orchestrate development and builds.

Security and data flow

Validation happens at trust boundaries. Session authentication establishes identity; authorization makes resource decisions. CSP, Trusted Types, CSRF, upload checks, WebSocket origins, request limits, and output escaping are layered controls—not substitutes for application policy.

Realtime and scale

Rooms are process-local unless connected through pub/sub. Redis-backed pub/sub distributes events. Queue durability depends on the selected driver and must be evaluated explicitly.

Workspaces and gateways

The gateway can dispatch multiple applications while preserving route, component, asset, config, and session boundaries. Validate host routing and isolation before production.

Build and deployment

wrnexus build . produces dist/server.js and hashed/static assets. Run the server with Bun, apply migrations before traffic, terminate TLS at a trusted edge, and forward only expected proxy headers.

Mobile

Mobile compatibility bridges SSR-safe Capacitor capabilities; native route generation is experimental and is not general web portability. Test each target platform.

Generated files and limits

app/routes.gen.ts, .wrnexus/, and dist/ are generated. The runtime is Bun-only. Preview packages are private. Historical compatibility and long-term support policy are not yet published.

diff --git a/app/pages/benchmarks.wrn b/app/pages/benchmarks.wrn index 70e6279d..681b5358 100644 --- a/app/pages/benchmarks.wrn +++ b/app/pages/benchmarks.wrn @@ -7,8 +7,8 @@ page Benchmarks { view {
-
W WRNexusJS
Preview · v0.2.64
-
Browse documentation
+
W WRNexusJS
Preview · v0.2.64
+
Browse documentation

Benchmarks

No publishable benchmark dataset yet

No comparative speed claims are published. A valid baseline must record scripts, commit, Bun/framework versions, hardware, OS, warmup, samples, workload, raw results, median, percentiles, memory, HTML size, browser JavaScript size, and run date.

The roadmap starts with WRNexusJS-only measurements before any maintained equivalent-workload comparison.

diff --git a/app/pages/changelog.wrn b/app/pages/changelog.wrn index 1e19b92d..36ec0ff7 100644 --- a/app/pages/changelog.wrn +++ b/app/pages/changelog.wrn @@ -7,8 +7,8 @@ page Changelog { view {
-
W WRNexusJS
Preview · v0.2.64
-
Browse documentation
+
W WRNexusJS
Preview · v0.2.64
+
Browse documentation

Changelog

0.2.64 2026-07-13

Documentation is aligned to all 26 installed packages. This release adds @wrnexus/helpers, original-request URL helpers, safe login redirects, working wrnexus workspace add, and forward-auth redirect propagation.

Migration notes

Run wrnexus update --latest and keep every @wrnexus/* package on 0.2.64. Existing applications must explicitly add @wrnexus/helpers before importing it; newly scaffolded applications include it automatically.

Versioning and support

The packages use semantic-looking versions, but a formal compatibility and old-release support policy has not been approved. Preview consumers should treat minor releases as potentially requiring migration review.

diff --git a/app/pages/components.wrn b/app/pages/components.wrn new file mode 100644 index 00000000..0170699c --- /dev/null +++ b/app/pages/components.wrn @@ -0,0 +1,923 @@ +page Components { + seo { + title = "Components" + description = "Browse all 901 themeable WRNexusJS UI components, props, slots, events, and examples." + } + state query = "" + state category = "All" + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
@wrnexus/ui · 901 components

Component reference

Production-ready, server-rendered components documented directly from the installed .wrn sources.

Showing {category} components

actions

AcceptAllCookiesButton

Reusable accept all cookies button component.

6 props1 slots0 events
View component → +content

AccessibleAccordion

Reusable accessible accordion component.

8 props1 slots0 events
View component → +content

AccessibleCarousel

Reusable accessible carousel component.

8 props1 slots0 events
View component → +content

AccessibleChartSummary

Reusable accessible chart summary component.

8 props1 slots0 events
View component → +overlays

AccessibleDialog

Reusable accessible dialog component.

5 props1 slots0 events
View component → +content

AccessibleErrorSummary

Reusable accessible error summary component.

8 props1 slots0 events
View component → +content

AccessibleIcon

Reusable accessible icon component.

8 props1 slots0 events
View component → +overlays

AccessibleMenu

Reusable accessible menu component.

5 props1 slots0 events
View component → +content

AccessibleTabs

Reusable accessible tabs component.

8 props1 slots0 events
View component → +content

AccessibleTooltip

Reusable accessible tooltip component.

8 props1 slots0 events
View component → +content

Accordion

Reusable accordion component.

3 props1 slots1 events
View component → +overlays

AccountMenu

Reusable account menu component.

5 props1 slots0 events
View component → +feedback

AccountStatusBanner

Reusable account status banner component.

6 props1 slots0 events
View component → +overlays

ActionMenu

Reusable action menu component.

5 props1 slots0 events
View component → +data

ActiveFilterList

Reusable active filter list component.

5 props1 slots0 events
View component → +data

ActivityList

Reusable activity list component.

5 props1 slots0 events
View component → +content

AddOnCard

Reusable add on card component.

8 props1 slots0 events
View component → +forms

AddressInput

Reusable address input component.

11 props1 slots0 events
View component → +content

AddressPreview

Reusable address preview component.

8 props1 slots0 events
View component → +content

AdvancedFilterBuilder

Reusable advanced filter builder component.

8 props1 slots0 events
View component → +feedback

Alert

Reusable alert component.

5 props1 slots1 events
View component → +overlays

AlertDialog

Reusable alert dialog component.

5 props1 slots0 events
View component → +forms

AmountInput

Reusable amount input component.

11 props1 slots0 events
View component → +content

AnalyticsDashboardPreview

Reusable analytics dashboard preview component.

8 props1 slots0 events
View component → +layout

AnchorNavigation

Reusable anchor navigation component.

5 props1 slots0 events
View component → +core

AnnouncementBar

Reusable announcement bar component.

7 props0 slots1 events
View component → +forms

ApartmentInput

Reusable apartment input component.

11 props1 slots0 events
View component → +feedback

ApiAuthenticationNotice

Reusable api authentication notice component.

6 props1 slots0 events
View component → +content

ApiEndpointCard

Reusable api endpoint card component.

4 props1 slots0 events
View component → +content

ApiErrorExample

Reusable api error example component.

8 props1 slots0 events
View component → +data

ApiHeaderTable

Reusable api header table component.

5 props1 slots0 events
View component → +overlays

ApiKeyCreateDialog

Reusable api key create dialog component.

5 props1 slots0 events
View component → +content

ApiKeyDisplay

Reusable api key display component.

8 props1 slots0 events
View component → +forms

ApiKeyInput

Reusable api key input component.

11 props1 slots0 events
View component → +feedback

ApiMethodBadge

Reusable api method badge component.

6 props1 slots0 events
View component → +data

ApiParameterTable

Reusable api parameter table component.

5 props1 slots0 events
View component → +feedback

ApiRateLimitNotice

Reusable api rate limit notice component.

6 props1 slots0 events
View component → +content

ApiRequestExample

Reusable api request example component.

8 props1 slots0 events
View component → +content

ApiResponseExample

Reusable api response example component.

8 props1 slots0 events
View component → +data

ApiSchemaTable

Reusable api schema table component.

5 props1 slots0 events
View component → +content

ApiSchemaViewer

Reusable api schema viewer component.

8 props1 slots0 events
View component → +feedback

ApiVersionBadge

Reusable api version badge component.

6 props1 slots0 events
View component → +layout

AppHeader

Reusable app header component.

5 props1 slots0 events
View component → +layout

ArchitectureSection

Reusable architecture section component.

5 props1 slots0 events
View component → +visualization

AreaChart

Reusable area chart component.

6 props1 slots0 events
View component → +layout

ArticleHero

Reusable article hero component.

5 props1 slots0 events
View component → +layout

ArticleLayout

Reusable article layout component.

5 props1 slots0 events
View component → +actions

ArticleNewsletterCTA

Reusable article newsletter c t a component.

6 props1 slots0 events
View component → +layout

ArticlePageShell

Reusable article page shell component.

5 props1 slots0 events
View component → +actions

ArticleShareActions

Reusable article share actions component.

6 props1 slots0 events
View component → +core

AspectRatio

Reusable aspect ratio component.

1 props1 slots0 events
View component → +content

AssetCard

Reusable asset card component.

4 props1 slots0 events
View component → +forms

AttachmentPicker

Reusable attachment picker component.

11 props1 slots0 events
View component → +content

AttachmentUpload

Reusable attachment upload component.

8 props1 slots0 events
View component → +content

AudioUpload

Reusable audio upload component.

8 props1 slots0 events
View component → +content

AuditLogPreview

Reusable audit log preview component.

8 props1 slots0 events
View component → +data

AuditTable

Reusable audit table component.

5 props1 slots0 events
View component → +forms

AuthenticatorCodeInput

Reusable authenticator code input component.

11 props1 slots0 events
View component → +content

AuthorAvatar

Reusable author avatar component.

8 props1 slots0 events
View component → +content

AuthorCard

Reusable author card component.

8 props1 slots0 events
View component → +content

AuthorizedApplicationCard

Reusable authorized application card component.

8 props1 slots0 events
View component → +data

AutoGrid

Reusable auto grid component.

1 props1 slots0 events
View component → +content

AutomationExampleCard

Reusable automation example card component.

8 props1 slots0 events
View component → +content

AvailabilityCalendar

Reusable availability calendar component.

8 props1 slots0 events
View component → +content

Avatar

Reusable avatar component.

5 props0 slots0 events
View component → +forms

AvatarGroup

Reusable avatar group component.

11 props1 slots0 events
View component → +content

AvatarUpload

Reusable avatar upload component.

8 props1 slots0 events
View component → +actions

BackButton

Reusable back button component.

4 props1 slots0 events
View component → +core

BackToTop

Reusable back to top component.

4 props0 slots1 events
View component → +feedback

Badge

Reusable badge component.

3 props0 slots0 events
View component → +content

BankTransferDetails

Reusable bank transfer details component.

8 props1 slots0 events
View component → +feedback

Banner

Reusable banner component.

5 props0 slots0 events
View component → +visualization

BarChart

Reusable bar chart component.

6 props1 slots0 events
View component → +feedback

BetaBadge

Reusable beta badge component.

3 props1 slots0 events
View component → +content

BillingAddressForm

Reusable billing address form component.

8 props1 slots0 events
View component → +content

BillingExample

Reusable billing example component.

8 props1 slots0 events
View component → +forms

BillingPeriodToggle

Reusable billing period toggle component.

11 props1 slots0 events
View component → +forms

BlackoutDatePicker

Reusable blackout date picker component.

11 props1 slots0 events
View component → +content

BlogCard

Reusable blog card component.

8 props1 slots0 events
View component → +data

BlogGrid

Reusable blog grid component.

5 props1 slots0 events
View component → +data

BlogList

Reusable blog list component.

5 props1 slots0 events
View component → +content

BlogSearch

Reusable blog search component.

8 props1 slots0 events
View component → +content

BodyText

Reusable body text component.

3 props1 slots0 events
View component → +forms

BorderRadiusPicker

Reusable border radius picker component.

11 props1 slots0 events
View component → +layout

BottomNavigation

Reusable bottom navigation component.

5 props1 slots0 events
View component → +forms

BrandColorPicker

Reusable brand color picker component.

11 props1 slots0 events
View component → +forms

BrandSelector

Reusable brand selector component.

11 props1 slots0 events
View component → +core

Breadcrumbs

Reusable breadcrumbs component.

7 props0 slots0 events
View component → +layout

BrowserFrame

Reusable browser frame component.

5 props1 slots0 events
View component → +content

BudgetRangeSlider

Reusable budget range slider component.

8 props1 slots0 events
View component → +forms

BudgetSelector

Reusable budget selector component.

11 props1 slots0 events
View component → +forms

BusinessHoursPicker

Reusable business hours picker component.

11 props1 slots0 events
View component → +actions

Button

Reusable button component.

8 props0 slots0 events
View component → +forms

ButtonGroup

Reusable button group component.

11 props1 slots0 events
View component → +forms

ButtonSelector

Reusable button selector component.

11 props1 slots0 events
View component → +content

Calendar

Reusable calendar component.

8 props1 slots0 events
View component → +data

CalendarGrid

Reusable calendar grid component.

5 props1 slots0 events
View component → +layout

CalendarHeader

Reusable calendar header component.

5 props1 slots0 events
View component → +layout

CalendarNavigation

Reusable calendar navigation component.

5 props1 slots0 events
View component → +forms

CallbackUrlInput

Reusable callback url input component.

11 props1 slots0 events
View component → +content

CampaignCard

Reusable campaign card component.

4 props1 slots0 events
View component → +content

CampaignPerformancePreview

Reusable campaign performance preview component.

8 props1 slots0 events
View component → +visualization

CampaignProgress

Reusable campaign progress component.

6 props1 slots0 events
View component → +data

CapabilityGrid

Reusable capability grid component.

5 props1 slots0 events
View component → +forms

CaptchaField

Reusable captcha field component.

11 props1 slots0 events
View component → +content

Card

Reusable card component.

4 props1 slots0 events
View component → +content

CardPaymentForm

Reusable card payment form component.

8 props1 slots0 events
View component → +forms

CardSelector

Reusable card selector component.

11 props1 slots0 events
View component → +feedback

CardSkeleton

Reusable card skeleton component.

6 props1 slots0 events
View component → +content

CareerApplicationForm

Reusable career application form component.

8 props1 slots0 events
View component → +data

CareerBenefitsGrid

Reusable career benefits grid component.

5 props1 slots0 events
View component → +content

Carousel

Reusable carousel component.

8 props1 slots0 events
View component → +content

CaseStudyCard

Reusable case study card component.

8 props1 slots0 events
View component → +layout

CaseStudyHero

Reusable case study hero component.

5 props1 slots0 events
View component → +content

CaseStudyPreview

Reusable case study preview component.

8 props1 slots0 events
View component → +actions

CenteredCTA

Reusable centered c t a component.

6 props1 slots0 events
View component → +layout

CenteredHero

Reusable centered hero component.

5 props1 slots0 events
View component → +layout

CenteredSectionHeader

Reusable centered section header component.

5 props1 slots0 events
View component → +content

CertificateUpload

Reusable certificate upload component.

8 props1 slots0 events
View component → +feedback

CertificationBadge

Reusable certification badge component.

6 props1 slots0 events
View component → +layout

ChallengeSection

Reusable challenge section component.

5 props1 slots0 events
View component → +feedback

ChannelBadge

Reusable channel badge component.

6 props1 slots0 events
View component → +content

ChannelCard

Reusable channel card component.

4 props1 slots0 events
View component → +visualization

ChannelComparisonChart

Reusable channel comparison chart component.

6 props1 slots0 events
View component → +data

ChannelComparisonTable

Reusable channel comparison table component.

5 props1 slots0 events
View component → +visualization

ChannelFallbackDiagram

Reusable channel fallback diagram component.

6 props1 slots0 events
View component → +visualization

ChannelFlow

Reusable channel flow component.

6 props1 slots0 events
View component → +content

ChannelIcon

Reusable channel icon component.

8 props1 slots0 events
View component → +data

ChannelRateTable

Reusable channel rate table component.

5 props1 slots0 events
View component → +forms

ChannelSelector

Reusable channel selector component.

11 props1 slots0 events
View component → +feedback

CharacterCounter

Reusable character counter component.

6 props1 slots0 events
View component → +feedback

ChartEmptyState

Reusable chart empty state component.

6 props1 slots0 events
View component → +content

ChartTooltip

Reusable chart tooltip component.

8 props1 slots0 events
View component → +core

Checkbox

Reusable checkbox component.

7 props0 slots0 events
View component → +forms

CheckboxGroup

Reusable checkbox group component.

11 props1 slots0 events
View component → +content

Checklist

Reusable checklist component.

8 props1 slots0 events
View component → +visualization

ChecklistProgress

Reusable checklist progress component.

6 props1 slots0 events
View component → +core

Chip

Reusable chip component.

3 props1 slots0 events
View component → +forms

ChipInput

Reusable chip input component.

11 props1 slots0 events
View component → +visualization

CircularProgress

Reusable circular progress component.

6 props1 slots0 events
View component → +forms

CitySelector

Reusable city selector component.

11 props1 slots0 events
View component → +actions

ClearFiltersButton

Reusable clear filters button component.

6 props1 slots0 events
View component → +content

ClickableCard

Reusable clickable card component.

4 props1 slots0 events
View component → +actions

CloseButton

Reusable close button component.

4 props1 slots0 events
View component → +core

Cluster

Reusable cluster component.

2 props1 slots0 events
View component → +content

Code

Reusable code component.

8 props1 slots0 events
View component → +content

CodeBlock

Reusable code block component.

4 props0 slots1 events
View component → +actions

CodeCopyButton

Reusable code copy button component.

6 props1 slots0 events
View component → +layout

CodeHeader

Reusable code header component.

5 props1 slots0 events
View component → +forms

CodeInput

Reusable code input component.

11 props1 slots0 events
View component → +feedback

CodeLanguageBadge

Reusable code language badge component.

6 props1 slots0 events
View component → +content

CodeTabs

Reusable code tabs component.

8 props1 slots0 events
View component → +content

CodeText

Reusable code text component.

3 props1 slots0 events
View component → +visualization

CohortChart

Reusable cohort chart component.

6 props1 slots0 events
View component → +data

ColorGrid

Reusable color grid component.

5 props1 slots0 events
View component → +forms

ColorHexInput

Reusable color hex input component.

11 props1 slots0 events
View component → +forms

ColorPicker

Reusable color picker component.

11 props1 slots0 events
View component → +forms

ColorSelector

Reusable color selector component.

11 props1 slots0 events
View component → +content

ColorSwatch

Reusable color swatch component.

8 props1 slots0 events
View component → +core

Combobox

Reusable combobox component.

8 props0 slots0 events
View component → +feedback

ComingSoonBadge

Reusable coming soon badge component.

3 props1 slots0 events
View component → +feedback

ComingSoonState

Reusable coming soon state component.

6 props1 slots0 events
View component → +content

CommandBlock

Reusable command block component.

8 props1 slots0 events
View component → +overlays

CommandMenu

Reusable command menu component.

5 props1 slots0 events
View component → +forms

CommandSearchInput

Reusable command search input component.

11 props1 slots0 events
View component → +layout

CompanyHero

Reusable company hero component.

5 props1 slots0 events
View component → +forms

CompanyNameInput

Reusable company name input component.

11 props1 slots0 events
View component → +layout

CompanyPageShell

Reusable company page shell component.

5 props1 slots0 events
View component → +forms

CompanySizeSelector

Reusable company size selector component.

11 props1 slots0 events
View component → +forms

ComparisonDateRangePicker

Reusable comparison date range picker component.

11 props1 slots0 events
View component → +data

ComparisonTable

Reusable comparison table component.

5 props1 slots0 events
View component → +visualization

CompletionMeter

Reusable completion meter component.

6 props1 slots0 events
View component → +data

ComplianceBadgeList

Reusable compliance badge list component.

5 props1 slots0 events
View component → +content

ComplianceProgramCard

Reusable compliance program card component.

8 props1 slots0 events
View component → +overlays

ConfirmationDialog

Reusable confirmation dialog component.

7 props1 slots1 events
View component → +forms

ConfirmPasswordInput

Reusable confirm password input component.

11 props1 slots0 events
View component → +content

ConnectedAccountCard

Reusable connected account card component.

8 props1 slots0 events
View component → +content

ConnectionCard

Reusable connection card component.

4 props1 slots0 events
View component → +content

ConsentTimelinePreview

Reusable consent timeline preview component.

8 props1 slots0 events
View component → +content

ContactCard

Reusable contact card component.

4 props1 slots0 events
View component → +actions

ContactCTA

Reusable contact c t a component.

6 props1 slots0 events
View component → +content

ContactForm

Reusable contact form component.

8 props1 slots0 events
View component → +layout

ContactHero

Reusable contact hero component.

5 props1 slots0 events
View component → +layout

ContactPageShell

Reusable contact page shell component.

5 props1 slots0 events
View component → +core

ContactSalesBanner

Reusable contact sales banner component.

13 props0 slots0 events
View component → +actions

ContactSalesButton

Reusable contact sales button component.

6 props1 slots0 events
View component → +content

ContactSalesForm

Reusable contact sales form component.

8 props1 slots0 events
View component → +core

Container

Reusable container component.

2 props1 slots0 events
View component → +overlays

ContextMenu

Reusable context menu component.

5 props1 slots0 events
View component → +content

ContextSwitcher

Reusable context switcher component.

8 props1 slots0 events
View component → +data

ConversationList

Reusable conversation list component.

5 props1 slots0 events
View component → +content

ConversationPreview

Reusable conversation preview component.

8 props1 slots0 events
View component → +visualization

ConversionChart

Reusable conversion chart component.

6 props1 slots0 events
View component → +feedback

CookieBanner

Reusable cookie banner component.

4 props0 slots1 events
View component → +data

CookieCategoryList

Reusable cookie category list component.

5 props1 slots0 events
View component → +forms

CookieCategoryToggle

Reusable cookie category toggle component.

11 props1 slots0 events
View component → +core

CookieConsent

Reusable cookie consent component.

1 props0 slots2 events
View component → +data

CookieDetailsTable

Reusable cookie details table component.

5 props1 slots0 events
View component → +overlays

CookiePreferencesDialog

Reusable cookie preferences dialog component.

7 props0 slots2 events
View component → +data

CookieTable

Reusable cookie table component.

5 props1 slots0 events
View component → +forms

CoordinatesInput

Reusable coordinates input component.

11 props1 slots0 events
View component → +forms

CoordinatesPicker

Reusable coordinates picker component.

11 props1 slots0 events
View component → +actions

CopyButton

Reusable copy button component.

4 props1 slots0 events
View component → +actions

CopyCodeButton

Reusable copy code button component.

6 props1 slots0 events
View component → +forms

CopySecretField

Reusable copy secret field component.

11 props1 slots0 events
View component → +visualization

CostBreakdownChart

Reusable cost breakdown chart component.

6 props1 slots0 events
View component → +content

CostSummary

Reusable cost summary component.

8 props1 slots0 events
View component → +feedback

Counter

Reusable counter component.

3 props1 slots0 events
View component → +forms

CountryCallingCodeInput

Reusable country calling code input component.

11 props1 slots0 events
View component → +forms

CountryCallingCodeSelector

Reusable country calling code selector component.

11 props1 slots0 events
View component → +forms

CountrySelector

Reusable country selector component.

11 props1 slots0 events
View component → +forms

CouponInput

Reusable coupon input component.

11 props1 slots0 events
View component → +forms

CreditAmountInput

Reusable credit amount input component.

11 props1 slots0 events
View component → +content

CronBuilder

Reusable cron builder component.

8 props1 slots0 events
View component → +forms

CronInput

Reusable cron input component.

11 props1 slots0 events
View component → +content

CsvUpload

Reusable csv upload component.

8 props1 slots0 events
View component → +layout

CTASection

Reusable c t a section component.

8 props0 slots0 events
View component → +forms

CurrencyInput

Reusable currency input component.

11 props1 slots0 events
View component → +forms

CurrencySelector

Reusable currency selector component.

11 props1 slots0 events
View component → +forms

CurrentPasswordInput

Reusable current password input component.

11 props1 slots0 events
View component → +content

CustomerLogo

Reusable customer logo component.

8 props1 slots0 events
View component → +content

CustomerStoryCard

Reusable customer story card component.

8 props1 slots0 events
View component → +actions

DangerButton

Reusable danger button component.

4 props1 slots0 events
View component → +content

DataProtectionCard

Reusable data protection card component.

8 props1 slots0 events
View component → +data

DataRetentionTable

Reusable data retention table component.

5 props1 slots0 events
View component → +data

DataTable

Reusable data table component.

6 props0 slots0 events
View component → +forms

DateInput

Reusable date input component.

12 props0 slots0 events
View component → +forms

DatePicker

Reusable date picker component.

8 props0 slots0 events
View component → +content

DateRangeCalendar

Reusable date range calendar component.

8 props1 slots0 events
View component → +forms

DateRangePicker

Reusable date range picker component.

4 props0 slots0 events
View component → +content

DateRangeSlider

Reusable date range slider component.

8 props1 slots0 events
View component → +forms

DateTimeInput

Reusable date time input component.

12 props0 slots0 events
View component → +forms

DateTimePicker

Reusable date time picker component.

9 props0 slots0 events
View component → +forms

DateTimeRangePicker

Reusable date time range picker component.

11 props1 slots0 events
View component → +forms

DecimalInput

Reusable decimal input component.

11 props1 slots0 events
View component → +data

DefinitionList

Reusable definition list component.

5 props1 slots0 events
View component → +overlays

DeleteConfirmationDialog

Reusable delete confirmation dialog component.

5 props1 slots0 events
View component → +content

DeliveryPreview

Reusable delivery preview component.

8 props1 slots0 events
View component → +visualization

DeliveryStatusChart

Reusable delivery status chart component.

6 props1 slots0 events
View component → +visualization

DeliveryStatusTimeline

Reusable delivery status timeline component.

6 props1 slots0 events
View component → +content

DemoRequestForm

Reusable demo request form component.

8 props1 slots0 events
View component → +forms

DepartmentInput

Reusable department input component.

11 props1 slots0 events
View component → +feedback

DeprecatedFeatureAlert

Reusable deprecated feature alert component.

6 props1 slots0 events
View component → +data

DescriptionList

Reusable description list component.

5 props1 slots0 events
View component → +layout

DesktopNavigation

Reusable desktop navigation component.

3 props0 slots0 events
View component → +actions

DeveloperCTA

Reusable developer c t a component.

6 props1 slots0 events
View component → +layout

DeveloperHero

Reusable developer hero component.

5 props1 slots0 events
View component → +layout

DeveloperPageShell

Reusable developer page shell component.

5 props1 slots0 events
View component → +content

DeveloperSearch

Reusable developer search component.

8 props1 slots0 events
View component → +core

DevelopersMegaMenu

Reusable developers mega menu component.

1 props0 slots0 events
View component → +overlays

DevelopersMenu

Reusable developers menu component.

5 props1 slots0 events
View component → +content

DeviceCard

Reusable device card component.

8 props1 slots0 events
View component → +core

disclosure

Reusable disclosure component.

2 props1 slots0 events
View component → +forms

DiscountInput

Reusable discount input component.

11 props1 slots0 events
View component → +core

DisplayHeading

Reusable display heading component.

3 props1 slots0 events
View component → +forms

DisplayNameInput

Reusable display name input component.

11 props1 slots0 events
View component → +core

Divider

Reusable divider component.

1 props1 slots0 events
View component → +content

DocumentPreview

Reusable document preview component.

8 props1 slots0 events
View component → +content

DocumentUpload

Reusable document upload component.

8 props1 slots0 events
View component → +forms

DomainInput

Reusable domain input component.

11 props1 slots0 events
View component → +actions

DoNotSellLink

Reusable do not sell link component.

6 props1 slots0 events
View component → +visualization

DonutChart

Reusable donut chart component.

6 props1 slots0 events
View component → +actions

DownloadAction

Reusable download action component.

6 props1 slots0 events
View component → +actions

DownloadButton

Reusable download button component.

4 props1 slots0 events
View component → +content

DownloadGateForm

Reusable download gate form component.

8 props1 slots0 events
View component → +actions

DownloadPolicyButton

Reusable download policy button component.

6 props1 slots0 events
View component → +content

DownloadResourceForm

Reusable download resource form component.

8 props1 slots0 events
View component → +core

Drawer

Reusable drawer component.

4 props1 slots1 events
View component → +overlays

DropdownMenu

Reusable dropdown menu component.

2 props1 slots1 events
View component → +layout

DropdownNavigation

Reusable dropdown navigation component.

5 props1 slots0 events
View component → +forms

DurationInput

Reusable duration input component.

11 props1 slots0 events
View component → +forms

DurationPicker

Reusable duration picker component.

11 props1 slots0 events
View component → +content

DurationSlider

Reusable duration slider component.

8 props1 slots0 events
View component → +content

ElevatedCard

Reusable elevated card component.

4 props1 slots0 events
View component → +forms

EmailBodyEditor

Reusable email body editor component.

11 props1 slots0 events
View component → +content

EmailComposer

Reusable email composer component.

8 props1 slots0 events
View component → +forms

EmailInput

Reusable email input component.

12 props0 slots0 events
View component → +forms

EmojiPicker

Reusable emoji picker component.

11 props1 slots0 events
View component → +feedback

EmptyState

Reusable empty state component.

12 props0 slots0 events
View component → +visualization

EncryptionDiagram

Reusable encryption diagram component.

6 props1 slots0 events
View component → +actions

EnterpriseCTA

Reusable enterprise c t a component.

6 props1 slots0 events
View component → +layout

EnterpriseHero

Reusable enterprise hero component.

5 props1 slots0 events
View component → +content

EnterprisePricingCard

Reusable enterprise pricing card component.

8 props1 slots0 events
View component → +forms

EnvironmentSelector

Reusable environment selector component.

11 props1 slots0 events
View component → +content

EnvironmentSwitcher

Reusable environment switcher component.

8 props1 slots0 events
View component → +actions

ErrorActions

Reusable error actions component.

6 props1 slots0 events
View component → +content

ErrorCard

Reusable error card component.

4 props1 slots0 events
View component → +content

ErrorCode

Reusable error code component.

8 props1 slots0 events
View component → +layout

ErrorHero

Reusable error hero component.

5 props1 slots0 events
View component → +content

ErrorIllustration

Reusable error illustration component.

8 props1 slots0 events
View component → +content

ErrorPage

Reusable error page component.

8 props1 slots0 events
View component → +layout

ErrorPageShell

Reusable error page shell component.

5 props1 slots0 events
View component → +feedback

ErrorState

Reusable error state component.

16 props0 slots1 events
View component → +actions

ErrorSupportLink

Reusable error support link component.

6 props1 slots0 events
View component → +content

EstimatedCostSummary

Reusable estimated cost summary component.

8 props1 slots0 events
View component → +data

EventTable

Reusable event table component.

5 props1 slots0 events
View component → +content

ExpandableText

Reusable expandable text component.

8 props1 slots0 events
View component → +forms

ExpiryDateTimePicker

Reusable expiry date time picker component.

11 props1 slots0 events
View component → +visualization

ExportProgress

Reusable export progress component.

6 props1 slots0 events
View component → +actions

ExternalLink

Reusable external link component.

6 props1 slots0 events
View component → +content

EyebrowText

Reusable eyebrow text component.

3 props1 slots0 events
View component → +content

FactorCard

Reusable factor card component.

8 props1 slots0 events
View component → +content

FallbackRouteBuilder

Reusable fallback route builder component.

8 props1 slots0 events
View component → +visualization

FallbackRouteDiagram

Reusable fallback route diagram component.

6 props1 slots0 events
View component → +core

FAQ

Reusable faq component.

8 props0 slots0 events
View component → +core

FAQAccordion

Reusable faqaccordion component.

13 props0 slots1 events
View component → +content

FaviconUpload

Reusable favicon upload component.

8 props1 slots0 events
View component → +forms

FaxInput

Reusable fax input component.

11 props1 slots0 events
View component → +content

FeatureCard

Reusable feature card component.

5 props0 slots0 events
View component → +content

FeatureChecklist

Reusable feature checklist component.

8 props1 slots0 events
View component → +data

FeatureComparisonTable

Reusable feature comparison table component.

5 props1 slots0 events
View component → +content

FeaturedBlogCard

Reusable featured blog card component.

8 props1 slots0 events
View component → +layout

FeatureDetailsPanel

Reusable feature details panel component.

5 props1 slots0 events
View component → +data

FeatureGrid

Reusable feature grid component.

2 props1 slots0 events
View component → +content

FeatureIconCard

Reusable feature icon card component.

8 props1 slots0 events
View component → +data

FeatureList

Reusable feature list component.

5 props1 slots0 events
View component → +content

FeatureTabs

Reusable feature tabs component.

8 props1 slots0 events
View component → +visualization

FeatureTimeline

Reusable feature timeline component.

6 props1 slots0 events
View component → +feedback

FeatureUnavailableState

Reusable feature unavailable state component.

6 props1 slots0 events
View component → +actions

FieldActions

Reusable field actions component.

6 props1 slots0 events
View component → +core

file-upload

Reusable file-upload component.

7 props0 slots0 events
View component → +forms

FileInput

Reusable file input component.

11 props1 slots0 events
View component → +data

FileList

Reusable file list component.

5 props1 slots0 events
View component → +forms

FileSizeInput

Reusable file size input component.

11 props1 slots0 events
View component → +content

FileSizeLabel

Reusable file size label component.

8 props1 slots0 events
View component → +feedback

FileTypeBadge

Reusable file type badge component.

6 props1 slots0 events
View component → +content

FileUpload

Reusable file upload component.

7 props0 slots0 events
View component → +data

FilterableTable

Reusable filterable table component.

5 props1 slots0 events
View component → +core

FilterBar

Reusable filter bar component.

4 props1 slots0 events
View component → +overlays

FilterMenu

Reusable filter menu component.

5 props1 slots0 events
View component → +forms

FilterSearchInput

Reusable filter search input component.

11 props1 slots0 events
View component → +actions

FinalCTA

Reusable final c t a component.

6 props1 slots0 events
View component → +forms

FirstNameInput

Reusable first name input component.

11 props1 slots0 events
View component → +core

Flex

Reusable flex component.

1 props1 slots0 events
View component → +forms

FontPicker

Reusable font picker component.

11 props1 slots0 events
View component → +forms

FontSizePicker

Reusable font size picker component.

11 props1 slots0 events
View component → +forms

FontWeightPicker

Reusable font weight picker component.

11 props1 slots0 events
View component → +content

FooterLanguageSwitcher

Reusable footer language switcher component.

8 props1 slots0 events
View component → +feedback

FooterStatusIndicator

Reusable footer status indicator component.

6 props1 slots0 events
View component → +content

ForbiddenPage

Reusable forbidden page component.

8 props1 slots0 events
View component → +feedback

ForbiddenState

Reusable forbidden state component.

6 props1 slots0 events
View component → +content

ForgotPasswordForm

Reusable forgot password form component.

8 props1 slots0 events
View component → +content

Form

Reusable form component.

5 props1 slots0 events
View component → +actions

FormActions

Reusable form actions component.

6 props1 slots0 events
View component → +feedback

FormAlert

Reusable form alert component.

6 props1 slots0 events
View component → +overlays

FormDialog

Reusable form dialog component.

5 props1 slots0 events
View component → +core

FormError

Reusable form error component.

3 props1 slots0 events
View component → +content

FormErrorSummary

Reusable form error summary component.

3 props1 slots0 events
View component → +forms

FormField

Reusable form field component.

5 props1 slots0 events
View component → +data

FormGrid

Reusable form grid component.

5 props1 slots0 events
View component → +forms

FormGroup

Reusable form group component.

11 props1 slots0 events
View component → +content

FormHelpText

Reusable form help text component.

3 props1 slots0 events
View component → +content

FormLabel

Reusable form label component.

5 props0 slots0 events
View component → +visualization

FormProgress

Reusable form progress component.

6 props1 slots0 events
View component → +data

FormRow

Reusable form row component.

5 props1 slots0 events
View component → +layout

FormSection

Reusable form section component.

5 props1 slots0 events
View component → +core

FullBleed

Reusable full bleed component.

1 props1 slots0 events
View component → +overlays

FullscreenDialog

Reusable fullscreen dialog component.

5 props1 slots0 events
View component → +visualization

FunnelChart

Reusable funnel chart component.

6 props1 slots0 events
View component → +visualization

GeoChart

Reusable geo chart component.

6 props1 slots0 events
View component → +forms

GeofenceEditor

Reusable geofence editor component.

11 props1 slots0 events
View component → +actions

GhostButton

Reusable ghost button component.

4 props1 slots0 events
View component → +content

GlassCard

Reusable glass card component.

4 props1 slots0 events
View component → +content

GlobalSearch

Reusable global search component.

8 props1 slots0 events
View component → +actions

GradientCTA

Reusable gradient c t a component.

6 props1 slots0 events
View component → +forms

GradientPicker

Reusable gradient picker component.

11 props1 slots0 events
View component → +forms

GradientStopEditor

Reusable gradient stop editor component.

11 props1 slots0 events
View component → +data

Grid

Reusable grid component.

2 props1 slots0 events
View component → +content

GuideCard

Reusable guide card component.

8 props1 slots0 events
View component → +content

GuideChecklist

Reusable guide checklist component.

8 props1 slots0 events
View component → +feedback

GuideDifficultyBadge

Reusable guide difficulty badge component.

6 props1 slots0 events
View component → +data

GuideGrid

Reusable guide grid component.

5 props1 slots0 events
View component → +content

GuideStep

Reusable guide step component.

8 props1 slots0 events
View component → +layout

Header

Reusable header component.

5 props1 slots0 events
View component → +actions

HeaderActions

Reusable header actions component.

6 props1 slots0 events
View component → +feedback

HealthIndicator

Reusable health indicator component.

3 props1 slots0 events
View component → +layout

Hero

Reusable hero component.

10 props1 slots0 events
View component → +actions

HeroActions

Reusable hero actions component.

6 props1 slots0 events
View component → +layout

HeroCodePanel

Reusable hero code panel component.

5 props1 slots0 events
View component → +content

HeroGradientText

Reusable hero gradient text component.

8 props1 slots0 events
View component → +actions

HeroPrimaryAction

Reusable hero primary action component.

6 props1 slots0 events
View component → +content

HeroProductPreview

Reusable hero product preview component.

8 props1 slots0 events
View component → +actions

HeroSecondaryAction

Reusable hero secondary action component.

6 props1 slots0 events
View component → +content

HeroTrustText

Reusable hero trust text component.

8 props1 slots0 events
View component → +forms

HexColorInput

Reusable hex color input component.

11 props1 slots0 events
View component → +forms

HiddenField

Reusable hidden field component.

11 props1 slots0 events
View component → +content

HighlightText

Reusable highlight text component.

8 props1 slots0 events
View component → +content

HolidayCalendar

Reusable holiday calendar component.

8 props1 slots0 events
View component → +forms

HostnameInput

Reusable hostname input component.

11 props1 slots0 events
View component → +forms

HourPicker

Reusable hour picker component.

11 props1 slots0 events
View component → +forms

HslColorInput

Reusable hsl color input component.

11 props1 slots0 events
View component → +core

hstack

Reusable hstack component.

3 props1 slots0 events
View component → +forms

HtmlEditor

Reusable html editor component.

11 props1 slots0 events
View component → +content

HumanApprovalStep

Reusable human approval step component.

8 props1 slots0 events
View component → +content

Icon

Reusable icon component.

8 props1 slots0 events
View component → +actions

IconButton

Reusable icon button component.

5 props0 slots0 events
View component → +forms

IconPicker

Reusable icon picker component.

11 props1 slots0 events
View component → +forms

IconSelector

Reusable icon selector component.

11 props1 slots0 events
View component → +forms

IdentifierInput

Reusable identifier input component.

11 props1 slots0 events
View component → +content

Illustration

Reusable illustration component.

8 props1 slots0 events
View component → +content

ImageCompressionPreview

Reusable image compression preview component.

8 props1 slots0 events
View component → +forms

ImageEditor

Reusable image editor component.

11 props1 slots0 events
View component → +overlays

ImagePreviewDialog

Reusable image preview dialog component.

5 props1 slots0 events
View component → +forms

ImageSelector

Reusable image selector component.

11 props1 slots0 events
View component → +content

ImageUpload

Reusable image upload component.

8 props1 slots0 events
View component → +visualization

ImportProgress

Reusable import progress component.

6 props1 slots0 events
View component → +feedback

IncidentAlert

Reusable incident alert component.

6 props1 slots0 events
View component → +feedback

IncidentBanner

Reusable incident banner component.

6 props1 slots0 events
View component → +content

IncidentCard

Reusable incident card component.

8 props1 slots0 events
View component → +data

IncidentList

Reusable incident list component.

5 props1 slots0 events
View component → +visualization

IncidentResponseFlow

Reusable incident response flow component.

6 props1 slots0 events
View component → +feedback

IncidentSeverityBadge

Reusable incident severity badge component.

6 props1 slots0 events
View component → +visualization

IncidentTimeline

Reusable incident timeline component.

6 props1 slots0 events
View component → +feedback

IndustryBadge

Reusable industry badge component.

6 props1 slots0 events
View component → +forms

IndustrySelector

Reusable industry selector component.

11 props1 slots0 events
View component → +content

InfoCard

Reusable info card component.

4 props1 slots0 events
View component → +core

Inline

Reusable inline component.

2 props1 slots0 events
View component → +feedback

InlineAlert

Reusable inline alert component.

6 props1 slots0 events
View component → +content

InlineCode

Reusable inline code component.

3 props1 slots0 events
View component → +core

input

Reusable input component.

5 props0 slots0 events
View component → +forms

InputGroup

Reusable input group component.

11 props1 slots0 events
View component → +layout

InsetPanel

Reusable inset panel component.

1 props1 slots0 events
View component → +forms

IntegerInput

Reusable integer input component.

11 props1 slots0 events
View component → +content

IntegrationCard

Reusable integration card component.

4 props1 slots0 events
View component → +content

InvoiceLineItem

Reusable invoice line item component.

8 props1 slots0 events
View component → +content

InvoiceSummary

Reusable invoice summary component.

8 props1 slots0 events
View component → +forms

IpAddressInput

Reusable ip address input component.

11 props1 slots0 events
View component → +content

JobCard

Reusable job card component.

8 props1 slots0 events
View component → +visualization

JobProgress

Reusable job progress component.

6 props1 slots0 events
View component → +forms

JobTitleInput

Reusable job title input component.

11 props1 slots0 events
View component → +forms

JsonInput

Reusable json input component.

11 props1 slots0 events
View component → +content

JsonViewer

Reusable json viewer component.

8 props1 slots0 events
View component → +data

KeyValueTable

Reusable key value table component.

5 props1 slots0 events
View component → +content

KycDocumentUpload

Reusable kyc document upload component.

8 props1 slots0 events
View component → +forms

LanguageSelector

Reusable language selector component.

11 props1 slots0 events
View component → +content

LanguageSwitcher

Reusable language switcher component.

8 props1 slots0 events
View component → +forms

LastNameInput

Reusable last name input component.

11 props1 slots0 events
View component → +visualization

LatencyMetric

Reusable latency metric component.

6 props1 slots0 events
View component → +forms

LatitudeInput

Reusable latitude input component.

11 props1 slots0 events
View component → +data

LeadershipGrid

Reusable leadership grid component.

5 props1 slots0 events
View component → +content

LeadText

Reusable lead text component.

3 props1 slots0 events
View component → +feedback

LegalAcceptanceNotice

Reusable legal acceptance notice component.

6 props1 slots0 events
View component → +data

LegalBulletList

Reusable legal bullet list component.

5 props1 slots0 events
View component → +content

LegalContactBlock

Reusable legal contact block component.

8 props1 slots0 events
View component → +data

LegalDefinitionList

Reusable legal definition list component.

5 props1 slots0 events
View component → +layout

LegalDocumentHeader

Reusable legal document header component.

5 props1 slots0 events
View component → +layout

LegalDocumentLayout

Reusable legal document layout component.

4 props2 slots0 events
View component → +layout

LegalHero

Reusable legal hero component.

5 props1 slots0 events
View component → +forms

LegalLanguageSelector

Reusable legal language selector component.

11 props1 slots0 events
View component → +feedback

LegalNotice

Reusable legal notice component.

6 props1 slots0 events
View component → +layout

LegalPageShell

Reusable legal page shell component.

1 props2 slots0 events
View component → +actions

LegalPrintButton

Reusable legal print button component.

6 props1 slots0 events
View component → +forms

LegalRegionSelector

Reusable legal region selector component.

11 props1 slots0 events
View component → +layout

LegalSection

Reusable legal section component.

5 props1 slots0 events
View component → +content

LegalSummary

Reusable legal summary component.

8 props1 slots0 events
View component → +data

LegalTable

Reusable legal table component.

5 props1 slots0 events
View component → +core

LegalTableOfContents

Reusable legal table of contents component.

3 props0 slots0 events
View component → +feedback

LegalVersionBadge

Reusable legal version badge component.

6 props1 slots0 events
View component → +forms

LetterSpacingPicker

Reusable letter spacing picker component.

11 props1 slots0 events
View component → +forms

LicenseKeyInput

Reusable license key input component.

11 props1 slots0 events
View component → +overlays

Lightbox

Reusable lightbox component.

5 props1 slots0 events
View component → +visualization

LineChart

Reusable line chart component.

6 props1 slots0 events
View component → +forms

LineHeightPicker

Reusable line height picker component.

11 props1 slots0 events
View component → +core

Link

Reusable link component.

4 props0 slots0 events
View component → +actions

LinkButton

Reusable link button component.

4 props1 slots0 events
View component → +data

List

Reusable list component.

5 props1 slots0 events
View component → +actions

LoadingButton

Reusable loading button component.

7 props0 slots0 events
View component → +forms

LocaleSelector

Reusable locale selector component.

11 props1 slots0 events
View component → +actions

LocalizedRouteLink

Reusable localized route link component.

6 props1 slots0 events
View component → +forms

LocationPicker

Reusable location picker component.

11 props1 slots0 events
View component → +content

Logo

Reusable logo component.

8 props1 slots0 events
View component → +core

LogoCloud

Reusable logo cloud component.

11 props0 slots0 events
View component → +content

LogoUpload

Reusable logo upload component.

8 props1 slots0 events
View component → +overlays

LogoutDialog

Reusable logout dialog component.

5 props1 slots0 events
View component → +data

LogTable

Reusable log table component.

5 props1 slots0 events
View component → +forms

LongitudeInput

Reusable longitude input component.

11 props1 slots0 events
View component → +feedback

MaintenanceAlert

Reusable maintenance alert component.

6 props1 slots0 events
View component → +feedback

MaintenanceBanner

Reusable maintenance banner component.

6 props1 slots0 events
View component → +content

MaintenanceCard

Reusable maintenance card component.

8 props1 slots0 events
View component → +content

MaintenancePage

Reusable maintenance page component.

8 props1 slots0 events
View component → +feedback

MaintenanceState

Reusable maintenance state component.

6 props1 slots0 events
View component → +forms

MaintenanceWindowPicker

Reusable maintenance window picker component.

11 props1 slots0 events
View component → +forms

MapPicker

Reusable map picker component.

11 props1 slots0 events
View component → +forms

MarkdownEditor

Reusable markdown editor component.

11 props1 slots0 events
View component → +layout

MarketingPageShell

Reusable marketing page shell component.

1 props1 slots0 events
View component → +layout

MarketingSectionHeader

Reusable marketing section header component.

5 props1 slots0 events
View component → +forms

MaskedSecretField

Reusable masked secret field component.

11 props1 slots0 events
View component → +overlays

MegaMenu

Reusable mega menu component.

3 props0 slots1 events
View component → +data

MemberList

Reusable member list component.

5 props1 slots0 events
View component → +forms

MentionInput

Reusable mention input component.

11 props1 slots0 events
View component → +feedback

MessageCharacterCounter

Reusable message character counter component.

6 props1 slots0 events
View component → +content

MessageComposer

Reusable message composer component.

8 props1 slots0 events
View component → +content

MessageComposerPreview

Reusable message composer preview component.

8 props1 slots0 events
View component → +forms

MessageLimitInput

Reusable message limit input component.

11 props1 slots0 events
View component → +content

MessagePreview

Reusable message preview component.

8 props1 slots0 events
View component → +content

MessageVolumeSlider

Reusable message volume slider component.

8 props1 slots0 events
View component → +visualization

Metric

Reusable metric component.

6 props1 slots0 events
View component → +content

MetricCard

Reusable metric card component.

8 props1 slots0 events
View component → +data

MetricGrid

Reusable metric grid component.

3 props0 slots0 events
View component → +content

MetricText

Reusable metric text component.

3 props1 slots0 events
View component → +forms

MinutePicker

Reusable minute picker component.

11 props1 slots0 events
View component → +layout

MissionSection

Reusable mission section component.

5 props1 slots0 events
View component → +layout

MobileDeviceFrame

Reusable mobile device frame component.

5 props1 slots0 events
View component → +forms

MobileInput

Reusable mobile input component.

11 props1 slots0 events
View component → +actions

MobileMenuButton

Reusable mobile menu button component.

6 props1 slots0 events
View component → +layout

MobileNavigation

Reusable mobile navigation component.

4 props0 slots1 events
View component → +content

MobileTableCard

Reusable mobile table card component.

8 props1 slots0 events
View component → +core

Modal

Reusable modal component.

6 props1 slots1 events
View component → +forms

MonthlyVolumeSelector

Reusable monthly volume selector component.

11 props1 slots0 events
View component → +forms

MonthPicker

Reusable month picker component.

11 props1 slots0 events
View component → +forms

MonthYearPicker

Reusable month year picker component.

11 props1 slots0 events
View component → +content

MultiFileUpload

Reusable multi file upload component.

8 props1 slots0 events
View component → +forms

MultipleEmailInput

Reusable multiple email input component.

11 props1 slots0 events
View component → +core

MultiSelect

Reusable multi select component.

8 props0 slots0 events
View component → +content

MutedText

Reusable muted text component.

3 props1 slots0 events
View component → +forms

NameInput

Reusable name input component.

11 props1 slots0 events
View component → +core

NarrowContainer

Reusable narrow container component.

1 props1 slots0 events
View component → +layout

Navigation

Reusable navigation component.

5 props1 slots0 events
View component → +content

NavigationItem

Reusable navigation item component.

8 props1 slots0 events
View component → +overlays

NavigationMegaMenu

Reusable navigation mega menu component.

5 props1 slots0 events
View component → +feedback

NewBadge

Reusable new badge component.

3 props1 slots0 events
View component → +forms

NewPasswordInput

Reusable new password input component.

11 props1 slots0 events
View component → +actions

NewsletterCTA

Reusable newsletter c t a component.

6 props1 slots0 events
View component → +content

NewsletterForm

Reusable newsletter form component.

19 props0 slots2 events
View component → +feedback

NoResultsState

Reusable no results state component.

6 props1 slots0 events
View component → +content

NotFoundPage

Reusable not found page component.

8 props1 slots0 events
View component → +feedback

NotFoundState

Reusable not found state component.

6 props1 slots0 events
View component → +content

NotificationCard

Reusable notification card component.

4 props1 slots0 events
View component → +core

NotificationDot

Reusable notification dot component.

3 props1 slots0 events
View component → +data

NotificationList

Reusable notification list component.

5 props1 slots0 events
View component → +forms

NumberInput

Reusable number input component.

12 props0 slots0 events
View component → +content

OfficeCard

Reusable office card component.

8 props1 slots0 events
View component → +content

OfflinePage

Reusable offline page component.

8 props1 slots0 events
View component → +feedback

OfflineState

Reusable offline state component.

6 props1 slots0 events
View component → +visualization

OnboardingProgress

Reusable onboarding progress component.

6 props1 slots0 events
View component → +content

OneTimeSecretDisplay

Reusable one time secret display component.

8 props1 slots0 events
View component → +feedback

OnlineIndicator

Reusable online indicator component.

3 props1 slots0 events
View component → +content

OpacitySlider

Reusable opacity slider component.

8 props1 slots0 events
View component → +actions

OpenAPICTA

Reusable open a p i c t a component.

6 props1 slots0 events
View component → +feedback

OptionalIndicator

Reusable optional indicator component.

6 props1 slots0 events
View component → +forms

OrganizationSelector

Reusable organization selector component.

11 props1 slots0 events
View component → +forms

OtpInput

Reusable otp input component.

4 props0 slots0 events
View component → +content

OtpVerificationForm

Reusable otp verification form component.

8 props1 slots0 events
View component → +content

OutlinedCard

Reusable outlined card component.

4 props1 slots0 events
View component → +feedback

PageAlert

Reusable page alert component.

6 props1 slots0 events
View component → +core

PageHeader

Reusable page header component.

16 props0 slots0 events
View component → +core

PageHeading

Reusable page heading component.

3 props1 slots0 events
View component → +core

PageShell

Reusable page shell component.

1 props1 slots0 events
View component → +feedback

PageSkeleton

Reusable page skeleton component.

6 props1 slots0 events
View component → +core

Pagination

Reusable pagination component.

12 props0 slots0 events
View component → +layout

Panel

Reusable panel component.

1 props1 slots0 events
View component → +content

PartnerApplicationForm

Reusable partner application form component.

8 props1 slots0 events
View component → +data

PartnerLogoGrid

Reusable partner logo grid component.

5 props1 slots0 events
View component → +content

PartnerProgramCard

Reusable partner program card component.

8 props1 slots0 events
View component → +actions

PasskeyButton

Reusable passkey button component.

6 props1 slots0 events
View component → +forms

PasswordInput

Reusable password input component.

12 props0 slots0 events
View component → +data

PasswordRequirementList

Reusable password requirement list component.

5 props1 slots0 events
View component → +visualization

PasswordStrengthMeter

Reusable password strength meter component.

6 props1 slots0 events
View component → +forms

PasswordVisibilityToggle

Reusable password visibility toggle component.

11 props1 slots0 events
View component → +forms

PathInput

Reusable path input component.

11 props1 slots0 events
View component → +content

PaymentMethodCard

Reusable payment method card component.

8 props1 slots0 events
View component → +content

PdfPreview

Reusable pdf preview component.

8 props1 slots0 events
View component → +forms

PercentageInput

Reusable percentage input component.

11 props1 slots0 events
View component → +forms

PermissionSelector

Reusable permission selector component.

11 props1 slots0 events
View component → +forms

PhoneInput

Reusable phone input component.

12 props0 slots0 events
View component → +visualization

PieChart

Reusable pie chart component.

6 props1 slots0 events
View component → +core

Pill

Reusable pill component.

3 props1 slots0 events
View component → +forms

PinInput

Reusable pin input component.

11 props1 slots0 events
View component → +forms

PlainTextEditor

Reusable plain text editor component.

11 props1 slots0 events
View component → +actions

PlanCTA

Reusable plan c t a component.

6 props1 slots0 events
View component → +data

PlanFeatureList

Reusable plan feature list component.

5 props1 slots0 events
View component → +data

PlanLimitList

Reusable plan limit list component.

5 props1 slots0 events
View component → +forms

PlanSelector

Reusable plan selector component.

11 props1 slots0 events
View component → +content

PlatformPillarCard

Reusable platform pillar card component.

8 props1 slots0 events
View component → +data

PolicyVersionTable

Reusable policy version table component.

5 props1 slots0 events
View component → +overlays

Popover

Reusable popover component.

5 props1 slots0 events
View component → +forms

PortInput

Reusable port input component.

11 props1 slots0 events
View component → +forms

PortNumberInput

Reusable port number input component.

11 props1 slots0 events
View component → +forms

PositiveNumberInput

Reusable positive number input component.

11 props1 slots0 events
View component → +forms

PostalCodeInput

Reusable postal code input component.

11 props1 slots0 events
View component → +actions

PostmanCTA

Reusable postman c t a component.

6 props1 slots0 events
View component → +forms

PresetDateRangePicker

Reusable preset date range picker component.

11 props1 slots0 events
View component → +content

PressReleaseCard

Reusable press release card component.

8 props1 slots0 events
View component → +feedback

PreviewBadge

Reusable preview badge component.

3 props1 slots0 events
View component → +layout

PreviousNextNavigation

Reusable previous next navigation component.

5 props1 slots0 events
View component → +forms

PriceInput

Reusable price input component.

11 props1 slots0 events
View component → +content

PriceRangeSlider

Reusable price range slider component.

8 props1 slots0 events
View component → +content

PriceText

Reusable price text component.

3 props1 slots0 events
View component → +content

PricingCard

Reusable pricing card component.

8 props1 slots0 events
View component → +data

PricingComparisonTable

Reusable pricing comparison table component.

4 props0 slots0 events
View component → +content

PricingContactForm

Reusable pricing contact form component.

8 props1 slots0 events
View component → +forms

PricingFeatureGroup

Reusable pricing feature group component.

11 props1 slots0 events
View component → +data

PricingGrid

Reusable pricing grid component.

5 props1 slots0 events
View component → +layout

PricingHero

Reusable pricing hero component.

5 props1 slots0 events
View component → +content

PricingPlanCard

Reusable pricing plan card component.

8 props1 slots0 events
View component → +data

PricingTable

Reusable pricing table component.

5 props1 slots0 events
View component → +forms

PricingToggle

Reusable pricing toggle component.

11 props1 slots0 events
View component → +actions

PrimaryButton

Reusable primary button component.

4 props1 slots0 events
View component → +actions

PrintAction

Reusable print action component.

6 props1 slots0 events
View component → +actions

PrintPolicyButton

Reusable print policy button component.

6 props1 slots0 events
View component → +forms

PrioritySelector

Reusable priority selector component.

11 props1 slots0 events
View component → +feedback

PrivacyNotice

Reusable privacy notice component.

6 props1 slots0 events
View component → +visualization

ProductArchitectureDiagram

Reusable product architecture diagram component.

6 props1 slots0 events
View component → +content

ProductCard

Reusable product card component.

7 props0 slots0 events
View component → +layout

ProductCategorySection

Reusable product category section component.

5 props1 slots0 events
View component → +actions

ProductCTA

Reusable product c t a component.

6 props1 slots0 events
View component → +data

ProductFeatureList

Reusable product feature list component.

5 props1 slots0 events
View component → +data

ProductGrid

Reusable product grid component.

5 props1 slots0 events
View component → +layout

ProductHero

Reusable product hero component.

5 props1 slots0 events
View component → +content

ProductIcon

Reusable product icon component.

8 props1 slots0 events
View component → +data

ProductIntegrationList

Reusable product integration list component.

5 props1 slots0 events
View component → +data

ProductList

Reusable product list component.

5 props1 slots0 events
View component → +content

ProductLogo

Reusable product logo component.

8 props1 slots0 events
View component → +core

ProductMegaMenu

Reusable product mega menu component.

1 props0 slots0 events
View component → +content

ProductMiniCard

Reusable product mini card component.

8 props1 slots0 events
View component → +content

ProductNavigationCard

Reusable product navigation card component.

8 props1 slots0 events
View component → +layout

ProductPageShell

Reusable product page shell component.

1 props1 slots0 events
View component → +forms

ProductSelector

Reusable product selector component.

11 props1 slots0 events
View component → +overlays

ProductsMegaMenu

Reusable products mega menu component.

3 props0 slots0 events
View component → +feedback

ProductStatusBadge

Reusable product status badge component.

3 props1 slots0 events
View component → +data

ProductUseCaseList

Reusable product use case list component.

5 props1 slots0 events
View component → +core

progress

Reusable progress component.

3 props0 slots0 events
View component → +core

ProgressBar

Reusable progress bar component.

5 props0 slots0 events
View component → +visualization

ProgressChart

Reusable progress chart component.

6 props1 slots0 events
View component → +visualization

ProgressRing

Reusable progress ring component.

6 props1 slots0 events
View component → +content

ProgressSlider

Reusable progress slider component.

8 props1 slots0 events
View component → +content

ProjectCard

Reusable project card component.

4 props1 slots0 events
View component → +forms

ProjectSelector

Reusable project selector component.

11 props1 slots0 events
View component → +content

ProjectSwitcher

Reusable project switcher component.

8 props1 slots0 events
View component → +forms

PromoCodeInput

Reusable promo code input component.

11 props1 slots0 events
View component → +overlays

PromptDialog

Reusable prompt dialog component.

5 props1 slots0 events
View component → +forms

ProviderSelector

Reusable provider selector component.

11 props1 slots0 events
View component → +core

PublicFooter

Reusable public footer component.

1 props0 slots1 events
View component → +layout

PublicHeader

Reusable public header component.

1 props0 slots1 events
View component → +content

PublicHeaderLogo

Reusable public header logo component.

8 props1 slots0 events
View component → +core

PublicMobileNavigation

Reusable public mobile navigation component.

1 props0 slots1 events
View component → +layout

PublicPageShell

Reusable public page shell component.

5 props1 slots0 events
View component → +core

PublicSearch

Reusable public search component.

15 props0 slots4 events
View component → +forms

PublishDateTimePicker

Reusable publish date time picker component.

11 props1 slots0 events
View component → +content

PushComposer

Reusable push composer component.

8 props1 slots0 events
View component → +forms

PushNotificationEditor

Reusable push notification editor component.

11 props1 slots0 events
View component → +content

QrCode

Reusable qr code component.

8 props1 slots0 events
View component → +forms

QuantityInput

Reusable quantity input component.

11 props1 slots0 events
View component → +content

QuantityStepper

Reusable quantity stepper component.

8 props1 slots0 events
View component → +forms

QuietHoursPicker

Reusable quiet hours picker component.

8 props0 slots0 events
View component → +content

QuoteText

Reusable quote text component.

3 props1 slots0 events
View component → +core

Radio

Reusable radio component.

8 props0 slots0 events
View component → +forms

RadioGroup

Reusable radio group component.

3 props1 slots0 events
View component → +forms

RangeInput

Reusable range input component.

11 props1 slots0 events
View component → +content

RangeSlider

Reusable range slider component.

8 props1 slots0 events
View component → +feedback

RateLimitedState

Reusable rate limited state component.

6 props1 slots0 events
View component → +forms

RateLimitInput

Reusable rate limit input component.

11 props1 slots0 events
View component → +content

RateLimitPage

Reusable rate limit page component.

8 props1 slots0 events
View component → +data

RateTable

Reusable rate table component.

5 props1 slots0 events
View component → +content

RatingSlider

Reusable rating slider component.

8 props1 slots0 events
View component → +forms

RecipientSelector

Reusable recipient selector component.

11 props1 slots0 events
View component → +content

RecoveryCodeForm

Reusable recovery code form component.

8 props1 slots0 events
View component → +forms

RecoveryCodeInput

Reusable recovery code input component.

11 props1 slots0 events
View component → +content

RecurrenceRuleBuilder

Reusable recurrence rule builder component.

8 props1 slots0 events
View component → +forms

RecurringSchedulePicker

Reusable recurring schedule picker component.

6 props0 slots0 events
View component → +forms

RedirectUriInput

Reusable redirect uri input component.

11 props1 slots0 events
View component → +forms

ReferenceInput

Reusable reference input component.

11 props1 slots0 events
View component → +forms

RegexInput

Reusable regex input component.

11 props1 slots0 events
View component → +feedback

RegionalPrivacyBanner

Reusable regional privacy banner component.

6 props1 slots0 events
View component → +data

RegionAvailabilityTable

Reusable region availability table component.

5 props1 slots0 events
View component → +forms

RegionSelector

Reusable region selector component.

11 props1 slots0 events
View component → +feedback

RegionUnavailableAlert

Reusable region unavailable alert component.

6 props1 slots0 events
View component → +feedback

RegionUnavailableState

Reusable region unavailable state component.

6 props1 slots0 events
View component → +actions

RejectOptionalCookiesButton

Reusable reject optional cookies button component.

6 props1 slots0 events
View component → +actions

ReopenCookieSettingsButton

Reusable reopen cookie settings button component.

6 props1 slots0 events
View component → +content

ReportCard

Reusable report card component.

8 props1 slots0 events
View component → +content

RequestResponseViewer

Reusable request response viewer component.

8 props1 slots0 events
View component → +content

RequestViewer

Reusable request viewer component.

8 props1 slots0 events
View component → +feedback

RequiredIndicator

Reusable required indicator component.

6 props1 slots0 events
View component → +content

ResetPasswordForm

Reusable reset password form component.

8 props1 slots0 events
View component → +layout

ResizablePanel

Reusable resizable panel component.

5 props1 slots0 events
View component → +content

ResourceCard

Reusable resource card component.

8 props1 slots0 events
View component → +content

ResourceDownloadCard

Reusable resource download card component.

8 props1 slots0 events
View component → +layout

ResourcePageShell

Reusable resource page shell component.

5 props1 slots0 events
View component → +content

ResourceSearch

Reusable resource search component.

8 props1 slots0 events
View component → +overlays

ResourcesMegaMenu

Reusable resources mega menu component.

1 props0 slots0 events
View component → +feedback

ResourceTypeBadge

Reusable resource type badge component.

6 props1 slots0 events
View component → +content

ResponseViewer

Reusable response viewer component.

8 props1 slots0 events
View component → +actions

ResponsibleDisclosureCTA

Reusable responsible disclosure c t a component.

6 props1 slots0 events
View component → +data

ResponsiveTable

Reusable responsive table component.

5 props1 slots0 events
View component → +layout

ResultsSection

Reusable results section component.

5 props1 slots0 events
View component → +data

RetentionTable

Reusable retention table component.

5 props1 slots0 events
View component → +forms

RetryCountInput

Reusable retry count input component.

11 props1 slots0 events
View component → +visualization

RevenueChart

Reusable revenue chart component.

6 props1 slots0 events
View component → +forms

RgbColorInput

Reusable rgb color input component.

11 props1 slots0 events
View component → +forms

RichTextEditor

Reusable rich text editor component.

11 props1 slots0 events
View component → +forms

RichTextInput

Reusable rich text input component.

11 props1 slots0 events
View component → +forms

RoleSelector

Reusable role selector component.

11 props1 slots0 events
View component → +forms

RollingDateRangePicker

Reusable rolling date range picker component.

11 props1 slots0 events
View component → +actions

SaveCookiePreferencesButton

Reusable save cookie preferences button component.

6 props1 slots0 events
View component → +forms

SavedFilterSelector

Reusable saved filter selector component.

11 props1 slots0 events
View component → +forms

ScheduledDateTimePicker

Reusable scheduled date time picker component.

11 props1 slots0 events
View component → +forms

ScheduleMessagePicker

Reusable schedule message picker component.

11 props1 slots0 events
View component → +forms

SchedulePicker

Reusable schedule picker component.

2 props0 slots0 events
View component → +layout

ScreenshotFrame

Reusable screenshot frame component.

5 props1 slots0 events
View component → +core

ScrollArea

Reusable scroll area component.

1 props1 slots0 events
View component → +content

SDKCard

Reusable s d k card component.

8 props1 slots0 events
View component → +forms

SdkLanguageSelector

Reusable sdk language selector component.

11 props1 slots0 events
View component → +content

SDKLanguageTabs

Reusable s d k language tabs component.

8 props1 slots0 events
View component → +core

SDKTabs

Reusable sdktabs component.

4 props0 slots1 events
View component → +actions

SearchButton

Reusable search button component.

6 props1 slots0 events
View component → +content

SearchCategoryTabs

Reusable search category tabs component.

8 props1 slots0 events
View component → +overlays

SearchDialog

Reusable search dialog component.

5 props1 slots0 events
View component → +feedback

SearchEmptyState

Reusable search empty state component.

6 props1 slots0 events
View component → +forms

SearchInput

Reusable search input component.

12 props0 slots0 events
View component → +feedback

SearchLoadingState

Reusable search loading state component.

6 props1 slots0 events
View component → +content

SearchResultItem

Reusable search result item component.

8 props1 slots0 events
View component → +actions

SecondaryButton

Reusable secondary button component.

4 props1 slots0 events
View component → +forms

SecondPicker

Reusable second picker component.

11 props1 slots0 events
View component → +content

SecretDisplay

Reusable secret display component.

8 props1 slots0 events
View component → +forms

SecretInput

Reusable secret input component.

11 props1 slots0 events
View component → +overlays

SecretRevealDialog

Reusable secret reveal dialog component.

5 props1 slots0 events
View component → +layout

Section

Reusable section component.

4 props1 slots0 events
View component → +actions

SectionActions

Reusable section actions component.

6 props1 slots0 events
View component → +layout

SectionHeader

Reusable section header component.

5 props1 slots0 events
View component → +core

SectionHeading

Reusable section heading component.

3 props1 slots0 events
View component → +feedback

SecurityAlert

Reusable security alert component.

6 props1 slots0 events
View component → +content

SecurityContactCard

Reusable security contact card component.

8 props1 slots0 events
View component → +content

SecurityFeatureCard

Reusable security feature card component.

8 props1 slots0 events
View component → +layout

SecurityHero

Reusable security hero component.

5 props1 slots0 events
View component → +data

SecurityPillarGrid

Reusable security pillar grid component.

5 props1 slots0 events
View component → +data

SecurityPracticeList

Reusable security practice list component.

5 props1 slots0 events
View component → +content

SecurityReportForm

Reusable security report form component.

8 props1 slots0 events
View component → +core

Select

Reusable select component.

8 props1 slots0 events
View component → +forms

SenderIdInput

Reusable sender id input component.

11 props1 slots0 events
View component → +content

ServerErrorPage

Reusable server error page component.

8 props1 slots0 events
View component → +data

ServiceLevelTable

Reusable service level table component.

5 props1 slots0 events
View component → +feedback

ServiceStatusBadge

Reusable service status badge component.

6 props1 slots0 events
View component → +data

ServiceStatusList

Reusable service status list component.

5 props1 slots0 events
View component → +data

ServiceStatusRow

Reusable service status row component.

5 props1 slots0 events
View component → +content

SessionCard

Reusable session card component.

8 props1 slots0 events
View component → +overlays

SessionExpiredDialog

Reusable session expired dialog component.

5 props1 slots0 events
View component → +content

SetupChecklist

Reusable setup checklist component.

8 props1 slots0 events
View component → +forms

SeveritySelector

Reusable severity selector component.

11 props1 slots0 events
View component → +forms

ShadowPicker

Reusable shadow picker component.

11 props1 slots0 events
View component → +actions

ShareAction

Reusable share action component.

6 props1 slots0 events
View component → +actions

ShareButton

Reusable share button component.

4 props1 slots0 events
View component → +layout

SidebarLayout

Reusable sidebar layout component.

1 props1 slots0 events
View component → +layout

SidePanel

Reusable side panel component.

5 props1 slots0 events
View component → +content

SignInForm

Reusable sign in form component.

8 props1 slots0 events
View component → +actions

SignInLink

Reusable sign in link component.

6 props1 slots0 events
View component → +content

SignUpForm

Reusable sign up form component.

8 props1 slots0 events
View component → +content

SiteSearch

Reusable site search component.

8 props1 slots0 events
View component → +feedback

Skeleton

Reusable skeleton component.

3 props0 slots0 events
View component → +actions

SkipLink

Reusable skip link component.

6 props1 slots0 events
View component → +data

SlaTable

Reusable sla table component.

5 props1 slots0 events
View component → +content

Slider

Reusable slider component.

8 props1 slots0 events
View component → +forms

SlugInput

Reusable slug input component.

11 props1 slots0 events
View component → +content

SmallText

Reusable small text component.

3 props1 slots0 events
View component → +visualization

SmartRouteDiagram

Reusable smart route diagram component.

6 props1 slots0 events
View component → +content

SmsComposer

Reusable sms composer component.

8 props1 slots0 events
View component → +forms

SmsMessageEditor

Reusable sms message editor component.

11 props1 slots0 events
View component → +feedback

SmsSegmentCounter

Reusable sms segment counter component.

6 props1 slots0 events
View component → +core

SocialShare

Reusable social share component.

10 props0 slots1 events
View component → +layout

SolutionHero

Reusable solution hero component.

5 props1 slots0 events
View component → +layout

SolutionPageShell

Reusable solution page shell component.

5 props1 slots0 events
View component → +layout

SolutionSection

Reusable solution section component.

5 props1 slots0 events
View component → +overlays

SolutionsMegaMenu

Reusable solutions mega menu component.

1 props0 slots0 events
View component → +data

SortableTable

Reusable sortable table component.

5 props1 slots0 events
View component → +core

spacer

Reusable spacer component.

1 props0 slots0 events
View component → +core

Spinner

Reusable spinner component.

3 props0 slots0 events
View component → +actions

SplitButton

Reusable split button component.

6 props1 slots0 events
View component → +actions

SplitCTA

Reusable split c t a component.

6 props1 slots0 events
View component → +layout

SplitHero

Reusable split hero component.

5 props1 slots0 events
View component → +layout

SplitLayout

Reusable split layout component.

1 props1 slots0 events
View component → +layout

SplitSectionHeader

Reusable split section header component.

5 props1 slots0 events
View component → +core

Stack

Reusable stack component.

2 props1 slots0 events
View component → +actions

StartFreeButton

Reusable start free button component.

6 props1 slots0 events
View component → +content

StatCard

Reusable stat card component.

5 props0 slots0 events
View component → +forms

StateSelector

Reusable state selector component.

11 props1 slots0 events
View component → +feedback

StatusBadge

Reusable status badge component.

2 props0 slots0 events
View component → +core

StatusBanner

Reusable status banner component.

9 props0 slots1 events
View component → +layout

StatusPageShell

Reusable status page shell component.

5 props1 slots0 events
View component → +forms

StatusSelector

Reusable status selector component.

11 props1 slots0 events
View component → +content

StatusSubscribeForm

Reusable status subscribe form component.

8 props1 slots0 events
View component → +data

StatusTable

Reusable status table component.

5 props1 slots0 events
View component → +layout

StepNavigation

Reusable step navigation component.

5 props1 slots0 events
View component → +content

Stepper

Reusable stepper component.

8 props1 slots0 events
View component → +forms

StepperInput

Reusable stepper input component.

11 props1 slots0 events
View component → +overlays

StepUpAuthenticationDialog

Reusable step up authentication dialog component.

5 props1 slots0 events
View component → +forms

StickerPicker

Reusable sticker picker component.

11 props1 slots0 events
View component → +core

Sticky

Reusable sticky component.

1 props1 slots0 events
View component → +layout

StickyLayout

Reusable sticky layout component.

1 props1 slots0 events
View component → +forms

StreetAddressInput

Reusable street address input component.

11 props1 slots0 events
View component → +forms

SubdomainInput

Reusable subdomain input component.

11 props1 slots0 events
View component → +forms

SubjectInput

Reusable subject input component.

11 props1 slots0 events
View component → +data

SubprocessorTable

Reusable subprocessor table component.

5 props1 slots0 events
View component → +core

SubsectionHeading

Reusable subsection heading component.

3 props1 slots0 events
View component → +content

SuccessCard

Reusable success card component.

4 props1 slots0 events
View component → +feedback

SuccessState

Reusable success state component.

6 props1 slots0 events
View component → +content

SupportRequestForm

Reusable support request form component.

8 props1 slots0 events
View component → +core

Surface

Reusable surface component.

1 props1 slots0 events
View component → +core

Switch

Reusable switch component.

7 props0 slots1 events
View component → +data

Table

Reusable table component.

3 props1 slots0 events
View component → +layout

TableHeader

Reusable table header component.

5 props1 slots0 events
View component → +data

TableRow

Reusable table row component.

5 props1 slots0 events
View component → +feedback

TableSkeleton

Reusable table skeleton component.

6 props1 slots0 events
View component → +content

Tabs

Reusable tabs component.

2 props2 slots1 events
View component → +core

tag

Reusable tag component.

3 props1 slots0 events
View component → +forms

TagInput

Reusable tag input component.

11 props1 slots0 events
View component → +feedback

TaxNotice

Reusable tax notice component.

6 props1 slots0 events
View component → +forms

TaxRateInput

Reusable tax rate input component.

11 props1 slots0 events
View component → +content

TeamMemberCard

Reusable team member card component.

8 props1 slots0 events
View component → +forms

TeamSizeSelector

Reusable team size selector component.

11 props1 slots0 events
View component → +content

TemplateCard

Reusable template card component.

4 props1 slots0 events
View component → +forms

TemplateSelector

Reusable template selector component.

11 props1 slots0 events
View component → +forms

TemplateVariableInput

Reusable template variable input component.

11 props1 slots0 events
View component → +visualization

TenantIsolationDiagram

Reusable tenant isolation diagram component.

6 props1 slots0 events
View component → +content

TerminalBlock

Reusable terminal block component.

8 props1 slots0 events
View component → +actions

TertiaryButton

Reusable tertiary button component.

4 props1 slots0 events
View component → +content

TestimonialCard

Reusable testimonial card component.

6 props0 slots0 events
View component → +content

TestimonialCarousel

Reusable testimonial carousel component.

8 props1 slots0 events
View component → +overlays

TestMessageDialog

Reusable test message dialog component.

5 props1 slots0 events
View component → +core

Textarea

Reusable textarea component.

11 props0 slots0 events
View component → +forms

TextInput

Reusable text input component.

12 props0 slots0 events
View component → +actions

TextLink

Reusable text link component.

6 props1 slots0 events
View component → +feedback

TextSkeleton

Reusable text skeleton component.

6 props1 slots0 events
View component → +core

theme-toggle

Reusable theme-toggle component.

2 props1 slots0 events
View component → +forms

ThemeColorPicker

Reusable theme color picker component.

11 props1 slots0 events
View component → +content

ThemeSwitcher

Reusable theme switcher component.

8 props1 slots0 events
View component → +forms

TimeInput

Reusable time input component.

12 props0 slots0 events
View component → +visualization

Timeline

Reusable timeline component.

2 props1 slots0 events
View component → +visualization

TimelineChart

Reusable timeline chart component.

6 props1 slots0 events
View component → +content

TimelineItem

Reusable timeline item component.

5 props0 slots0 events
View component → +forms

TimeoutInput

Reusable timeout input component.

11 props1 slots0 events
View component → +forms

TimePicker

Reusable time picker component.

10 props0 slots0 events
View component → +forms

TimeRangePicker

Reusable time range picker component.

11 props1 slots0 events
View component → +forms

TimezoneAwareTimePicker

Reusable timezone aware time picker component.

11 props1 slots0 events
View component → +forms

TimezoneSelector

Reusable timezone selector component.

4 props0 slots0 events
View component → +core

Toast

Reusable toast component.

5 props0 slots1 events
View component → +actions

ToastAction

Reusable toast action component.

6 props1 slots0 events
View component → +core

ToastHost

Reusable toast host component.

1 props0 slots1 events
View component → +content

ToastIcon

Reusable toast icon component.

8 props1 slots0 events
View component → +visualization

ToastProgress

Reusable toast progress component.

6 props1 slots0 events
View component → +forms

Toggle

Reusable toggle component.

11 props1 slots0 events
View component → +forms

ToggleGroup

Reusable toggle group component.

11 props1 slots0 events
View component → +forms

TokenInput

Reusable token input component.

11 props1 slots0 events
View component → +content

Tooltip

Reusable tooltip component.

3 props1 slots0 events
View component → +content

TotpVerificationForm

Reusable totp verification form component.

8 props1 slots0 events
View component → +content

TranslatedText

Reusable translated text component.

8 props1 slots0 events
View component → +data

TreeTable

Reusable tree table component.

5 props1 slots0 events
View component → +feedback

TrendIndicator

Reusable trend indicator component.

6 props1 slots0 events
View component → +content

TruncatedText

Reusable truncated text component.

8 props1 slots0 events
View component → +data

TrustBadgeList

Reusable trust badge list component.

5 props1 slots0 events
View component → +core

Typography

Reusable typography component.

4 props1 slots0 events
View component → +feedback

UnavailableRegionState

Reusable unavailable region state component.

6 props1 slots0 events
View component → +content

UnifiedTimelinePreview

Reusable unified timeline preview component.

8 props1 slots0 events
View component → +overlays

UnsavedChangesDialog

Reusable unsaved changes dialog component.

5 props1 slots0 events
View component → +content

UploadItem

Reusable upload item component.

8 props1 slots0 events
View component → +content

UploadPreview

Reusable upload preview component.

8 props1 slots0 events
View component → +visualization

UploadProgress

Reusable upload progress component.

6 props1 slots0 events
View component → +visualization

UptimeChart

Reusable uptime chart component.

6 props1 slots0 events
View component → +visualization

UptimeMetric

Reusable uptime metric component.

6 props1 slots0 events
View component → +forms

UrlInput

Reusable url input component.

12 props0 slots0 events
View component → +data

UsagePricingTable

Reusable usage pricing table component.

5 props1 slots0 events
View component → +forms

UseCaseSelector

Reusable use case selector component.

11 props1 slots0 events
View component → +content

UserCard

Reusable user card component.

4 props1 slots0 events
View component → +forms

UsernameInput

Reusable username input component.

11 props1 slots0 events
View component → +content

ValueCard

Reusable value card component.

8 props1 slots0 events
View component → +data

ValuesGrid

Reusable values grid component.

5 props1 slots0 events
View component → +forms

VerificationCodeInput

Reusable verification code input component.

11 props1 slots0 events
View component → +feedback

VerifiedBadge

Reusable verified badge component.

3 props1 slots0 events
View component → +forms

VersionSelector

Reusable version selector component.

11 props1 slots0 events
View component → +content

VerticalTabs

Reusable vertical tabs component.

8 props1 slots0 events
View component → +content

VideoCard

Reusable video card component.

8 props1 slots0 events
View component → +overlays

VideoPreviewDialog

Reusable video preview dialog component.

5 props1 slots0 events
View component → +content

VideoUpload

Reusable video upload component.

8 props1 slots0 events
View component → +data

VirtualizedTable

Reusable virtualized table component.

5 props1 slots0 events
View component → +layout

VisionSection

Reusable vision section component.

5 props1 slots0 events
View component → +core

VisuallyHidden

Reusable visually hidden component.

1 props1 slots0 events
View component → +content

VoiceScriptComposer

Reusable voice script composer component.

8 props1 slots0 events
View component → +forms

VoiceScriptEditor

Reusable voice script editor component.

11 props1 slots0 events
View component → +forms

VolumeInput

Reusable volume input component.

11 props1 slots0 events
View component → +content

VolumeSlider

Reusable volume slider component.

8 props1 slots0 events
View component → +content

WarningCard

Reusable warning card component.

4 props1 slots0 events
View component → +content

WebhookEventCard

Reusable webhook event card component.

8 props1 slots0 events
View component → +visualization

WebhookFlowDiagram

Reusable webhook flow diagram component.

6 props1 slots0 events
View component → +content

WebhookPayloadViewer

Reusable webhook payload viewer component.

8 props1 slots0 events
View component → +forms

WebhookUrlInput

Reusable webhook url input component.

11 props1 slots0 events
View component → +content

WebinarCard

Reusable webinar card component.

8 props1 slots0 events
View component → +content

WebinarRegistrationForm

Reusable webinar registration form component.

8 props1 slots0 events
View component → +core

Well

Reusable well component.

1 props1 slots0 events
View component → +content

WhatsAppComposer

Reusable whats app composer component.

8 props1 slots0 events
View component → +forms

WhatsAppNumberInput

Reusable whats app number input component.

11 props1 slots0 events
View component → +forms

WhatsAppTemplateEditor

Reusable whats app template editor component.

11 props1 slots0 events
View component → +core

WideContainer

Reusable wide container component.

1 props1 slots0 events
View component → +content

Wizard

Reusable wizard component.

8 props1 slots0 events
View component → +layout

WizardHeader

Reusable wizard header component.

5 props1 slots0 events
View component → +layout

WizardNavigation

Reusable wizard navigation component.

5 props1 slots0 events
View component → +content

WorkflowCanvasPreview

Reusable workflow canvas preview component.

8 props1 slots0 events
View component → +visualization

WorkflowProgress

Reusable workflow progress component.

6 props1 slots0 events
View component → +content

WorkspaceCard

Reusable workspace card component.

4 props1 slots0 events
View component → +forms

WorkspaceSelector

Reusable workspace selector component.

11 props1 slots0 events
View component → +content

WorkspaceSwitcher

Reusable workspace switcher component.

8 props1 slots0 events
View component → +forms

YearPicker

Reusable year picker component.

11 props1 slots0 events
View component → +content

ZoomSlider

Reusable zoom slider component.

8 props1 slots0 events
View component →
+ + +
+ } +} diff --git a/app/pages/components/accept-all-cookies-button.wrn b/app/pages/components/accept-all-cookies-button.wrn new file mode 100644 index 00000000..8b0370f6 --- /dev/null +++ b/app/pages/components/accept-all-cookies-button.wrn @@ -0,0 +1,32 @@ +page AcceptAllCookiesButtoncomponent { + seo { + title = "AcceptAllCookiesButton component" + description = "Reusable accept all cookies button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

AcceptAllCookiesButton

Reusable accept all cookies button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AcceptAllCookiesButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="AcceptAllCookiesButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AcceptAllCookiesButton.wrn

component AcceptAllCookiesButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-accordion.wrn b/app/pages/components/accessible-accordion.wrn new file mode 100644 index 00000000..45047124 --- /dev/null +++ b/app/pages/components/accessible-accordion.wrn @@ -0,0 +1,34 @@ +page AccessibleAccordioncomponent { + seo { + title = "AccessibleAccordion component" + description = "Reusable accessible accordion component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AccessibleAccordion

Reusable accessible accordion component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleAccordion eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AccessibleAccordion".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleAccordion.wrn

component AccessibleAccordion {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-carousel.wrn b/app/pages/components/accessible-carousel.wrn new file mode 100644 index 00000000..8aa3005d --- /dev/null +++ b/app/pages/components/accessible-carousel.wrn @@ -0,0 +1,34 @@ +page AccessibleCarouselcomponent { + seo { + title = "AccessibleCarousel component" + description = "Reusable accessible carousel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AccessibleCarousel

Reusable accessible carousel component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleCarousel eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AccessibleCarousel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleCarousel.wrn

component AccessibleCarousel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-chart-summary.wrn b/app/pages/components/accessible-chart-summary.wrn new file mode 100644 index 00000000..0eade6eb --- /dev/null +++ b/app/pages/components/accessible-chart-summary.wrn @@ -0,0 +1,34 @@ +page AccessibleChartSummarycomponent { + seo { + title = "AccessibleChartSummary component" + description = "Reusable accessible chart summary component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AccessibleChartSummary

Reusable accessible chart summary component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleChartSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AccessibleChartSummary".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleChartSummary.wrn

component AccessibleChartSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-dialog.wrn b/app/pages/components/accessible-dialog.wrn new file mode 100644 index 00000000..520e2457 --- /dev/null +++ b/app/pages/components/accessible-dialog.wrn @@ -0,0 +1,31 @@ +page AccessibleDialogcomponent { + seo { + title = "AccessibleDialog component" + description = "Reusable accessible dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

AccessibleDialog

Reusable accessible dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="AccessibleDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleDialog.wrn

component AccessibleDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-error-summary.wrn b/app/pages/components/accessible-error-summary.wrn new file mode 100644 index 00000000..2d759916 --- /dev/null +++ b/app/pages/components/accessible-error-summary.wrn @@ -0,0 +1,34 @@ +page AccessibleErrorSummarycomponent { + seo { + title = "AccessibleErrorSummary component" + description = "Reusable accessible error summary component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AccessibleErrorSummary

Reusable accessible error summary component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleErrorSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AccessibleErrorSummary".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleErrorSummary.wrn

component AccessibleErrorSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-icon.wrn b/app/pages/components/accessible-icon.wrn new file mode 100644 index 00000000..55a5875b --- /dev/null +++ b/app/pages/components/accessible-icon.wrn @@ -0,0 +1,34 @@ +page AccessibleIconcomponent { + seo { + title = "AccessibleIcon component" + description = "Reusable accessible icon component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AccessibleIcon

Reusable accessible icon component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleIcon eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AccessibleIcon".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleIcon.wrn

component AccessibleIcon {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-menu.wrn b/app/pages/components/accessible-menu.wrn new file mode 100644 index 00000000..eac65f7e --- /dev/null +++ b/app/pages/components/accessible-menu.wrn @@ -0,0 +1,31 @@ +page AccessibleMenucomponent { + seo { + title = "AccessibleMenu component" + description = "Reusable accessible menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

AccessibleMenu

Reusable accessible menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="AccessibleMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleMenu.wrn

component AccessibleMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-tabs.wrn b/app/pages/components/accessible-tabs.wrn new file mode 100644 index 00000000..73a24aa1 --- /dev/null +++ b/app/pages/components/accessible-tabs.wrn @@ -0,0 +1,34 @@ +page AccessibleTabscomponent { + seo { + title = "AccessibleTabs component" + description = "Reusable accessible tabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AccessibleTabs

Reusable accessible tabs component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleTabs eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AccessibleTabs".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleTabs.wrn

component AccessibleTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accessible-tooltip.wrn b/app/pages/components/accessible-tooltip.wrn new file mode 100644 index 00000000..399a7703 --- /dev/null +++ b/app/pages/components/accessible-tooltip.wrn @@ -0,0 +1,34 @@ +page AccessibleTooltipcomponent { + seo { + title = "AccessibleTooltip component" + description = "Reusable accessible tooltip component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AccessibleTooltip

Reusable accessible tooltip component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleTooltip eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AccessibleTooltip".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleTooltip.wrn

component AccessibleTooltip {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/accordion.wrn b/app/pages/components/accordion.wrn new file mode 100644 index 00000000..e8c22dd5 --- /dev/null +++ b/app/pages/components/accordion.wrn @@ -0,0 +1,52 @@ +page Accordioncomponent { + seo { + title = "Accordion component" + description = "Reusable accordion component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Accordion

Reusable accordion component.

@wrnexus/ui 0.2.643 props1 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Accordion title="Question" open="false" />

Legacy mount name: data-component="Accordion".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Question"
openbooleanOptionalfalse

Slots

  • default

Events

  • click

Source contract

Installed source: components/Accordion.wrn

component Accordion {
+    props {
+        class = ""
+        title = "Question"
+        open = false
+    }
+
+    state expanded = open
+
+    view {
+        <div class="border-b border-slate-200 dark:border-slate-800 {class}" >
+            <button
+                type="button"
+                class="flex w-full items-center justify-between gap-4 py-5 text-left font-semibold"
+                aria-expanded="{expanded}"
+                @click="expanded = !expanded"
+            >
+                <span >
+                    {title}
+                </span>
+                <span class="text-xl transition-transform {expanded ? 'rotate-45' : ''}">+</span>
+            </button>
+            <div
+                data-show="expanded"
+                class="pb-5 text-slate-600 dark:text-slate-300"
+            >
+                <slot />
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/account-menu.wrn b/app/pages/components/account-menu.wrn new file mode 100644 index 00000000..ecd732d2 --- /dev/null +++ b/app/pages/components/account-menu.wrn @@ -0,0 +1,31 @@ +page AccountMenucomponent { + seo { + title = "AccountMenu component" + description = "Reusable account menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

AccountMenu

Reusable account menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccountMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="AccountMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccountMenu.wrn

component AccountMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/account-status-banner.wrn b/app/pages/components/account-status-banner.wrn new file mode 100644 index 00000000..4684e0fe --- /dev/null +++ b/app/pages/components/account-status-banner.wrn @@ -0,0 +1,32 @@ +page AccountStatusBannercomponent { + seo { + title = "AccountStatusBanner component" + description = "Reusable account status banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

AccountStatusBanner

Reusable account status banner component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccountStatusBanner label="AccountStatus" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="AccountStatusBanner".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"AccountStatus"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccountStatusBanner.wrn

component AccountStatusBanner {
+  props {
+    label = "AccountStatus" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/action-menu.wrn b/app/pages/components/action-menu.wrn new file mode 100644 index 00000000..7158c903 --- /dev/null +++ b/app/pages/components/action-menu.wrn @@ -0,0 +1,31 @@ +page ActionMenucomponent { + seo { + title = "ActionMenu component" + description = "Reusable action menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

ActionMenu

Reusable action menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ActionMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="ActionMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ActionMenu.wrn

component ActionMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/active-filter-list.wrn b/app/pages/components/active-filter-list.wrn new file mode 100644 index 00000000..3b968123 --- /dev/null +++ b/app/pages/components/active-filter-list.wrn @@ -0,0 +1,31 @@ +page ActiveFilterListcomponent { + seo { + title = "ActiveFilterList component" + description = "Reusable active filter list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ActiveFilterList

Reusable active filter list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ActiveFilterList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ActiveFilterList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ActiveFilterList.wrn

component ActiveFilterList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/activity-list.wrn b/app/pages/components/activity-list.wrn new file mode 100644 index 00000000..4ddbc3b9 --- /dev/null +++ b/app/pages/components/activity-list.wrn @@ -0,0 +1,31 @@ +page ActivityListcomponent { + seo { + title = "ActivityList component" + description = "Reusable activity list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ActivityList

Reusable activity list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ActivityList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ActivityList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ActivityList.wrn

component ActivityList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/add-on-card.wrn b/app/pages/components/add-on-card.wrn new file mode 100644 index 00000000..dc34fdab --- /dev/null +++ b/app/pages/components/add-on-card.wrn @@ -0,0 +1,34 @@ +page AddOnCardcomponent { + seo { + title = "AddOnCard component" + description = "Reusable add on card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AddOnCard

Reusable add on card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AddOnCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AddOnCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AddOnCard.wrn

component AddOnCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/address-input.wrn b/app/pages/components/address-input.wrn new file mode 100644 index 00000000..47567a52 --- /dev/null +++ b/app/pages/components/address-input.wrn @@ -0,0 +1,37 @@ +page AddressInputcomponent { + seo { + title = "AddressInput component" + description = "Reusable address input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

AddressInput

Reusable address input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AddressInput label="Address" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="AddressInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Address"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AddressInput.wrn

component AddressInput {
+  props {
+    label = "Address" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/address-preview.wrn b/app/pages/components/address-preview.wrn new file mode 100644 index 00000000..18948546 --- /dev/null +++ b/app/pages/components/address-preview.wrn @@ -0,0 +1,34 @@ +page AddressPreviewcomponent { + seo { + title = "AddressPreview component" + description = "Reusable address preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AddressPreview

Reusable address preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AddressPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AddressPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AddressPreview.wrn

component AddressPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/advanced-filter-builder.wrn b/app/pages/components/advanced-filter-builder.wrn new file mode 100644 index 00000000..1a342a68 --- /dev/null +++ b/app/pages/components/advanced-filter-builder.wrn @@ -0,0 +1,34 @@ +page AdvancedFilterBuildercomponent { + seo { + title = "AdvancedFilterBuilder component" + description = "Reusable advanced filter builder component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AdvancedFilterBuilder

Reusable advanced filter builder component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AdvancedFilterBuilder eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AdvancedFilterBuilder".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AdvancedFilterBuilder.wrn

component AdvancedFilterBuilder {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/alert-dialog.wrn b/app/pages/components/alert-dialog.wrn new file mode 100644 index 00000000..2a552efe --- /dev/null +++ b/app/pages/components/alert-dialog.wrn @@ -0,0 +1,31 @@ +page AlertDialogcomponent { + seo { + title = "AlertDialog component" + description = "Reusable alert dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

AlertDialog

Reusable alert dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AlertDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="AlertDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AlertDialog.wrn

component AlertDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/alert.wrn b/app/pages/components/alert.wrn new file mode 100644 index 00000000..ba4a8e45 --- /dev/null +++ b/app/pages/components/alert.wrn @@ -0,0 +1,64 @@ +page Alertcomponent { + seo { + title = "Alert component" + description = "Reusable alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

Alert

Reusable alert component.

@wrnexus/ui 0.2.645 props1 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Alert title="Notice" description="description" variant="info" dismissible="false" />

Legacy mount name: data-component="Alert".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Notice"
descriptionstringOptional""
variantstringOptional"info"
dismissiblebooleanOptionalfalse

Slots

  • default

Events

  • click

Source contract

Installed source: components/Alert.wrn

component Alert {
+    props {
+        class = ""
+        title = "Notice"
+        description = ""
+        variant = "info"
+        dismissible = false
+    }
+
+    state visible = true
+
+    view {
+        <div
+            data-show="visible"
+            role="alert"
+            class="flex items-start gap-3 rounded-2xl border p-4 {variant === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200' : variant === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200' : variant === 'danger' ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'} {class}"
+        >
+            <div class="min-w-0 flex-1" >
+                <h3 class="font-semibold" >
+                    {title}
+                </h3>
+                <p
+                    data-show="description"
+                    class="mt-1 text-sm opacity-80"
+                >
+                    {description}
+                </p>
+                <div class="mt-2" >
+                    <slot />
+                </div>
+            </div>
+            <button
+                data-show="dismissible"
+                type="button"
+                aria-label="Dismiss"
+                @click="visible = false"
+                class="rounded-lg p-1 hover:bg-black/5"
+            >
+                ×
+            </button>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/amount-input.wrn b/app/pages/components/amount-input.wrn new file mode 100644 index 00000000..0e6e8fd8 --- /dev/null +++ b/app/pages/components/amount-input.wrn @@ -0,0 +1,37 @@ +page AmountInputcomponent { + seo { + title = "AmountInput component" + description = "Reusable amount input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

AmountInput

Reusable amount input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AmountInput label="Amount" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="AmountInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Amount"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AmountInput.wrn

component AmountInput {
+  props {
+    label = "Amount" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/analytics-dashboard-preview.wrn b/app/pages/components/analytics-dashboard-preview.wrn new file mode 100644 index 00000000..51b1bfe1 --- /dev/null +++ b/app/pages/components/analytics-dashboard-preview.wrn @@ -0,0 +1,34 @@ +page AnalyticsDashboardPreviewcomponent { + seo { + title = "AnalyticsDashboardPreview component" + description = "Reusable analytics dashboard preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AnalyticsDashboardPreview

Reusable analytics dashboard preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AnalyticsDashboardPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AnalyticsDashboardPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AnalyticsDashboardPreview.wrn

component AnalyticsDashboardPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/anchor-navigation.wrn b/app/pages/components/anchor-navigation.wrn new file mode 100644 index 00000000..04264f64 --- /dev/null +++ b/app/pages/components/anchor-navigation.wrn @@ -0,0 +1,31 @@ +page AnchorNavigationcomponent { + seo { + title = "AnchorNavigation component" + description = "Reusable anchor navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

AnchorNavigation

Reusable anchor navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AnchorNavigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="AnchorNavigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AnchorNavigation.wrn

component AnchorNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/announcement-bar.wrn b/app/pages/components/announcement-bar.wrn new file mode 100644 index 00000000..62762cd1 --- /dev/null +++ b/app/pages/components/announcement-bar.wrn @@ -0,0 +1,110 @@ +page AnnouncementBarcomponent { + seo { + title = "AnnouncementBar component" + description = "Reusable announcement bar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

AnnouncementBar

Reusable announcement bar component.

@wrnexus/ui 0.2.647 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AnnouncementBar badge="New" message="WRNexusJS Organizations is now available." description="Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO." href="/organizations" actionLabel="Explore organizations" />

Legacy mount name: data-component="AnnouncementBar".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
badgestringOptional"New"
messagestringOptional"WRNexusJS Organizations is now available."
descriptionstringOptional"Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
hrefstringOptional"/organizations"
actionLabelstringOptional"Explore organizations"
ariaLabelstringOptional"Announcement"

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/AnnouncementBar.wrn

component AnnouncementBar {
+    props {
+        class = ""
+        badge = "New"
+        message = "WRNexusJS Organizations is now available."
+        description = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
+        href = "/organizations"
+        actionLabel = "Explore organizations"
+        ariaLabel = "Announcement"
+    }
+
+    state visible = true
+
+    view {
+        <aside
+            role="region"
+            aria-label="{ariaLabel}"
+            class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
+            class:hidden="!visible"
+        >
+            <!-- Decorative background -->
+            <div
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 overflow-hidden"
+            >
+                <div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10"></div>
+
+                <div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10"></div>
+            </div>
+
+            <div
+                class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
+            >
+                <div class="flex min-w-0 flex-1 items-center justify-center gap-3">
+                    <!-- Badge -->
+                    <span
+                        class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
+                    >
+                        <span class="icon-[lucide--sparkles] h-3 w-3" aria-hidden="true" ></span>
+
+                        {badge}
+                    </span>
+
+                    <!-- Message -->
+                    <p
+                        class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
+                    >
+                        <span class="font-semibold text-slate-950 dark:text-white">
+                            {message}
+                        </span>
+
+                        <span class="hidden md:inline">
+                            {description}
+                        </span>
+                    </p>
+
+                    <!-- CTA -->
+                    <a
+                        href="{href}"
+                        class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
+                    >
+                        {actionLabel}
+
+                        <span class="icon-[lucide--arrow-right] h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+
+                <!-- Mobile CTA -->
+                <a
+                    href="{href}"
+                    aria-label="{actionLabel}"
+                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
+                >
+                    <span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" ></span>
+                </a>
+
+                <!-- Close -->
+                <button
+                    type="button"
+                    @click="visible = false"
+                    aria-label="Dismiss announcement"
+                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
+                >
+                    <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                </button>
+            </div>
+        </aside>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/apartment-input.wrn b/app/pages/components/apartment-input.wrn new file mode 100644 index 00000000..16244c34 --- /dev/null +++ b/app/pages/components/apartment-input.wrn @@ -0,0 +1,37 @@ +page ApartmentInputcomponent { + seo { + title = "ApartmentInput component" + description = "Reusable apartment input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ApartmentInput

Reusable apartment input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApartmentInput label="Apartment" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ApartmentInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Apartment"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApartmentInput.wrn

component ApartmentInput {
+  props {
+    label = "Apartment" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-authentication-notice.wrn b/app/pages/components/api-authentication-notice.wrn new file mode 100644 index 00000000..8b85ae3b --- /dev/null +++ b/app/pages/components/api-authentication-notice.wrn @@ -0,0 +1,32 @@ +page ApiAuthenticationNoticecomponent { + seo { + title = "ApiAuthenticationNotice component" + description = "Reusable api authentication notice component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ApiAuthenticationNotice

Reusable api authentication notice component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiAuthenticationNotice label="ApiAuthentication" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ApiAuthenticationNotice".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ApiAuthentication"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiAuthenticationNotice.wrn

component ApiAuthenticationNotice {
+  props {
+    label = "ApiAuthentication" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-endpoint-card.wrn b/app/pages/components/api-endpoint-card.wrn new file mode 100644 index 00000000..2e349c03 --- /dev/null +++ b/app/pages/components/api-endpoint-card.wrn @@ -0,0 +1,55 @@ +page ApiEndpointCardcomponent { + seo { + title = "ApiEndpointCard component" + description = "Reusable api endpoint card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ApiEndpointCard

Reusable api endpoint card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiEndpointCard method="GET" path="/api/example" description="description" />

Legacy mount name: data-component="ApiEndpointCard".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
methodstringOptional"GET"
pathstringOptional"/api/example"
descriptionstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiEndpointCard.wrn

component ApiEndpointCard {
+    props {
+        class = ""
+        method = "GET"
+        path = "/api/example"
+        description = ""
+    }
+
+    view {
+        <article
+            class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
+        >
+            <div class="flex flex-wrap items-center gap-3" >
+                <span
+                    class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
+                >
+                    {method}
+                </span>
+                <code class="text-sm font-semibold">
+                    {path}
+                </code>
+            </div>
+            <p
+                data-show="description"
+                class="mt-3 text-sm text-slate-500"
+            >
+                {description}
+            </p>
+            <div class="mt-4">
+                <slot />
+            </div>
+        </article>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-error-example.wrn b/app/pages/components/api-error-example.wrn new file mode 100644 index 00000000..e6e53bb7 --- /dev/null +++ b/app/pages/components/api-error-example.wrn @@ -0,0 +1,34 @@ +page ApiErrorExamplecomponent { + seo { + title = "ApiErrorExample component" + description = "Reusable api error example component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ApiErrorExample

Reusable api error example component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiErrorExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ApiErrorExample".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiErrorExample.wrn

component ApiErrorExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-header-table.wrn b/app/pages/components/api-header-table.wrn new file mode 100644 index 00000000..3de78801 --- /dev/null +++ b/app/pages/components/api-header-table.wrn @@ -0,0 +1,31 @@ +page ApiHeaderTablecomponent { + seo { + title = "ApiHeaderTable component" + description = "Reusable api header table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ApiHeaderTable

Reusable api header table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiHeaderTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ApiHeaderTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiHeaderTable.wrn

component ApiHeaderTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-key-create-dialog.wrn b/app/pages/components/api-key-create-dialog.wrn new file mode 100644 index 00000000..3aad5eef --- /dev/null +++ b/app/pages/components/api-key-create-dialog.wrn @@ -0,0 +1,31 @@ +page ApiKeyCreateDialogcomponent { + seo { + title = "ApiKeyCreateDialog component" + description = "Reusable api key create dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

ApiKeyCreateDialog

Reusable api key create dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiKeyCreateDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="ApiKeyCreateDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiKeyCreateDialog.wrn

component ApiKeyCreateDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-key-display.wrn b/app/pages/components/api-key-display.wrn new file mode 100644 index 00000000..1e1c85af --- /dev/null +++ b/app/pages/components/api-key-display.wrn @@ -0,0 +1,34 @@ +page ApiKeyDisplaycomponent { + seo { + title = "ApiKeyDisplay component" + description = "Reusable api key display component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ApiKeyDisplay

Reusable api key display component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiKeyDisplay eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ApiKeyDisplay".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiKeyDisplay.wrn

component ApiKeyDisplay {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-key-input.wrn b/app/pages/components/api-key-input.wrn new file mode 100644 index 00000000..abcb7026 --- /dev/null +++ b/app/pages/components/api-key-input.wrn @@ -0,0 +1,37 @@ +page ApiKeyInputcomponent { + seo { + title = "ApiKeyInput component" + description = "Reusable api key input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ApiKeyInput

Reusable api key input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiKeyInput label="ApiKey" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ApiKeyInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ApiKey"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiKeyInput.wrn

component ApiKeyInput {
+  props {
+    label = "ApiKey" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-method-badge.wrn b/app/pages/components/api-method-badge.wrn new file mode 100644 index 00000000..745f1eb2 --- /dev/null +++ b/app/pages/components/api-method-badge.wrn @@ -0,0 +1,32 @@ +page ApiMethodBadgecomponent { + seo { + title = "ApiMethodBadge component" + description = "Reusable api method badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ApiMethodBadge

Reusable api method badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiMethodBadge label="ApiMethod" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ApiMethodBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ApiMethod"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiMethodBadge.wrn

component ApiMethodBadge {
+  props {
+    label = "ApiMethod" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-parameter-table.wrn b/app/pages/components/api-parameter-table.wrn new file mode 100644 index 00000000..6389d6f8 --- /dev/null +++ b/app/pages/components/api-parameter-table.wrn @@ -0,0 +1,31 @@ +page ApiParameterTablecomponent { + seo { + title = "ApiParameterTable component" + description = "Reusable api parameter table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ApiParameterTable

Reusable api parameter table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiParameterTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ApiParameterTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiParameterTable.wrn

component ApiParameterTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-rate-limit-notice.wrn b/app/pages/components/api-rate-limit-notice.wrn new file mode 100644 index 00000000..3217f8c2 --- /dev/null +++ b/app/pages/components/api-rate-limit-notice.wrn @@ -0,0 +1,32 @@ +page ApiRateLimitNoticecomponent { + seo { + title = "ApiRateLimitNotice component" + description = "Reusable api rate limit notice component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ApiRateLimitNotice

Reusable api rate limit notice component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiRateLimitNotice label="ApiRateLimit" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ApiRateLimitNotice".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ApiRateLimit"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiRateLimitNotice.wrn

component ApiRateLimitNotice {
+  props {
+    label = "ApiRateLimit" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-request-example.wrn b/app/pages/components/api-request-example.wrn new file mode 100644 index 00000000..ef568227 --- /dev/null +++ b/app/pages/components/api-request-example.wrn @@ -0,0 +1,34 @@ +page ApiRequestExamplecomponent { + seo { + title = "ApiRequestExample component" + description = "Reusable api request example component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ApiRequestExample

Reusable api request example component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiRequestExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ApiRequestExample".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiRequestExample.wrn

component ApiRequestExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-response-example.wrn b/app/pages/components/api-response-example.wrn new file mode 100644 index 00000000..3da5d190 --- /dev/null +++ b/app/pages/components/api-response-example.wrn @@ -0,0 +1,34 @@ +page ApiResponseExamplecomponent { + seo { + title = "ApiResponseExample component" + description = "Reusable api response example component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ApiResponseExample

Reusable api response example component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiResponseExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ApiResponseExample".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiResponseExample.wrn

component ApiResponseExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-schema-table.wrn b/app/pages/components/api-schema-table.wrn new file mode 100644 index 00000000..be5dcf1d --- /dev/null +++ b/app/pages/components/api-schema-table.wrn @@ -0,0 +1,31 @@ +page ApiSchemaTablecomponent { + seo { + title = "ApiSchemaTable component" + description = "Reusable api schema table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ApiSchemaTable

Reusable api schema table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiSchemaTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ApiSchemaTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiSchemaTable.wrn

component ApiSchemaTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-schema-viewer.wrn b/app/pages/components/api-schema-viewer.wrn new file mode 100644 index 00000000..aef48d4d --- /dev/null +++ b/app/pages/components/api-schema-viewer.wrn @@ -0,0 +1,34 @@ +page ApiSchemaViewercomponent { + seo { + title = "ApiSchemaViewer component" + description = "Reusable api schema viewer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ApiSchemaViewer

Reusable api schema viewer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiSchemaViewer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ApiSchemaViewer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiSchemaViewer.wrn

component ApiSchemaViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/api-version-badge.wrn b/app/pages/components/api-version-badge.wrn new file mode 100644 index 00000000..55632ba5 --- /dev/null +++ b/app/pages/components/api-version-badge.wrn @@ -0,0 +1,32 @@ +page ApiVersionBadgecomponent { + seo { + title = "ApiVersionBadge component" + description = "Reusable api version badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ApiVersionBadge

Reusable api version badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiVersionBadge label="ApiVersion" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ApiVersionBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ApiVersion"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiVersionBadge.wrn

component ApiVersionBadge {
+  props {
+    label = "ApiVersion" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/app-header.wrn b/app/pages/components/app-header.wrn new file mode 100644 index 00000000..a8cdc10b --- /dev/null +++ b/app/pages/components/app-header.wrn @@ -0,0 +1,31 @@ +page AppHeadercomponent { + seo { + title = "AppHeader component" + description = "Reusable app header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

AppHeader

Reusable app header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AppHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="AppHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AppHeader.wrn

component AppHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/architecture-section.wrn b/app/pages/components/architecture-section.wrn new file mode 100644 index 00000000..a2d7f851 --- /dev/null +++ b/app/pages/components/architecture-section.wrn @@ -0,0 +1,31 @@ +page ArchitectureSectioncomponent { + seo { + title = "ArchitectureSection component" + description = "Reusable architecture section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ArchitectureSection

Reusable architecture section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ArchitectureSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ArchitectureSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ArchitectureSection.wrn

component ArchitectureSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/area-chart.wrn b/app/pages/components/area-chart.wrn new file mode 100644 index 00000000..5d661764 --- /dev/null +++ b/app/pages/components/area-chart.wrn @@ -0,0 +1,32 @@ +page AreaChartcomponent { + seo { + title = "AreaChart component" + description = "Reusable area chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

AreaChart

Reusable area chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AreaChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="AreaChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AreaChart.wrn

component AreaChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/article-hero.wrn b/app/pages/components/article-hero.wrn new file mode 100644 index 00000000..14f4675d --- /dev/null +++ b/app/pages/components/article-hero.wrn @@ -0,0 +1,31 @@ +page ArticleHerocomponent { + seo { + title = "ArticleHero component" + description = "Reusable article hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ArticleHero

Reusable article hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ArticleHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ArticleHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ArticleHero.wrn

component ArticleHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/article-layout.wrn b/app/pages/components/article-layout.wrn new file mode 100644 index 00000000..145b1c72 --- /dev/null +++ b/app/pages/components/article-layout.wrn @@ -0,0 +1,31 @@ +page ArticleLayoutcomponent { + seo { + title = "ArticleLayout component" + description = "Reusable article layout component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ArticleLayout

Reusable article layout component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ArticleLayout eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ArticleLayout".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ArticleLayout.wrn

component ArticleLayout {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/article-newsletter-cta.wrn b/app/pages/components/article-newsletter-cta.wrn new file mode 100644 index 00000000..726df8da --- /dev/null +++ b/app/pages/components/article-newsletter-cta.wrn @@ -0,0 +1,32 @@ +page ArticleNewsletterCTAcomponent { + seo { + title = "ArticleNewsletterCTA component" + description = "Reusable article newsletter c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ArticleNewsletterCTA

Reusable article newsletter c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ArticleNewsletterCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ArticleNewsletterCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ArticleNewsletterCTA.wrn

component ArticleNewsletterCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/article-page-shell.wrn b/app/pages/components/article-page-shell.wrn new file mode 100644 index 00000000..9e72ff83 --- /dev/null +++ b/app/pages/components/article-page-shell.wrn @@ -0,0 +1,31 @@ +page ArticlePageShellcomponent { + seo { + title = "ArticlePageShell component" + description = "Reusable article page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ArticlePageShell

Reusable article page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ArticlePageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ArticlePageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ArticlePageShell.wrn

component ArticlePageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/article-share-actions.wrn b/app/pages/components/article-share-actions.wrn new file mode 100644 index 00000000..8fe64ab1 --- /dev/null +++ b/app/pages/components/article-share-actions.wrn @@ -0,0 +1,32 @@ +page ArticleShareActionscomponent { + seo { + title = "ArticleShareActions component" + description = "Reusable article share actions component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ArticleShareActions

Reusable article share actions component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ArticleShareActions label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ArticleShareActions".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ArticleShareActions.wrn

component ArticleShareActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/aspect-ratio.wrn b/app/pages/components/aspect-ratio.wrn new file mode 100644 index 00000000..7fd185b4 --- /dev/null +++ b/app/pages/components/aspect-ratio.wrn @@ -0,0 +1,27 @@ +page AspectRatiocomponent { + seo { + title = "AspectRatio component" + description = "Reusable aspect ratio component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

AspectRatio

Reusable aspect ratio component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AspectRatio />

Legacy mount name: data-component="AspectRatio".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AspectRatio.wrn

component AspectRatio {
+  props {
+    class = ""
+  }
+  view { <div class="wire-aspect-ratio {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/asset-card.wrn b/app/pages/components/asset-card.wrn new file mode 100644 index 00000000..c28e46ab --- /dev/null +++ b/app/pages/components/asset-card.wrn @@ -0,0 +1,30 @@ +page AssetCardcomponent { + seo { + title = "AssetCard component" + description = "Reusable asset card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AssetCard

Reusable asset card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AssetCard title="title" description="description" href="href" />

Legacy mount name: data-component="AssetCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AssetCard.wrn

component AssetCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--asset {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/attachment-picker.wrn b/app/pages/components/attachment-picker.wrn new file mode 100644 index 00000000..812e4f88 --- /dev/null +++ b/app/pages/components/attachment-picker.wrn @@ -0,0 +1,37 @@ +page AttachmentPickercomponent { + seo { + title = "AttachmentPicker component" + description = "Reusable attachment picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

AttachmentPicker

Reusable attachment picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AttachmentPicker label="Attachment" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="AttachmentPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Attachment"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AttachmentPicker.wrn

component AttachmentPicker {
+  props {
+    label = "Attachment" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/attachment-upload.wrn b/app/pages/components/attachment-upload.wrn new file mode 100644 index 00000000..1d251e0c --- /dev/null +++ b/app/pages/components/attachment-upload.wrn @@ -0,0 +1,34 @@ +page AttachmentUploadcomponent { + seo { + title = "AttachmentUpload component" + description = "Reusable attachment upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AttachmentUpload

Reusable attachment upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AttachmentUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AttachmentUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AttachmentUpload.wrn

component AttachmentUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/audio-upload.wrn b/app/pages/components/audio-upload.wrn new file mode 100644 index 00000000..c154415c --- /dev/null +++ b/app/pages/components/audio-upload.wrn @@ -0,0 +1,34 @@ +page AudioUploadcomponent { + seo { + title = "AudioUpload component" + description = "Reusable audio upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AudioUpload

Reusable audio upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AudioUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AudioUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AudioUpload.wrn

component AudioUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/audit-log-preview.wrn b/app/pages/components/audit-log-preview.wrn new file mode 100644 index 00000000..f574eb1a --- /dev/null +++ b/app/pages/components/audit-log-preview.wrn @@ -0,0 +1,34 @@ +page AuditLogPreviewcomponent { + seo { + title = "AuditLogPreview component" + description = "Reusable audit log preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AuditLogPreview

Reusable audit log preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AuditLogPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AuditLogPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AuditLogPreview.wrn

component AuditLogPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/audit-table.wrn b/app/pages/components/audit-table.wrn new file mode 100644 index 00000000..9968f21c --- /dev/null +++ b/app/pages/components/audit-table.wrn @@ -0,0 +1,31 @@ +page AuditTablecomponent { + seo { + title = "AuditTable component" + description = "Reusable audit table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

AuditTable

Reusable audit table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AuditTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="AuditTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AuditTable.wrn

component AuditTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/authenticator-code-input.wrn b/app/pages/components/authenticator-code-input.wrn new file mode 100644 index 00000000..261b4a2f --- /dev/null +++ b/app/pages/components/authenticator-code-input.wrn @@ -0,0 +1,37 @@ +page AuthenticatorCodeInputcomponent { + seo { + title = "AuthenticatorCodeInput component" + description = "Reusable authenticator code input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

AuthenticatorCodeInput

Reusable authenticator code input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AuthenticatorCodeInput label="AuthenticatorCode" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="AuthenticatorCodeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"AuthenticatorCode"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AuthenticatorCodeInput.wrn

component AuthenticatorCodeInput {
+  props {
+    label = "AuthenticatorCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/author-avatar.wrn b/app/pages/components/author-avatar.wrn new file mode 100644 index 00000000..ac06e780 --- /dev/null +++ b/app/pages/components/author-avatar.wrn @@ -0,0 +1,34 @@ +page AuthorAvatarcomponent { + seo { + title = "AuthorAvatar component" + description = "Reusable author avatar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AuthorAvatar

Reusable author avatar component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AuthorAvatar eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AuthorAvatar".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AuthorAvatar.wrn

component AuthorAvatar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/author-card.wrn b/app/pages/components/author-card.wrn new file mode 100644 index 00000000..5dd92338 --- /dev/null +++ b/app/pages/components/author-card.wrn @@ -0,0 +1,34 @@ +page AuthorCardcomponent { + seo { + title = "AuthorCard component" + description = "Reusable author card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AuthorCard

Reusable author card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AuthorCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AuthorCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AuthorCard.wrn

component AuthorCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/authorized-application-card.wrn b/app/pages/components/authorized-application-card.wrn new file mode 100644 index 00000000..fbc14e6c --- /dev/null +++ b/app/pages/components/authorized-application-card.wrn @@ -0,0 +1,34 @@ +page AuthorizedApplicationCardcomponent { + seo { + title = "AuthorizedApplicationCard component" + description = "Reusable authorized application card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AuthorizedApplicationCard

Reusable authorized application card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AuthorizedApplicationCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AuthorizedApplicationCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AuthorizedApplicationCard.wrn

component AuthorizedApplicationCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/auto-grid.wrn b/app/pages/components/auto-grid.wrn new file mode 100644 index 00000000..438630d1 --- /dev/null +++ b/app/pages/components/auto-grid.wrn @@ -0,0 +1,27 @@ +page AutoGridcomponent { + seo { + title = "AutoGrid component" + description = "Reusable auto grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

AutoGrid

Reusable auto grid component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AutoGrid />

Legacy mount name: data-component="AutoGrid".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AutoGrid.wrn

component AutoGrid {
+  props {
+    class = ""
+  }
+  view { <div class="wire-auto-grid {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/automation-example-card.wrn b/app/pages/components/automation-example-card.wrn new file mode 100644 index 00000000..cee9e70b --- /dev/null +++ b/app/pages/components/automation-example-card.wrn @@ -0,0 +1,34 @@ +page AutomationExampleCardcomponent { + seo { + title = "AutomationExampleCard component" + description = "Reusable automation example card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AutomationExampleCard

Reusable automation example card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AutomationExampleCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AutomationExampleCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AutomationExampleCard.wrn

component AutomationExampleCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/availability-calendar.wrn b/app/pages/components/availability-calendar.wrn new file mode 100644 index 00000000..65ff83db --- /dev/null +++ b/app/pages/components/availability-calendar.wrn @@ -0,0 +1,34 @@ +page AvailabilityCalendarcomponent { + seo { + title = "AvailabilityCalendar component" + description = "Reusable availability calendar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AvailabilityCalendar

Reusable availability calendar component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AvailabilityCalendar eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AvailabilityCalendar".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AvailabilityCalendar.wrn

component AvailabilityCalendar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/avatar-group.wrn b/app/pages/components/avatar-group.wrn new file mode 100644 index 00000000..7c7385af --- /dev/null +++ b/app/pages/components/avatar-group.wrn @@ -0,0 +1,37 @@ +page AvatarGroupcomponent { + seo { + title = "AvatarGroup component" + description = "Reusable avatar group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

AvatarGroup

Reusable avatar group component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AvatarGroup label="Avatar" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="AvatarGroup".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Avatar"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AvatarGroup.wrn

component AvatarGroup {
+  props {
+    label = "Avatar" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/avatar-upload.wrn b/app/pages/components/avatar-upload.wrn new file mode 100644 index 00000000..d5030a9b --- /dev/null +++ b/app/pages/components/avatar-upload.wrn @@ -0,0 +1,34 @@ +page AvatarUploadcomponent { + seo { + title = "AvatarUpload component" + description = "Reusable avatar upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

AvatarUpload

Reusable avatar upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AvatarUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="AvatarUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AvatarUpload.wrn

component AvatarUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/avatar.wrn b/app/pages/components/avatar.wrn new file mode 100644 index 00000000..a8b479d5 --- /dev/null +++ b/app/pages/components/avatar.wrn @@ -0,0 +1,33 @@ +page Avatarcomponent { + seo { + title = "Avatar component" + description = "Reusable avatar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Avatar

Reusable avatar component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Avatar src="src" alt="alt" initials="WR" size="md" />

Legacy mount name: data-component="Avatar".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
srcstringOptional""
altstringOptional""
initialsstringOptional"WR"
sizestringOptional"md"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Avatar.wrn

component Avatar {
+  props {
+    class = ""
+    src = ""
+    alt = ""
+    initials = "WR"
+    size = "md"
+  }
+  view {
+    <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'} {class}"><img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" /><span data-show="!src" aria-hidden="true">{initials}</span></span>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/back-button.wrn b/app/pages/components/back-button.wrn new file mode 100644 index 00000000..0ddd7027 --- /dev/null +++ b/app/pages/components/back-button.wrn @@ -0,0 +1,30 @@ +page BackButtoncomponent { + seo { + title = "BackButton component" + description = "Reusable back button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

BackButton

Reusable back button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BackButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="BackButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BackButton.wrn

component BackButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/back-to-top.wrn b/app/pages/components/back-to-top.wrn new file mode 100644 index 00000000..c094b33a --- /dev/null +++ b/app/pages/components/back-to-top.wrn @@ -0,0 +1,115 @@ +page BackToTopcomponent { + seo { + title = "BackToTop component" + description = "Reusable back to top component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

BackToTop

Reusable back to top component.

@wrnexus/ui 0.2.644 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BackToTop label="Back to top" assistiveLabel="Return to the top of the page" threshold="500" />

Legacy mount name: data-component="BackToTop".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Back to top"
assistiveLabelstringOptional"Return to the top of the page"
thresholdnumberOptional500

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/BackToTop.wrn

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 {
+        <div
+            class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
+            class:pointer-events-none="!visible"
+            class:translate-y-5="!visible"
+            class:scale-90="!visible"
+            class:opacity-0="!visible"
+            class:pointer-events-auto="visible"
+            class:translate-y-0="visible"
+            class:scale-100="visible"
+            class:opacity-100="visible"
+        >
+            <!-- Hover label -->
+            <span
+                class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
+            >
+                {label}
+            </span>
+
+            <!-- Gradient border wrapper -->
+            <div
+                class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
+            >
+                <!-- Glow -->
+                <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" ></div>
+
+                <button
+                    type="button"
+                    @click="scrollToTop()"
+                    aria-label="{label}"
+                    title="{label}"
+                    class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
+                >
+                    <!-- Arrow -->
+                    <span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
+
+                    <span class="sr-only">
+                        {assistiveLabel}
+                    </span>
+                </button>
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/badge.wrn b/app/pages/components/badge.wrn new file mode 100644 index 00000000..fb940968 --- /dev/null +++ b/app/pages/components/badge.wrn @@ -0,0 +1,31 @@ +page Badgecomponent { + seo { + title = "Badge component" + description = "Reusable badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

Badge

Reusable badge component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Badge label="Badge" variant="neutral" />

Legacy mount name: data-component="Badge".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Badge"
variantstringOptional"neutral"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Badge.wrn

component Badge {
+  props {
+    class = ""
+    label = "Badge"
+    variant = "neutral"
+  }
+  view {
+    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}</span>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/bank-transfer-details.wrn b/app/pages/components/bank-transfer-details.wrn new file mode 100644 index 00000000..e3f02aee --- /dev/null +++ b/app/pages/components/bank-transfer-details.wrn @@ -0,0 +1,34 @@ +page BankTransferDetailscomponent { + seo { + title = "BankTransferDetails component" + description = "Reusable bank transfer details component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

BankTransferDetails

Reusable bank transfer details component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BankTransferDetails eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="BankTransferDetails".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BankTransferDetails.wrn

component BankTransferDetails {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/banner.wrn b/app/pages/components/banner.wrn new file mode 100644 index 00000000..abf29d80 --- /dev/null +++ b/app/pages/components/banner.wrn @@ -0,0 +1,33 @@ +page Bannercomponent { + seo { + title = "Banner component" + description = "Reusable banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

Banner

Reusable banner component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Banner text="Announcement" href="href" actionLabel="Learn more" variant="brand" />

Legacy mount name: data-component="Banner".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
textstringOptional"Announcement"
hrefstringOptional""
actionLabelstringOptional"Learn more"
variantstringOptional"brand"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Banner.wrn

component Banner {
+  props {
+    class = ""
+    text = "Announcement"
+    href = ""
+    actionLabel = "Learn more"
+    variant = "brand"
+  }
+  view {
+    <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'} {class}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/bar-chart.wrn b/app/pages/components/bar-chart.wrn new file mode 100644 index 00000000..903b88bd --- /dev/null +++ b/app/pages/components/bar-chart.wrn @@ -0,0 +1,32 @@ +page BarChartcomponent { + seo { + title = "BarChart component" + description = "Reusable bar chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

BarChart

Reusable bar chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BarChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="BarChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BarChart.wrn

component BarChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/beta-badge.wrn b/app/pages/components/beta-badge.wrn new file mode 100644 index 00000000..3aac7745 --- /dev/null +++ b/app/pages/components/beta-badge.wrn @@ -0,0 +1,29 @@ +page BetaBadgecomponent { + seo { + title = "BetaBadge component" + description = "Reusable beta badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

BetaBadge

Reusable beta badge component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BetaBadge label="Beta" variant="default" />

Legacy mount name: data-component="BetaBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Beta"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BetaBadge.wrn

component BetaBadge {
+  props {
+    label = "Beta"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--betabadge {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/billing-address-form.wrn b/app/pages/components/billing-address-form.wrn new file mode 100644 index 00000000..4920529b --- /dev/null +++ b/app/pages/components/billing-address-form.wrn @@ -0,0 +1,34 @@ +page BillingAddressFormcomponent { + seo { + title = "BillingAddressForm component" + description = "Reusable billing address form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

BillingAddressForm

Reusable billing address form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BillingAddressForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="BillingAddressForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BillingAddressForm.wrn

component BillingAddressForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/billing-example.wrn b/app/pages/components/billing-example.wrn new file mode 100644 index 00000000..10768e72 --- /dev/null +++ b/app/pages/components/billing-example.wrn @@ -0,0 +1,34 @@ +page BillingExamplecomponent { + seo { + title = "BillingExample component" + description = "Reusable billing example component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

BillingExample

Reusable billing example component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BillingExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="BillingExample".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BillingExample.wrn

component BillingExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/billing-period-toggle.wrn b/app/pages/components/billing-period-toggle.wrn new file mode 100644 index 00000000..0d31b561 --- /dev/null +++ b/app/pages/components/billing-period-toggle.wrn @@ -0,0 +1,37 @@ +page BillingPeriodTogglecomponent { + seo { + title = "BillingPeriodToggle component" + description = "Reusable billing period toggle component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

BillingPeriodToggle

Reusable billing period toggle component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BillingPeriodToggle label="BillingPeriod" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="BillingPeriodToggle".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"BillingPeriod"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BillingPeriodToggle.wrn

component BillingPeriodToggle {
+  props {
+    label = "BillingPeriod" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/blackout-date-picker.wrn b/app/pages/components/blackout-date-picker.wrn new file mode 100644 index 00000000..899ae0b8 --- /dev/null +++ b/app/pages/components/blackout-date-picker.wrn @@ -0,0 +1,37 @@ +page BlackoutDatePickercomponent { + seo { + title = "BlackoutDatePicker component" + description = "Reusable blackout date picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

BlackoutDatePicker

Reusable blackout date picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BlackoutDatePicker label="BlackoutDate" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="BlackoutDatePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"BlackoutDate"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BlackoutDatePicker.wrn

component BlackoutDatePicker {
+  props {
+    label = "BlackoutDate" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/blog-card.wrn b/app/pages/components/blog-card.wrn new file mode 100644 index 00000000..92f58056 --- /dev/null +++ b/app/pages/components/blog-card.wrn @@ -0,0 +1,34 @@ +page BlogCardcomponent { + seo { + title = "BlogCard component" + description = "Reusable blog card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

BlogCard

Reusable blog card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BlogCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="BlogCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BlogCard.wrn

component BlogCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/blog-grid.wrn b/app/pages/components/blog-grid.wrn new file mode 100644 index 00000000..81a3de65 --- /dev/null +++ b/app/pages/components/blog-grid.wrn @@ -0,0 +1,31 @@ +page BlogGridcomponent { + seo { + title = "BlogGrid component" + description = "Reusable blog grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

BlogGrid

Reusable blog grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BlogGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="BlogGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BlogGrid.wrn

component BlogGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/blog-list.wrn b/app/pages/components/blog-list.wrn new file mode 100644 index 00000000..dcdbfcb4 --- /dev/null +++ b/app/pages/components/blog-list.wrn @@ -0,0 +1,31 @@ +page BlogListcomponent { + seo { + title = "BlogList component" + description = "Reusable blog list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

BlogList

Reusable blog list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BlogList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="BlogList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BlogList.wrn

component BlogList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/blog-search.wrn b/app/pages/components/blog-search.wrn new file mode 100644 index 00000000..4f446f89 --- /dev/null +++ b/app/pages/components/blog-search.wrn @@ -0,0 +1,34 @@ +page BlogSearchcomponent { + seo { + title = "BlogSearch component" + description = "Reusable blog search component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

BlogSearch

Reusable blog search component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BlogSearch eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="BlogSearch".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BlogSearch.wrn

component BlogSearch {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/body-text.wrn b/app/pages/components/body-text.wrn new file mode 100644 index 00000000..35ea5e7c --- /dev/null +++ b/app/pages/components/body-text.wrn @@ -0,0 +1,29 @@ +page BodyTextcomponent { + seo { + title = "BodyText component" + description = "Reusable body text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

BodyText

Reusable body text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BodyText text="text" align="start" />

Legacy mount name: data-component="BodyText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BodyText.wrn

component BodyText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--body wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/border-radius-picker.wrn b/app/pages/components/border-radius-picker.wrn new file mode 100644 index 00000000..c780e4f5 --- /dev/null +++ b/app/pages/components/border-radius-picker.wrn @@ -0,0 +1,37 @@ +page BorderRadiusPickercomponent { + seo { + title = "BorderRadiusPicker component" + description = "Reusable border radius picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

BorderRadiusPicker

Reusable border radius picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BorderRadiusPicker label="BorderRadius" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="BorderRadiusPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"BorderRadius"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BorderRadiusPicker.wrn

component BorderRadiusPicker {
+  props {
+    label = "BorderRadius" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/bottom-navigation.wrn b/app/pages/components/bottom-navigation.wrn new file mode 100644 index 00000000..8e0e7060 --- /dev/null +++ b/app/pages/components/bottom-navigation.wrn @@ -0,0 +1,31 @@ +page BottomNavigationcomponent { + seo { + title = "BottomNavigation component" + description = "Reusable bottom navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

BottomNavigation

Reusable bottom navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BottomNavigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="BottomNavigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BottomNavigation.wrn

component BottomNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/brand-color-picker.wrn b/app/pages/components/brand-color-picker.wrn new file mode 100644 index 00000000..e33b2031 --- /dev/null +++ b/app/pages/components/brand-color-picker.wrn @@ -0,0 +1,37 @@ +page BrandColorPickercomponent { + seo { + title = "BrandColorPicker component" + description = "Reusable brand color picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

BrandColorPicker

Reusable brand color picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BrandColorPicker label="BrandColor" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="BrandColorPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"BrandColor"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BrandColorPicker.wrn

component BrandColorPicker {
+  props {
+    label = "BrandColor" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/brand-selector.wrn b/app/pages/components/brand-selector.wrn new file mode 100644 index 00000000..f1aca55f --- /dev/null +++ b/app/pages/components/brand-selector.wrn @@ -0,0 +1,37 @@ +page BrandSelectorcomponent { + seo { + title = "BrandSelector component" + description = "Reusable brand selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

BrandSelector

Reusable brand selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BrandSelector label="Brand" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="BrandSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Brand"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BrandSelector.wrn

component BrandSelector {
+  props {
+    label = "Brand" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/breadcrumbs.wrn b/app/pages/components/breadcrumbs.wrn new file mode 100644 index 00000000..fa35e9ca --- /dev/null +++ b/app/pages/components/breadcrumbs.wrn @@ -0,0 +1,126 @@ +page Breadcrumbscomponent { + seo { + title = "Breadcrumbs component" + description = "Reusable breadcrumbs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Breadcrumbs

Reusable breadcrumbs component.

@wrnexus/ui 0.2.647 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Breadcrumbs items="[]" centered="false" compact="false" showHome="true" homeLabel="Home" />

Legacy mount name: data-component="Breadcrumbs".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
itemsstringOptional[]
centeredbooleanOptionalfalse
compactbooleanOptionalfalse
showHomebooleanOptionaltrue
homeLabelstringOptional"Home"
homeHrefstringOptional"/"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Breadcrumbs.wrn

component Breadcrumbs {
+    props {
+        class: string = ""
+        items = []
+        centered = false
+        compact = false
+        showHome = true
+        homeLabel = "Home"
+        homeHref = "/"
+    }
+
+    view {
+        <nav
+            aria-label="Breadcrumb"
+            class="w-full {class}"
+            class:hidden="items.length === 0 && !showHome"
+        >
+            <ol
+                class="flex flex-wrap items-center text-slate-500 dark:text-slate-400"
+                class:justify-center="centered"
+                class:gap-1.5="compact"
+                class:text-xs="compact"
+                class:gap-2="!compact"
+                class:text-sm="!compact"
+            >
+                <!-- Home -->
+                <li
+                    class:hidden="!showHome"
+                    class:inline-flex="showHome"
+                >
+                    <a
+                        href="{homeHref}"
+                        class="group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300"
+                    >
+                        <span class="icon-[lucide--home] h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                        <span class:hidden="compact">
+                            {homeLabel}
+                        </span>
+
+                        <span
+                            class="sr-only"
+                            class:hidden="!compact"
+                        >
+                            {homeLabel}
+                        </span>
+                    </a>
+                </li>
+
+                <!-- Separator after home -->
+                <li
+                    aria-hidden="true"
+                    class="text-slate-300 dark:text-slate-700"
+                    class:hidden="!showHome || items.length === 0"
+                    class:inline-flex="showHome && items.length > 0"
+                >
+                    <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
+                </li>
+
+                <!-- Dynamic breadcrumb items -->
+                {#each items as item, index}
+                <li class="inline-flex min-w-0 items-center gap-2">
+                    <!-- Linked item -->
+                    <a
+                        href="{item.href}"
+                        class="max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64"
+                        class:hidden="item.current || item.href === ''"
+                        class:inline-flex="!item.current && item.href !== ''"
+                    >
+                        {item.label}
+                    </a>
+
+                    <!-- Current item -->
+                    <span
+                        aria-current="page"
+                        class="max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64"
+                        class:hidden="!item.current"
+                        class:inline-flex="item.current"
+                    >
+                        {item.label}
+                    </span>
+
+                    <!-- Plain unlinked item -->
+                    <span
+                        class="max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64"
+                        class:hidden="item.current || item.href !== ''"
+                        class:inline-flex="!item.current && item.href === ''"
+                    >
+                        {item.label}
+                    </span>
+
+                    <!-- Separator -->
+                    <span
+                        aria-hidden="true"
+                        class="inline-flex text-slate-300 dark:text-slate-700"
+                        class:hidden="index === items.length - 1"
+                    >
+                        <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
+                    </span>
+                </li>
+                {/each}
+            </ol>
+        </nav>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/browser-frame.wrn b/app/pages/components/browser-frame.wrn new file mode 100644 index 00000000..7b7a8388 --- /dev/null +++ b/app/pages/components/browser-frame.wrn @@ -0,0 +1,31 @@ +page BrowserFramecomponent { + seo { + title = "BrowserFrame component" + description = "Reusable browser frame component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

BrowserFrame

Reusable browser frame component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BrowserFrame eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="BrowserFrame".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BrowserFrame.wrn

component BrowserFrame {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/budget-range-slider.wrn b/app/pages/components/budget-range-slider.wrn new file mode 100644 index 00000000..6a5e8914 --- /dev/null +++ b/app/pages/components/budget-range-slider.wrn @@ -0,0 +1,34 @@ +page BudgetRangeSlidercomponent { + seo { + title = "BudgetRangeSlider component" + description = "Reusable budget range slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

BudgetRangeSlider

Reusable budget range slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BudgetRangeSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="BudgetRangeSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BudgetRangeSlider.wrn

component BudgetRangeSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/budget-selector.wrn b/app/pages/components/budget-selector.wrn new file mode 100644 index 00000000..aeff4c46 --- /dev/null +++ b/app/pages/components/budget-selector.wrn @@ -0,0 +1,37 @@ +page BudgetSelectorcomponent { + seo { + title = "BudgetSelector component" + description = "Reusable budget selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

BudgetSelector

Reusable budget selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BudgetSelector label="Budget" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="BudgetSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Budget"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BudgetSelector.wrn

component BudgetSelector {
+  props {
+    label = "Budget" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/business-hours-picker.wrn b/app/pages/components/business-hours-picker.wrn new file mode 100644 index 00000000..c744910c --- /dev/null +++ b/app/pages/components/business-hours-picker.wrn @@ -0,0 +1,37 @@ +page BusinessHoursPickercomponent { + seo { + title = "BusinessHoursPicker component" + description = "Reusable business hours picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

BusinessHoursPicker

Reusable business hours picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<BusinessHoursPicker label="BusinessHours" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="BusinessHoursPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"BusinessHours"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/BusinessHoursPicker.wrn

component BusinessHoursPicker {
+  props {
+    label = "BusinessHours" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/button-group.wrn b/app/pages/components/button-group.wrn new file mode 100644 index 00000000..c827a5f5 --- /dev/null +++ b/app/pages/components/button-group.wrn @@ -0,0 +1,37 @@ +page ButtonGroupcomponent { + seo { + title = "ButtonGroup component" + description = "Reusable button group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ButtonGroup

Reusable button group component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ButtonGroup label="Button" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ButtonGroup".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Button"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ButtonGroup.wrn

component ButtonGroup {
+  props {
+    label = "Button" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/button-selector.wrn b/app/pages/components/button-selector.wrn new file mode 100644 index 00000000..ed98464b --- /dev/null +++ b/app/pages/components/button-selector.wrn @@ -0,0 +1,37 @@ +page ButtonSelectorcomponent { + seo { + title = "ButtonSelector component" + description = "Reusable button selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ButtonSelector

Reusable button selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ButtonSelector label="Button" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ButtonSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Button"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ButtonSelector.wrn

component ButtonSelector {
+  props {
+    label = "Button" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/button.wrn b/app/pages/components/button.wrn new file mode 100644 index 00000000..3cc57579 --- /dev/null +++ b/app/pages/components/button.wrn @@ -0,0 +1,39 @@ +page Buttoncomponent { + seo { + title = "Button component" + description = "Reusable button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

Button

Reusable button component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Button label="Button" type="button" variant="primary" size="md" disabled="false" />

Legacy mount name: data-component="Button".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Button"
typestringOptional"button"
variantstringOptional"primary"
sizestringOptional"md"
disabledbooleanOptionalfalse
loadingbooleanOptionalfalse
iconstringOptional""
classNamestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Button.wrn

component Button {
+  props {
+    label = "Button"
+    type = "button"
+    variant = "primary"
+    size = "md"
+    disabled = false
+    loading = false
+    icon = ""
+    className = ""
+  }
+  view {
+    <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] {size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'} {variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'} {className}">
+      <span data-show="loading" class="size-4 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
+      <span>{label}</span>
+    </button>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/calendar-grid.wrn b/app/pages/components/calendar-grid.wrn new file mode 100644 index 00000000..8fd55c96 --- /dev/null +++ b/app/pages/components/calendar-grid.wrn @@ -0,0 +1,31 @@ +page CalendarGridcomponent { + seo { + title = "CalendarGrid component" + description = "Reusable calendar grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

CalendarGrid

Reusable calendar grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CalendarGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="CalendarGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CalendarGrid.wrn

component CalendarGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/calendar-header.wrn b/app/pages/components/calendar-header.wrn new file mode 100644 index 00000000..e005c37b --- /dev/null +++ b/app/pages/components/calendar-header.wrn @@ -0,0 +1,31 @@ +page CalendarHeadercomponent { + seo { + title = "CalendarHeader component" + description = "Reusable calendar header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CalendarHeader

Reusable calendar header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CalendarHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CalendarHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CalendarHeader.wrn

component CalendarHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/calendar-navigation.wrn b/app/pages/components/calendar-navigation.wrn new file mode 100644 index 00000000..50f8105a --- /dev/null +++ b/app/pages/components/calendar-navigation.wrn @@ -0,0 +1,31 @@ +page CalendarNavigationcomponent { + seo { + title = "CalendarNavigation component" + description = "Reusable calendar navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CalendarNavigation

Reusable calendar navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CalendarNavigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CalendarNavigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CalendarNavigation.wrn

component CalendarNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/calendar.wrn b/app/pages/components/calendar.wrn new file mode 100644 index 00000000..17e6e617 --- /dev/null +++ b/app/pages/components/calendar.wrn @@ -0,0 +1,34 @@ +page Calendarcomponent { + seo { + title = "Calendar component" + description = "Reusable calendar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Calendar

Reusable calendar component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Calendar eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Calendar".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Calendar.wrn

component Calendar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/callback-url-input.wrn b/app/pages/components/callback-url-input.wrn new file mode 100644 index 00000000..eea6479f --- /dev/null +++ b/app/pages/components/callback-url-input.wrn @@ -0,0 +1,37 @@ +page CallbackUrlInputcomponent { + seo { + title = "CallbackUrlInput component" + description = "Reusable callback url input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CallbackUrlInput

Reusable callback url input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CallbackUrlInput label="CallbackUrl" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CallbackUrlInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CallbackUrl"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CallbackUrlInput.wrn

component CallbackUrlInput {
+  props {
+    label = "CallbackUrl" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/campaign-card.wrn b/app/pages/components/campaign-card.wrn new file mode 100644 index 00000000..0fb2c3a9 --- /dev/null +++ b/app/pages/components/campaign-card.wrn @@ -0,0 +1,30 @@ +page CampaignCardcomponent { + seo { + title = "CampaignCard component" + description = "Reusable campaign card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CampaignCard

Reusable campaign card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CampaignCard title="title" description="description" href="href" />

Legacy mount name: data-component="CampaignCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CampaignCard.wrn

component CampaignCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/campaign-performance-preview.wrn b/app/pages/components/campaign-performance-preview.wrn new file mode 100644 index 00000000..1edc36bb --- /dev/null +++ b/app/pages/components/campaign-performance-preview.wrn @@ -0,0 +1,34 @@ +page CampaignPerformancePreviewcomponent { + seo { + title = "CampaignPerformancePreview component" + description = "Reusable campaign performance preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CampaignPerformancePreview

Reusable campaign performance preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CampaignPerformancePreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CampaignPerformancePreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CampaignPerformancePreview.wrn

component CampaignPerformancePreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/campaign-progress.wrn b/app/pages/components/campaign-progress.wrn new file mode 100644 index 00000000..fdf0c2da --- /dev/null +++ b/app/pages/components/campaign-progress.wrn @@ -0,0 +1,32 @@ +page CampaignProgresscomponent { + seo { + title = "CampaignProgress component" + description = "Reusable campaign progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

CampaignProgress

Reusable campaign progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CampaignProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="CampaignProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CampaignProgress.wrn

component CampaignProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/capability-grid.wrn b/app/pages/components/capability-grid.wrn new file mode 100644 index 00000000..831b879a --- /dev/null +++ b/app/pages/components/capability-grid.wrn @@ -0,0 +1,31 @@ +page CapabilityGridcomponent { + seo { + title = "CapabilityGrid component" + description = "Reusable capability grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

CapabilityGrid

Reusable capability grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CapabilityGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="CapabilityGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CapabilityGrid.wrn

component CapabilityGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/captcha-field.wrn b/app/pages/components/captcha-field.wrn new file mode 100644 index 00000000..a8e4f039 --- /dev/null +++ b/app/pages/components/captcha-field.wrn @@ -0,0 +1,37 @@ +page CaptchaFieldcomponent { + seo { + title = "CaptchaField component" + description = "Reusable captcha field component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CaptchaField

Reusable captcha field component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CaptchaField label="Captcha" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CaptchaField".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Captcha"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CaptchaField.wrn

component CaptchaField {
+  props {
+    label = "Captcha" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/card-payment-form.wrn b/app/pages/components/card-payment-form.wrn new file mode 100644 index 00000000..ed2f29b4 --- /dev/null +++ b/app/pages/components/card-payment-form.wrn @@ -0,0 +1,34 @@ +page CardPaymentFormcomponent { + seo { + title = "CardPaymentForm component" + description = "Reusable card payment form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CardPaymentForm

Reusable card payment form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CardPaymentForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CardPaymentForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CardPaymentForm.wrn

component CardPaymentForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/card-selector.wrn b/app/pages/components/card-selector.wrn new file mode 100644 index 00000000..855b6092 --- /dev/null +++ b/app/pages/components/card-selector.wrn @@ -0,0 +1,37 @@ +page CardSelectorcomponent { + seo { + title = "CardSelector component" + description = "Reusable card selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CardSelector

Reusable card selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CardSelector label="Card" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CardSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Card"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CardSelector.wrn

component CardSelector {
+  props {
+    label = "Card" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/card-skeleton.wrn b/app/pages/components/card-skeleton.wrn new file mode 100644 index 00000000..e26d02a7 --- /dev/null +++ b/app/pages/components/card-skeleton.wrn @@ -0,0 +1,32 @@ +page CardSkeletoncomponent { + seo { + title = "CardSkeleton component" + description = "Reusable card skeleton component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

CardSkeleton

Reusable card skeleton component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CardSkeleton label="Card" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="CardSkeleton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Card"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CardSkeleton.wrn

component CardSkeleton {
+  props {
+    label = "Card" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/card.wrn b/app/pages/components/card.wrn new file mode 100644 index 00000000..6b9cb823 --- /dev/null +++ b/app/pages/components/card.wrn @@ -0,0 +1,32 @@ +page Cardcomponent { + seo { + title = "Card component" + description = "Reusable card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Card

Reusable card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Card variant="default" padding="md" interactive="false" />

Legacy mount name: data-component="Card".

Props and attributes

PropTypeRequirementDefault
variantstringOptional"default"
paddingstringOptional"md"
interactivebooleanOptionalfalse
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Card.wrn

component Card {
+  props {
+    variant = "default"
+    padding = "md"
+    interactive = false
+    className = ""
+  }
+  view {
+    <article class="rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white {padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'} {variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''} {interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''} {className}"><slot /></article>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/career-application-form.wrn b/app/pages/components/career-application-form.wrn new file mode 100644 index 00000000..2ac373d3 --- /dev/null +++ b/app/pages/components/career-application-form.wrn @@ -0,0 +1,34 @@ +page CareerApplicationFormcomponent { + seo { + title = "CareerApplicationForm component" + description = "Reusable career application form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CareerApplicationForm

Reusable career application form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CareerApplicationForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CareerApplicationForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CareerApplicationForm.wrn

component CareerApplicationForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/career-benefits-grid.wrn b/app/pages/components/career-benefits-grid.wrn new file mode 100644 index 00000000..47e3bc42 --- /dev/null +++ b/app/pages/components/career-benefits-grid.wrn @@ -0,0 +1,31 @@ +page CareerBenefitsGridcomponent { + seo { + title = "CareerBenefitsGrid component" + description = "Reusable career benefits grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

CareerBenefitsGrid

Reusable career benefits grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CareerBenefitsGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="CareerBenefitsGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CareerBenefitsGrid.wrn

component CareerBenefitsGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/carousel.wrn b/app/pages/components/carousel.wrn new file mode 100644 index 00000000..588ba9e6 --- /dev/null +++ b/app/pages/components/carousel.wrn @@ -0,0 +1,34 @@ +page Carouselcomponent { + seo { + title = "Carousel component" + description = "Reusable carousel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Carousel

Reusable carousel component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Carousel eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Carousel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Carousel.wrn

component Carousel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/case-study-card.wrn b/app/pages/components/case-study-card.wrn new file mode 100644 index 00000000..9706ad4c --- /dev/null +++ b/app/pages/components/case-study-card.wrn @@ -0,0 +1,34 @@ +page CaseStudyCardcomponent { + seo { + title = "CaseStudyCard component" + description = "Reusable case study card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CaseStudyCard

Reusable case study card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CaseStudyCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CaseStudyCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CaseStudyCard.wrn

component CaseStudyCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/case-study-hero.wrn b/app/pages/components/case-study-hero.wrn new file mode 100644 index 00000000..b1aaff6c --- /dev/null +++ b/app/pages/components/case-study-hero.wrn @@ -0,0 +1,31 @@ +page CaseStudyHerocomponent { + seo { + title = "CaseStudyHero component" + description = "Reusable case study hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CaseStudyHero

Reusable case study hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CaseStudyHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CaseStudyHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CaseStudyHero.wrn

component CaseStudyHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/case-study-preview.wrn b/app/pages/components/case-study-preview.wrn new file mode 100644 index 00000000..e418b62f --- /dev/null +++ b/app/pages/components/case-study-preview.wrn @@ -0,0 +1,34 @@ +page CaseStudyPreviewcomponent { + seo { + title = "CaseStudyPreview component" + description = "Reusable case study preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CaseStudyPreview

Reusable case study preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CaseStudyPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CaseStudyPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CaseStudyPreview.wrn

component CaseStudyPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/centered-cta.wrn b/app/pages/components/centered-cta.wrn new file mode 100644 index 00000000..3c782b7c --- /dev/null +++ b/app/pages/components/centered-cta.wrn @@ -0,0 +1,32 @@ +page CenteredCTAcomponent { + seo { + title = "CenteredCTA component" + description = "Reusable centered c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

CenteredCTA

Reusable centered c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CenteredCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="CenteredCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CenteredCTA.wrn

component CenteredCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/centered-hero.wrn b/app/pages/components/centered-hero.wrn new file mode 100644 index 00000000..953e756d --- /dev/null +++ b/app/pages/components/centered-hero.wrn @@ -0,0 +1,31 @@ +page CenteredHerocomponent { + seo { + title = "CenteredHero component" + description = "Reusable centered hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CenteredHero

Reusable centered hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CenteredHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CenteredHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CenteredHero.wrn

component CenteredHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/centered-section-header.wrn b/app/pages/components/centered-section-header.wrn new file mode 100644 index 00000000..66961208 --- /dev/null +++ b/app/pages/components/centered-section-header.wrn @@ -0,0 +1,31 @@ +page CenteredSectionHeadercomponent { + seo { + title = "CenteredSectionHeader component" + description = "Reusable centered section header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CenteredSectionHeader

Reusable centered section header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CenteredSectionHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CenteredSectionHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CenteredSectionHeader.wrn

component CenteredSectionHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/certificate-upload.wrn b/app/pages/components/certificate-upload.wrn new file mode 100644 index 00000000..59417654 --- /dev/null +++ b/app/pages/components/certificate-upload.wrn @@ -0,0 +1,34 @@ +page CertificateUploadcomponent { + seo { + title = "CertificateUpload component" + description = "Reusable certificate upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CertificateUpload

Reusable certificate upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CertificateUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CertificateUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CertificateUpload.wrn

component CertificateUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/certification-badge.wrn b/app/pages/components/certification-badge.wrn new file mode 100644 index 00000000..51549b9b --- /dev/null +++ b/app/pages/components/certification-badge.wrn @@ -0,0 +1,32 @@ +page CertificationBadgecomponent { + seo { + title = "CertificationBadge component" + description = "Reusable certification badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

CertificationBadge

Reusable certification badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CertificationBadge label="Certification" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="CertificationBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Certification"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CertificationBadge.wrn

component CertificationBadge {
+  props {
+    label = "Certification" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/challenge-section.wrn b/app/pages/components/challenge-section.wrn new file mode 100644 index 00000000..0e5ba4f7 --- /dev/null +++ b/app/pages/components/challenge-section.wrn @@ -0,0 +1,31 @@ +page ChallengeSectioncomponent { + seo { + title = "ChallengeSection component" + description = "Reusable challenge section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ChallengeSection

Reusable challenge section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChallengeSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ChallengeSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChallengeSection.wrn

component ChallengeSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-badge.wrn b/app/pages/components/channel-badge.wrn new file mode 100644 index 00000000..f8a880c4 --- /dev/null +++ b/app/pages/components/channel-badge.wrn @@ -0,0 +1,32 @@ +page ChannelBadgecomponent { + seo { + title = "ChannelBadge component" + description = "Reusable channel badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ChannelBadge

Reusable channel badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelBadge label="Channel" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ChannelBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Channel"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelBadge.wrn

component ChannelBadge {
+  props {
+    label = "Channel" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-card.wrn b/app/pages/components/channel-card.wrn new file mode 100644 index 00000000..a5461290 --- /dev/null +++ b/app/pages/components/channel-card.wrn @@ -0,0 +1,30 @@ +page ChannelCardcomponent { + seo { + title = "ChannelCard component" + description = "Reusable channel card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ChannelCard

Reusable channel card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelCard title="title" description="description" href="href" />

Legacy mount name: data-component="ChannelCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelCard.wrn

component ChannelCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-comparison-chart.wrn b/app/pages/components/channel-comparison-chart.wrn new file mode 100644 index 00000000..d9721567 --- /dev/null +++ b/app/pages/components/channel-comparison-chart.wrn @@ -0,0 +1,32 @@ +page ChannelComparisonChartcomponent { + seo { + title = "ChannelComparisonChart component" + description = "Reusable channel comparison chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ChannelComparisonChart

Reusable channel comparison chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelComparisonChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ChannelComparisonChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelComparisonChart.wrn

component ChannelComparisonChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-comparison-table.wrn b/app/pages/components/channel-comparison-table.wrn new file mode 100644 index 00000000..4894e00a --- /dev/null +++ b/app/pages/components/channel-comparison-table.wrn @@ -0,0 +1,31 @@ +page ChannelComparisonTablecomponent { + seo { + title = "ChannelComparisonTable component" + description = "Reusable channel comparison table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ChannelComparisonTable

Reusable channel comparison table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelComparisonTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ChannelComparisonTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelComparisonTable.wrn

component ChannelComparisonTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-fallback-diagram.wrn b/app/pages/components/channel-fallback-diagram.wrn new file mode 100644 index 00000000..ba88ba64 --- /dev/null +++ b/app/pages/components/channel-fallback-diagram.wrn @@ -0,0 +1,32 @@ +page ChannelFallbackDiagramcomponent { + seo { + title = "ChannelFallbackDiagram component" + description = "Reusable channel fallback diagram component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ChannelFallbackDiagram

Reusable channel fallback diagram component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelFallbackDiagram title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ChannelFallbackDiagram".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelFallbackDiagram.wrn

component ChannelFallbackDiagram {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-flow.wrn b/app/pages/components/channel-flow.wrn new file mode 100644 index 00000000..403c5e0a --- /dev/null +++ b/app/pages/components/channel-flow.wrn @@ -0,0 +1,32 @@ +page ChannelFlowcomponent { + seo { + title = "ChannelFlow component" + description = "Reusable channel flow component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ChannelFlow

Reusable channel flow component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelFlow title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ChannelFlow".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelFlow.wrn

component ChannelFlow {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-icon.wrn b/app/pages/components/channel-icon.wrn new file mode 100644 index 00000000..2a208267 --- /dev/null +++ b/app/pages/components/channel-icon.wrn @@ -0,0 +1,34 @@ +page ChannelIconcomponent { + seo { + title = "ChannelIcon component" + description = "Reusable channel icon component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ChannelIcon

Reusable channel icon component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelIcon eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ChannelIcon".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelIcon.wrn

component ChannelIcon {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-rate-table.wrn b/app/pages/components/channel-rate-table.wrn new file mode 100644 index 00000000..6a9bfdf2 --- /dev/null +++ b/app/pages/components/channel-rate-table.wrn @@ -0,0 +1,31 @@ +page ChannelRateTablecomponent { + seo { + title = "ChannelRateTable component" + description = "Reusable channel rate table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ChannelRateTable

Reusable channel rate table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelRateTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ChannelRateTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelRateTable.wrn

component ChannelRateTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/channel-selector.wrn b/app/pages/components/channel-selector.wrn new file mode 100644 index 00000000..a42d06d3 --- /dev/null +++ b/app/pages/components/channel-selector.wrn @@ -0,0 +1,37 @@ +page ChannelSelectorcomponent { + seo { + title = "ChannelSelector component" + description = "Reusable channel selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ChannelSelector

Reusable channel selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChannelSelector label="Channel" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ChannelSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Channel"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChannelSelector.wrn

component ChannelSelector {
+  props {
+    label = "Channel" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/character-counter.wrn b/app/pages/components/character-counter.wrn new file mode 100644 index 00000000..34455ad4 --- /dev/null +++ b/app/pages/components/character-counter.wrn @@ -0,0 +1,32 @@ +page CharacterCountercomponent { + seo { + title = "CharacterCounter component" + description = "Reusable character counter component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

CharacterCounter

Reusable character counter component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CharacterCounter label="Character" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="CharacterCounter".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Character"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CharacterCounter.wrn

component CharacterCounter {
+  props {
+    label = "Character" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/chart-empty-state.wrn b/app/pages/components/chart-empty-state.wrn new file mode 100644 index 00000000..ce648e09 --- /dev/null +++ b/app/pages/components/chart-empty-state.wrn @@ -0,0 +1,32 @@ +page ChartEmptyStatecomponent { + seo { + title = "ChartEmptyState component" + description = "Reusable chart empty state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ChartEmptyState

Reusable chart empty state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChartEmptyState label="ChartEmpty" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ChartEmptyState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ChartEmpty"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChartEmptyState.wrn

component ChartEmptyState {
+  props {
+    label = "ChartEmpty" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/chart-tooltip.wrn b/app/pages/components/chart-tooltip.wrn new file mode 100644 index 00000000..1106b5d5 --- /dev/null +++ b/app/pages/components/chart-tooltip.wrn @@ -0,0 +1,34 @@ +page ChartTooltipcomponent { + seo { + title = "ChartTooltip component" + description = "Reusable chart tooltip component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ChartTooltip

Reusable chart tooltip component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChartTooltip eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ChartTooltip".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChartTooltip.wrn

component ChartTooltip {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/checkbox-group.wrn b/app/pages/components/checkbox-group.wrn new file mode 100644 index 00000000..4bb5f8c2 --- /dev/null +++ b/app/pages/components/checkbox-group.wrn @@ -0,0 +1,37 @@ +page CheckboxGroupcomponent { + seo { + title = "CheckboxGroup component" + description = "Reusable checkbox group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CheckboxGroup

Reusable checkbox group component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CheckboxGroup label="Checkbox" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CheckboxGroup".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Checkbox"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CheckboxGroup.wrn

component CheckboxGroup {
+  props {
+    label = "Checkbox" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/checkbox.wrn b/app/pages/components/checkbox.wrn new file mode 100644 index 00000000..28f21e31 --- /dev/null +++ b/app/pages/components/checkbox.wrn @@ -0,0 +1,35 @@ +page Checkboxcomponent { + seo { + title = "Checkbox component" + description = "Reusable checkbox component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Checkbox

Reusable checkbox component.

@wrnexus/ui 0.2.647 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Checkbox id="id" name="name" label="Checkbox" description="description" checked="false" />

Legacy mount name: data-component="Checkbox".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Checkbox"
descriptionstringOptional""
checkedbooleanOptionalfalse
disabledbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Checkbox.wrn

component Checkbox {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Checkbox"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  view {
+    <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900 {class}"><input id="{id}" name="{name}" type="checkbox" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950" /><span><span class="block text-sm font-semibold text-slate-900 dark:text-white">{label}</span><span data-show="description" class="mt-0.5 block text-sm text-slate-500 dark:text-slate-400">{description}</span></span></label>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/checklist-progress.wrn b/app/pages/components/checklist-progress.wrn new file mode 100644 index 00000000..814765f9 --- /dev/null +++ b/app/pages/components/checklist-progress.wrn @@ -0,0 +1,32 @@ +page ChecklistProgresscomponent { + seo { + title = "ChecklistProgress component" + description = "Reusable checklist progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ChecklistProgress

Reusable checklist progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChecklistProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ChecklistProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChecklistProgress.wrn

component ChecklistProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/checklist.wrn b/app/pages/components/checklist.wrn new file mode 100644 index 00000000..8588639b --- /dev/null +++ b/app/pages/components/checklist.wrn @@ -0,0 +1,34 @@ +page Checklistcomponent { + seo { + title = "Checklist component" + description = "Reusable checklist component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Checklist

Reusable checklist component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Checklist eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Checklist".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Checklist.wrn

component Checklist {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/chip-input.wrn b/app/pages/components/chip-input.wrn new file mode 100644 index 00000000..17c9ca84 --- /dev/null +++ b/app/pages/components/chip-input.wrn @@ -0,0 +1,37 @@ +page ChipInputcomponent { + seo { + title = "ChipInput component" + description = "Reusable chip input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ChipInput

Reusable chip input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ChipInput label="Chip" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ChipInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Chip"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ChipInput.wrn

component ChipInput {
+  props {
+    label = "Chip" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/chip.wrn b/app/pages/components/chip.wrn new file mode 100644 index 00000000..2083dc2f --- /dev/null +++ b/app/pages/components/chip.wrn @@ -0,0 +1,29 @@ +page Chipcomponent { + seo { + title = "Chip component" + description = "Reusable chip component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Chip

Reusable chip component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Chip label="Chip" variant="default" />

Legacy mount name: data-component="Chip".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Chip"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Chip.wrn

component Chip {
+  props {
+    label = "Chip"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--chip {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/circular-progress.wrn b/app/pages/components/circular-progress.wrn new file mode 100644 index 00000000..ee487d56 --- /dev/null +++ b/app/pages/components/circular-progress.wrn @@ -0,0 +1,32 @@ +page CircularProgresscomponent { + seo { + title = "CircularProgress component" + description = "Reusable circular progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

CircularProgress

Reusable circular progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CircularProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="CircularProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CircularProgress.wrn

component CircularProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/city-selector.wrn b/app/pages/components/city-selector.wrn new file mode 100644 index 00000000..5918cc3c --- /dev/null +++ b/app/pages/components/city-selector.wrn @@ -0,0 +1,37 @@ +page CitySelectorcomponent { + seo { + title = "CitySelector component" + description = "Reusable city selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CitySelector

Reusable city selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CitySelector label="City" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CitySelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"City"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CitySelector.wrn

component CitySelector {
+  props {
+    label = "City" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/clear-filters-button.wrn b/app/pages/components/clear-filters-button.wrn new file mode 100644 index 00000000..35251ed0 --- /dev/null +++ b/app/pages/components/clear-filters-button.wrn @@ -0,0 +1,32 @@ +page ClearFiltersButtoncomponent { + seo { + title = "ClearFiltersButton component" + description = "Reusable clear filters button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ClearFiltersButton

Reusable clear filters button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ClearFiltersButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ClearFiltersButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ClearFiltersButton.wrn

component ClearFiltersButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/clickable-card.wrn b/app/pages/components/clickable-card.wrn new file mode 100644 index 00000000..719cdd64 --- /dev/null +++ b/app/pages/components/clickable-card.wrn @@ -0,0 +1,30 @@ +page ClickableCardcomponent { + seo { + title = "ClickableCard component" + description = "Reusable clickable card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ClickableCard

Reusable clickable card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ClickableCard title="title" description="description" href="href" />

Legacy mount name: data-component="ClickableCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ClickableCard.wrn

component ClickableCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--clickable {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/close-button.wrn b/app/pages/components/close-button.wrn new file mode 100644 index 00000000..fc8a0697 --- /dev/null +++ b/app/pages/components/close-button.wrn @@ -0,0 +1,30 @@ +page CloseButtoncomponent { + seo { + title = "CloseButton component" + description = "Reusable close button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

CloseButton

Reusable close button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CloseButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="CloseButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CloseButton.wrn

component CloseButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cluster.wrn b/app/pages/components/cluster.wrn new file mode 100644 index 00000000..08fbcae0 --- /dev/null +++ b/app/pages/components/cluster.wrn @@ -0,0 +1,30 @@ +page Clustercomponent { + seo { + title = "Cluster component" + description = "Reusable cluster component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Cluster

Reusable cluster component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Cluster gap="4" />

Legacy mount name: data-component="Cluster".

Props and attributes

PropTypeRequirementDefault
gapstringOptional"4"
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Cluster.wrn

component Cluster {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code-block.wrn b/app/pages/components/code-block.wrn new file mode 100644 index 00000000..40a0ae03 --- /dev/null +++ b/app/pages/components/code-block.wrn @@ -0,0 +1,33 @@ +page CodeBlockcomponent { + seo { + title = "CodeBlock component" + description = "Reusable code block component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CodeBlock

Reusable code block component.

@wrnexus/ui 0.2.644 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeBlock language="text" filename="filename" code="code" />

Legacy mount name: data-component="CodeBlock".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
languagestringOptional"text"
filenamestringOptional""
codestringOptional""

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/CodeBlock.wrn

component CodeBlock {
+  props {
+    class = ""
+    language = "text"
+    filename = ""
+    code = ""
+  }
+  state copied = false
+  view {
+    <div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 {class}"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code-copy-button.wrn b/app/pages/components/code-copy-button.wrn new file mode 100644 index 00000000..33723587 --- /dev/null +++ b/app/pages/components/code-copy-button.wrn @@ -0,0 +1,32 @@ +page CodeCopyButtoncomponent { + seo { + title = "CodeCopyButton component" + description = "Reusable code copy button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

CodeCopyButton

Reusable code copy button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeCopyButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="CodeCopyButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CodeCopyButton.wrn

component CodeCopyButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code-header.wrn b/app/pages/components/code-header.wrn new file mode 100644 index 00000000..78f23cf4 --- /dev/null +++ b/app/pages/components/code-header.wrn @@ -0,0 +1,31 @@ +page CodeHeadercomponent { + seo { + title = "CodeHeader component" + description = "Reusable code header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CodeHeader

Reusable code header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CodeHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CodeHeader.wrn

component CodeHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code-input.wrn b/app/pages/components/code-input.wrn new file mode 100644 index 00000000..6b012cdd --- /dev/null +++ b/app/pages/components/code-input.wrn @@ -0,0 +1,37 @@ +page CodeInputcomponent { + seo { + title = "CodeInput component" + description = "Reusable code input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CodeInput

Reusable code input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeInput label="Code" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CodeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Code"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CodeInput.wrn

component CodeInput {
+  props {
+    label = "Code" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code-language-badge.wrn b/app/pages/components/code-language-badge.wrn new file mode 100644 index 00000000..af86c8e9 --- /dev/null +++ b/app/pages/components/code-language-badge.wrn @@ -0,0 +1,32 @@ +page CodeLanguageBadgecomponent { + seo { + title = "CodeLanguageBadge component" + description = "Reusable code language badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

CodeLanguageBadge

Reusable code language badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeLanguageBadge label="CodeLanguage" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="CodeLanguageBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CodeLanguage"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CodeLanguageBadge.wrn

component CodeLanguageBadge {
+  props {
+    label = "CodeLanguage" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code-tabs.wrn b/app/pages/components/code-tabs.wrn new file mode 100644 index 00000000..29519d7c --- /dev/null +++ b/app/pages/components/code-tabs.wrn @@ -0,0 +1,34 @@ +page CodeTabscomponent { + seo { + title = "CodeTabs component" + description = "Reusable code tabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CodeTabs

Reusable code tabs component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeTabs eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CodeTabs".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CodeTabs.wrn

component CodeTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code-text.wrn b/app/pages/components/code-text.wrn new file mode 100644 index 00000000..dddbf89f --- /dev/null +++ b/app/pages/components/code-text.wrn @@ -0,0 +1,29 @@ +page CodeTextcomponent { + seo { + title = "CodeText component" + description = "Reusable code text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CodeText

Reusable code text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CodeText text="text" align="start" />

Legacy mount name: data-component="CodeText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CodeText.wrn

component CodeText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--body wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/code.wrn b/app/pages/components/code.wrn new file mode 100644 index 00000000..df65aad1 --- /dev/null +++ b/app/pages/components/code.wrn @@ -0,0 +1,34 @@ +page Codecomponent { + seo { + title = "Code component" + description = "Reusable code component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Code

Reusable code component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Code eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Code".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Code.wrn

component Code {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cohort-chart.wrn b/app/pages/components/cohort-chart.wrn new file mode 100644 index 00000000..403a7cfd --- /dev/null +++ b/app/pages/components/cohort-chart.wrn @@ -0,0 +1,32 @@ +page CohortChartcomponent { + seo { + title = "CohortChart component" + description = "Reusable cohort chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

CohortChart

Reusable cohort chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CohortChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="CohortChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CohortChart.wrn

component CohortChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/color-grid.wrn b/app/pages/components/color-grid.wrn new file mode 100644 index 00000000..f10f5b27 --- /dev/null +++ b/app/pages/components/color-grid.wrn @@ -0,0 +1,31 @@ +page ColorGridcomponent { + seo { + title = "ColorGrid component" + description = "Reusable color grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ColorGrid

Reusable color grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ColorGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ColorGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ColorGrid.wrn

component ColorGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/color-hex-input.wrn b/app/pages/components/color-hex-input.wrn new file mode 100644 index 00000000..754ebcaf --- /dev/null +++ b/app/pages/components/color-hex-input.wrn @@ -0,0 +1,37 @@ +page ColorHexInputcomponent { + seo { + title = "ColorHexInput component" + description = "Reusable color hex input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ColorHexInput

Reusable color hex input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ColorHexInput label="ColorHex" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ColorHexInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ColorHex"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ColorHexInput.wrn

component ColorHexInput {
+  props {
+    label = "ColorHex" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/color-picker.wrn b/app/pages/components/color-picker.wrn new file mode 100644 index 00000000..b4ec508c --- /dev/null +++ b/app/pages/components/color-picker.wrn @@ -0,0 +1,37 @@ +page ColorPickercomponent { + seo { + title = "ColorPicker component" + description = "Reusable color picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ColorPicker

Reusable color picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ColorPicker label="Color" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ColorPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Color"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ColorPicker.wrn

component ColorPicker {
+  props {
+    label = "Color" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/color-selector.wrn b/app/pages/components/color-selector.wrn new file mode 100644 index 00000000..a81e8285 --- /dev/null +++ b/app/pages/components/color-selector.wrn @@ -0,0 +1,37 @@ +page ColorSelectorcomponent { + seo { + title = "ColorSelector component" + description = "Reusable color selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ColorSelector

Reusable color selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ColorSelector label="Color" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ColorSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Color"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ColorSelector.wrn

component ColorSelector {
+  props {
+    label = "Color" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/color-swatch.wrn b/app/pages/components/color-swatch.wrn new file mode 100644 index 00000000..1fce21a7 --- /dev/null +++ b/app/pages/components/color-swatch.wrn @@ -0,0 +1,34 @@ +page ColorSwatchcomponent { + seo { + title = "ColorSwatch component" + description = "Reusable color swatch component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ColorSwatch

Reusable color swatch component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ColorSwatch eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ColorSwatch".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ColorSwatch.wrn

component ColorSwatch {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/combobox.wrn b/app/pages/components/combobox.wrn new file mode 100644 index 00000000..1040b3a3 --- /dev/null +++ b/app/pages/components/combobox.wrn @@ -0,0 +1,36 @@ +page Comboboxcomponent { + seo { + title = "Combobox component" + description = "Reusable combobox component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Combobox

Reusable combobox component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Combobox id="combobox" name="name" label="Choose an option" placeholder="Search options" options="[]" />

Legacy mount name: data-component="Combobox".

Props and attributes

PropTypeRequirementDefault
idstringOptional"combobox"
namestringOptional""
labelstringOptional"Choose an option"
placeholderstringOptional"Search options"
optionsstringOptional[]
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Combobox.wrn

component Combobox {
+  props {
+    id = "combobox"
+    name = ""
+    label = "Choose an option"
+    placeholder = "Search options"
+    options = []
+    required = false
+    disabled = false
+    class = ""
+  }
+  view {
+    <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><input id="{id}" name="{name}" list="{id}-options" placeholder="{placeholder}" required="{required}" disabled="{disabled}" role="combobox" aria-autocomplete="list" class="wire-input" /><datalist id="{id}-options">{#each options as option}<option value="{option.value}">{option.label}</option>{/each}</datalist></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/coming-soon-badge.wrn b/app/pages/components/coming-soon-badge.wrn new file mode 100644 index 00000000..7dc1f347 --- /dev/null +++ b/app/pages/components/coming-soon-badge.wrn @@ -0,0 +1,29 @@ +page ComingSoonBadgecomponent { + seo { + title = "ComingSoonBadge component" + description = "Reusable coming soon badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ComingSoonBadge

Reusable coming soon badge component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ComingSoonBadge label="ComingSoon" variant="default" />

Legacy mount name: data-component="ComingSoonBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ComingSoon"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ComingSoonBadge.wrn

component ComingSoonBadge {
+  props {
+    label = "ComingSoon"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--comingsoonbadge {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/coming-soon-state.wrn b/app/pages/components/coming-soon-state.wrn new file mode 100644 index 00000000..cef483ef --- /dev/null +++ b/app/pages/components/coming-soon-state.wrn @@ -0,0 +1,32 @@ +page ComingSoonStatecomponent { + seo { + title = "ComingSoonState component" + description = "Reusable coming soon state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ComingSoonState

Reusable coming soon state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ComingSoonState label="ComingSoon" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ComingSoonState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ComingSoon"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ComingSoonState.wrn

component ComingSoonState {
+  props {
+    label = "ComingSoon" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/command-block.wrn b/app/pages/components/command-block.wrn new file mode 100644 index 00000000..82106cbc --- /dev/null +++ b/app/pages/components/command-block.wrn @@ -0,0 +1,34 @@ +page CommandBlockcomponent { + seo { + title = "CommandBlock component" + description = "Reusable command block component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CommandBlock

Reusable command block component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CommandBlock eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CommandBlock".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CommandBlock.wrn

component CommandBlock {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/command-menu.wrn b/app/pages/components/command-menu.wrn new file mode 100644 index 00000000..6be48d92 --- /dev/null +++ b/app/pages/components/command-menu.wrn @@ -0,0 +1,31 @@ +page CommandMenucomponent { + seo { + title = "CommandMenu component" + description = "Reusable command menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

CommandMenu

Reusable command menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CommandMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="CommandMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CommandMenu.wrn

component CommandMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/command-search-input.wrn b/app/pages/components/command-search-input.wrn new file mode 100644 index 00000000..b334b2b4 --- /dev/null +++ b/app/pages/components/command-search-input.wrn @@ -0,0 +1,37 @@ +page CommandSearchInputcomponent { + seo { + title = "CommandSearchInput component" + description = "Reusable command search input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CommandSearchInput

Reusable command search input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CommandSearchInput label="CommandSearch" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CommandSearchInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CommandSearch"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CommandSearchInput.wrn

component CommandSearchInput {
+  props {
+    label = "CommandSearch" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/company-hero.wrn b/app/pages/components/company-hero.wrn new file mode 100644 index 00000000..f4e704bc --- /dev/null +++ b/app/pages/components/company-hero.wrn @@ -0,0 +1,31 @@ +page CompanyHerocomponent { + seo { + title = "CompanyHero component" + description = "Reusable company hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CompanyHero

Reusable company hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CompanyHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CompanyHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CompanyHero.wrn

component CompanyHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/company-name-input.wrn b/app/pages/components/company-name-input.wrn new file mode 100644 index 00000000..598a61ea --- /dev/null +++ b/app/pages/components/company-name-input.wrn @@ -0,0 +1,37 @@ +page CompanyNameInputcomponent { + seo { + title = "CompanyNameInput component" + description = "Reusable company name input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CompanyNameInput

Reusable company name input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CompanyNameInput label="CompanyName" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CompanyNameInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CompanyName"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CompanyNameInput.wrn

component CompanyNameInput {
+  props {
+    label = "CompanyName" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/company-page-shell.wrn b/app/pages/components/company-page-shell.wrn new file mode 100644 index 00000000..45d27060 --- /dev/null +++ b/app/pages/components/company-page-shell.wrn @@ -0,0 +1,31 @@ +page CompanyPageShellcomponent { + seo { + title = "CompanyPageShell component" + description = "Reusable company page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CompanyPageShell

Reusable company page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CompanyPageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="CompanyPageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CompanyPageShell.wrn

component CompanyPageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/company-size-selector.wrn b/app/pages/components/company-size-selector.wrn new file mode 100644 index 00000000..68d24cb5 --- /dev/null +++ b/app/pages/components/company-size-selector.wrn @@ -0,0 +1,37 @@ +page CompanySizeSelectorcomponent { + seo { + title = "CompanySizeSelector component" + description = "Reusable company size selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CompanySizeSelector

Reusable company size selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CompanySizeSelector label="CompanySize" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CompanySizeSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CompanySize"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CompanySizeSelector.wrn

component CompanySizeSelector {
+  props {
+    label = "CompanySize" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/comparison-date-range-picker.wrn b/app/pages/components/comparison-date-range-picker.wrn new file mode 100644 index 00000000..9c019f32 --- /dev/null +++ b/app/pages/components/comparison-date-range-picker.wrn @@ -0,0 +1,37 @@ +page ComparisonDateRangePickercomponent { + seo { + title = "ComparisonDateRangePicker component" + description = "Reusable comparison date range picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ComparisonDateRangePicker

Reusable comparison date range picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ComparisonDateRangePicker label="ComparisonDateRange" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ComparisonDateRangePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ComparisonDateRange"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ComparisonDateRangePicker.wrn

component ComparisonDateRangePicker {
+  props {
+    label = "ComparisonDateRange" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/comparison-table.wrn b/app/pages/components/comparison-table.wrn new file mode 100644 index 00000000..d075c954 --- /dev/null +++ b/app/pages/components/comparison-table.wrn @@ -0,0 +1,31 @@ +page ComparisonTablecomponent { + seo { + title = "ComparisonTable component" + description = "Reusable comparison table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ComparisonTable

Reusable comparison table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ComparisonTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ComparisonTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ComparisonTable.wrn

component ComparisonTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/completion-meter.wrn b/app/pages/components/completion-meter.wrn new file mode 100644 index 00000000..102e4a73 --- /dev/null +++ b/app/pages/components/completion-meter.wrn @@ -0,0 +1,32 @@ +page CompletionMetercomponent { + seo { + title = "CompletionMeter component" + description = "Reusable completion meter component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

CompletionMeter

Reusable completion meter component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CompletionMeter title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="CompletionMeter".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CompletionMeter.wrn

component CompletionMeter {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/compliance-badge-list.wrn b/app/pages/components/compliance-badge-list.wrn new file mode 100644 index 00000000..4e58617e --- /dev/null +++ b/app/pages/components/compliance-badge-list.wrn @@ -0,0 +1,31 @@ +page ComplianceBadgeListcomponent { + seo { + title = "ComplianceBadgeList component" + description = "Reusable compliance badge list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ComplianceBadgeList

Reusable compliance badge list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ComplianceBadgeList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ComplianceBadgeList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ComplianceBadgeList.wrn

component ComplianceBadgeList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/compliance-program-card.wrn b/app/pages/components/compliance-program-card.wrn new file mode 100644 index 00000000..5b4025f0 --- /dev/null +++ b/app/pages/components/compliance-program-card.wrn @@ -0,0 +1,34 @@ +page ComplianceProgramCardcomponent { + seo { + title = "ComplianceProgramCard component" + description = "Reusable compliance program card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ComplianceProgramCard

Reusable compliance program card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ComplianceProgramCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ComplianceProgramCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ComplianceProgramCard.wrn

component ComplianceProgramCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/confirm-password-input.wrn b/app/pages/components/confirm-password-input.wrn new file mode 100644 index 00000000..316b514a --- /dev/null +++ b/app/pages/components/confirm-password-input.wrn @@ -0,0 +1,37 @@ +page ConfirmPasswordInputcomponent { + seo { + title = "ConfirmPasswordInput component" + description = "Reusable confirm password input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ConfirmPasswordInput

Reusable confirm password input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConfirmPasswordInput label="ConfirmPassword" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ConfirmPasswordInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ConfirmPassword"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConfirmPasswordInput.wrn

component ConfirmPasswordInput {
+  props {
+    label = "ConfirmPassword" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/confirmation-dialog.wrn b/app/pages/components/confirmation-dialog.wrn new file mode 100644 index 00000000..23245f61 --- /dev/null +++ b/app/pages/components/confirmation-dialog.wrn @@ -0,0 +1,36 @@ +page ConfirmationDialogcomponent { + seo { + title = "ConfirmationDialog component" + description = "Reusable confirmation dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

ConfirmationDialog

Reusable confirmation dialog component.

@wrnexus/ui 0.2.647 props1 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConfirmationDialog title="Confirm action" description="Are you sure you want to continue?" confirmLabel="Confirm" cancelLabel="Cancel" danger="false" />

Legacy mount name: data-component="ConfirmationDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional"Confirm action"
descriptionstringOptional"Are you sure you want to continue?"
confirmLabelstringOptional"Confirm"
cancelLabelstringOptional"Cancel"
dangerbooleanOptionalfalse
openbooleanOptionalfalse
classstringOptional""

Slots

  • confirm

Events

  • click

Source contract

Installed source: components/ConfirmationDialog.wrn

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 {
+    <div data-show="visible" class="wire-overlay {class}" role="presentation"><section role="alertdialog" aria-modal="true" aria-labelledby="confirmation-title" aria-describedby="confirmation-description" class="wire-dialog"><h2 id="confirmation-title" class="wire-dialog__title">{title}</h2><p id="confirmation-description" class="wire-dialog__description">{description}</p><div class="wire-dialog__actions"><button type="button" class="wire-btn wire-btn--ghost" @click="visible = false">{cancelLabel}</button><button type="button" class="wire-btn {danger ? 'wire-btn--danger' : 'wire-btn--primary'}"><slot name="confirm">{confirmLabel}</slot></button></div></section></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/connected-account-card.wrn b/app/pages/components/connected-account-card.wrn new file mode 100644 index 00000000..3d366d89 --- /dev/null +++ b/app/pages/components/connected-account-card.wrn @@ -0,0 +1,34 @@ +page ConnectedAccountCardcomponent { + seo { + title = "ConnectedAccountCard component" + description = "Reusable connected account card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ConnectedAccountCard

Reusable connected account card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConnectedAccountCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ConnectedAccountCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConnectedAccountCard.wrn

component ConnectedAccountCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/connection-card.wrn b/app/pages/components/connection-card.wrn new file mode 100644 index 00000000..fca443af --- /dev/null +++ b/app/pages/components/connection-card.wrn @@ -0,0 +1,30 @@ +page ConnectionCardcomponent { + seo { + title = "ConnectionCard component" + description = "Reusable connection card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ConnectionCard

Reusable connection card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConnectionCard title="title" description="description" href="href" />

Legacy mount name: data-component="ConnectionCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConnectionCard.wrn

component ConnectionCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--connection {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/consent-timeline-preview.wrn b/app/pages/components/consent-timeline-preview.wrn new file mode 100644 index 00000000..a9ca19c6 --- /dev/null +++ b/app/pages/components/consent-timeline-preview.wrn @@ -0,0 +1,34 @@ +page ConsentTimelinePreviewcomponent { + seo { + title = "ConsentTimelinePreview component" + description = "Reusable consent timeline preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ConsentTimelinePreview

Reusable consent timeline preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConsentTimelinePreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ConsentTimelinePreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConsentTimelinePreview.wrn

component ConsentTimelinePreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-card.wrn b/app/pages/components/contact-card.wrn new file mode 100644 index 00000000..4ea40416 --- /dev/null +++ b/app/pages/components/contact-card.wrn @@ -0,0 +1,30 @@ +page ContactCardcomponent { + seo { + title = "ContactCard component" + description = "Reusable contact card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ContactCard

Reusable contact card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactCard title="title" description="description" href="href" />

Legacy mount name: data-component="ContactCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactCard.wrn

component ContactCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--contact {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-cta.wrn b/app/pages/components/contact-cta.wrn new file mode 100644 index 00000000..d9bae8d4 --- /dev/null +++ b/app/pages/components/contact-cta.wrn @@ -0,0 +1,32 @@ +page ContactCTAcomponent { + seo { + title = "ContactCTA component" + description = "Reusable contact c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ContactCTA

Reusable contact c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ContactCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactCTA.wrn

component ContactCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-form.wrn b/app/pages/components/contact-form.wrn new file mode 100644 index 00000000..ed589308 --- /dev/null +++ b/app/pages/components/contact-form.wrn @@ -0,0 +1,34 @@ +page ContactFormcomponent { + seo { + title = "ContactForm component" + description = "Reusable contact form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ContactForm

Reusable contact form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ContactForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactForm.wrn

component ContactForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-hero.wrn b/app/pages/components/contact-hero.wrn new file mode 100644 index 00000000..a677b53d --- /dev/null +++ b/app/pages/components/contact-hero.wrn @@ -0,0 +1,31 @@ +page ContactHerocomponent { + seo { + title = "ContactHero component" + description = "Reusable contact hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ContactHero

Reusable contact hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ContactHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactHero.wrn

component ContactHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-page-shell.wrn b/app/pages/components/contact-page-shell.wrn new file mode 100644 index 00000000..58ef64f5 --- /dev/null +++ b/app/pages/components/contact-page-shell.wrn @@ -0,0 +1,31 @@ +page ContactPageShellcomponent { + seo { + title = "ContactPageShell component" + description = "Reusable contact page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ContactPageShell

Reusable contact page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactPageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ContactPageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactPageShell.wrn

component ContactPageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-sales-banner.wrn b/app/pages/components/contact-sales-banner.wrn new file mode 100644 index 00000000..25ab0f74 --- /dev/null +++ b/app/pages/components/contact-sales-banner.wrn @@ -0,0 +1,216 @@ +page ContactSalesBannercomponent { + seo { + title = "ContactSalesBanner component" + description = "Reusable contact sales banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

ContactSalesBanner

Reusable contact sales banner component.

@wrnexus/ui 0.2.6413 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactSalesBanner eyebrow="Enterprise identity" title="Ready to secure your next application?" description="description" primaryLabel="Contact sales" primaryHref="/contact" />

Legacy mount name: data-component="ContactSalesBanner".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional"Enterprise identity"
titlestringOptional"Ready to secure your next application?"
descriptionstringOptional""
primaryLabelstringOptional"Contact sales"
primaryHrefstringOptional"/contact"
secondaryLabelstringOptional"Start free"
secondaryHrefstringOptional"/sign-up"
iconClassstringOptional"icon-[lucide--messages-square]"
centeredbooleanOptionalfalse
compactbooleanOptionalfalse
pointsstringOptional[]
trustPointsstringOptional[]

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactSalesBanner.wrn

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 {
+        <section
+            aria-labelledby="contact-sales-banner-title"
+            class="px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
+            class:py-10="compact"
+            class:sm:py-12="compact"
+            class:py-14="!compact"
+            class:sm:py-16="!compact"
+            class:lg:py-20="!compact"
+        >
+            <div
+                class="relative mx-auto w-full max-w-7xl overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20"
+            >
+                <!-- Background decoration -->
+                <div
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 overflow-hidden"
+                >
+                    <div class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10"></div>
+
+                    <div class="absolute -bottom-28 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10"></div>
+
+                    <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-400/50 to-transparent dark:via-indigo-400/20"></div>
+                </div>
+
+                <div
+                    class="relative"
+                    class:px-6="compact"
+                    class:py-7="compact"
+                    class:sm:px-8="compact"
+                    class:px-6="!compact"
+                    class:py-8="!compact"
+                    class:sm:px-9="!compact"
+                    class:sm:py-10="!compact"
+                    class:lg:px-12="!compact"
+                    class:lg:py-12="!compact"
+                >
+                    <!-- Main content -->
+                    <div
+                        class="gap-8"
+                        class:flex="centered"
+                        class:flex-col="centered"
+                        class:items-center="centered"
+                        class:text-center="centered"
+                        class:mx-auto="centered"
+                        class:max-w-4xl="centered"
+                        class:grid="!centered"
+                        class:lg:grid-cols-[minmax(0,1fr)_auto]="!centered"
+                        class:lg:items-center="!centered"
+                        class:lg:gap-12="!centered"
+                    >
+                        <!-- Copy -->
+                        <div
+                            class="min-w-0"
+                            class:max-w-3xl="centered"
+                            class:max-w-4xl="!centered"
+                        >
+                            <!-- Eyebrow -->
+                            <div
+                                class="flex"
+                                class:hidden="eyebrow === ''"
+                                class:justify-center="centered"
+                                class:justify-start="!centered"
+                            >
+                                <span
+                                    class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
+                                >
+                                    <span class="{iconClass} h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                    {eyebrow}
+                                </span>
+                            </div>
+
+                            <!-- Title -->
+                            <h2
+                                id="contact-sales-banner-title"
+                                class="font-bold tracking-tight text-slate-950 dark:text-white"
+                                class:mt-5="eyebrow !== ''"
+                                class:text-2xl="compact"
+                                class:leading-tight="compact"
+                                class:sm:text-3xl="compact"
+                                class:text-3xl="!compact"
+                                class:leading-tight="!compact"
+                                class:sm:text-4xl="!compact"
+                            >
+                                {title}
+                            </h2>
+
+                            <!-- Description -->
+                            <p
+                                class="mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400 sm:text-base"
+                                class:hidden="description === ''"
+                                class:mx-auto="centered"
+                                class:max-w-2xl="centered"
+                                class:max-w-3xl="!centered"
+                            >
+                                {description}
+                            </p>
+
+                            <!-- Dynamic points -->
+                            <div
+                                class="mt-6 flex flex-wrap gap-x-5 gap-y-3"
+                                class:hidden="points.length === 0"
+                                class:justify-center="centered"
+                                class:justify-start="!centered"
+                            >
+                                {#each points.slice(0, 4) as point}
+                                <div class="inline-flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
+                                    <span
+                                        class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+                                    >
+                                        <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" ></span>
+                                    </span>
+
+                                    {point}
+                                </div>
+                                {/each}
+                            </div>
+                        </div>
+
+                        <!-- Actions -->
+                        <div
+                            class="flex shrink-0 flex-col gap-3 sm:flex-row"
+                            class:hidden="primaryLabel === '' && secondaryLabel === ''"
+                            class:mt-1="centered"
+                            class:justify-center="centered"
+                        >
+                            <a
+                                href="{secondaryHref}"
+                                class="h-12 items-center justify-center rounded-xl border border-slate-200 bg-white/90 px-5 text-sm font-semibold text-slate-700 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-white hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
+                                class:hidden="secondaryLabel === ''"
+                                class:inline-flex="secondaryLabel !== ''"
+                            >
+                                {secondaryLabel}
+                            </a>
+
+                            <a
+                                href="{primaryHref}"
+                                class="group h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                                class:hidden="primaryLabel === ''"
+                                class:inline-flex="primaryLabel !== ''"
+                            >
+                                {primaryLabel}
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Dynamic trust strip -->
+                    <div
+                        class="mt-8 border-t border-indigo-200/70 pt-5 dark:border-indigo-500/15"
+                        class:hidden="compact || trustPoints.length === 0"
+                    >
+                        <div
+                            class="flex flex-wrap items-center gap-x-6 gap-y-3"
+                            class:justify-center="centered"
+                            class:justify-start="!centered"
+                        >
+                            {#each trustPoints.slice(0, 4) as trustPoint}
+                            <span class="inline-flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
+                                <span class="{trustPoint.iconClass} h-4 w-4 {trustPoint.iconColorClass}" aria-hidden="true" ></span>
+
+                                {trustPoint.label}
+                            </span>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-sales-button.wrn b/app/pages/components/contact-sales-button.wrn new file mode 100644 index 00000000..4ab5ed97 --- /dev/null +++ b/app/pages/components/contact-sales-button.wrn @@ -0,0 +1,32 @@ +page ContactSalesButtoncomponent { + seo { + title = "ContactSalesButton component" + description = "Reusable contact sales button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ContactSalesButton

Reusable contact sales button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactSalesButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ContactSalesButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactSalesButton.wrn

component ContactSalesButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/contact-sales-form.wrn b/app/pages/components/contact-sales-form.wrn new file mode 100644 index 00000000..426cba5e --- /dev/null +++ b/app/pages/components/contact-sales-form.wrn @@ -0,0 +1,34 @@ +page ContactSalesFormcomponent { + seo { + title = "ContactSalesForm component" + description = "Reusable contact sales form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ContactSalesForm

Reusable contact sales form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContactSalesForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ContactSalesForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContactSalesForm.wrn

component ContactSalesForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/container.wrn b/app/pages/components/container.wrn new file mode 100644 index 00000000..6a3f1b61 --- /dev/null +++ b/app/pages/components/container.wrn @@ -0,0 +1,30 @@ +page Containercomponent { + seo { + title = "Container component" + description = "Reusable container component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Container

Reusable container component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Container size="default" />

Legacy mount name: data-component="Container".

Props and attributes

PropTypeRequirementDefault
sizestringOptional"default"
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Container.wrn

component Container {
+  props {
+    size = "default"
+    className = ""
+  }
+  view {
+    <div class="w-full {size === 'narrow' ? 'max-w-3xl' : size === 'wide' ? 'max-w-screen-2xl' : 'max-w-7xl'} {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/context-menu.wrn b/app/pages/components/context-menu.wrn new file mode 100644 index 00000000..0116e92f --- /dev/null +++ b/app/pages/components/context-menu.wrn @@ -0,0 +1,31 @@ +page ContextMenucomponent { + seo { + title = "ContextMenu component" + description = "Reusable context menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

ContextMenu

Reusable context menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContextMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="ContextMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContextMenu.wrn

component ContextMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/context-switcher.wrn b/app/pages/components/context-switcher.wrn new file mode 100644 index 00000000..7ebf853f --- /dev/null +++ b/app/pages/components/context-switcher.wrn @@ -0,0 +1,34 @@ +page ContextSwitchercomponent { + seo { + title = "ContextSwitcher component" + description = "Reusable context switcher component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ContextSwitcher

Reusable context switcher component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ContextSwitcher eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ContextSwitcher".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContextSwitcher.wrn

component ContextSwitcher {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/conversation-list.wrn b/app/pages/components/conversation-list.wrn new file mode 100644 index 00000000..026ae1fd --- /dev/null +++ b/app/pages/components/conversation-list.wrn @@ -0,0 +1,31 @@ +page ConversationListcomponent { + seo { + title = "ConversationList component" + description = "Reusable conversation list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ConversationList

Reusable conversation list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConversationList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ConversationList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConversationList.wrn

component ConversationList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/conversation-preview.wrn b/app/pages/components/conversation-preview.wrn new file mode 100644 index 00000000..1f5caffa --- /dev/null +++ b/app/pages/components/conversation-preview.wrn @@ -0,0 +1,34 @@ +page ConversationPreviewcomponent { + seo { + title = "ConversationPreview component" + description = "Reusable conversation preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ConversationPreview

Reusable conversation preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConversationPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ConversationPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConversationPreview.wrn

component ConversationPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/conversion-chart.wrn b/app/pages/components/conversion-chart.wrn new file mode 100644 index 00000000..decb98ac --- /dev/null +++ b/app/pages/components/conversion-chart.wrn @@ -0,0 +1,32 @@ +page ConversionChartcomponent { + seo { + title = "ConversionChart component" + description = "Reusable conversion chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ConversionChart

Reusable conversion chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConversionChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ConversionChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConversionChart.wrn

component ConversionChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cookie-banner.wrn b/app/pages/components/cookie-banner.wrn new file mode 100644 index 00000000..8fce23dd --- /dev/null +++ b/app/pages/components/cookie-banner.wrn @@ -0,0 +1,33 @@ +page CookieBannercomponent { + seo { + title = "CookieBanner component" + description = "Reusable cookie banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

CookieBanner

Reusable cookie banner component.

@wrnexus/ui 0.2.644 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookieBanner title="We use cookies" description="We use essential cookies and optional analytics to improve your experience." privacyHref="/privacy" />

Legacy mount name: data-component="CookieBanner".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"We use cookies"
descriptionstringOptional"We use essential cookies and optional analytics to improve your experience."
privacyHrefstringOptional"/privacy"

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/CookieBanner.wrn

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 {
+    <aside data-show="visible" class="fixed inset-x-4 bottom-4 z-50 max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95 {class}" role="dialog" aria-label="Cookie preferences"><div class="flex flex-col gap-5 md:flex-row md:items-center"><div class="min-w-0 flex-1"><h2 class="font-bold">{title}</h2><p class="mt-1 text-sm text-slate-500">{description} <a href="{privacyHref}" class="text-violet-600 underline">Privacy policy</a></p></div><div class="flex flex-wrap gap-2"><button @click="visible = false" class="min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">Reject optional</button><button @click="visible = false" class="min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">Accept all</button></div></div></aside>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cookie-category-list.wrn b/app/pages/components/cookie-category-list.wrn new file mode 100644 index 00000000..073584ac --- /dev/null +++ b/app/pages/components/cookie-category-list.wrn @@ -0,0 +1,31 @@ +page CookieCategoryListcomponent { + seo { + title = "CookieCategoryList component" + description = "Reusable cookie category list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

CookieCategoryList

Reusable cookie category list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookieCategoryList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="CookieCategoryList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CookieCategoryList.wrn

component CookieCategoryList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cookie-category-toggle.wrn b/app/pages/components/cookie-category-toggle.wrn new file mode 100644 index 00000000..6c55bddb --- /dev/null +++ b/app/pages/components/cookie-category-toggle.wrn @@ -0,0 +1,37 @@ +page CookieCategoryTogglecomponent { + seo { + title = "CookieCategoryToggle component" + description = "Reusable cookie category toggle component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CookieCategoryToggle

Reusable cookie category toggle component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookieCategoryToggle label="CookieCategory" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CookieCategoryToggle".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CookieCategory"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CookieCategoryToggle.wrn

component CookieCategoryToggle {
+  props {
+    label = "CookieCategory" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cookie-consent.wrn b/app/pages/components/cookie-consent.wrn new file mode 100644 index 00000000..aa8d7027 --- /dev/null +++ b/app/pages/components/cookie-consent.wrn @@ -0,0 +1,393 @@ +page CookieConsentcomponent { + seo { + title = "CookieConsent component" + description = "Reusable cookie consent component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

CookieConsent

Reusable cookie consent component.

@wrnexus/ui 0.2.641 props0 slots2 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookieConsent />

Legacy mount name: data-component="CookieConsent".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

  • click
  • change

Source contract

Installed source: components/CookieConsent.wrn

component CookieConsent {
+    props {
+        class: string = ""
+    }
+    state bannerOpen = false
+    state preferencesOpen = false
+
+    state analyticsCookies = false
+    state personalizationCookies = false
+    state marketingCookies = false
+
+    view {
+        <div class="{class}" class:hidden="!bannerOpen">
+            <!-- Cookie consent banner -->
+            <section
+                role="dialog"
+                aria-modal="false"
+                aria-labelledby="cookie-consent-title"
+                aria-describedby="cookie-consent-description"
+                class="fixed inset-x-0 bottom-0 z-[80] p-4 sm:p-5 lg:p-6 {class}"
+                class:hidden="!bannerOpen || preferencesOpen"
+                class:block="bannerOpen && !preferencesOpen"
+            >
+                <div
+                    class="mx-auto w-full max-w-7xl overflow-hidden rounded-3xl border border-slate-200 bg-white/95 shadow-2xl shadow-slate-950/20 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/95 dark:shadow-black/40"
+                >
+                    <div class="grid items-center gap-6 p-5 sm:p-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:p-7">
+
+                        <!-- Message -->
+                        <div class="flex items-start gap-4">
+                            <span
+                                class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--cookie] h-5 w-5" aria-hidden="true" ></span>
+                            </span>
+
+                            <div class="min-w-0">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <h2
+                                        id="cookie-consent-title"
+                                        class="text-base font-bold text-slate-950 dark:text-white"
+                                    >
+                                        Your privacy matters
+                                    </h2>
+
+                                    <span
+                                        class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+                                    >
+                                        Privacy first
+                                    </span>
+                                </div>
+
+                                <p
+                                    id="cookie-consent-description"
+                                    class="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-400"
+                                >
+                                    We use essential cookies to operate WRNexusJS. With your
+                                    permission, we also use analytics and personalization cookies
+                                    to improve your experience.
+                                </p>
+
+                                <div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2">
+                                    <a
+                                        href="/cookies"
+                                        class="inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                    >
+                                        Cookie policy
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5" aria-hidden="true" ></span>
+                                    </a>
+
+                                    <a
+                                        href="/privacy"
+                                        class="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                                    >
+                                        Privacy policy
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Actions -->
+                        <div class="grid gap-2 sm:grid-cols-3 lg:flex lg:items-center">
+                            <button
+                                type="button"
+                                @click=" analyticsCookies = false; personalizationCookies = false; marketingCookies = false; bannerOpen = false "
+                                data-cookie-action="essential"
+                                class="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white"
+                            >
+                                Essential only
+                            </button>
+
+                            <button
+                                type="button"
+                                @click="preferencesOpen = true"
+                                class="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15"
+                            >
+                                <span class="icon-[lucide--settings-2] h-4 w-4" aria-hidden="true" ></span>
+
+                                Preferences
+                            </button>
+
+                            <button
+                                type="button"
+                                @click=" analyticsCookies = true; personalizationCookies = true; marketingCookies = true; bannerOpen = false "
+                                data-cookie-action="accept-all"
+                                class="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                            >
+                                Accept all
+
+                                <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" ></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Preferences backdrop -->
+            <button type="button" @click="preferencesOpen = false" aria-label="Close cookie preferences" class="fixed inset-0 z-[90] bg-slate-950/50 backdrop-blur-sm" class:hidden="!preferencesOpen" class:block="preferencesOpen" ></button>
+
+            <!-- Preferences modal -->
+            <section
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="cookie-preferences-title"
+                aria-describedby="cookie-preferences-description"
+                class="fixed inset-0 z-[100] overflow-y-auto p-4 sm:p-6"
+                class:hidden="!preferencesOpen"
+                class:block="preferencesOpen"
+            >
+                <div class="flex min-h-full items-end justify-center sm:items-center">
+                    <div
+                        class="relative w-full max-w-2xl overflow-hidden rounded-t-3xl border border-slate-200 bg-white shadow-2xl shadow-slate-950/30 dark:border-white/10 dark:bg-slate-900 dark:shadow-black/50 sm:rounded-3xl"
+                    >
+                        <!-- Modal header -->
+                        <header class="border-b border-slate-200 px-5 py-5 dark:border-white/10 sm:px-6">
+                            <div class="flex items-start justify-between gap-4">
+                                <div class="flex items-start gap-4">
+                                    <span
+                                        class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                                    >
+                                        <span class="icon-[lucide--sliders-horizontal] h-5 w-5" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <div>
+                                        <h2
+                                            id="cookie-preferences-title"
+                                            class="text-lg font-bold tracking-tight text-slate-950 dark:text-white"
+                                        >
+                                            Cookie preferences
+                                        </h2>
+
+                                        <p
+                                            id="cookie-preferences-description"
+                                            class="mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400"
+                                        >
+                                            Choose which optional cookies WRNexusJS may use.
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <button
+                                    type="button"
+                                    @click="preferencesOpen = false"
+                                    aria-label="Close cookie preferences"
+                                    class="grid h-10 w-10 shrink-0 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
+                                >
+                                    <span class="icon-[lucide--x] h-4.5 w-4.5" aria-hidden="true" ></span>
+                                </button>
+                            </div>
+                        </header>
+
+                        <!-- Preference groups -->
+                        <div class="max-h-[60dvh] space-y-3 overflow-y-auto p-5 sm:p-6">
+
+                            <!-- Essential -->
+                            <article
+                                class="rounded-2xl bg-emerald-500/10 p-4 ring-1 ring-inset ring-emerald-500/15 transition dark:bg-emerald-500/10 dark:ring-emerald-400/10"
+                            >
+                                <div class="flex items-start justify-between gap-4">
+                                    <div class="flex items-start gap-3">
+                                        <span
+                                            class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-emerald-500/15 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300"
+                                        >
+                                            <span class="icon-[lucide--shield-check] h-4.5 w-4.5" aria-hidden="true" ></span>
+                                        </span>
+
+                                        <div>
+                                            <div class="flex flex-wrap items-center gap-2">
+                                                <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                                                    Essential cookies
+                                                </h3>
+
+                                                <span
+                                                    class="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300"
+                                                >
+                                                    Always active
+                                                </span>
+                                            </div>
+
+                                            <p class="mt-1.5 text-xs leading-5 text-slate-600 dark:text-slate-400">
+                                                Required for authentication, security, sessions, preferences, and core website functionality.
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <span
+                                        class="relative inline-flex h-6 w-11 shrink-0 cursor-not-allowed rounded-full bg-emerald-500"
+                                        aria-hidden="true"
+                                    >
+                                        <span class="absolute right-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm" ></span>
+                                    </span>
+                                </div>
+                            </article>
+
+                            <!-- Analytics -->
+                            <article
+                                class="rounded-2xl p-4 transition-all duration-200 {analyticsCookies ? 'bg-indigo-50 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:ring-indigo-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' }"
+                            >
+                                <label class="flex cursor-pointer items-start justify-between gap-4">
+                                    <span class="flex min-w-0 items-start gap-3">
+                                        <span
+                                            class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 {analyticsCookies ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' }"
+                                        >
+                                            <span class="icon-[lucide--chart-no-axes-combined] h-5 w-5" aria-hidden="true" ></span>
+                                        </span>
+
+                                        <span class="min-w-0">
+                                            <span class="block text-sm font-bold text-slate-950 dark:text-white">
+                                                Analytics cookies
+                                            </span>
+
+                                            <span class="mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400">
+                                                Help us understand website usage, performance, and navigation patterns.
+                                            </span>
+                                        </span>
+                                    </span>
+
+                                    <span class="relative mt-0.5 shrink-0">
+                                        <input
+                                            type="checkbox"
+                                            name="analytics"
+                                            checked="{analyticsCookies}"
+                                            @change="analyticsCookies = event.target.checked"
+                                            class="peer sr-only"
+                                        />
+
+                                        <span class="block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-indigo-600 peer-focus-visible:ring-4 peer-focus-visible:ring-indigo-500/20 dark:bg-slate-700" ></span>
+
+                                        <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5" ></span>
+                                    </span>
+                                </label>
+                            </article>
+
+                            <!-- Personalization -->
+                            <article
+                                class="rounded-2xl p-4 transition-all duration-200 {personalizationCookies ? 'bg-violet-50 ring-1 ring-inset ring-violet-200 dark:bg-violet-500/10 dark:ring-violet-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' }"
+                            >
+                                <label class="flex cursor-pointer items-start justify-between gap-4">
+                                    <span class="flex min-w-0 items-start gap-3">
+                                        <span
+                                            class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 {personalizationCookies ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' }"
+                                        >
+                                            <span class="icon-[lucide--sparkles] h-5 w-5" aria-hidden="true" ></span>
+                                        </span>
+
+                                        <span class="min-w-0">
+                                            <span class="block text-sm font-bold text-slate-950 dark:text-white">
+                                                Personalization cookies
+                                            </span>
+
+                                            <span class="mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400">
+                                                Remember your choices and provide a more relevant website experience.
+                                            </span>
+                                        </span>
+                                    </span>
+
+                                    <span class="relative mt-0.5 shrink-0">
+                                        <input
+                                            type="checkbox"
+                                            name="personalization"
+                                            checked="{personalizationCookies}"
+                                            @change="personalizationCookies = event.target.checked"
+                                            class="peer sr-only"
+                                        />
+
+                                        <span class="block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-violet-600 peer-focus-visible:ring-4 peer-focus-visible:ring-violet-500/20 dark:bg-slate-700" ></span>
+
+                                        <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5" ></span>
+                                    </span>
+                                </label>
+                            </article>
+
+                            <!-- Marketing -->
+                            <article
+                                class="rounded-2xl p-4 transition-all duration-200 {marketingCookies ? 'bg-rose-50 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/10 dark:ring-rose-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' }"
+                            >
+                                <label class="flex cursor-pointer items-start justify-between gap-4">
+                                    <span class="flex min-w-0 items-start gap-3">
+                                        <span
+                                            class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 {marketingCookies ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' }"
+                                        >
+                                            <span class="icon-[lucide--megaphone] h-5 w-5" aria-hidden="true" ></span>
+                                        </span>
+
+                                        <span class="min-w-0">
+                                            <span class="block text-sm font-bold text-slate-950 dark:text-white">
+                                                Marketing cookies
+                                            </span>
+
+                                            <span class="mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400">
+                                                Measure campaigns and show relevant WRNexusJS content across supported services.
+                                            </span>
+                                        </span>
+                                    </span>
+
+                                    <span class="relative mt-0.5 shrink-0">
+                                        <input
+                                            type="checkbox"
+                                            name="marketing"
+                                            checked="{marketingCookies}"
+                                            @change="marketingCookies = event.target.checked"
+                                            class="peer sr-only"
+                                        />
+
+                                        <span class="block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-rose-600 peer-focus-visible:ring-4 peer-focus-visible:ring-rose-500/20 dark:bg-slate-700" ></span>
+
+                                        <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5" ></span>
+                                    </span>
+                                </label>
+                            </article>
+                        </div>
+
+                        <!-- Modal footer -->
+                        <footer
+                            class="border-t border-slate-200 bg-slate-50 px-5 py-4 dark:border-white/10 dark:bg-white/[0.02] sm:px-6"
+                        >
+                            <div class="grid gap-2 sm:grid-cols-3">
+                                <button
+                                    type="button"
+                                    @click=" analyticsCookies = false; personalizationCookies = false; marketingCookies = false "
+                                    class="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10 dark:hover:text-white"
+                                >
+                                    Reject optional
+                                </button>
+
+                                <button
+                                    type="button"
+                                    @click=" analyticsCookies = true; personalizationCookies = true; marketingCookies = true "
+                                    class="inline-flex h-11 items-center justify-center rounded-xl border border-indigo-200 bg-indigo-50 px-4 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/15"
+                                >
+                                    Enable all
+                                </button>
+
+                                <button
+                                    type="button"
+                                    @click=" preferencesOpen = false; bannerOpen = false "
+                                    data-cookie-action="save-preferences"
+                                    class="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl"
+                                >
+                                    <span class="icon-[lucide--save] h-4 w-4" aria-hidden="true" ></span>
+
+                                    Save preferences
+                                </button>
+                            </div>
+                        </footer>
+                    </div>
+                </div>
+            </section>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cookie-details-table.wrn b/app/pages/components/cookie-details-table.wrn new file mode 100644 index 00000000..afa8d200 --- /dev/null +++ b/app/pages/components/cookie-details-table.wrn @@ -0,0 +1,31 @@ +page CookieDetailsTablecomponent { + seo { + title = "CookieDetailsTable component" + description = "Reusable cookie details table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

CookieDetailsTable

Reusable cookie details table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookieDetailsTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="CookieDetailsTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CookieDetailsTable.wrn

component CookieDetailsTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cookie-preferences-dialog.wrn b/app/pages/components/cookie-preferences-dialog.wrn new file mode 100644 index 00000000..f2745679 --- /dev/null +++ b/app/pages/components/cookie-preferences-dialog.wrn @@ -0,0 +1,38 @@ +page CookiePreferencesDialogcomponent { + seo { + title = "CookiePreferencesDialog component" + description = "Reusable cookie preferences dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

CookiePreferencesDialog

Reusable cookie preferences dialog component.

@wrnexus/ui 0.2.647 props0 slots2 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookiePreferencesDialog title="Cookie preferences" description="Choose which optional cookies you allow. Essential cookies are always enabled." saveLabel="Save preferences" acceptLabel="Accept all" rejectLabel="Reject optional" />

Legacy mount name: data-component="CookiePreferencesDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional"Cookie preferences"
descriptionstringOptional"Choose which optional cookies you allow. Essential cookies are always enabled."
saveLabelstringOptional"Save preferences"
acceptLabelstringOptional"Accept all"
rejectLabelstringOptional"Reject optional"
openbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

  • change
  • click

Source contract

Installed source: components/CookiePreferencesDialog.wrn

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 {
+    <div data-show="visible" class="wire-overlay {class}" role="presentation"><section role="dialog" aria-modal="true" aria-labelledby="cookie-preferences-title" class="wire-dialog wire-cookie-dialog"><h2 id="cookie-preferences-title" class="wire-dialog__title">{title}</h2><p class="wire-dialog__description">{description}</p><div class="wire-cookie-list"><label class="wire-cookie-option"><span><strong>Essential</strong><small>Required for security and core functionality.</small></span><input type="checkbox" checked disabled /></label><label class="wire-cookie-option"><span><strong>Analytics</strong><small>Helps improve product performance.</small></span><input type="checkbox" checked="{analytics}" @change="analytics = event.target.checked" /></label><label class="wire-cookie-option"><span><strong>Marketing</strong><small>Supports relevant campaigns and measurement.</small></span><input type="checkbox" checked="{marketing}" @change="marketing = event.target.checked" /></label></div><div class="wire-dialog__actions wire-dialog__actions--wrap"><button type="button" class="wire-btn wire-btn--ghost" @click="analytics = false; marketing = false">{rejectLabel}</button><button type="button" class="wire-btn wire-btn--default" @click="analytics = true; marketing = true">{acceptLabel}</button><button type="button" class="wire-btn wire-btn--primary" @click="visible = false">{saveLabel}</button></div></section></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cookie-table.wrn b/app/pages/components/cookie-table.wrn new file mode 100644 index 00000000..74120922 --- /dev/null +++ b/app/pages/components/cookie-table.wrn @@ -0,0 +1,31 @@ +page CookieTablecomponent { + seo { + title = "CookieTable component" + description = "Reusable cookie table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

CookieTable

Reusable cookie table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookieTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="CookieTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CookieTable.wrn

component CookieTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/coordinates-input.wrn b/app/pages/components/coordinates-input.wrn new file mode 100644 index 00000000..5940d86c --- /dev/null +++ b/app/pages/components/coordinates-input.wrn @@ -0,0 +1,37 @@ +page CoordinatesInputcomponent { + seo { + title = "CoordinatesInput component" + description = "Reusable coordinates input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CoordinatesInput

Reusable coordinates input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CoordinatesInput label="Coordinates" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CoordinatesInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Coordinates"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CoordinatesInput.wrn

component CoordinatesInput {
+  props {
+    label = "Coordinates" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/coordinates-picker.wrn b/app/pages/components/coordinates-picker.wrn new file mode 100644 index 00000000..22037a40 --- /dev/null +++ b/app/pages/components/coordinates-picker.wrn @@ -0,0 +1,37 @@ +page CoordinatesPickercomponent { + seo { + title = "CoordinatesPicker component" + description = "Reusable coordinates picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CoordinatesPicker

Reusable coordinates picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CoordinatesPicker label="Coordinates" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CoordinatesPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Coordinates"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CoordinatesPicker.wrn

component CoordinatesPicker {
+  props {
+    label = "Coordinates" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/copy-button.wrn b/app/pages/components/copy-button.wrn new file mode 100644 index 00000000..aaa6380d --- /dev/null +++ b/app/pages/components/copy-button.wrn @@ -0,0 +1,30 @@ +page CopyButtoncomponent { + seo { + title = "CopyButton component" + description = "Reusable copy button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

CopyButton

Reusable copy button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CopyButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="CopyButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CopyButton.wrn

component CopyButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/copy-code-button.wrn b/app/pages/components/copy-code-button.wrn new file mode 100644 index 00000000..c2f48834 --- /dev/null +++ b/app/pages/components/copy-code-button.wrn @@ -0,0 +1,32 @@ +page CopyCodeButtoncomponent { + seo { + title = "CopyCodeButton component" + description = "Reusable copy code button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

CopyCodeButton

Reusable copy code button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CopyCodeButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="CopyCodeButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CopyCodeButton.wrn

component CopyCodeButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/copy-secret-field.wrn b/app/pages/components/copy-secret-field.wrn new file mode 100644 index 00000000..d9ae541c --- /dev/null +++ b/app/pages/components/copy-secret-field.wrn @@ -0,0 +1,37 @@ +page CopySecretFieldcomponent { + seo { + title = "CopySecretField component" + description = "Reusable copy secret field component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CopySecretField

Reusable copy secret field component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CopySecretField label="CopySecret" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CopySecretField".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CopySecret"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CopySecretField.wrn

component CopySecretField {
+  props {
+    label = "CopySecret" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cost-breakdown-chart.wrn b/app/pages/components/cost-breakdown-chart.wrn new file mode 100644 index 00000000..8ce07750 --- /dev/null +++ b/app/pages/components/cost-breakdown-chart.wrn @@ -0,0 +1,32 @@ +page CostBreakdownChartcomponent { + seo { + title = "CostBreakdownChart component" + description = "Reusable cost breakdown chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

CostBreakdownChart

Reusable cost breakdown chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CostBreakdownChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="CostBreakdownChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CostBreakdownChart.wrn

component CostBreakdownChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cost-summary.wrn b/app/pages/components/cost-summary.wrn new file mode 100644 index 00000000..9925f9f1 --- /dev/null +++ b/app/pages/components/cost-summary.wrn @@ -0,0 +1,34 @@ +page CostSummarycomponent { + seo { + title = "CostSummary component" + description = "Reusable cost summary component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CostSummary

Reusable cost summary component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CostSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CostSummary".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CostSummary.wrn

component CostSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/counter.wrn b/app/pages/components/counter.wrn new file mode 100644 index 00000000..2e708e4a --- /dev/null +++ b/app/pages/components/counter.wrn @@ -0,0 +1,29 @@ +page Countercomponent { + seo { + title = "Counter component" + description = "Reusable counter component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

Counter

Reusable counter component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Counter label="Status" variant="default" />

Legacy mount name: data-component="Counter".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Status"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Counter.wrn

component Counter {
+  props {
+    label = "Status"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--counter {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/country-calling-code-input.wrn b/app/pages/components/country-calling-code-input.wrn new file mode 100644 index 00000000..dcea96aa --- /dev/null +++ b/app/pages/components/country-calling-code-input.wrn @@ -0,0 +1,37 @@ +page CountryCallingCodeInputcomponent { + seo { + title = "CountryCallingCodeInput component" + description = "Reusable country calling code input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CountryCallingCodeInput

Reusable country calling code input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CountryCallingCodeInput label="CountryCallingCode" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CountryCallingCodeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CountryCallingCode"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CountryCallingCodeInput.wrn

component CountryCallingCodeInput {
+  props {
+    label = "CountryCallingCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/country-calling-code-selector.wrn b/app/pages/components/country-calling-code-selector.wrn new file mode 100644 index 00000000..8637eccb --- /dev/null +++ b/app/pages/components/country-calling-code-selector.wrn @@ -0,0 +1,37 @@ +page CountryCallingCodeSelectorcomponent { + seo { + title = "CountryCallingCodeSelector component" + description = "Reusable country calling code selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CountryCallingCodeSelector

Reusable country calling code selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CountryCallingCodeSelector label="CountryCallingCode" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CountryCallingCodeSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CountryCallingCode"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CountryCallingCodeSelector.wrn

component CountryCallingCodeSelector {
+  props {
+    label = "CountryCallingCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/country-selector.wrn b/app/pages/components/country-selector.wrn new file mode 100644 index 00000000..8bc6f6a0 --- /dev/null +++ b/app/pages/components/country-selector.wrn @@ -0,0 +1,37 @@ +page CountrySelectorcomponent { + seo { + title = "CountrySelector component" + description = "Reusable country selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CountrySelector

Reusable country selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CountrySelector label="Country" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CountrySelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Country"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CountrySelector.wrn

component CountrySelector {
+  props {
+    label = "Country" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/coupon-input.wrn b/app/pages/components/coupon-input.wrn new file mode 100644 index 00000000..2bcee108 --- /dev/null +++ b/app/pages/components/coupon-input.wrn @@ -0,0 +1,37 @@ +page CouponInputcomponent { + seo { + title = "CouponInput component" + description = "Reusable coupon input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CouponInput

Reusable coupon input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CouponInput label="Coupon" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CouponInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Coupon"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CouponInput.wrn

component CouponInput {
+  props {
+    label = "Coupon" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/credit-amount-input.wrn b/app/pages/components/credit-amount-input.wrn new file mode 100644 index 00000000..ca6b6653 --- /dev/null +++ b/app/pages/components/credit-amount-input.wrn @@ -0,0 +1,37 @@ +page CreditAmountInputcomponent { + seo { + title = "CreditAmountInput component" + description = "Reusable credit amount input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CreditAmountInput

Reusable credit amount input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CreditAmountInput label="CreditAmount" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CreditAmountInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CreditAmount"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CreditAmountInput.wrn

component CreditAmountInput {
+  props {
+    label = "CreditAmount" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cron-builder.wrn b/app/pages/components/cron-builder.wrn new file mode 100644 index 00000000..fe6e16e0 --- /dev/null +++ b/app/pages/components/cron-builder.wrn @@ -0,0 +1,34 @@ +page CronBuildercomponent { + seo { + title = "CronBuilder component" + description = "Reusable cron builder component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CronBuilder

Reusable cron builder component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CronBuilder eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CronBuilder".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CronBuilder.wrn

component CronBuilder {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/cron-input.wrn b/app/pages/components/cron-input.wrn new file mode 100644 index 00000000..a9a3b421 --- /dev/null +++ b/app/pages/components/cron-input.wrn @@ -0,0 +1,37 @@ +page CronInputcomponent { + seo { + title = "CronInput component" + description = "Reusable cron input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CronInput

Reusable cron input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CronInput label="Cron" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CronInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Cron"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CronInput.wrn

component CronInput {
+  props {
+    label = "Cron" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/csv-upload.wrn b/app/pages/components/csv-upload.wrn new file mode 100644 index 00000000..3d46d0b0 --- /dev/null +++ b/app/pages/components/csv-upload.wrn @@ -0,0 +1,34 @@ +page CsvUploadcomponent { + seo { + title = "CsvUpload component" + description = "Reusable csv upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CsvUpload

Reusable csv upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CsvUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CsvUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CsvUpload.wrn

component CsvUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/ctasection.wrn b/app/pages/components/ctasection.wrn new file mode 100644 index 00000000..8b119e56 --- /dev/null +++ b/app/pages/components/ctasection.wrn @@ -0,0 +1,36 @@ +page CTASectioncomponent { + seo { + title = "CTASection component" + description = "Reusable c t a section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

CTASection

Reusable c t a section component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CTASection eyebrow="Ready?" title="Start building today" description="description" primaryLabel="Get started" primaryHref="#" />

Legacy mount name: data-component="CTASection".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional"Ready?"
titlestringOptional"Start building today"
descriptionstringOptional""
primaryLabelstringOptional"Get started"
primaryHrefstringOptional"#"
secondaryLabelstringOptional"Contact sales"
secondaryHrefstringOptional"#"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/CTASection.wrn

component CTASection {
+  props {
+    class = ""
+    eyebrow = "Ready?"
+    title = "Start building today"
+    description = ""
+    primaryLabel = "Get started"
+    primaryHref = "#"
+    secondaryLabel = "Contact sales"
+    secondaryHref = "#"
+  }
+  view {
+    <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 text-center text-white shadow-2xl {class}"><p class="text-sm font-bold uppercase tracking-[0.18em] text-violet-100">{eyebrow}</p><h2 class="mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl">{title}</h2><p data-show="description" class="mx-auto mt-4 max-w-2xl text-violet-100">{description}</p><div class="mt-8 flex flex-wrap justify-center gap-3"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10">{secondaryLabel}</a></div></section>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/currency-input.wrn b/app/pages/components/currency-input.wrn new file mode 100644 index 00000000..2220f749 --- /dev/null +++ b/app/pages/components/currency-input.wrn @@ -0,0 +1,37 @@ +page CurrencyInputcomponent { + seo { + title = "CurrencyInput component" + description = "Reusable currency input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CurrencyInput

Reusable currency input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CurrencyInput label="Currency" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CurrencyInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Currency"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CurrencyInput.wrn

component CurrencyInput {
+  props {
+    label = "Currency" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/currency-selector.wrn b/app/pages/components/currency-selector.wrn new file mode 100644 index 00000000..df83e645 --- /dev/null +++ b/app/pages/components/currency-selector.wrn @@ -0,0 +1,37 @@ +page CurrencySelectorcomponent { + seo { + title = "CurrencySelector component" + description = "Reusable currency selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CurrencySelector

Reusable currency selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CurrencySelector label="Currency" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CurrencySelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Currency"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CurrencySelector.wrn

component CurrencySelector {
+  props {
+    label = "Currency" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/current-password-input.wrn b/app/pages/components/current-password-input.wrn new file mode 100644 index 00000000..198d73d8 --- /dev/null +++ b/app/pages/components/current-password-input.wrn @@ -0,0 +1,37 @@ +page CurrentPasswordInputcomponent { + seo { + title = "CurrentPasswordInput component" + description = "Reusable current password input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

CurrentPasswordInput

Reusable current password input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CurrentPasswordInput label="CurrentPassword" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="CurrentPasswordInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"CurrentPassword"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CurrentPasswordInput.wrn

component CurrentPasswordInput {
+  props {
+    label = "CurrentPassword" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/customer-logo.wrn b/app/pages/components/customer-logo.wrn new file mode 100644 index 00000000..d05bb992 --- /dev/null +++ b/app/pages/components/customer-logo.wrn @@ -0,0 +1,34 @@ +page CustomerLogocomponent { + seo { + title = "CustomerLogo component" + description = "Reusable customer logo component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CustomerLogo

Reusable customer logo component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CustomerLogo eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CustomerLogo".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CustomerLogo.wrn

component CustomerLogo {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/customer-story-card.wrn b/app/pages/components/customer-story-card.wrn new file mode 100644 index 00000000..6a1446c9 --- /dev/null +++ b/app/pages/components/customer-story-card.wrn @@ -0,0 +1,34 @@ +page CustomerStoryCardcomponent { + seo { + title = "CustomerStoryCard component" + description = "Reusable customer story card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

CustomerStoryCard

Reusable customer story card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CustomerStoryCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="CustomerStoryCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CustomerStoryCard.wrn

component CustomerStoryCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/danger-button.wrn b/app/pages/components/danger-button.wrn new file mode 100644 index 00000000..50985f37 --- /dev/null +++ b/app/pages/components/danger-button.wrn @@ -0,0 +1,30 @@ +page DangerButtoncomponent { + seo { + title = "DangerButton component" + description = "Reusable danger button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

DangerButton

Reusable danger button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DangerButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="DangerButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DangerButton.wrn

component DangerButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--danger {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/data-protection-card.wrn b/app/pages/components/data-protection-card.wrn new file mode 100644 index 00000000..d4f75cec --- /dev/null +++ b/app/pages/components/data-protection-card.wrn @@ -0,0 +1,34 @@ +page DataProtectionCardcomponent { + seo { + title = "DataProtectionCard component" + description = "Reusable data protection card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DataProtectionCard

Reusable data protection card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DataProtectionCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DataProtectionCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DataProtectionCard.wrn

component DataProtectionCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/data-retention-table.wrn b/app/pages/components/data-retention-table.wrn new file mode 100644 index 00000000..77501719 --- /dev/null +++ b/app/pages/components/data-retention-table.wrn @@ -0,0 +1,31 @@ +page DataRetentionTablecomponent { + seo { + title = "DataRetentionTable component" + description = "Reusable data retention table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

DataRetentionTable

Reusable data retention table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DataRetentionTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="DataRetentionTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DataRetentionTable.wrn

component DataRetentionTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/data-table.wrn b/app/pages/components/data-table.wrn new file mode 100644 index 00000000..c1c63f26 --- /dev/null +++ b/app/pages/components/data-table.wrn @@ -0,0 +1,34 @@ +page DataTablecomponent { + seo { + title = "DataTable component" + description = "Reusable data table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

DataTable

Reusable data table component.

@wrnexus/ui 0.2.646 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DataTable caption="Data table" columns="[]" rows="[]" emptyMessage="No data available." striped="false" />

Legacy mount name: data-component="DataTable".

Props and attributes

PropTypeRequirementDefault
captionstringOptional"Data table"
columnsstringOptional[]
rowsstringOptional[]
emptyMessagestringOptional"No data available."
stripedbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DataTable.wrn

component DataTable {
+  props {
+    caption = "Data table"
+    columns = []
+    rows = []
+    emptyMessage = "No data available."
+    striped = false
+    class = ""
+  }
+  view {
+    <div class="wire-table-wrap {class}" tabindex="0" role="region" aria-label="{caption}"><table class="wire-table {striped ? 'wire-table--striped' : ''}"><caption class="wire-visually-hidden">{caption}</caption><thead><tr>{#each columns as column}<th scope="col">{column.label}</th>{/each}</tr></thead><tbody>{#each rows as row}<tr>{#each columns as column}<td>{row[column.key]}</td>{/each}</tr>{:empty}<tr><td colspan="{columns.length}">{emptyMessage}</td></tr>{/each}</tbody></table></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-input.wrn b/app/pages/components/date-input.wrn new file mode 100644 index 00000000..73886288 --- /dev/null +++ b/app/pages/components/date-input.wrn @@ -0,0 +1,45 @@ +page DateInputcomponent { + seo { + title = "DateInput component" + description = "Reusable date input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DateInput

Reusable date input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateInput id="id" name="name" label="Date" value="value" placeholder="placeholder" />

Legacy mount name: data-component="DateInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Date"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateInput.wrn

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 {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="date" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-picker.wrn b/app/pages/components/date-picker.wrn new file mode 100644 index 00000000..b2e8037d --- /dev/null +++ b/app/pages/components/date-picker.wrn @@ -0,0 +1,36 @@ +page DatePickercomponent { + seo { + title = "DatePicker component" + description = "Reusable date picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DatePicker

Reusable date picker component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DatePicker id="date" name="date" label="Date" value="value" min="min" />

Legacy mount name: data-component="DatePicker".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional"date"
namestringOptional"date"
labelstringOptional"Date"
valuestringOptional""
minstringOptional""
maxstringOptional""
requiredbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DatePicker.wrn

component DatePicker {
+  props {
+    class = ""
+    id: string = "date"
+    name: string = "date"
+    label: string = "Date"
+    value: string = ""
+    min: string = ""
+    max: string = ""
+    required: boolean = false
+  }
+  view {
+    <DateInput class="{class}" id="{id}" name="{name}" label="{label}" value="{value}" required="{required}" />
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-range-calendar.wrn b/app/pages/components/date-range-calendar.wrn new file mode 100644 index 00000000..7895b49e --- /dev/null +++ b/app/pages/components/date-range-calendar.wrn @@ -0,0 +1,34 @@ +page DateRangeCalendarcomponent { + seo { + title = "DateRangeCalendar component" + description = "Reusable date range calendar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DateRangeCalendar

Reusable date range calendar component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateRangeCalendar eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DateRangeCalendar".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateRangeCalendar.wrn

component DateRangeCalendar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-range-picker.wrn b/app/pages/components/date-range-picker.wrn new file mode 100644 index 00000000..9534b969 --- /dev/null +++ b/app/pages/components/date-range-picker.wrn @@ -0,0 +1,32 @@ +page DateRangePickercomponent { + seo { + title = "DateRangePicker component" + description = "Reusable date range picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DateRangePicker

Reusable date range picker component.

@wrnexus/ui 0.2.644 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateRangePicker label="Date range" startName="startDate" endName="endDate" />

Legacy mount name: data-component="DateRangePicker".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Date range"
startNamestringOptional"startDate"
endNamestringOptional"endDate"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateRangePicker.wrn

component DateRangePicker {
+  props {
+    class = ""
+    label = "Date range"
+    startName = "startDate"
+    endName = "endDate"
+  }
+  view {
+    <fieldset class="{class}"><legend class="mb-2 text-sm font-semibold">{label}</legend><div class="grid gap-3 sm:grid-cols-2"><DateInput id="{startName}" name="{startName}" label="Start date" /><DateInput id="{endName}" name="{endName}" label="End date" /></div></fieldset>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-range-slider.wrn b/app/pages/components/date-range-slider.wrn new file mode 100644 index 00000000..268b1192 --- /dev/null +++ b/app/pages/components/date-range-slider.wrn @@ -0,0 +1,34 @@ +page DateRangeSlidercomponent { + seo { + title = "DateRangeSlider component" + description = "Reusable date range slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DateRangeSlider

Reusable date range slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateRangeSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DateRangeSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateRangeSlider.wrn

component DateRangeSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-time-input.wrn b/app/pages/components/date-time-input.wrn new file mode 100644 index 00000000..6d0456a9 --- /dev/null +++ b/app/pages/components/date-time-input.wrn @@ -0,0 +1,45 @@ +page DateTimeInputcomponent { + seo { + title = "DateTimeInput component" + description = "Reusable date time input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DateTimeInput

Reusable date time input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateTimeInput id="id" name="name" label="DateTime" value="value" placeholder="placeholder" />

Legacy mount name: data-component="DateTimeInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"DateTime"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateTimeInput.wrn

component DateTimeInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "DateTime"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="datetime-local" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-time-picker.wrn b/app/pages/components/date-time-picker.wrn new file mode 100644 index 00000000..661e6bd3 --- /dev/null +++ b/app/pages/components/date-time-picker.wrn @@ -0,0 +1,35 @@ +page DateTimePickercomponent { + seo { + title = "DateTimePicker component" + description = "Reusable date time picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DateTimePicker

Reusable date time picker component.

@wrnexus/ui 0.2.649 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateTimePicker id="datetime-picker" name="datetime" label="Date and time" value="value" min="min" />

Legacy mount name: data-component="DateTimePicker".

Props and attributes

PropTypeRequirementDefault
idstringOptional"datetime-picker"
namestringOptional"datetime"
labelstringOptional"Date and time"
valuestringOptional""
minstringOptional""
maxstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateTimePicker.wrn

component DateTimePicker {
+  props {
+    id = "datetime-picker"
+    name = "datetime"
+    label = "Date and time"
+    value = ""
+    min = ""
+    max = ""
+    required = false
+    disabled = false
+    class = ""
+  }
+  view { <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><input id="{id}" name="{name}" type="datetime-local" value="{value}" min="{min}" max="{max}" required="{required}" disabled="{disabled}" class="wire-input" /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/date-time-range-picker.wrn b/app/pages/components/date-time-range-picker.wrn new file mode 100644 index 00000000..2e1e7ca6 --- /dev/null +++ b/app/pages/components/date-time-range-picker.wrn @@ -0,0 +1,37 @@ +page DateTimeRangePickercomponent { + seo { + title = "DateTimeRangePicker component" + description = "Reusable date time range picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DateTimeRangePicker

Reusable date time range picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateTimeRangePicker label="DateTimeRange" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DateTimeRangePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"DateTimeRange"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateTimeRangePicker.wrn

component DateTimeRangePicker {
+  props {
+    label = "DateTimeRange" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/decimal-input.wrn b/app/pages/components/decimal-input.wrn new file mode 100644 index 00000000..c121811d --- /dev/null +++ b/app/pages/components/decimal-input.wrn @@ -0,0 +1,37 @@ +page DecimalInputcomponent { + seo { + title = "DecimalInput component" + description = "Reusable decimal input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DecimalInput

Reusable decimal input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DecimalInput label="Decimal" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DecimalInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Decimal"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DecimalInput.wrn

component DecimalInput {
+  props {
+    label = "Decimal" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/definition-list.wrn b/app/pages/components/definition-list.wrn new file mode 100644 index 00000000..d34b7f40 --- /dev/null +++ b/app/pages/components/definition-list.wrn @@ -0,0 +1,31 @@ +page DefinitionListcomponent { + seo { + title = "DefinitionList component" + description = "Reusable definition list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

DefinitionList

Reusable definition list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DefinitionList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="DefinitionList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DefinitionList.wrn

component DefinitionList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/delete-confirmation-dialog.wrn b/app/pages/components/delete-confirmation-dialog.wrn new file mode 100644 index 00000000..4a414e7e --- /dev/null +++ b/app/pages/components/delete-confirmation-dialog.wrn @@ -0,0 +1,31 @@ +page DeleteConfirmationDialogcomponent { + seo { + title = "DeleteConfirmationDialog component" + description = "Reusable delete confirmation dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

DeleteConfirmationDialog

Reusable delete confirmation dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeleteConfirmationDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="DeleteConfirmationDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeleteConfirmationDialog.wrn

component DeleteConfirmationDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/delivery-preview.wrn b/app/pages/components/delivery-preview.wrn new file mode 100644 index 00000000..1ff1e44f --- /dev/null +++ b/app/pages/components/delivery-preview.wrn @@ -0,0 +1,34 @@ +page DeliveryPreviewcomponent { + seo { + title = "DeliveryPreview component" + description = "Reusable delivery preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DeliveryPreview

Reusable delivery preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeliveryPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DeliveryPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeliveryPreview.wrn

component DeliveryPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/delivery-status-chart.wrn b/app/pages/components/delivery-status-chart.wrn new file mode 100644 index 00000000..3ff372f5 --- /dev/null +++ b/app/pages/components/delivery-status-chart.wrn @@ -0,0 +1,32 @@ +page DeliveryStatusChartcomponent { + seo { + title = "DeliveryStatusChart component" + description = "Reusable delivery status chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

DeliveryStatusChart

Reusable delivery status chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeliveryStatusChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="DeliveryStatusChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeliveryStatusChart.wrn

component DeliveryStatusChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/delivery-status-timeline.wrn b/app/pages/components/delivery-status-timeline.wrn new file mode 100644 index 00000000..35c07add --- /dev/null +++ b/app/pages/components/delivery-status-timeline.wrn @@ -0,0 +1,32 @@ +page DeliveryStatusTimelinecomponent { + seo { + title = "DeliveryStatusTimeline component" + description = "Reusable delivery status timeline component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

DeliveryStatusTimeline

Reusable delivery status timeline component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeliveryStatusTimeline title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="DeliveryStatusTimeline".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeliveryStatusTimeline.wrn

component DeliveryStatusTimeline {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/demo-request-form.wrn b/app/pages/components/demo-request-form.wrn new file mode 100644 index 00000000..f5122fa9 --- /dev/null +++ b/app/pages/components/demo-request-form.wrn @@ -0,0 +1,34 @@ +page DemoRequestFormcomponent { + seo { + title = "DemoRequestForm component" + description = "Reusable demo request form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DemoRequestForm

Reusable demo request form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DemoRequestForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DemoRequestForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DemoRequestForm.wrn

component DemoRequestForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/department-input.wrn b/app/pages/components/department-input.wrn new file mode 100644 index 00000000..812bccc1 --- /dev/null +++ b/app/pages/components/department-input.wrn @@ -0,0 +1,37 @@ +page DepartmentInputcomponent { + seo { + title = "DepartmentInput component" + description = "Reusable department input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DepartmentInput

Reusable department input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DepartmentInput label="Department" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DepartmentInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Department"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DepartmentInput.wrn

component DepartmentInput {
+  props {
+    label = "Department" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/deprecated-feature-alert.wrn b/app/pages/components/deprecated-feature-alert.wrn new file mode 100644 index 00000000..fd113308 --- /dev/null +++ b/app/pages/components/deprecated-feature-alert.wrn @@ -0,0 +1,32 @@ +page DeprecatedFeatureAlertcomponent { + seo { + title = "DeprecatedFeatureAlert component" + description = "Reusable deprecated feature alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

DeprecatedFeatureAlert

Reusable deprecated feature alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeprecatedFeatureAlert label="DeprecatedFeature" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="DeprecatedFeatureAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"DeprecatedFeature"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeprecatedFeatureAlert.wrn

component DeprecatedFeatureAlert {
+  props {
+    label = "DeprecatedFeature" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/description-list.wrn b/app/pages/components/description-list.wrn new file mode 100644 index 00000000..acf2bfce --- /dev/null +++ b/app/pages/components/description-list.wrn @@ -0,0 +1,31 @@ +page DescriptionListcomponent { + seo { + title = "DescriptionList component" + description = "Reusable description list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

DescriptionList

Reusable description list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DescriptionList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="DescriptionList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DescriptionList.wrn

component DescriptionList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/desktop-navigation.wrn b/app/pages/components/desktop-navigation.wrn new file mode 100644 index 00000000..764272c6 --- /dev/null +++ b/app/pages/components/desktop-navigation.wrn @@ -0,0 +1,29 @@ +page DesktopNavigationcomponent { + seo { + title = "DesktopNavigation component" + description = "Reusable desktop navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

DesktopNavigation

Reusable desktop navigation component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DesktopNavigation label="Primary navigation" items="[]" />

Legacy mount name: data-component="DesktopNavigation".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Primary navigation"
itemsstringOptional[]
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DesktopNavigation.wrn

component DesktopNavigation {
+  props {
+    label = "Primary navigation"
+    items = []
+    class = ""
+  }
+  view { <nav aria-label="{label}" class="wire-desktop-nav {class}"><ul>{#each items as item}<li><a href="{item.href}" aria-current="{item.current ? 'page' : 'false'}">{item.label}</a></li>{/each}</ul></nav> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/developer-cta.wrn b/app/pages/components/developer-cta.wrn new file mode 100644 index 00000000..2b2912db --- /dev/null +++ b/app/pages/components/developer-cta.wrn @@ -0,0 +1,32 @@ +page DeveloperCTAcomponent { + seo { + title = "DeveloperCTA component" + description = "Reusable developer c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

DeveloperCTA

Reusable developer c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeveloperCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="DeveloperCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeveloperCTA.wrn

component DeveloperCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/developer-hero.wrn b/app/pages/components/developer-hero.wrn new file mode 100644 index 00000000..00d17c1f --- /dev/null +++ b/app/pages/components/developer-hero.wrn @@ -0,0 +1,31 @@ +page DeveloperHerocomponent { + seo { + title = "DeveloperHero component" + description = "Reusable developer hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

DeveloperHero

Reusable developer hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeveloperHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="DeveloperHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeveloperHero.wrn

component DeveloperHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/developer-page-shell.wrn b/app/pages/components/developer-page-shell.wrn new file mode 100644 index 00000000..0a676d65 --- /dev/null +++ b/app/pages/components/developer-page-shell.wrn @@ -0,0 +1,31 @@ +page DeveloperPageShellcomponent { + seo { + title = "DeveloperPageShell component" + description = "Reusable developer page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

DeveloperPageShell

Reusable developer page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeveloperPageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="DeveloperPageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeveloperPageShell.wrn

component DeveloperPageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/developer-search.wrn b/app/pages/components/developer-search.wrn new file mode 100644 index 00000000..99b931c3 --- /dev/null +++ b/app/pages/components/developer-search.wrn @@ -0,0 +1,34 @@ +page DeveloperSearchcomponent { + seo { + title = "DeveloperSearch component" + description = "Reusable developer search component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DeveloperSearch

Reusable developer search component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeveloperSearch eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DeveloperSearch".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeveloperSearch.wrn

component DeveloperSearch {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/developers-mega-menu.wrn b/app/pages/components/developers-mega-menu.wrn new file mode 100644 index 00000000..930be271 --- /dev/null +++ b/app/pages/components/developers-mega-menu.wrn @@ -0,0 +1,442 @@ +page DevelopersMegaMenucomponent { + seo { + title = "DevelopersMegaMenu component" + description = "Reusable developers mega menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

DevelopersMegaMenu

Reusable developers mega menu component.

@wrnexus/ui 0.2.641 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DevelopersMegaMenu />

Legacy mount name: data-component="DevelopersMegaMenu".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DevelopersMegaMenu.wrn

component DevelopersMegaMenu {
+    props {
+        class: string = ""
+    }
+    view {
+        <div
+            class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
+        >
+            <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
+                <div class="grid gap-8 lg:grid-cols-[minmax(0,1.55fr)_minmax(18rem,0.8fr)]">
+
+                    <!-- Developer resources -->
+                    <section>
+                        <div class="mb-5 flex items-end justify-between gap-6">
+                            <div>
+                                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
+                                    Developers
+                                </p>
+
+                                <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
+                                    Build secure identity into any application
+                                </h2>
+
+                                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                                    Explore documentation, APIs, SDKs, examples, and tools built
+                                    for modern development teams.
+                                </p>
+                            </div>
+
+                            <a
+                                href="/docs"
+                                class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
+                            >
+                                Open documentation
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+
+                        <div class="grid gap-2 md:grid-cols-2">
+
+                            <!-- Documentation -->
+                            <a
+                                href="/docs"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--book-open] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Documentation
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Guides for authentication, users, organizations, and
+                                        authorization.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- API reference -->
+                            <a
+                                href="/docs/api"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--braces] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            API reference
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Complete endpoint, request, response, and error
+                                        documentation.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- SDKs -->
+                            <a
+                                href="/sdks"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--package] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            SDKs
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Official libraries for JavaScript, TypeScript, Go, Java,
+                                        Python, and more.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Examples -->
+                            <a
+                                href="/examples"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--flask-conical] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Examples
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Ready-to-run projects for common frameworks and identity
+                                        flows.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Webhooks -->
+                            <a
+                                href="/docs/webhooks"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--webhook] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Webhooks
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Respond to user, session, organization, and security events.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Changelog -->
+                            <a
+                                href="/changelog"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--history] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Changelog
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Review platform releases, improvements, and migration notes.
+                                    </span>
+                                </span>
+                            </a>
+                        </div>
+
+                        <a
+                            href="/docs"
+                            class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
+                        >
+                            Open documentation
+
+                            <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                        </a>
+                    </section>
+
+                    <!-- Developer toolkit -->
+                    <aside
+                        class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20"
+                    >
+                        <!-- Decorative glow -->
+                        <div aria-hidden="true" class="absolute -right-20 -top-20 h-48 w-48 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" ></div>
+
+                        <div aria-hidden="true" class="absolute -bottom-24 -left-20 h-48 w-48 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" ></div>
+
+                        <div class="relative">
+                            <!-- Header -->
+                            <div class="flex items-center justify-between gap-4">
+                                <span
+                                    class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
+                                >
+                                    <span class="icon-[lucide--code-2] h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                    Developer toolkit
+                                </span>
+
+                                <span class="inline-flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
+                                    <span class="relative flex h-2 w-2">
+                                        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
+                                        <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
+                                    </span>
+
+                                    APIs operational
+                                </span>
+                            </div>
+
+                            <!-- Intro -->
+                            <div
+                                class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20"
+                            >
+                                <span class="icon-[lucide--blocks] h-6 w-6" aria-hidden="true" ></span>
+                            </div>
+
+                            <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
+                                Everything developers need
+                            </h3>
+
+                            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
+                                Build, test, and ship secure identity flows with APIs, SDKs,
+                                examples, webhooks, and complete documentation.
+                            </p>
+
+                            <!-- Toolkit links -->
+                            <div class="mt-6 grid gap-3">
+                                <!-- Documentation -->
+                                <a
+                                    href="/docs"
+                                    class="group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-indigo-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-500/30 dark:hover:bg-white/10"
+                                >
+                                    <span class="flex items-center gap-3">
+                                        <span
+                                            class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                                        >
+                                            <span class="icon-[lucide--book-open] h-4.5 w-4.5" aria-hidden="true" ></span>
+                                        </span>
+
+                                        <span>
+                                            <span class="block text-sm font-semibold text-slate-950 dark:text-white">
+                                                Documentation
+                                            </span>
+
+                                            <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                                                Guides and platform concepts
+                                            </span>
+                                        </span>
+                                    </span>
+
+                                    <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 dark:group-hover:text-indigo-300" aria-hidden="true" ></span>
+                                </a>
+
+                                <!-- API reference -->
+                                <a
+                                    href="/docs/api"
+                                    class="group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-violet-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-violet-500/30 dark:hover:bg-white/10"
+                                >
+                                    <span class="flex items-center gap-3">
+                                        <span
+                                            class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300"
+                                        >
+                                            <span class="icon-[lucide--braces] h-4.5 w-4.5" aria-hidden="true" ></span>
+                                        </span>
+
+                                        <span>
+                                            <span class="block text-sm font-semibold text-slate-950 dark:text-white">
+                                                API reference
+                                            </span>
+
+                                            <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                                                Endpoints, requests, and responses
+                                            </span>
+                                        </span>
+                                    </span>
+
+                                    <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 dark:group-hover:text-violet-300" aria-hidden="true" ></span>
+                                </a>
+
+                                <!-- SDKs -->
+                                <a
+                                    href="/sdks"
+                                    class="group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-cyan-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-cyan-500/30 dark:hover:bg-white/10"
+                                >
+                                    <span class="flex items-center gap-3">
+                                        <span
+                                            class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-300"
+                                        >
+                                            <span class="icon-[lucide--package] h-4.5 w-4.5" aria-hidden="true" ></span>
+                                        </span>
+
+                                        <span>
+                                            <span class="block text-sm font-semibold text-slate-950 dark:text-white">
+                                                Official SDKs
+                                            </span>
+
+                                            <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                                                Libraries for your preferred stack
+                                            </span>
+                                        </span>
+                                    </span>
+
+                                    <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 dark:group-hover:text-cyan-300" aria-hidden="true" ></span>
+                                </a>
+                            </div>
+
+                            <!-- Actions -->
+                            <div class="mt-6 grid grid-cols-2 gap-3">
+                                <a
+                                    href="/docs/quickstart"
+                                    class="group flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                                >
+                                    Start building
+
+                                    <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                                </a>
+
+                                <a
+                                    href="/examples"
+                                    class="flex h-11 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white/80 px-4 text-sm font-semibold text-slate-700 transition hover:border-indigo-300 hover:bg-white hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
+                                >
+                                    <span class="icon-[lucide--flask-conical] h-4 w-4" aria-hidden="true" ></span>
+
+                                    Examples
+                                </a>
+                            </div>
+                        </div>
+                    </aside>
+                </div>
+
+                <!-- Bottom developer links -->
+                <div
+                    class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
+                >
+                    <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
+                        <a
+                            href="/docs/authentication"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--fingerprint] h-4 w-4" aria-hidden="true" ></span>
+
+                            Authentication guides
+                        </a>
+
+                        <a
+                            href="/docs/organizations"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--building-2] h-4 w-4" aria-hidden="true" ></span>
+
+                            Organizations
+                        </a>
+
+                        <a
+                            href="/docs/authorization"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--shield-keyhole] h-4 w-4" aria-hidden="true" ></span>
+
+                            Authorization
+                        </a>
+
+                        <a
+                            href="/status"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="relative flex h-2 w-2">
+                                <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
+                                <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
+                            </span>
+
+                            System status
+                        </a>
+                    </div>
+
+                    <a
+                        href="/support/developers"
+                        class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                    >
+                        Developer support
+
+                        <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/developers-menu.wrn b/app/pages/components/developers-menu.wrn new file mode 100644 index 00000000..d53b6a51 --- /dev/null +++ b/app/pages/components/developers-menu.wrn @@ -0,0 +1,31 @@ +page DevelopersMenucomponent { + seo { + title = "DevelopersMenu component" + description = "Reusable developers menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

DevelopersMenu

Reusable developers menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DevelopersMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="DevelopersMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DevelopersMenu.wrn

component DevelopersMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/device-card.wrn b/app/pages/components/device-card.wrn new file mode 100644 index 00000000..e526efe6 --- /dev/null +++ b/app/pages/components/device-card.wrn @@ -0,0 +1,34 @@ +page DeviceCardcomponent { + seo { + title = "DeviceCard component" + description = "Reusable device card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DeviceCard

Reusable device card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DeviceCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DeviceCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DeviceCard.wrn

component DeviceCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/disclosure.wrn b/app/pages/components/disclosure.wrn new file mode 100644 index 00000000..6bd0b906 --- /dev/null +++ b/app/pages/components/disclosure.wrn @@ -0,0 +1,34 @@ +page disclosurecomponent { + seo { + title = "disclosure component" + description = "Reusable disclosure component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

disclosure

Reusable disclosure component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<disclosure summary="Details" />

Legacy mount name: data-component="disclosure".

Props and attributes

PropTypeRequirementDefault
summarystringOptional"Details"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/disclosure.wrn

// Expand/collapse section using native <details> (no JS).
+component Disclosure {
+  props {
+    summary = "Details"
+    class = ""
+  }
+  view {
+    <details class="wire-disclosure {class}">
+      <summary class="wire-disclosure__summary">{summary}</summary>
+      <div class="wire-disclosure__body"><slot></slot></div>
+    </details>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/discount-input.wrn b/app/pages/components/discount-input.wrn new file mode 100644 index 00000000..44c9fe20 --- /dev/null +++ b/app/pages/components/discount-input.wrn @@ -0,0 +1,37 @@ +page DiscountInputcomponent { + seo { + title = "DiscountInput component" + description = "Reusable discount input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DiscountInput

Reusable discount input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DiscountInput label="Discount" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DiscountInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Discount"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DiscountInput.wrn

component DiscountInput {
+  props {
+    label = "Discount" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/display-heading.wrn b/app/pages/components/display-heading.wrn new file mode 100644 index 00000000..6ef86695 --- /dev/null +++ b/app/pages/components/display-heading.wrn @@ -0,0 +1,29 @@ +page DisplayHeadingcomponent { + seo { + title = "DisplayHeading component" + description = "Reusable display heading component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

DisplayHeading

Reusable display heading component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DisplayHeading text="text" align="start" />

Legacy mount name: data-component="DisplayHeading".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DisplayHeading.wrn

component DisplayHeading {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--display wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/display-name-input.wrn b/app/pages/components/display-name-input.wrn new file mode 100644 index 00000000..12c194c4 --- /dev/null +++ b/app/pages/components/display-name-input.wrn @@ -0,0 +1,37 @@ +page DisplayNameInputcomponent { + seo { + title = "DisplayNameInput component" + description = "Reusable display name input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DisplayNameInput

Reusable display name input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DisplayNameInput label="DisplayName" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DisplayNameInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"DisplayName"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DisplayNameInput.wrn

component DisplayNameInput {
+  props {
+    label = "DisplayName" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/divider.wrn b/app/pages/components/divider.wrn new file mode 100644 index 00000000..a43050da --- /dev/null +++ b/app/pages/components/divider.wrn @@ -0,0 +1,29 @@ +page Dividercomponent { + seo { + title = "Divider component" + description = "Reusable divider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Divider

Reusable divider component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Divider />

Legacy mount name: data-component="Divider".

Props and attributes

PropTypeRequirementDefault
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Divider.wrn

component Divider {
+  props {
+    className = ""
+  }
+  view {
+    <div class="h-px w-full bg-slate-200 dark:bg-slate-800 {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/do-not-sell-link.wrn b/app/pages/components/do-not-sell-link.wrn new file mode 100644 index 00000000..2ff0357f --- /dev/null +++ b/app/pages/components/do-not-sell-link.wrn @@ -0,0 +1,32 @@ +page DoNotSellLinkcomponent { + seo { + title = "DoNotSellLink component" + description = "Reusable do not sell link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

DoNotSellLink

Reusable do not sell link component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DoNotSellLink label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="DoNotSellLink".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DoNotSellLink.wrn

component DoNotSellLink {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/document-preview.wrn b/app/pages/components/document-preview.wrn new file mode 100644 index 00000000..8ba05033 --- /dev/null +++ b/app/pages/components/document-preview.wrn @@ -0,0 +1,34 @@ +page DocumentPreviewcomponent { + seo { + title = "DocumentPreview component" + description = "Reusable document preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DocumentPreview

Reusable document preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DocumentPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DocumentPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DocumentPreview.wrn

component DocumentPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/document-upload.wrn b/app/pages/components/document-upload.wrn new file mode 100644 index 00000000..d37a713c --- /dev/null +++ b/app/pages/components/document-upload.wrn @@ -0,0 +1,34 @@ +page DocumentUploadcomponent { + seo { + title = "DocumentUpload component" + description = "Reusable document upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DocumentUpload

Reusable document upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DocumentUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DocumentUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DocumentUpload.wrn

component DocumentUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/domain-input.wrn b/app/pages/components/domain-input.wrn new file mode 100644 index 00000000..3d8799b1 --- /dev/null +++ b/app/pages/components/domain-input.wrn @@ -0,0 +1,37 @@ +page DomainInputcomponent { + seo { + title = "DomainInput component" + description = "Reusable domain input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DomainInput

Reusable domain input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DomainInput label="Domain" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DomainInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Domain"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DomainInput.wrn

component DomainInput {
+  props {
+    label = "Domain" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/donut-chart.wrn b/app/pages/components/donut-chart.wrn new file mode 100644 index 00000000..2a1ebeeb --- /dev/null +++ b/app/pages/components/donut-chart.wrn @@ -0,0 +1,32 @@ +page DonutChartcomponent { + seo { + title = "DonutChart component" + description = "Reusable donut chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

DonutChart

Reusable donut chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DonutChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="DonutChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DonutChart.wrn

component DonutChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/download-action.wrn b/app/pages/components/download-action.wrn new file mode 100644 index 00000000..0df72b8b --- /dev/null +++ b/app/pages/components/download-action.wrn @@ -0,0 +1,32 @@ +page DownloadActioncomponent { + seo { + title = "DownloadAction component" + description = "Reusable download action component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

DownloadAction

Reusable download action component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DownloadAction label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="DownloadAction".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DownloadAction.wrn

component DownloadAction {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/download-button.wrn b/app/pages/components/download-button.wrn new file mode 100644 index 00000000..62fc2ae8 --- /dev/null +++ b/app/pages/components/download-button.wrn @@ -0,0 +1,30 @@ +page DownloadButtoncomponent { + seo { + title = "DownloadButton component" + description = "Reusable download button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

DownloadButton

Reusable download button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DownloadButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="DownloadButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DownloadButton.wrn

component DownloadButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/download-gate-form.wrn b/app/pages/components/download-gate-form.wrn new file mode 100644 index 00000000..eb17ec50 --- /dev/null +++ b/app/pages/components/download-gate-form.wrn @@ -0,0 +1,34 @@ +page DownloadGateFormcomponent { + seo { + title = "DownloadGateForm component" + description = "Reusable download gate form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DownloadGateForm

Reusable download gate form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DownloadGateForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DownloadGateForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DownloadGateForm.wrn

component DownloadGateForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/download-policy-button.wrn b/app/pages/components/download-policy-button.wrn new file mode 100644 index 00000000..5ef58719 --- /dev/null +++ b/app/pages/components/download-policy-button.wrn @@ -0,0 +1,32 @@ +page DownloadPolicyButtoncomponent { + seo { + title = "DownloadPolicyButton component" + description = "Reusable download policy button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

DownloadPolicyButton

Reusable download policy button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DownloadPolicyButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="DownloadPolicyButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DownloadPolicyButton.wrn

component DownloadPolicyButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/download-resource-form.wrn b/app/pages/components/download-resource-form.wrn new file mode 100644 index 00000000..0f4fa892 --- /dev/null +++ b/app/pages/components/download-resource-form.wrn @@ -0,0 +1,34 @@ +page DownloadResourceFormcomponent { + seo { + title = "DownloadResourceForm component" + description = "Reusable download resource form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DownloadResourceForm

Reusable download resource form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DownloadResourceForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DownloadResourceForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DownloadResourceForm.wrn

component DownloadResourceForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/drawer.wrn b/app/pages/components/drawer.wrn new file mode 100644 index 00000000..592ce321 --- /dev/null +++ b/app/pages/components/drawer.wrn @@ -0,0 +1,33 @@ +page Drawercomponent { + seo { + title = "Drawer component" + description = "Reusable drawer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Drawer

Reusable drawer component.

@wrnexus/ui 0.2.644 props1 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Drawer title="Panel" open="false" side="right" />

Legacy mount name: data-component="Drawer".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Panel"
openbooleanOptionalfalse
sidestringOptional"right"

Slots

  • default

Events

  • click

Source contract

Installed source: components/Drawer.wrn

component Drawer {
+  props {
+    class = ""
+    title = "Panel"
+    open = false
+    side = "right"
+  }
+  state visible = open
+  view {
+    <div data-show="visible" class="fixed inset-0 z-50 {class}" role="dialog" aria-modal="true"><button class="absolute inset-0 bg-slate-950/50" aria-label="Close" @click="visible = false"></button><aside class="absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 {side === 'left' ? 'left-0' : 'right-0'}"><header class="flex items-center justify-between"><h2 class="text-xl font-bold">{title}</h2><button @click="visible = false" class="size-10 rounded-xl hover:bg-slate-100">×</button></header><div class="mt-6"><slot /></div></aside></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/dropdown-menu.wrn b/app/pages/components/dropdown-menu.wrn new file mode 100644 index 00000000..9cbe3673 --- /dev/null +++ b/app/pages/components/dropdown-menu.wrn @@ -0,0 +1,31 @@ +page DropdownMenucomponent { + seo { + title = "DropdownMenu component" + description = "Reusable dropdown menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

DropdownMenu

Reusable dropdown menu component.

@wrnexus/ui 0.2.642 props1 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DropdownMenu label="Menu" />

Legacy mount name: data-component="DropdownMenu".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Menu"

Slots

  • default

Events

  • click

Source contract

Installed source: components/DropdownMenu.wrn

component DropdownMenu {
+  props {
+    class = ""
+    label = "Menu"
+  }
+  state open = false
+  view {
+    <div class="relative inline-block {class}"><button type="button" aria-haspopup="menu" aria-expanded="{open}" @click="open = !open" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">{label}<span aria-hidden="true">⌄</span></button><div data-show="open" role="menu" class="absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900"><slot /></div></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/dropdown-navigation.wrn b/app/pages/components/dropdown-navigation.wrn new file mode 100644 index 00000000..0c637c69 --- /dev/null +++ b/app/pages/components/dropdown-navigation.wrn @@ -0,0 +1,31 @@ +page DropdownNavigationcomponent { + seo { + title = "DropdownNavigation component" + description = "Reusable dropdown navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

DropdownNavigation

Reusable dropdown navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DropdownNavigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="DropdownNavigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DropdownNavigation.wrn

component DropdownNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/duration-input.wrn b/app/pages/components/duration-input.wrn new file mode 100644 index 00000000..5f73fae3 --- /dev/null +++ b/app/pages/components/duration-input.wrn @@ -0,0 +1,37 @@ +page DurationInputcomponent { + seo { + title = "DurationInput component" + description = "Reusable duration input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DurationInput

Reusable duration input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DurationInput label="Duration" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DurationInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Duration"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DurationInput.wrn

component DurationInput {
+  props {
+    label = "Duration" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/duration-picker.wrn b/app/pages/components/duration-picker.wrn new file mode 100644 index 00000000..b0d1668e --- /dev/null +++ b/app/pages/components/duration-picker.wrn @@ -0,0 +1,37 @@ +page DurationPickercomponent { + seo { + title = "DurationPicker component" + description = "Reusable duration picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

DurationPicker

Reusable duration picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DurationPicker label="Duration" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="DurationPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Duration"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DurationPicker.wrn

component DurationPicker {
+  props {
+    label = "Duration" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/duration-slider.wrn b/app/pages/components/duration-slider.wrn new file mode 100644 index 00000000..9ed75c6b --- /dev/null +++ b/app/pages/components/duration-slider.wrn @@ -0,0 +1,34 @@ +page DurationSlidercomponent { + seo { + title = "DurationSlider component" + description = "Reusable duration slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

DurationSlider

Reusable duration slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DurationSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="DurationSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/DurationSlider.wrn

component DurationSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/elevated-card.wrn b/app/pages/components/elevated-card.wrn new file mode 100644 index 00000000..eebd808f --- /dev/null +++ b/app/pages/components/elevated-card.wrn @@ -0,0 +1,30 @@ +page ElevatedCardcomponent { + seo { + title = "ElevatedCard component" + description = "Reusable elevated card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ElevatedCard

Reusable elevated card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ElevatedCard title="title" description="description" href="href" />

Legacy mount name: data-component="ElevatedCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ElevatedCard.wrn

component ElevatedCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--elevated {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/email-body-editor.wrn b/app/pages/components/email-body-editor.wrn new file mode 100644 index 00000000..3e6366cb --- /dev/null +++ b/app/pages/components/email-body-editor.wrn @@ -0,0 +1,37 @@ +page EmailBodyEditorcomponent { + seo { + title = "EmailBodyEditor component" + description = "Reusable email body editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

EmailBodyEditor

Reusable email body editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EmailBodyEditor label="EmailBody" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="EmailBodyEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"EmailBody"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EmailBodyEditor.wrn

component EmailBodyEditor {
+  props {
+    label = "EmailBody" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/email-composer.wrn b/app/pages/components/email-composer.wrn new file mode 100644 index 00000000..97e7d8fc --- /dev/null +++ b/app/pages/components/email-composer.wrn @@ -0,0 +1,34 @@ +page EmailComposercomponent { + seo { + title = "EmailComposer component" + description = "Reusable email composer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

EmailComposer

Reusable email composer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EmailComposer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="EmailComposer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EmailComposer.wrn

component EmailComposer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/email-input.wrn b/app/pages/components/email-input.wrn new file mode 100644 index 00000000..f890d3f2 --- /dev/null +++ b/app/pages/components/email-input.wrn @@ -0,0 +1,45 @@ +page EmailInputcomponent { + seo { + title = "EmailInput component" + description = "Reusable email input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

EmailInput

Reusable email input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EmailInput id="id" name="name" label="Email" value="value" placeholder="placeholder" />

Legacy mount name: data-component="EmailInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Email"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/EmailInput.wrn

component EmailInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Email"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="email" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/emoji-picker.wrn b/app/pages/components/emoji-picker.wrn new file mode 100644 index 00000000..97167a4a --- /dev/null +++ b/app/pages/components/emoji-picker.wrn @@ -0,0 +1,37 @@ +page EmojiPickercomponent { + seo { + title = "EmojiPicker component" + description = "Reusable emoji picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

EmojiPicker

Reusable emoji picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EmojiPicker label="Emoji" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="EmojiPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Emoji"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EmojiPicker.wrn

component EmojiPicker {
+  props {
+    label = "Emoji" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/empty-state.wrn b/app/pages/components/empty-state.wrn new file mode 100644 index 00000000..158abb29 --- /dev/null +++ b/app/pages/components/empty-state.wrn @@ -0,0 +1,188 @@ +page EmptyStatecomponent { + seo { + title = "EmptyState component" + description = "Reusable empty state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

EmptyState

Reusable empty state component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EmptyState eyebrow="eyebrow" title="Nothing found" description="description" iconClass="icon-[lucide--inbox]" primaryLabel="primaryLabel" />

Legacy mount name: data-component="EmptyState".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional"Nothing found"
descriptionstringOptional""
iconClassstringOptional"icon-[lucide--inbox]"
primaryLabelstringOptional""
primaryHrefstringOptional""
secondaryLabelstringOptional""
secondaryHrefstringOptional""
compactbooleanOptionalfalse
centeredbooleanOptionaltrue
suggestionsstringOptional[]

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/EmptyState.wrn

component EmptyState {
+    props {
+        class: string = ""
+        eyebrow = ""
+        title = "Nothing found"
+        description = ""
+
+        iconClass = "icon-[lucide--inbox]"
+
+        primaryLabel = ""
+        primaryHref = ""
+
+        secondaryLabel = ""
+        secondaryHref = ""
+
+        compact = false
+        centered = true
+
+        suggestions = []
+    }
+
+    view {
+        <section
+            aria-labelledby="empty-state-title"
+            class="w-full {class}"
+            class:py-6="compact"
+            class:sm:py-8="compact"
+            class:py-8="!compact"
+            class:sm:py-10="!compact"
+        >
+            <div
+                class=" relative mx-auto w-full overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50/90 via-white to-violet-50/80 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20 "
+                class:max-w-3xl="centered"
+            >
+                <!-- Background decoration -->
+                <div
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 overflow-hidden"
+                >
+                    <div class="absolute -right-20 -top-24 h-56 w-56 rounded-full bg-indigo-200/30 blur-3xl dark:bg-indigo-500/10"></div>
+
+                    <div class="absolute -bottom-24 -left-20 h-56 w-56 rounded-full bg-violet-200/20 blur-3xl dark:bg-violet-500/5"></div>
+
+                    <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-300/70 to-transparent dark:via-indigo-500/20"></div>
+                </div>
+
+                <div
+                    class="relative"
+                    class:px-6="compact"
+                    class:py-8="compact"
+                    class:sm:px-8="compact"
+                    class:sm:py-9="compact"
+                    class:px-6="!compact"
+                    class:py-10="!compact"
+                    class:sm:px-10="!compact"
+                    class:sm:py-12="!compact"
+                    class:lg:px-12="!compact"
+                    class:text-center="centered"
+                >
+                    <div
+                        class=" {compact ? 'max-w-xl' : 'max-w-2xl'} {centered ? 'mx-auto' : 'mr-auto'} "
+                        class:max-w-xl="compact"
+                        class:max-w-2xl="!compact"
+                    >
+                        <!-- Icon -->
+                        <div
+                            class="flex"
+                            class:justify-center="centered"
+                        >
+                            <span
+                                class="grid place-items-center rounded-2xl bg-indigo-50 text-indigo-600 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20"
+                                class:h-12="compact"
+                                class:w-12="compact"
+                                class:h-14="!compact"
+                                class:w-14="!compact"
+                            >
+                                <span class="{iconClass}" class:h-5="compact" class:w-5="compact" class:h-6="!compact" class:w-6="!compact" aria-hidden="true" ></span>
+                            </span>
+                        </div>
+
+                        <!-- Eyebrow -->
+                        <p
+                            class="mt-5 text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
+                            class:hidden="eyebrow === ''"
+                        >
+                            {eyebrow}
+                        </p>
+
+                        <!-- Title -->
+                        <h2
+                            id="empty-state-title"
+                            class="font-bold tracking-tight text-slate-950 dark:text-white"
+                            class:mt-5="eyebrow === ''"
+                            class:mt-3="eyebrow !== ''"
+                            class:text-xl="compact"
+                            class:leading-tight="compact"
+                            class:sm:text-2xl="compact"
+                            class:text-2xl="!compact"
+                            class:leading-tight="!compact"
+                            class:sm:text-3xl="!compact"
+                            class:lg:text-[2rem]="!compact"
+                        >
+                            {title}
+                        </h2>
+
+                        <!-- Description -->
+                        <p
+                            class="mx-auto mt-3 max-w-xl text-sm leading-6 text-slate-600 dark:text-slate-400"
+                            class:hidden="description === ''"
+                            class:sm:text-base="!compact"
+                            class:sm:leading-7="!compact"
+                        >
+                            {description}
+                        </p>
+
+                        <!-- Suggestions -->
+                        <div
+                            class="mt-6 flex flex-wrap gap-2"
+                            class:hidden="suggestions.length === 0"
+                            class:justify-center="centered"
+                        >
+                            {#each suggestions.slice(0, 4) as suggestion}
+                            <a
+                                href="{suggestion.href}"
+                                class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300"
+                            >
+                                <span class="{suggestion.iconClass} h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                {suggestion.label}
+                            </a>
+                            {/each}
+                        </div>
+
+                        <!-- Actions -->
+                        <div
+                            class="flex flex-col gap-3 sm:flex-row"
+                            class:mt-7="suggestions.length === 0"
+                            class:mt-6="suggestions.length > 0"
+                            class:hidden="primaryLabel === '' && secondaryLabel === ''"
+                            class:justify-center="centered"
+                        >
+                            <a
+                                href="{secondaryHref}"
+                                class="h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
+                                class:hidden="secondaryLabel === ''"
+                                class:inline-flex="secondaryLabel !== ''"
+                            >
+                                {secondaryLabel}
+                            </a>
+
+                            <a
+                                href="{primaryHref}"
+                                class="group h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                                class:hidden="primaryLabel === ''"
+                                class:inline-flex="primaryLabel !== ''"
+                            >
+                                {primaryLabel}
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/encryption-diagram.wrn b/app/pages/components/encryption-diagram.wrn new file mode 100644 index 00000000..45ed38a2 --- /dev/null +++ b/app/pages/components/encryption-diagram.wrn @@ -0,0 +1,32 @@ +page EncryptionDiagramcomponent { + seo { + title = "EncryptionDiagram component" + description = "Reusable encryption diagram component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

EncryptionDiagram

Reusable encryption diagram component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EncryptionDiagram title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="EncryptionDiagram".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EncryptionDiagram.wrn

component EncryptionDiagram {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/enterprise-cta.wrn b/app/pages/components/enterprise-cta.wrn new file mode 100644 index 00000000..b297d54c --- /dev/null +++ b/app/pages/components/enterprise-cta.wrn @@ -0,0 +1,32 @@ +page EnterpriseCTAcomponent { + seo { + title = "EnterpriseCTA component" + description = "Reusable enterprise c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

EnterpriseCTA

Reusable enterprise c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EnterpriseCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="EnterpriseCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EnterpriseCTA.wrn

component EnterpriseCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/enterprise-hero.wrn b/app/pages/components/enterprise-hero.wrn new file mode 100644 index 00000000..f05833af --- /dev/null +++ b/app/pages/components/enterprise-hero.wrn @@ -0,0 +1,31 @@ +page EnterpriseHerocomponent { + seo { + title = "EnterpriseHero component" + description = "Reusable enterprise hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

EnterpriseHero

Reusable enterprise hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EnterpriseHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="EnterpriseHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EnterpriseHero.wrn

component EnterpriseHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/enterprise-pricing-card.wrn b/app/pages/components/enterprise-pricing-card.wrn new file mode 100644 index 00000000..a675fce6 --- /dev/null +++ b/app/pages/components/enterprise-pricing-card.wrn @@ -0,0 +1,34 @@ +page EnterprisePricingCardcomponent { + seo { + title = "EnterprisePricingCard component" + description = "Reusable enterprise pricing card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

EnterprisePricingCard

Reusable enterprise pricing card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EnterprisePricingCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="EnterprisePricingCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EnterprisePricingCard.wrn

component EnterprisePricingCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/environment-selector.wrn b/app/pages/components/environment-selector.wrn new file mode 100644 index 00000000..f3694aec --- /dev/null +++ b/app/pages/components/environment-selector.wrn @@ -0,0 +1,37 @@ +page EnvironmentSelectorcomponent { + seo { + title = "EnvironmentSelector component" + description = "Reusable environment selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

EnvironmentSelector

Reusable environment selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EnvironmentSelector label="Environment" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="EnvironmentSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Environment"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EnvironmentSelector.wrn

component EnvironmentSelector {
+  props {
+    label = "Environment" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/environment-switcher.wrn b/app/pages/components/environment-switcher.wrn new file mode 100644 index 00000000..dcd1d07d --- /dev/null +++ b/app/pages/components/environment-switcher.wrn @@ -0,0 +1,34 @@ +page EnvironmentSwitchercomponent { + seo { + title = "EnvironmentSwitcher component" + description = "Reusable environment switcher component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

EnvironmentSwitcher

Reusable environment switcher component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EnvironmentSwitcher eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="EnvironmentSwitcher".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EnvironmentSwitcher.wrn

component EnvironmentSwitcher {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-actions.wrn b/app/pages/components/error-actions.wrn new file mode 100644 index 00000000..49cc8a26 --- /dev/null +++ b/app/pages/components/error-actions.wrn @@ -0,0 +1,32 @@ +page ErrorActionscomponent { + seo { + title = "ErrorActions component" + description = "Reusable error actions component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ErrorActions

Reusable error actions component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorActions label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ErrorActions".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorActions.wrn

component ErrorActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-card.wrn b/app/pages/components/error-card.wrn new file mode 100644 index 00000000..a2d56956 --- /dev/null +++ b/app/pages/components/error-card.wrn @@ -0,0 +1,30 @@ +page ErrorCardcomponent { + seo { + title = "ErrorCard component" + description = "Reusable error card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ErrorCard

Reusable error card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorCard title="title" description="description" href="href" />

Legacy mount name: data-component="ErrorCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorCard.wrn

component ErrorCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--error {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-code.wrn b/app/pages/components/error-code.wrn new file mode 100644 index 00000000..07df63ce --- /dev/null +++ b/app/pages/components/error-code.wrn @@ -0,0 +1,34 @@ +page ErrorCodecomponent { + seo { + title = "ErrorCode component" + description = "Reusable error code component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ErrorCode

Reusable error code component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorCode eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ErrorCode".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorCode.wrn

component ErrorCode {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-hero.wrn b/app/pages/components/error-hero.wrn new file mode 100644 index 00000000..bfe044e9 --- /dev/null +++ b/app/pages/components/error-hero.wrn @@ -0,0 +1,31 @@ +page ErrorHerocomponent { + seo { + title = "ErrorHero component" + description = "Reusable error hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ErrorHero

Reusable error hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ErrorHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorHero.wrn

component ErrorHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-illustration.wrn b/app/pages/components/error-illustration.wrn new file mode 100644 index 00000000..c860d345 --- /dev/null +++ b/app/pages/components/error-illustration.wrn @@ -0,0 +1,34 @@ +page ErrorIllustrationcomponent { + seo { + title = "ErrorIllustration component" + description = "Reusable error illustration component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ErrorIllustration

Reusable error illustration component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorIllustration eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ErrorIllustration".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorIllustration.wrn

component ErrorIllustration {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-page-shell.wrn b/app/pages/components/error-page-shell.wrn new file mode 100644 index 00000000..2aaac3c2 --- /dev/null +++ b/app/pages/components/error-page-shell.wrn @@ -0,0 +1,31 @@ +page ErrorPageShellcomponent { + seo { + title = "ErrorPageShell component" + description = "Reusable error page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ErrorPageShell

Reusable error page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorPageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ErrorPageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorPageShell.wrn

component ErrorPageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-page.wrn b/app/pages/components/error-page.wrn new file mode 100644 index 00000000..10dc84a8 --- /dev/null +++ b/app/pages/components/error-page.wrn @@ -0,0 +1,34 @@ +page ErrorPagecomponent { + seo { + title = "ErrorPage component" + description = "Reusable error page component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ErrorPage

Reusable error page component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorPage eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ErrorPage".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorPage.wrn

component ErrorPage {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-state.wrn b/app/pages/components/error-state.wrn new file mode 100644 index 00000000..9569b561 --- /dev/null +++ b/app/pages/components/error-state.wrn @@ -0,0 +1,214 @@ +page ErrorStatecomponent { + seo { + title = "ErrorState component" + description = "Reusable error state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ErrorState

Reusable error state component.

@wrnexus/ui 0.2.6416 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorState type="error" eyebrow="eyebrow" title="Something went wrong" description="description" errorCode="errorCode" />

Legacy mount name: data-component="ErrorState".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
typestringOptional"error"
eyebrowstringOptional""
titlestringOptional"Something went wrong"
descriptionstringOptional""
errorCodestringOptional""
iconClassstringOptional""
primaryLabelstringOptional""
primaryHrefstringOptional""
secondaryLabelstringOptional""
secondaryHrefstringOptional""
retryLabelstringOptional""
retryActionstringOptional""
centeredbooleanOptionaltrue
compactbooleanOptionalfalse
detailsstringOptional[]

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/ErrorState.wrn

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 {
+        <section
+            aria-labelledby="error-state-title"
+            role="{type === 'error' ? 'alert' : 'status'}"
+            class="w-full {class}"
+            class:py-6="compact"
+            class:sm:py-8="compact"
+            class:py-8="!compact"
+            class:sm:py-10="!compact"
+        >
+            <div
+                class=" relative w-full overflow-hidden rounded-3xl border shadow-xl {type === 'warning' ? 'border-amber-200/80 bg-linear-to-br from-amber-50 via-white to-orange-50 shadow-amber-950/5 dark:border-amber-500/20 dark:from-amber-500/10 dark:via-slate-900 dark:to-orange-500/10' : type === 'forbidden' ? 'border-violet-200/80 bg-linear-to-br from-violet-50 via-white to-indigo-50 shadow-violet-950/5 dark:border-violet-500/20 dark:from-violet-500/10 dark:via-slate-900 dark:to-indigo-500/10' : type === 'offline' ? 'border-slate-200 bg-linear-to-br from-slate-100 via-white to-indigo-50 shadow-slate-950/5 dark:border-white/10 dark:from-white/5 dark:via-slate-900 dark:to-indigo-500/10' : 'border-rose-200/80 bg-linear-to-br from-rose-50 via-white to-orange-50 shadow-rose-950/5 dark:border-rose-500/20 dark:from-rose-500/10 dark:via-slate-900 dark:to-orange-500/10' } "
+                class:mx-auto="centered"
+                class:max-w-3xl="centered"
+            >
+                <!-- Decorative background -->
+                <div
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 overflow-hidden"
+                >
+                    <div class=" absolute -right-20 -top-24 h-64 w-64 rounded-full blur-3xl {type === 'warning' ? 'bg-amber-300/25 dark:bg-amber-500/10' : type === 'forbidden' ? 'bg-violet-300/25 dark:bg-violet-500/10' : type === 'offline' ? 'bg-slate-300/25 dark:bg-slate-500/10' : 'bg-rose-300/25 dark:bg-rose-500/10' } " ></div>
+
+                    <div class=" absolute -bottom-28 -left-20 h-64 w-64 rounded-full blur-3xl {type === 'warning' ? 'bg-orange-300/20 dark:bg-orange-500/10' : type === 'forbidden' ? 'bg-indigo-300/20 dark:bg-indigo-500/10' : type === 'offline' ? 'bg-indigo-300/15 dark:bg-indigo-500/5' : 'bg-orange-300/20 dark:bg-orange-500/10' } " ></div>
+
+                    <div class=" absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent to-transparent {type === 'warning' ? 'via-amber-400/60 dark:via-amber-400/20' : type === 'forbidden' ? 'via-violet-400/60 dark:via-violet-400/20' : type === 'offline' ? 'via-slate-400/50 dark:via-slate-400/20' : 'via-rose-400/60 dark:via-rose-400/20' } " ></div>
+                </div>
+
+                <div
+                    class="relative"
+                    class:px-6="compact"
+                    class:py-8="compact"
+                    class:sm:px-8="compact"
+                    class:sm:py-9="compact"
+                    class:px-6="!compact"
+                    class:py-10="!compact"
+                    class:sm:px-10="!compact"
+                    class:sm:py-12="!compact"
+                    class:lg:px-12="!compact"
+                    class:text-center="centered"
+                    class:text-left="!centered"
+                >
+                    <div class="{compact ? 'max-w-xl' : 'max-w-2xl'} {centered ? 'mx-auto' : 'mr-auto'}" >
+                        <!-- Icon -->
+                        <div
+                            class="flex"
+                            class:justify-center="centered"
+                            class:justify-start="!centered"
+                        >
+                            <div class="relative">
+                                <div aria-hidden="true" class=" absolute inset-1 rounded-2xl blur-xl {type === 'warning' ? 'bg-amber-500/25' : type === 'forbidden' ? 'bg-violet-500/25' : type === 'offline' ? 'bg-slate-500/20' : 'bg-rose-500/25' } " ></div>
+
+                                <span
+                                    class=" relative grid place-items-center rounded-2xl border bg-white/90 shadow-lg backdrop-blur-sm {compact ? 'h-12 w-12' : 'h-14 w-14'} {type === 'warning' ? 'border-amber-200 text-amber-700 shadow-amber-950/10 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300' : type === 'forbidden' ? 'border-violet-200 text-violet-700 shadow-violet-950/10 dark:border-violet-500/20 dark:bg-violet-500/10 dark:text-violet-300' : type === 'offline' ? 'border-slate-200 text-slate-700 shadow-slate-950/10 dark:border-white/10 dark:bg-white/5 dark:text-slate-300' : 'border-rose-200 text-rose-700 shadow-rose-950/10 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300' } "
+                                >
+                                    <span class=" {compact ? 'h-5 w-5' : 'h-6 w-6'} {iconClass !== '' ? iconClass : type === 'warning' ? 'icon-[lucide--triangle-alert]' : type === 'forbidden' ? 'icon-[lucide--shield-alert]' : type === 'offline' ? 'icon-[lucide--wifi-off]' : 'icon-[lucide--circle-x]' } " aria-hidden="true" ></span>
+                                </span>
+                            </div>
+                        </div>
+
+                        <!-- Error code -->
+                        <div
+                            class="mt-5 flex"
+                            class:hidden="errorCode === ''"
+                            class:justify-center="centered"
+                            class:justify-start="!centered"
+                        >
+                            <span
+                                class=" rounded-full px-3 py-1 text-xs font-bold tracking-[0.14em] {type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'forbidden' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : type === 'offline' ? 'bg-slate-200 text-slate-700 dark:bg-white/10 dark:text-slate-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' } "
+                            >
+                                {errorCode}
+                            </span>
+                        </div>
+
+                        <!-- Eyebrow -->
+                        <p
+                            class=" text-xs font-bold uppercase tracking-[0.18em] {errorCode !== '' ? 'mt-4' : 'mt-5'} {type === 'warning' ? 'text-amber-700 dark:text-amber-400' : type === 'forbidden' ? 'text-violet-700 dark:text-violet-400' : type === 'offline' ? 'text-slate-600 dark:text-slate-400' : 'text-rose-700 dark:text-rose-400' } "
+                            class:hidden="eyebrow === ''"
+                        >
+                            {eyebrow}
+                        </p>
+
+                        <!-- Title -->
+                        <h2
+                            id="error-state-title"
+                            class=" font-bold leading-tight tracking-tight text-slate-950 dark:text-white {eyebrow !== '' || errorCode !== '' ? 'mt-3' : 'mt-5'} {compact ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl lg:text-[2rem]'} "
+                        >
+                            {title}
+                        </h2>
+
+                        <!-- Description -->
+                        <p
+                            class=" mt-3 max-w-xl text-sm leading-6 text-slate-600 dark:text-slate-400 {!compact ? 'sm:text-base sm:leading-7' : ''} {centered ? 'mx-auto' : 'mr-auto'} "
+                            class:hidden="description === ''"
+                        >
+                            {description}
+                        </p>
+
+                        <!-- Details -->
+                        <div
+                            class="mt-6 flex flex-wrap gap-x-5 gap-y-3"
+                            class:hidden="details.length === 0"
+                            class:justify-center="centered"
+                            class:justify-start="!centered"
+                        >
+                            {#each details.slice(0, 4) as detail}
+                            <div class="inline-flex items-center gap-2 text-sm font-medium text-slate-600 dark:text-slate-300">
+                                <span
+                                    class=" grid h-6 w-6 shrink-0 place-items-center rounded-full {type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'forbidden' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : type === 'offline' ? 'bg-slate-200 text-slate-700 dark:bg-white/10 dark:text-slate-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' } "
+                                >
+                                    <span class="{detail.iconClass} h-3.5 w-3.5" aria-hidden="true" ></span>
+                                </span>
+
+                                {detail.label}
+                            </div>
+                            {/each}
+                        </div>
+
+                        <!-- Actions -->
+                        <div
+                            class="mt-7 flex flex-col gap-3 sm:flex-row"
+                            class:hidden="primaryLabel === '' && secondaryLabel === '' && retryLabel === ''"
+                            class:justify-center="centered"
+                            class:justify-start="!centered"
+                        >
+                            <!-- Secondary -->
+                            <a
+                                href="{secondaryHref}"
+                                class="h-11 items-center justify-center rounded-xl border border-slate-200 bg-white/90 px-4 text-sm font-semibold text-slate-700 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-white hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
+                                class:hidden="secondaryLabel === ''"
+                                class:inline-flex="secondaryLabel !== ''"
+                            >
+                                {secondaryLabel}
+                            </a>
+
+                            <!-- Retry -->
+                            <button
+                                type="button"
+                                @click="{retryAction}"
+                                class=" group h-11 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 {type === 'warning' ? 'bg-amber-600 shadow-amber-600/20 hover:bg-amber-500 focus-visible:ring-amber-500' : type === 'forbidden' ? 'bg-violet-600 shadow-violet-600/20 hover:bg-violet-500 focus-visible:ring-violet-500' : type === 'offline' ? 'bg-slate-800 shadow-slate-900/20 hover:bg-slate-700 focus-visible:ring-slate-500 dark:bg-slate-200 dark:text-slate-950 dark:hover:bg-white' : 'bg-rose-600 shadow-rose-600/20 hover:bg-rose-500 focus-visible:ring-rose-500' } "
+                                class:hidden="retryLabel === ''"
+                                class:inline-flex="retryLabel !== ''"
+                            >
+                                <span class="icon-[lucide--rotate-cw] h-4 w-4 transition-transform group-hover:rotate-45" aria-hidden="true" ></span>
+
+                                {retryLabel}
+                            </button>
+
+                            <!-- Primary link -->
+                            <a
+                                href="{primaryHref}"
+                                class=" group h-11 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 {type === 'warning' ? 'bg-amber-600 shadow-amber-600/20 hover:bg-amber-500 focus-visible:ring-amber-500' : type === 'forbidden' ? 'bg-violet-600 shadow-violet-600/20 hover:bg-violet-500 focus-visible:ring-violet-500' : type === 'offline' ? 'bg-slate-800 shadow-slate-900/20 hover:bg-slate-700 focus-visible:ring-slate-500 dark:bg-slate-200 dark:text-slate-950 dark:hover:bg-white' : 'bg-rose-600 shadow-rose-600/20 hover:bg-rose-500 focus-visible:ring-rose-500' } "
+                                class:hidden="primaryLabel === ''"
+                                class:inline-flex="primaryLabel !== ''"
+                            >
+                                {primaryLabel}
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/error-support-link.wrn b/app/pages/components/error-support-link.wrn new file mode 100644 index 00000000..8efa6ad2 --- /dev/null +++ b/app/pages/components/error-support-link.wrn @@ -0,0 +1,32 @@ +page ErrorSupportLinkcomponent { + seo { + title = "ErrorSupportLink component" + description = "Reusable error support link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ErrorSupportLink

Reusable error support link component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ErrorSupportLink label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ErrorSupportLink".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ErrorSupportLink.wrn

component ErrorSupportLink {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/estimated-cost-summary.wrn b/app/pages/components/estimated-cost-summary.wrn new file mode 100644 index 00000000..8cf81089 --- /dev/null +++ b/app/pages/components/estimated-cost-summary.wrn @@ -0,0 +1,34 @@ +page EstimatedCostSummarycomponent { + seo { + title = "EstimatedCostSummary component" + description = "Reusable estimated cost summary component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

EstimatedCostSummary

Reusable estimated cost summary component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EstimatedCostSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="EstimatedCostSummary".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EstimatedCostSummary.wrn

component EstimatedCostSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/event-table.wrn b/app/pages/components/event-table.wrn new file mode 100644 index 00000000..398025f4 --- /dev/null +++ b/app/pages/components/event-table.wrn @@ -0,0 +1,31 @@ +page EventTablecomponent { + seo { + title = "EventTable component" + description = "Reusable event table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

EventTable

Reusable event table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EventTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="EventTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EventTable.wrn

component EventTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/expandable-text.wrn b/app/pages/components/expandable-text.wrn new file mode 100644 index 00000000..93d57ac9 --- /dev/null +++ b/app/pages/components/expandable-text.wrn @@ -0,0 +1,34 @@ +page ExpandableTextcomponent { + seo { + title = "ExpandableText component" + description = "Reusable expandable text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ExpandableText

Reusable expandable text component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ExpandableText eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ExpandableText".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ExpandableText.wrn

component ExpandableText {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/expiry-date-time-picker.wrn b/app/pages/components/expiry-date-time-picker.wrn new file mode 100644 index 00000000..a6741af3 --- /dev/null +++ b/app/pages/components/expiry-date-time-picker.wrn @@ -0,0 +1,37 @@ +page ExpiryDateTimePickercomponent { + seo { + title = "ExpiryDateTimePicker component" + description = "Reusable expiry date time picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ExpiryDateTimePicker

Reusable expiry date time picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ExpiryDateTimePicker label="ExpiryDateTime" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ExpiryDateTimePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ExpiryDateTime"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ExpiryDateTimePicker.wrn

component ExpiryDateTimePicker {
+  props {
+    label = "ExpiryDateTime" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/export-progress.wrn b/app/pages/components/export-progress.wrn new file mode 100644 index 00000000..ed542d23 --- /dev/null +++ b/app/pages/components/export-progress.wrn @@ -0,0 +1,32 @@ +page ExportProgresscomponent { + seo { + title = "ExportProgress component" + description = "Reusable export progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ExportProgress

Reusable export progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ExportProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ExportProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ExportProgress.wrn

component ExportProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/external-link.wrn b/app/pages/components/external-link.wrn new file mode 100644 index 00000000..6f632d11 --- /dev/null +++ b/app/pages/components/external-link.wrn @@ -0,0 +1,32 @@ +page ExternalLinkcomponent { + seo { + title = "ExternalLink component" + description = "Reusable external link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ExternalLink

Reusable external link component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ExternalLink label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ExternalLink".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ExternalLink.wrn

component ExternalLink {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/eyebrow-text.wrn b/app/pages/components/eyebrow-text.wrn new file mode 100644 index 00000000..fc0a17c6 --- /dev/null +++ b/app/pages/components/eyebrow-text.wrn @@ -0,0 +1,29 @@ +page EyebrowTextcomponent { + seo { + title = "EyebrowText component" + description = "Reusable eyebrow text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

EyebrowText

Reusable eyebrow text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<EyebrowText text="text" align="start" />

Legacy mount name: data-component="EyebrowText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/EyebrowText.wrn

component EyebrowText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--small wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/factor-card.wrn b/app/pages/components/factor-card.wrn new file mode 100644 index 00000000..20e8a808 --- /dev/null +++ b/app/pages/components/factor-card.wrn @@ -0,0 +1,34 @@ +page FactorCardcomponent { + seo { + title = "FactorCard component" + description = "Reusable factor card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FactorCard

Reusable factor card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FactorCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FactorCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FactorCard.wrn

component FactorCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/fallback-route-builder.wrn b/app/pages/components/fallback-route-builder.wrn new file mode 100644 index 00000000..28a606e4 --- /dev/null +++ b/app/pages/components/fallback-route-builder.wrn @@ -0,0 +1,34 @@ +page FallbackRouteBuildercomponent { + seo { + title = "FallbackRouteBuilder component" + description = "Reusable fallback route builder component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FallbackRouteBuilder

Reusable fallback route builder component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FallbackRouteBuilder eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FallbackRouteBuilder".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FallbackRouteBuilder.wrn

component FallbackRouteBuilder {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/fallback-route-diagram.wrn b/app/pages/components/fallback-route-diagram.wrn new file mode 100644 index 00000000..645b9a4b --- /dev/null +++ b/app/pages/components/fallback-route-diagram.wrn @@ -0,0 +1,32 @@ +page FallbackRouteDiagramcomponent { + seo { + title = "FallbackRouteDiagram component" + description = "Reusable fallback route diagram component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

FallbackRouteDiagram

Reusable fallback route diagram component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FallbackRouteDiagram title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="FallbackRouteDiagram".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FallbackRouteDiagram.wrn

component FallbackRouteDiagram {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/faq.wrn b/app/pages/components/faq.wrn new file mode 100644 index 00000000..487945f7 --- /dev/null +++ b/app/pages/components/faq.wrn @@ -0,0 +1,34 @@ +page FAQcomponent { + seo { + title = "FAQ component" + description = "Reusable faq component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

FAQ

Reusable faq component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FAQ eyebrow="eyebrow" title="Frequently asked questions" description="description" items="[]" centered="true" />

Legacy mount name: data-component="FAQ".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional"Frequently asked questions"
descriptionstringOptional""
itemsstringOptional[]
centeredbooleanOptionaltrue
allowMultiplebooleanOptionalfalse
defaultOpenIndexnumberOptional0

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/FAQ.wrn

component FAQ {
+  props {
+    class = ""
+    eyebrow = ""
+    title = "Frequently asked questions"
+    description = ""
+    items = []
+    centered = true
+    allowMultiple = false
+    defaultOpenIndex = 0
+  }
+  view { <FAQAccordion class="{class}" eyebrow="{eyebrow}" title="{title}" description="{description}" items="{items}" centered="{centered}" allowMultiple="{allowMultiple}" defaultOpenIndex="{defaultOpenIndex}" /> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/faqaccordion.wrn b/app/pages/components/faqaccordion.wrn new file mode 100644 index 00000000..3551c08d --- /dev/null +++ b/app/pages/components/faqaccordion.wrn @@ -0,0 +1,256 @@ +page FAQAccordioncomponent { + seo { + title = "FAQAccordion component" + description = "Reusable faqaccordion component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

FAQAccordion

Reusable faqaccordion component.

@wrnexus/ui 0.2.6413 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FAQAccordion eyebrow="eyebrow" title="Frequently asked questions" description="description" items="[]" centered="true" />

Legacy mount name: data-component="FAQAccordion".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional"Frequently asked questions"
descriptionstringOptional""
itemsstringOptional[]
centeredbooleanOptionaltrue
compactbooleanOptionalfalse
allowMultiplebooleanOptionalfalse
defaultOpenIndexnumberOptional0
showContactbooleanOptionalfalse
contactTextstringOptional"Still have questions?"
contactLabelstringOptional"Contact support"
contactHrefstringOptional"/support"

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/FAQAccordion.wrn

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 {
+        <section
+            aria-labelledby="faq-accordion-title"
+            class="w-full px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
+            class:py-10="compact"
+            class:sm:py-12="compact"
+            class:py-14="!compact"
+            class:sm:py-16="!compact"
+            class:lg:py-20="!compact"
+            class:hidden="items.length === 0"
+        >
+            <div
+                class="mx-auto w-full"
+                class:max-w-5xl="centered"
+                class:max-w-7xl="!centered"
+            >
+                <div
+                    class="gap-10"
+                    class:flex="centered"
+                    class:flex-col="centered"
+                    class:grid="!centered"
+                    class:lg:grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)]="!centered"
+                    class:lg:items-start="!centered"
+                    class:lg:gap-14="!centered"
+                >
+                    <!-- Heading -->
+                    <div
+                        class="min-w-0"
+                        class:mx-auto="centered"
+                        class:max-w-3xl="centered"
+                        class:text-center="centered"
+                        class:max-w-xl="!centered"
+                        class:lg:sticky="!centered"
+                        class:lg:top-24="!centered"
+                    >
+                        <!-- Eyebrow -->
+                        <p
+                            class="text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
+                            class:hidden="eyebrow === ''"
+                        >
+                            {eyebrow}
+                        </p>
+
+                        <!-- Title -->
+                        <h2
+                            id="faq-accordion-title"
+                            class="font-bold leading-tight tracking-tight text-slate-950 dark:text-white"
+                            class:mt-3="eyebrow !== ''"
+                            class:text-2xl="compact"
+                            class:sm:text-3xl="compact"
+                            class:text-3xl="!compact"
+                            class:sm:text-4xl="!compact"
+                        >
+                            {title}
+                        </h2>
+
+                        <!-- Description -->
+                        <p
+                            class="mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400"
+                            class:hidden="description === ''"
+                            class:sm:text-base="!compact"
+                            class:mx-auto="centered"
+                            class:max-w-2xl="centered"
+                            class:max-w-xl="!centered"
+                        >
+                            {description}
+                        </p>
+
+                        <!-- Contact card -->
+                        <div
+                            class="mt-7 rounded-2xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-5 shadow-sm dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-white/[0.03] dark:to-violet-500/10"
+                            class:hidden="!showContact"
+                        >
+                            <div
+                                class="flex items-center gap-4"
+                                class:justify-center="centered"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-white text-indigo-600 shadow-sm ring-1 ring-inset ring-indigo-200 dark:bg-white/5 dark:text-indigo-300 dark:ring-indigo-500/20"
+                                >
+                                    <span class="icon-[lucide--messages-square] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <div
+                                    class="min-w-0"
+                                    class:text-left="centered"
+                                >
+                                    <p class="text-sm font-semibold text-slate-950 dark:text-white">
+                                        {contactText}
+                                    </p>
+
+                                    {#if contactLabel !== '' && contactHref !== ''}
+                                    <a
+                                        href="{contactHref}"
+                                        class="mt-1 inline-flex items-center gap-1.5 text-sm font-bold text-indigo-600 transition-colors duration-200 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                    >
+                                        {contactLabel}
+
+                                        <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                                    </a>
+                                    {/if}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Accordion -->
+                    <div class="min-w-0">
+                        <div class="space-y-3">
+                            {#each items as item, index}
+                            <article
+                                class=" overflow-hidden rounded-2xl border transition-[border-color,background-color,box-shadow,transform] duration-300 ease-out {isOpen(index) ? 'border-indigo-200 bg-indigo-50/60 shadow-md shadow-indigo-950/5 dark:border-indigo-500/20 dark:bg-indigo-500/10' : 'border-slate-200 bg-white shadow-sm hover:-translate-y-0.5 hover:border-indigo-200 hover:bg-slate-50 dark:border-white/10 dark:bg-white/[0.03] dark:hover:border-indigo-500/20 dark:hover:bg-white/5' } "
+                            >
+                                <h3>
+                                    <button
+                                        type="button"
+                                        @click="toggleItem(index)"
+                                        aria-expanded="{isOpen(index)}"
+                                        aria-controls="faq-answer-{index}"
+                                        class="flex w-full items-center justify-between gap-5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500"
+                                        class:px-4="compact"
+                                        class:py-4="compact"
+                                        class:px-5="!compact"
+                                        class:py-5="!compact"
+                                        class:sm:px-6="!compact"
+                                    >
+                                        <span class="flex min-w-0 items-start gap-3">
+                                            <!-- Number -->
+                                            <span
+                                                class=" mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-lg text-xs font-bold transition-[background-color,color,transform] duration-300 ease-out {isOpen(index) ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400' } "
+                                            >
+                                                {index + 1}
+                                            </span>
+
+                                            <!-- Question -->
+                                            <span
+                                                class="font-semibold leading-6 text-slate-950 dark:text-white"
+                                                class:text-sm="compact"
+                                                class:text-base="!compact"
+                                            >
+                                                {item.question}
+                                            </span>
+                                        </span>
+
+                                        <!-- Toggle icon -->
+                                        <span
+                                            class=" grid h-8 w-8 shrink-0 place-items-center rounded-lg transition-[background-color,color,transform] duration-300 ease-out {isOpen(index) ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400' } "
+                                        >
+                                            <span class=" icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-300 ease-out {isOpen(index) ? 'rotate-180' : 'rotate-0'} " aria-hidden="true" ></span>
+                                        </span>
+                                    </button>
+                                </h3>
+
+                                <div
+                                    id="faq-answer-{index}"
+                                    role="region"
+                                    aria-hidden="{!isOpen(index)}"
+                                    class=" grid overflow-hidden transition-[grid-template-rows,opacity] duration-300 ease-out {isOpen(index) ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0' } "
+                                >
+                                    <div class="min-h-0 overflow-hidden">
+                                        <div class="border-t border-indigo-200/60 dark:border-indigo-500/15">
+                                            <div
+                                                class=" text-sm leading-7 text-slate-600 transition-[transform,opacity] duration-300 ease-out dark:text-slate-400  {compact ? 'px-4 pb-4 pt-3' : 'px-5 pb-5 pt-4 sm:px-6 sm:pb-6 sm:pt-5' }  {isOpen(index) ? 'translate-y-0 opacity-100' : '-translate-y-2 opacity-0' } "
+                                            >
+                                                <p class="m-0">
+                                                    {item.answer}
+                                                </p>
+
+                                                {#if item.linkLabel !== '' && item.href !== ''}
+                                                <a
+                                                    href="{item.href}"
+                                                    class=" group inline-flex items-center gap-2 text-sm font-bold text-indigo-600 transition-colors duration-200 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 "
+                                                >
+                                                    {item.linkLabel}
+
+                                                    <span class=" icon-[lucide--arrow-up-right] h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 " aria-hidden="true" ></span>
+                                                </a>
+                                                {/if}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </article>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tailwind safelist for utilities used by reactive class directives -->
+            <span class=" hidden flex flex-col grid justify-center lg:gap-14 lg:grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)] lg:items-start lg:py-20 lg:sticky lg:top-24 max-w-2xl max-w-3xl max-w-5xl max-w-7xl max-w-xl mt-3 mx-auto px-4 px-5 py-4 py-5 py-10 py-14 sm:px-6 sm:py-12 sm:py-16 sm:text-base sm:text-3xl sm:text-4xl text-base text-center text-left text-sm text-2xl text-3xl grid-rows-[0fr] grid-rows-[1fr] opacity-0 opacity-100 -translate-y-2 translate-y-0 rotate-0 rotate-180 " ></span>
+        </section>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/favicon-upload.wrn b/app/pages/components/favicon-upload.wrn new file mode 100644 index 00000000..a46f6268 --- /dev/null +++ b/app/pages/components/favicon-upload.wrn @@ -0,0 +1,34 @@ +page FaviconUploadcomponent { + seo { + title = "FaviconUpload component" + description = "Reusable favicon upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FaviconUpload

Reusable favicon upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FaviconUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FaviconUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FaviconUpload.wrn

component FaviconUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/fax-input.wrn b/app/pages/components/fax-input.wrn new file mode 100644 index 00000000..a895eae5 --- /dev/null +++ b/app/pages/components/fax-input.wrn @@ -0,0 +1,37 @@ +page FaxInputcomponent { + seo { + title = "FaxInput component" + description = "Reusable fax input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FaxInput

Reusable fax input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FaxInput label="Fax" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FaxInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Fax"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FaxInput.wrn

component FaxInput {
+  props {
+    label = "Fax" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-card.wrn b/app/pages/components/feature-card.wrn new file mode 100644 index 00000000..92e3a4e5 --- /dev/null +++ b/app/pages/components/feature-card.wrn @@ -0,0 +1,33 @@ +page FeatureCardcomponent { + seo { + title = "FeatureCard component" + description = "Reusable feature card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FeatureCard

Reusable feature card component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureCard icon="✦" title="Feature" description="description" href="href" />

Legacy mount name: data-component="FeatureCard".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
iconstringOptional"✦"
titlestringOptional"Feature"
descriptionstringOptional""
hrefstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureCard.wrn

component FeatureCard {
+  props {
+    class = ""
+    icon = "✦"
+    title = "Feature"
+    description = ""
+    href = ""
+  }
+  view {
+    <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-checklist.wrn b/app/pages/components/feature-checklist.wrn new file mode 100644 index 00000000..ea6f7e45 --- /dev/null +++ b/app/pages/components/feature-checklist.wrn @@ -0,0 +1,34 @@ +page FeatureChecklistcomponent { + seo { + title = "FeatureChecklist component" + description = "Reusable feature checklist component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FeatureChecklist

Reusable feature checklist component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureChecklist eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FeatureChecklist".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureChecklist.wrn

component FeatureChecklist {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-comparison-table.wrn b/app/pages/components/feature-comparison-table.wrn new file mode 100644 index 00000000..59cb6f20 --- /dev/null +++ b/app/pages/components/feature-comparison-table.wrn @@ -0,0 +1,31 @@ +page FeatureComparisonTablecomponent { + seo { + title = "FeatureComparisonTable component" + description = "Reusable feature comparison table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

FeatureComparisonTable

Reusable feature comparison table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureComparisonTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="FeatureComparisonTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureComparisonTable.wrn

component FeatureComparisonTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-details-panel.wrn b/app/pages/components/feature-details-panel.wrn new file mode 100644 index 00000000..61bd826d --- /dev/null +++ b/app/pages/components/feature-details-panel.wrn @@ -0,0 +1,31 @@ +page FeatureDetailsPanelcomponent { + seo { + title = "FeatureDetailsPanel component" + description = "Reusable feature details panel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

FeatureDetailsPanel

Reusable feature details panel component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureDetailsPanel eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="FeatureDetailsPanel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureDetailsPanel.wrn

component FeatureDetailsPanel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-grid.wrn b/app/pages/components/feature-grid.wrn new file mode 100644 index 00000000..0b36e62d --- /dev/null +++ b/app/pages/components/feature-grid.wrn @@ -0,0 +1,30 @@ +page FeatureGridcomponent { + seo { + title = "FeatureGrid component" + description = "Reusable feature grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

FeatureGrid

Reusable feature grid component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureGrid columns="3" />

Legacy mount name: data-component="FeatureGrid".

Props and attributes

PropTypeRequirementDefault
columnsnumberOptional3
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureGrid.wrn

component FeatureGrid {
+  props {
+    columns = 3
+    className = ""
+  }
+  view {
+    <div class="grid gap-5 {columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'sm:grid-cols-2 xl:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3'} {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-icon-card.wrn b/app/pages/components/feature-icon-card.wrn new file mode 100644 index 00000000..3d511cb2 --- /dev/null +++ b/app/pages/components/feature-icon-card.wrn @@ -0,0 +1,34 @@ +page FeatureIconCardcomponent { + seo { + title = "FeatureIconCard component" + description = "Reusable feature icon card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FeatureIconCard

Reusable feature icon card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureIconCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FeatureIconCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureIconCard.wrn

component FeatureIconCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-list.wrn b/app/pages/components/feature-list.wrn new file mode 100644 index 00000000..c2d0f96f --- /dev/null +++ b/app/pages/components/feature-list.wrn @@ -0,0 +1,31 @@ +page FeatureListcomponent { + seo { + title = "FeatureList component" + description = "Reusable feature list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

FeatureList

Reusable feature list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="FeatureList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureList.wrn

component FeatureList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-tabs.wrn b/app/pages/components/feature-tabs.wrn new file mode 100644 index 00000000..ba2b573f --- /dev/null +++ b/app/pages/components/feature-tabs.wrn @@ -0,0 +1,34 @@ +page FeatureTabscomponent { + seo { + title = "FeatureTabs component" + description = "Reusable feature tabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FeatureTabs

Reusable feature tabs component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureTabs eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FeatureTabs".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureTabs.wrn

component FeatureTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-timeline.wrn b/app/pages/components/feature-timeline.wrn new file mode 100644 index 00000000..8c67a9bb --- /dev/null +++ b/app/pages/components/feature-timeline.wrn @@ -0,0 +1,32 @@ +page FeatureTimelinecomponent { + seo { + title = "FeatureTimeline component" + description = "Reusable feature timeline component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

FeatureTimeline

Reusable feature timeline component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureTimeline title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="FeatureTimeline".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureTimeline.wrn

component FeatureTimeline {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/feature-unavailable-state.wrn b/app/pages/components/feature-unavailable-state.wrn new file mode 100644 index 00000000..21251e8f --- /dev/null +++ b/app/pages/components/feature-unavailable-state.wrn @@ -0,0 +1,32 @@ +page FeatureUnavailableStatecomponent { + seo { + title = "FeatureUnavailableState component" + description = "Reusable feature unavailable state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

FeatureUnavailableState

Reusable feature unavailable state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureUnavailableState label="FeatureUnavailable" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="FeatureUnavailableState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FeatureUnavailable"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureUnavailableState.wrn

component FeatureUnavailableState {
+  props {
+    label = "FeatureUnavailable" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/featured-blog-card.wrn b/app/pages/components/featured-blog-card.wrn new file mode 100644 index 00000000..1e6bd259 --- /dev/null +++ b/app/pages/components/featured-blog-card.wrn @@ -0,0 +1,34 @@ +page FeaturedBlogCardcomponent { + seo { + title = "FeaturedBlogCard component" + description = "Reusable featured blog card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FeaturedBlogCard

Reusable featured blog card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeaturedBlogCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FeaturedBlogCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeaturedBlogCard.wrn

component FeaturedBlogCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/field-actions.wrn b/app/pages/components/field-actions.wrn new file mode 100644 index 00000000..69835370 --- /dev/null +++ b/app/pages/components/field-actions.wrn @@ -0,0 +1,32 @@ +page FieldActionscomponent { + seo { + title = "FieldActions component" + description = "Reusable field actions component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

FieldActions

Reusable field actions component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FieldActions label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="FieldActions".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FieldActions.wrn

component FieldActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/file-input.wrn b/app/pages/components/file-input.wrn new file mode 100644 index 00000000..cf47e788 --- /dev/null +++ b/app/pages/components/file-input.wrn @@ -0,0 +1,37 @@ +page FileInputcomponent { + seo { + title = "FileInput component" + description = "Reusable file input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FileInput

Reusable file input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FileInput label="File" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FileInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"File"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FileInput.wrn

component FileInput {
+  props {
+    label = "File" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/file-list.wrn b/app/pages/components/file-list.wrn new file mode 100644 index 00000000..4edab9aa --- /dev/null +++ b/app/pages/components/file-list.wrn @@ -0,0 +1,31 @@ +page FileListcomponent { + seo { + title = "FileList component" + description = "Reusable file list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

FileList

Reusable file list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FileList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="FileList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FileList.wrn

component FileList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/file-size-input.wrn b/app/pages/components/file-size-input.wrn new file mode 100644 index 00000000..4c146f4f --- /dev/null +++ b/app/pages/components/file-size-input.wrn @@ -0,0 +1,37 @@ +page FileSizeInputcomponent { + seo { + title = "FileSizeInput component" + description = "Reusable file size input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FileSizeInput

Reusable file size input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FileSizeInput label="FileSize" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FileSizeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FileSize"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FileSizeInput.wrn

component FileSizeInput {
+  props {
+    label = "FileSize" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/file-size-label.wrn b/app/pages/components/file-size-label.wrn new file mode 100644 index 00000000..5364cd5e --- /dev/null +++ b/app/pages/components/file-size-label.wrn @@ -0,0 +1,34 @@ +page FileSizeLabelcomponent { + seo { + title = "FileSizeLabel component" + description = "Reusable file size label component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FileSizeLabel

Reusable file size label component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FileSizeLabel eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FileSizeLabel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FileSizeLabel.wrn

component FileSizeLabel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/file-type-badge.wrn b/app/pages/components/file-type-badge.wrn new file mode 100644 index 00000000..514bf395 --- /dev/null +++ b/app/pages/components/file-type-badge.wrn @@ -0,0 +1,32 @@ +page FileTypeBadgecomponent { + seo { + title = "FileTypeBadge component" + description = "Reusable file type badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

FileTypeBadge

Reusable file type badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FileTypeBadge label="FileType" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="FileTypeBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FileType"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FileTypeBadge.wrn

component FileTypeBadge {
+  props {
+    label = "FileType" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/file-upload-primitive.wrn b/app/pages/components/file-upload-primitive.wrn new file mode 100644 index 00000000..e9335f06 --- /dev/null +++ b/app/pages/components/file-upload-primitive.wrn @@ -0,0 +1,42 @@ +page fileuploadcomponent { + seo { + title = "file-upload component" + description = "Reusable file-upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

file-upload

Reusable file-upload component.

@wrnexus/ui 0.2.647 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<file-upload store="public" endpoint="/api/upload" accept="accept" multiple="false" max="0" />

Legacy mount name: data-component="file-upload".

Props and attributes

PropTypeRequirementDefault
storestringOptional"public"
endpointstringOptional"/api/upload"
acceptstringOptional""
multiplebooleanOptionalfalse
maxnumberOptional0
labelstringOptional"Drag files here or click to browse"
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/file-upload.wrn

// 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, … }] }`.
+//
+//   <div data-component="file-upload" store="public" endpoint="/api/upload"
+//        accept="image/*" max="10000000" multiple="true"></div>
+component FileUpload {
+  props {
+    store = "public"
+    endpoint = "/api/upload"
+    accept = ""
+    multiple = false
+    max = 0
+    label = "Drag files here or click to browse"
+    class = ""
+  }
+  view {
+    <div class="wire-fileupload {class}" data-uploader="{store}" data-endpoint="{endpoint}" data-accept="{accept}" data-multiple="{multiple}" data-max="{max}" data-label="{label}"></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/file-upload.wrn b/app/pages/components/file-upload.wrn new file mode 100644 index 00000000..3a0cb362 --- /dev/null +++ b/app/pages/components/file-upload.wrn @@ -0,0 +1,35 @@ +page FileUploadcomponent { + seo { + title = "FileUpload component" + description = "Reusable file upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FileUpload

Reusable file upload component.

@wrnexus/ui 0.2.647 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FileUpload id="file" name="file" label="Upload file" accept="accept" multiple="false" />

Legacy mount name: data-component="FileUpload".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional"file"
namestringOptional"file"
labelstringOptional"Upload file"
acceptstringOptional""
multiplebooleanOptionalfalse
helpstringOptional"Drag and drop or browse"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/FileUpload.wrn

component FileUpload {
+  props {
+    class = ""
+    id = "file"
+    name = "file"
+    label = "Upload file"
+    accept = ""
+    multiple = false
+    help = "Drag and drop or browse"
+  }
+  view {
+    <label for="{id}" class="flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50 {class}"><span class="text-3xl" aria-hidden="true">⇧</span><span class="mt-2 font-semibold">{label}</span><span class="mt-1 text-sm text-slate-500">{help}</span><input id="{id}" name="{name}" type="file" accept="{accept}" multiple="{multiple}" class="sr-only" /></label>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/filter-bar.wrn b/app/pages/components/filter-bar.wrn new file mode 100644 index 00000000..8c1f3777 --- /dev/null +++ b/app/pages/components/filter-bar.wrn @@ -0,0 +1,30 @@ +page FilterBarcomponent { + seo { + title = "FilterBar component" + description = "Reusable filter bar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

FilterBar

Reusable filter bar component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FilterBar label="Filters" clearLabel="Clear filters" showClear="true" />

Legacy mount name: data-component="FilterBar".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Filters"
clearLabelstringOptional"Clear filters"
showClearbooleanOptionaltrue
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FilterBar.wrn

component FilterBar {
+  props {
+    label = "Filters"
+    clearLabel = "Clear filters"
+    showClear = true
+    class = ""
+  }
+  view { <section aria-label="{label}" class="wire-filter-bar {class}"><div class="wire-filter-bar__controls"><slot /></div><button data-show="showClear" type="reset" class="wire-btn wire-btn--ghost wire-btn--sm">{clearLabel}</button></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/filter-menu.wrn b/app/pages/components/filter-menu.wrn new file mode 100644 index 00000000..473b3fdb --- /dev/null +++ b/app/pages/components/filter-menu.wrn @@ -0,0 +1,31 @@ +page FilterMenucomponent { + seo { + title = "FilterMenu component" + description = "Reusable filter menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

FilterMenu

Reusable filter menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FilterMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="FilterMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FilterMenu.wrn

component FilterMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/filter-search-input.wrn b/app/pages/components/filter-search-input.wrn new file mode 100644 index 00000000..eb4aa893 --- /dev/null +++ b/app/pages/components/filter-search-input.wrn @@ -0,0 +1,37 @@ +page FilterSearchInputcomponent { + seo { + title = "FilterSearchInput component" + description = "Reusable filter search input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FilterSearchInput

Reusable filter search input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FilterSearchInput label="FilterSearch" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FilterSearchInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FilterSearch"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FilterSearchInput.wrn

component FilterSearchInput {
+  props {
+    label = "FilterSearch" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/filterable-table.wrn b/app/pages/components/filterable-table.wrn new file mode 100644 index 00000000..af09ec08 --- /dev/null +++ b/app/pages/components/filterable-table.wrn @@ -0,0 +1,31 @@ +page FilterableTablecomponent { + seo { + title = "FilterableTable component" + description = "Reusable filterable table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

FilterableTable

Reusable filterable table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FilterableTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="FilterableTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FilterableTable.wrn

component FilterableTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/final-cta.wrn b/app/pages/components/final-cta.wrn new file mode 100644 index 00000000..961949de --- /dev/null +++ b/app/pages/components/final-cta.wrn @@ -0,0 +1,32 @@ +page FinalCTAcomponent { + seo { + title = "FinalCTA component" + description = "Reusable final c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

FinalCTA

Reusable final c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FinalCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="FinalCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FinalCTA.wrn

component FinalCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/first-name-input.wrn b/app/pages/components/first-name-input.wrn new file mode 100644 index 00000000..80557535 --- /dev/null +++ b/app/pages/components/first-name-input.wrn @@ -0,0 +1,37 @@ +page FirstNameInputcomponent { + seo { + title = "FirstNameInput component" + description = "Reusable first name input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FirstNameInput

Reusable first name input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FirstNameInput label="FirstName" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FirstNameInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FirstName"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FirstNameInput.wrn

component FirstNameInput {
+  props {
+    label = "FirstName" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/flex.wrn b/app/pages/components/flex.wrn new file mode 100644 index 00000000..fd20a3d8 --- /dev/null +++ b/app/pages/components/flex.wrn @@ -0,0 +1,27 @@ +page Flexcomponent { + seo { + title = "Flex component" + description = "Reusable flex component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Flex

Reusable flex component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Flex />

Legacy mount name: data-component="Flex".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Flex.wrn

component Flex {
+  props {
+    class = ""
+  }
+  view { <div class="wire-flex {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/font-picker.wrn b/app/pages/components/font-picker.wrn new file mode 100644 index 00000000..217e6bcb --- /dev/null +++ b/app/pages/components/font-picker.wrn @@ -0,0 +1,37 @@ +page FontPickercomponent { + seo { + title = "FontPicker component" + description = "Reusable font picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FontPicker

Reusable font picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FontPicker label="Font" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FontPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Font"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FontPicker.wrn

component FontPicker {
+  props {
+    label = "Font" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/font-size-picker.wrn b/app/pages/components/font-size-picker.wrn new file mode 100644 index 00000000..f6083695 --- /dev/null +++ b/app/pages/components/font-size-picker.wrn @@ -0,0 +1,37 @@ +page FontSizePickercomponent { + seo { + title = "FontSizePicker component" + description = "Reusable font size picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FontSizePicker

Reusable font size picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FontSizePicker label="FontSize" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FontSizePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FontSize"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FontSizePicker.wrn

component FontSizePicker {
+  props {
+    label = "FontSize" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/font-weight-picker.wrn b/app/pages/components/font-weight-picker.wrn new file mode 100644 index 00000000..ac5f7920 --- /dev/null +++ b/app/pages/components/font-weight-picker.wrn @@ -0,0 +1,37 @@ +page FontWeightPickercomponent { + seo { + title = "FontWeightPicker component" + description = "Reusable font weight picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FontWeightPicker

Reusable font weight picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FontWeightPicker label="FontWeight" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FontWeightPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FontWeight"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FontWeightPicker.wrn

component FontWeightPicker {
+  props {
+    label = "FontWeight" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/footer-language-switcher.wrn b/app/pages/components/footer-language-switcher.wrn new file mode 100644 index 00000000..5c3a545c --- /dev/null +++ b/app/pages/components/footer-language-switcher.wrn @@ -0,0 +1,34 @@ +page FooterLanguageSwitchercomponent { + seo { + title = "FooterLanguageSwitcher component" + description = "Reusable footer language switcher component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FooterLanguageSwitcher

Reusable footer language switcher component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FooterLanguageSwitcher eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="FooterLanguageSwitcher".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FooterLanguageSwitcher.wrn

component FooterLanguageSwitcher {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/footer-status-indicator.wrn b/app/pages/components/footer-status-indicator.wrn new file mode 100644 index 00000000..b56d5265 --- /dev/null +++ b/app/pages/components/footer-status-indicator.wrn @@ -0,0 +1,32 @@ +page FooterStatusIndicatorcomponent { + seo { + title = "FooterStatusIndicator component" + description = "Reusable footer status indicator component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

FooterStatusIndicator

Reusable footer status indicator component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FooterStatusIndicator label="FooterStatus" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="FooterStatusIndicator".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"FooterStatus"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FooterStatusIndicator.wrn

component FooterStatusIndicator {
+  props {
+    label = "FooterStatus" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/forbidden-page.wrn b/app/pages/components/forbidden-page.wrn new file mode 100644 index 00000000..1f485b6a --- /dev/null +++ b/app/pages/components/forbidden-page.wrn @@ -0,0 +1,34 @@ +page ForbiddenPagecomponent { + seo { + title = "ForbiddenPage component" + description = "Reusable forbidden page component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ForbiddenPage

Reusable forbidden page component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ForbiddenPage eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ForbiddenPage".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ForbiddenPage.wrn

component ForbiddenPage {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/forbidden-state.wrn b/app/pages/components/forbidden-state.wrn new file mode 100644 index 00000000..b65d4165 --- /dev/null +++ b/app/pages/components/forbidden-state.wrn @@ -0,0 +1,32 @@ +page ForbiddenStatecomponent { + seo { + title = "ForbiddenState component" + description = "Reusable forbidden state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ForbiddenState

Reusable forbidden state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ForbiddenState label="Forbidden" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ForbiddenState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Forbidden"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ForbiddenState.wrn

component ForbiddenState {
+  props {
+    label = "Forbidden" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/forgot-password-form.wrn b/app/pages/components/forgot-password-form.wrn new file mode 100644 index 00000000..a6074bcb --- /dev/null +++ b/app/pages/components/forgot-password-form.wrn @@ -0,0 +1,34 @@ +page ForgotPasswordFormcomponent { + seo { + title = "ForgotPasswordForm component" + description = "Reusable forgot password form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ForgotPasswordForm

Reusable forgot password form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ForgotPasswordForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ForgotPasswordForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ForgotPasswordForm.wrn

component ForgotPasswordForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-actions.wrn b/app/pages/components/form-actions.wrn new file mode 100644 index 00000000..2246f878 --- /dev/null +++ b/app/pages/components/form-actions.wrn @@ -0,0 +1,32 @@ +page FormActionscomponent { + seo { + title = "FormActions component" + description = "Reusable form actions component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

FormActions

Reusable form actions component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormActions label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="FormActions".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormActions.wrn

component FormActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-alert.wrn b/app/pages/components/form-alert.wrn new file mode 100644 index 00000000..87e15778 --- /dev/null +++ b/app/pages/components/form-alert.wrn @@ -0,0 +1,32 @@ +page FormAlertcomponent { + seo { + title = "FormAlert component" + description = "Reusable form alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

FormAlert

Reusable form alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormAlert label="Form" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="FormAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Form"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormAlert.wrn

component FormAlert {
+  props {
+    label = "Form" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-dialog.wrn b/app/pages/components/form-dialog.wrn new file mode 100644 index 00000000..49630825 --- /dev/null +++ b/app/pages/components/form-dialog.wrn @@ -0,0 +1,31 @@ +page FormDialogcomponent { + seo { + title = "FormDialog component" + description = "Reusable form dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

FormDialog

Reusable form dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="FormDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormDialog.wrn

component FormDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-error-summary.wrn b/app/pages/components/form-error-summary.wrn new file mode 100644 index 00000000..0f372c6f --- /dev/null +++ b/app/pages/components/form-error-summary.wrn @@ -0,0 +1,31 @@ +page FormErrorSummarycomponent { + seo { + title = "FormErrorSummary component" + description = "Reusable form error summary component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FormErrorSummary

Reusable form error summary component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormErrorSummary title="Please fix the following" visible="true" />

Legacy mount name: data-component="FormErrorSummary".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Please fix the following"
visiblebooleanOptionaltrue

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormErrorSummary.wrn

component FormErrorSummary {
+  props {
+    class = ""
+    title = "Please fix the following"
+    visible = true
+  }
+  view {
+    <section data-show="visible" role="alert" aria-live="polite" class="rounded-2xl border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200 {class}"><h3 class="font-semibold">{title}</h3><div class="mt-2 text-sm"><slot /></div></section>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-error.wrn b/app/pages/components/form-error.wrn new file mode 100644 index 00000000..34464b95 --- /dev/null +++ b/app/pages/components/form-error.wrn @@ -0,0 +1,29 @@ +page FormErrorcomponent { + seo { + title = "FormError component" + description = "Reusable form error component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

FormError

Reusable form error component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormError id="id" message="message" />

Legacy mount name: data-component="FormError".

Props and attributes

PropTypeRequirementDefault
idstringOptional""
messagestringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormError.wrn

component FormError {
+  props {
+    id = ""
+    message = ""
+    class = ""
+  }
+  view { <p id="{id}" role="alert" aria-live="polite" class="wire-field-message wire-field-message--error {class}">{message}<slot /></p> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-field.wrn b/app/pages/components/form-field.wrn new file mode 100644 index 00000000..abb34c69 --- /dev/null +++ b/app/pages/components/form-field.wrn @@ -0,0 +1,33 @@ +page FormFieldcomponent { + seo { + title = "FormField component" + description = "Reusable form field component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FormField

Reusable form field component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormField label="Field" help="help" error="error" required="false" />

Legacy mount name: data-component="FormField".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Field"
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormField.wrn

component FormField {
+  props {
+    class = ""
+    label = "Field"
+    help = ""
+    error = ""
+    required = false
+  }
+  view {
+    <div class="space-y-2 {class}"><div class="text-sm font-semibold">{label}<span data-show="required" class="ml-1 text-red-500">*</span></div><slot /><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-grid.wrn b/app/pages/components/form-grid.wrn new file mode 100644 index 00000000..cd248b36 --- /dev/null +++ b/app/pages/components/form-grid.wrn @@ -0,0 +1,31 @@ +page FormGridcomponent { + seo { + title = "FormGrid component" + description = "Reusable form grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

FormGrid

Reusable form grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="FormGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormGrid.wrn

component FormGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-group.wrn b/app/pages/components/form-group.wrn new file mode 100644 index 00000000..7e057fbf --- /dev/null +++ b/app/pages/components/form-group.wrn @@ -0,0 +1,37 @@ +page FormGroupcomponent { + seo { + title = "FormGroup component" + description = "Reusable form group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

FormGroup

Reusable form group component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormGroup label="Form" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="FormGroup".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Form"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormGroup.wrn

component FormGroup {
+  props {
+    label = "Form" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-help-text.wrn b/app/pages/components/form-help-text.wrn new file mode 100644 index 00000000..a8c4346b --- /dev/null +++ b/app/pages/components/form-help-text.wrn @@ -0,0 +1,29 @@ +page FormHelpTextcomponent { + seo { + title = "FormHelpText component" + description = "Reusable form help text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FormHelpText

Reusable form help text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormHelpText id="id" text="text" />

Legacy mount name: data-component="FormHelpText".

Props and attributes

PropTypeRequirementDefault
idstringOptional""
textstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormHelpText.wrn

component FormHelpText {
+  props {
+    id = ""
+    text = ""
+    class = ""
+  }
+  view { <p id="{id}" class="wire-field-message wire-field-message--help {class}">{text}<slot /></p> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-label.wrn b/app/pages/components/form-label.wrn new file mode 100644 index 00000000..1f573a74 --- /dev/null +++ b/app/pages/components/form-label.wrn @@ -0,0 +1,33 @@ +page FormLabelcomponent { + seo { + title = "FormLabel component" + description = "Reusable form label component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

FormLabel

Reusable form label component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormLabel for="for" label="Label" required="false" optional="false" />

Legacy mount name: data-component="FormLabel".

Props and attributes

PropTypeRequirementDefault
forstringOptional""
labelstringOptional"Label"
requiredbooleanOptionalfalse
optionalbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormLabel.wrn

component FormLabel {
+  props {
+    for = ""
+    label = "Label"
+    required = false
+    optional = false
+    class = ""
+  }
+  view {
+    <label for="{for}" class="wire-label {class}">{label}<span data-show="required" class="wire-required" aria-hidden="true"> *</span><span data-show="optional && !required" class="wire-optional"> (optional)</span></label>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-progress.wrn b/app/pages/components/form-progress.wrn new file mode 100644 index 00000000..fa335230 --- /dev/null +++ b/app/pages/components/form-progress.wrn @@ -0,0 +1,32 @@ +page FormProgresscomponent { + seo { + title = "FormProgress component" + description = "Reusable form progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

FormProgress

Reusable form progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="FormProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormProgress.wrn

component FormProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-row.wrn b/app/pages/components/form-row.wrn new file mode 100644 index 00000000..698e41ec --- /dev/null +++ b/app/pages/components/form-row.wrn @@ -0,0 +1,31 @@ +page FormRowcomponent { + seo { + title = "FormRow component" + description = "Reusable form row component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

FormRow

Reusable form row component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormRow title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="FormRow".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormRow.wrn

component FormRow {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form-section.wrn b/app/pages/components/form-section.wrn new file mode 100644 index 00000000..18a57a3d --- /dev/null +++ b/app/pages/components/form-section.wrn @@ -0,0 +1,31 @@ +page FormSectioncomponent { + seo { + title = "FormSection component" + description = "Reusable form section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

FormSection

Reusable form section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FormSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="FormSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FormSection.wrn

component FormSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/form.wrn b/app/pages/components/form.wrn new file mode 100644 index 00000000..fcb19b4d --- /dev/null +++ b/app/pages/components/form.wrn @@ -0,0 +1,33 @@ +page Formcomponent { + seo { + title = "Form component" + description = "Reusable form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Form

Reusable form component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Form action="action" method="post" name="name" loading="false" />

Legacy mount name: data-component="Form".

Props and attributes

PropTypeRequirementDefault
actionstringOptional""
methodstringOptional"post"
namestringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Form.wrn

component Form {
+  props {
+    action = ""
+    method = "post"
+    name = ""
+    loading = false
+    class = ""
+  }
+  view {
+    <form action="{action}" method="{method}" name="{name}" aria-busy="{loading}" class="wire-form {class}"><slot /></form>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/full-bleed.wrn b/app/pages/components/full-bleed.wrn new file mode 100644 index 00000000..62b641da --- /dev/null +++ b/app/pages/components/full-bleed.wrn @@ -0,0 +1,27 @@ +page FullBleedcomponent { + seo { + title = "FullBleed component" + description = "Reusable full bleed component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

FullBleed

Reusable full bleed component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FullBleed />

Legacy mount name: data-component="FullBleed".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FullBleed.wrn

component FullBleed {
+  props {
+    class = ""
+  }
+  view { <div class="wire-full-bleed {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/fullscreen-dialog.wrn b/app/pages/components/fullscreen-dialog.wrn new file mode 100644 index 00000000..e5704074 --- /dev/null +++ b/app/pages/components/fullscreen-dialog.wrn @@ -0,0 +1,31 @@ +page FullscreenDialogcomponent { + seo { + title = "FullscreenDialog component" + description = "Reusable fullscreen dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

FullscreenDialog

Reusable fullscreen dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FullscreenDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="FullscreenDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FullscreenDialog.wrn

component FullscreenDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/funnel-chart.wrn b/app/pages/components/funnel-chart.wrn new file mode 100644 index 00000000..f8f04136 --- /dev/null +++ b/app/pages/components/funnel-chart.wrn @@ -0,0 +1,32 @@ +page FunnelChartcomponent { + seo { + title = "FunnelChart component" + description = "Reusable funnel chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

FunnelChart

Reusable funnel chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FunnelChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="FunnelChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FunnelChart.wrn

component FunnelChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/geo-chart.wrn b/app/pages/components/geo-chart.wrn new file mode 100644 index 00000000..320371dd --- /dev/null +++ b/app/pages/components/geo-chart.wrn @@ -0,0 +1,32 @@ +page GeoChartcomponent { + seo { + title = "GeoChart component" + description = "Reusable geo chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

GeoChart

Reusable geo chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GeoChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="GeoChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GeoChart.wrn

component GeoChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/geofence-editor.wrn b/app/pages/components/geofence-editor.wrn new file mode 100644 index 00000000..ed25fee4 --- /dev/null +++ b/app/pages/components/geofence-editor.wrn @@ -0,0 +1,37 @@ +page GeofenceEditorcomponent { + seo { + title = "GeofenceEditor component" + description = "Reusable geofence editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

GeofenceEditor

Reusable geofence editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GeofenceEditor label="Geofence" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="GeofenceEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Geofence"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GeofenceEditor.wrn

component GeofenceEditor {
+  props {
+    label = "Geofence" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/ghost-button.wrn b/app/pages/components/ghost-button.wrn new file mode 100644 index 00000000..348d0d50 --- /dev/null +++ b/app/pages/components/ghost-button.wrn @@ -0,0 +1,30 @@ +page GhostButtoncomponent { + seo { + title = "GhostButton component" + description = "Reusable ghost button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

GhostButton

Reusable ghost button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GhostButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="GhostButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GhostButton.wrn

component GhostButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/glass-card.wrn b/app/pages/components/glass-card.wrn new file mode 100644 index 00000000..1909bb14 --- /dev/null +++ b/app/pages/components/glass-card.wrn @@ -0,0 +1,30 @@ +page GlassCardcomponent { + seo { + title = "GlassCard component" + description = "Reusable glass card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

GlassCard

Reusable glass card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GlassCard title="title" description="description" href="href" />

Legacy mount name: data-component="GlassCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GlassCard.wrn

component GlassCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--glass {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/global-search.wrn b/app/pages/components/global-search.wrn new file mode 100644 index 00000000..9935ffaa --- /dev/null +++ b/app/pages/components/global-search.wrn @@ -0,0 +1,34 @@ +page GlobalSearchcomponent { + seo { + title = "GlobalSearch component" + description = "Reusable global search component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

GlobalSearch

Reusable global search component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GlobalSearch eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="GlobalSearch".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GlobalSearch.wrn

component GlobalSearch {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/gradient-cta.wrn b/app/pages/components/gradient-cta.wrn new file mode 100644 index 00000000..9702cb20 --- /dev/null +++ b/app/pages/components/gradient-cta.wrn @@ -0,0 +1,32 @@ +page GradientCTAcomponent { + seo { + title = "GradientCTA component" + description = "Reusable gradient c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

GradientCTA

Reusable gradient c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GradientCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="GradientCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GradientCTA.wrn

component GradientCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/gradient-picker.wrn b/app/pages/components/gradient-picker.wrn new file mode 100644 index 00000000..718478e5 --- /dev/null +++ b/app/pages/components/gradient-picker.wrn @@ -0,0 +1,37 @@ +page GradientPickercomponent { + seo { + title = "GradientPicker component" + description = "Reusable gradient picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

GradientPicker

Reusable gradient picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GradientPicker label="Gradient" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="GradientPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Gradient"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GradientPicker.wrn

component GradientPicker {
+  props {
+    label = "Gradient" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/gradient-stop-editor.wrn b/app/pages/components/gradient-stop-editor.wrn new file mode 100644 index 00000000..fcb95599 --- /dev/null +++ b/app/pages/components/gradient-stop-editor.wrn @@ -0,0 +1,37 @@ +page GradientStopEditorcomponent { + seo { + title = "GradientStopEditor component" + description = "Reusable gradient stop editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

GradientStopEditor

Reusable gradient stop editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GradientStopEditor label="GradientStop" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="GradientStopEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"GradientStop"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GradientStopEditor.wrn

component GradientStopEditor {
+  props {
+    label = "GradientStop" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/grid.wrn b/app/pages/components/grid.wrn new file mode 100644 index 00000000..5bd9ce23 --- /dev/null +++ b/app/pages/components/grid.wrn @@ -0,0 +1,30 @@ +page Gridcomponent { + seo { + title = "Grid component" + description = "Reusable grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

Grid

Reusable grid component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Grid gap="4" />

Legacy mount name: data-component="Grid".

Props and attributes

PropTypeRequirementDefault
gapstringOptional"4"
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Grid.wrn

component Grid {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="grid gap-{gap} {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/guide-card.wrn b/app/pages/components/guide-card.wrn new file mode 100644 index 00000000..774fc340 --- /dev/null +++ b/app/pages/components/guide-card.wrn @@ -0,0 +1,34 @@ +page GuideCardcomponent { + seo { + title = "GuideCard component" + description = "Reusable guide card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

GuideCard

Reusable guide card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GuideCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="GuideCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GuideCard.wrn

component GuideCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/guide-checklist.wrn b/app/pages/components/guide-checklist.wrn new file mode 100644 index 00000000..e766784f --- /dev/null +++ b/app/pages/components/guide-checklist.wrn @@ -0,0 +1,34 @@ +page GuideChecklistcomponent { + seo { + title = "GuideChecklist component" + description = "Reusable guide checklist component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

GuideChecklist

Reusable guide checklist component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GuideChecklist eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="GuideChecklist".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GuideChecklist.wrn

component GuideChecklist {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/guide-difficulty-badge.wrn b/app/pages/components/guide-difficulty-badge.wrn new file mode 100644 index 00000000..b84d84cc --- /dev/null +++ b/app/pages/components/guide-difficulty-badge.wrn @@ -0,0 +1,32 @@ +page GuideDifficultyBadgecomponent { + seo { + title = "GuideDifficultyBadge component" + description = "Reusable guide difficulty badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

GuideDifficultyBadge

Reusable guide difficulty badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GuideDifficultyBadge label="GuideDifficulty" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="GuideDifficultyBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"GuideDifficulty"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GuideDifficultyBadge.wrn

component GuideDifficultyBadge {
+  props {
+    label = "GuideDifficulty" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/guide-grid.wrn b/app/pages/components/guide-grid.wrn new file mode 100644 index 00000000..aebb0341 --- /dev/null +++ b/app/pages/components/guide-grid.wrn @@ -0,0 +1,31 @@ +page GuideGridcomponent { + seo { + title = "GuideGrid component" + description = "Reusable guide grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

GuideGrid

Reusable guide grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GuideGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="GuideGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GuideGrid.wrn

component GuideGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/guide-step.wrn b/app/pages/components/guide-step.wrn new file mode 100644 index 00000000..64a56e8b --- /dev/null +++ b/app/pages/components/guide-step.wrn @@ -0,0 +1,34 @@ +page GuideStepcomponent { + seo { + title = "GuideStep component" + description = "Reusable guide step component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

GuideStep

Reusable guide step component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<GuideStep eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="GuideStep".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/GuideStep.wrn

component GuideStep {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/header-actions.wrn b/app/pages/components/header-actions.wrn new file mode 100644 index 00000000..a9000a2f --- /dev/null +++ b/app/pages/components/header-actions.wrn @@ -0,0 +1,32 @@ +page HeaderActionscomponent { + seo { + title = "HeaderActions component" + description = "Reusable header actions component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

HeaderActions

Reusable header actions component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeaderActions label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="HeaderActions".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeaderActions.wrn

component HeaderActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/header.wrn b/app/pages/components/header.wrn new file mode 100644 index 00000000..e6bcd86f --- /dev/null +++ b/app/pages/components/header.wrn @@ -0,0 +1,31 @@ +page Headercomponent { + seo { + title = "Header component" + description = "Reusable header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

Header

Reusable header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Header eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="Header".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Header.wrn

component Header {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/health-indicator.wrn b/app/pages/components/health-indicator.wrn new file mode 100644 index 00000000..a243e14c --- /dev/null +++ b/app/pages/components/health-indicator.wrn @@ -0,0 +1,29 @@ +page HealthIndicatorcomponent { + seo { + title = "HealthIndicator component" + description = "Reusable health indicator component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

HealthIndicator

Reusable health indicator component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HealthIndicator label="Health" variant="default" />

Legacy mount name: data-component="HealthIndicator".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Health"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HealthIndicator.wrn

component HealthIndicator {
+  props {
+    label = "Health"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--healthindicator {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero-actions.wrn b/app/pages/components/hero-actions.wrn new file mode 100644 index 00000000..d33ed724 --- /dev/null +++ b/app/pages/components/hero-actions.wrn @@ -0,0 +1,32 @@ +page HeroActionscomponent { + seo { + title = "HeroActions component" + description = "Reusable hero actions component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

HeroActions

Reusable hero actions component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeroActions label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="HeroActions".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeroActions.wrn

component HeroActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero-code-panel.wrn b/app/pages/components/hero-code-panel.wrn new file mode 100644 index 00000000..1eff400b --- /dev/null +++ b/app/pages/components/hero-code-panel.wrn @@ -0,0 +1,31 @@ +page HeroCodePanelcomponent { + seo { + title = "HeroCodePanel component" + description = "Reusable hero code panel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

HeroCodePanel

Reusable hero code panel component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeroCodePanel eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="HeroCodePanel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeroCodePanel.wrn

component HeroCodePanel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero-gradient-text.wrn b/app/pages/components/hero-gradient-text.wrn new file mode 100644 index 00000000..39b65ece --- /dev/null +++ b/app/pages/components/hero-gradient-text.wrn @@ -0,0 +1,34 @@ +page HeroGradientTextcomponent { + seo { + title = "HeroGradientText component" + description = "Reusable hero gradient text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

HeroGradientText

Reusable hero gradient text component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeroGradientText eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="HeroGradientText".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeroGradientText.wrn

component HeroGradientText {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero-primary-action.wrn b/app/pages/components/hero-primary-action.wrn new file mode 100644 index 00000000..d59369ee --- /dev/null +++ b/app/pages/components/hero-primary-action.wrn @@ -0,0 +1,32 @@ +page HeroPrimaryActioncomponent { + seo { + title = "HeroPrimaryAction component" + description = "Reusable hero primary action component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

HeroPrimaryAction

Reusable hero primary action component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeroPrimaryAction label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="HeroPrimaryAction".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeroPrimaryAction.wrn

component HeroPrimaryAction {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero-product-preview.wrn b/app/pages/components/hero-product-preview.wrn new file mode 100644 index 00000000..5ccb8ad8 --- /dev/null +++ b/app/pages/components/hero-product-preview.wrn @@ -0,0 +1,34 @@ +page HeroProductPreviewcomponent { + seo { + title = "HeroProductPreview component" + description = "Reusable hero product preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

HeroProductPreview

Reusable hero product preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeroProductPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="HeroProductPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeroProductPreview.wrn

component HeroProductPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero-secondary-action.wrn b/app/pages/components/hero-secondary-action.wrn new file mode 100644 index 00000000..3517c607 --- /dev/null +++ b/app/pages/components/hero-secondary-action.wrn @@ -0,0 +1,32 @@ +page HeroSecondaryActioncomponent { + seo { + title = "HeroSecondaryAction component" + description = "Reusable hero secondary action component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

HeroSecondaryAction

Reusable hero secondary action component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeroSecondaryAction label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="HeroSecondaryAction".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeroSecondaryAction.wrn

component HeroSecondaryAction {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero-trust-text.wrn b/app/pages/components/hero-trust-text.wrn new file mode 100644 index 00000000..c5585ef7 --- /dev/null +++ b/app/pages/components/hero-trust-text.wrn @@ -0,0 +1,34 @@ +page HeroTrustTextcomponent { + seo { + title = "HeroTrustText component" + description = "Reusable hero trust text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

HeroTrustText

Reusable hero trust text component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HeroTrustText eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="HeroTrustText".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HeroTrustText.wrn

component HeroTrustText {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hero.wrn b/app/pages/components/hero.wrn new file mode 100644 index 00000000..0e8969cf --- /dev/null +++ b/app/pages/components/hero.wrn @@ -0,0 +1,38 @@ +page Herocomponent { + seo { + title = "Hero component" + description = "Reusable hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

Hero

Reusable hero component.

@wrnexus/ui 0.2.6410 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Hero eyebrow="eyebrow" title="Build faster with WRNexusJS" highlight="highlight" description="description" primaryLabel="Get started" />

Legacy mount name: data-component="Hero".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional"Build faster with WRNexusJS"
highlightstringOptional""
descriptionstringOptional""
primaryLabelstringOptional"Get started"
primaryHrefstringOptional"#"
secondaryLabelstringOptional"Learn more"
secondaryHrefstringOptional"#"
alignstringOptional"center"

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Hero.wrn

component Hero {
+  props {
+    class = ""
+    eyebrow = ""
+    title = "Build faster with WRNexusJS"
+    highlight = ""
+    description = ""
+    primaryLabel = "Get started"
+    primaryHref = "#"
+    secondaryLabel = "Learn more"
+    secondaryHref = "#"
+    align = "center"
+  }
+  view {
+    <section class="relative isolate overflow-hidden {class}"><div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]"></div><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><div class="max-w-4xl {align === 'center' ? 'mx-auto text-center' : ''}"><Badge data-show="eyebrow" label="{eyebrow}" variant="brand" /><h1 class="mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{title} <span data-show="highlight" class="bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent">{highlight}</span></h1><p data-show="description" class="mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300">{description}</p><div class="mt-8 flex flex-wrap gap-3 {align === 'center' ? 'justify-center' : ''}"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{secondaryLabel}</a></div><div class="mt-10"><slot /></div></div></div></section>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hex-color-input.wrn b/app/pages/components/hex-color-input.wrn new file mode 100644 index 00000000..a6cec177 --- /dev/null +++ b/app/pages/components/hex-color-input.wrn @@ -0,0 +1,37 @@ +page HexColorInputcomponent { + seo { + title = "HexColorInput component" + description = "Reusable hex color input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

HexColorInput

Reusable hex color input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HexColorInput label="HexColor" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="HexColorInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"HexColor"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HexColorInput.wrn

component HexColorInput {
+  props {
+    label = "HexColor" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hidden-field.wrn b/app/pages/components/hidden-field.wrn new file mode 100644 index 00000000..6543e12b --- /dev/null +++ b/app/pages/components/hidden-field.wrn @@ -0,0 +1,37 @@ +page HiddenFieldcomponent { + seo { + title = "HiddenField component" + description = "Reusable hidden field component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

HiddenField

Reusable hidden field component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HiddenField label="Hidden" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="HiddenField".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Hidden"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HiddenField.wrn

component HiddenField {
+  props {
+    label = "Hidden" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/highlight-text.wrn b/app/pages/components/highlight-text.wrn new file mode 100644 index 00000000..83827e87 --- /dev/null +++ b/app/pages/components/highlight-text.wrn @@ -0,0 +1,34 @@ +page HighlightTextcomponent { + seo { + title = "HighlightText component" + description = "Reusable highlight text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

HighlightText

Reusable highlight text component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HighlightText eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="HighlightText".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HighlightText.wrn

component HighlightText {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/holiday-calendar.wrn b/app/pages/components/holiday-calendar.wrn new file mode 100644 index 00000000..bc3ab6b1 --- /dev/null +++ b/app/pages/components/holiday-calendar.wrn @@ -0,0 +1,34 @@ +page HolidayCalendarcomponent { + seo { + title = "HolidayCalendar component" + description = "Reusable holiday calendar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

HolidayCalendar

Reusable holiday calendar component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HolidayCalendar eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="HolidayCalendar".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HolidayCalendar.wrn

component HolidayCalendar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hostname-input.wrn b/app/pages/components/hostname-input.wrn new file mode 100644 index 00000000..53f31eb4 --- /dev/null +++ b/app/pages/components/hostname-input.wrn @@ -0,0 +1,37 @@ +page HostnameInputcomponent { + seo { + title = "HostnameInput component" + description = "Reusable hostname input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

HostnameInput

Reusable hostname input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HostnameInput label="Hostname" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="HostnameInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Hostname"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HostnameInput.wrn

component HostnameInput {
+  props {
+    label = "Hostname" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hour-picker.wrn b/app/pages/components/hour-picker.wrn new file mode 100644 index 00000000..cbf3fbfb --- /dev/null +++ b/app/pages/components/hour-picker.wrn @@ -0,0 +1,37 @@ +page HourPickercomponent { + seo { + title = "HourPicker component" + description = "Reusable hour picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

HourPicker

Reusable hour picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HourPicker label="Hour" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="HourPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Hour"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HourPicker.wrn

component HourPicker {
+  props {
+    label = "Hour" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hsl-color-input.wrn b/app/pages/components/hsl-color-input.wrn new file mode 100644 index 00000000..5f4f7ae7 --- /dev/null +++ b/app/pages/components/hsl-color-input.wrn @@ -0,0 +1,37 @@ +page HslColorInputcomponent { + seo { + title = "HslColorInput component" + description = "Reusable hsl color input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

HslColorInput

Reusable hsl color input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HslColorInput label="HslColor" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="HslColorInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"HslColor"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HslColorInput.wrn

component HslColorInput {
+  props {
+    label = "HslColor" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/hstack.wrn b/app/pages/components/hstack.wrn new file mode 100644 index 00000000..823e6006 --- /dev/null +++ b/app/pages/components/hstack.wrn @@ -0,0 +1,33 @@ +page hstackcomponent { + seo { + title = "hstack component" + description = "Reusable hstack component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

hstack

Reusable hstack component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<hstack gap="4" align="center" />

Legacy mount name: data-component="hstack".

Props and attributes

PropTypeRequirementDefault
gapstringOptional"4"
alignstringOptional"center"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/hstack.wrn

// 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 {
+    <div class="wire-hstack wire-gap-{gap} wire-items-{align} {class}"><slot></slot></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/html-editor.wrn b/app/pages/components/html-editor.wrn new file mode 100644 index 00000000..bf5283a0 --- /dev/null +++ b/app/pages/components/html-editor.wrn @@ -0,0 +1,37 @@ +page HtmlEditorcomponent { + seo { + title = "HtmlEditor component" + description = "Reusable html editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

HtmlEditor

Reusable html editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HtmlEditor label="Html" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="HtmlEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Html"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HtmlEditor.wrn

component HtmlEditor {
+  props {
+    label = "Html" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/human-approval-step.wrn b/app/pages/components/human-approval-step.wrn new file mode 100644 index 00000000..0e04c15c --- /dev/null +++ b/app/pages/components/human-approval-step.wrn @@ -0,0 +1,34 @@ +page HumanApprovalStepcomponent { + seo { + title = "HumanApprovalStep component" + description = "Reusable human approval step component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

HumanApprovalStep

Reusable human approval step component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<HumanApprovalStep eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="HumanApprovalStep".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/HumanApprovalStep.wrn

component HumanApprovalStep {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/icon-button.wrn b/app/pages/components/icon-button.wrn new file mode 100644 index 00000000..0bf2af66 --- /dev/null +++ b/app/pages/components/icon-button.wrn @@ -0,0 +1,31 @@ +page IconButtoncomponent { + seo { + title = "IconButton component" + description = "Reusable icon button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

IconButton

Reusable icon button component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IconButton label="Action" icon="•" variant="ghost" disabled="false" />

Legacy mount name: data-component="IconButton".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Action"
iconstringOptional"•"
variantstringOptional"ghost"
disabledbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/IconButton.wrn

component IconButton {
+  props {
+    class = ""
+    label = "Action"
+    icon = "•"
+    variant = "ghost"
+    disabled = false
+  }
+  view { <button type="button" aria-label="{label}" title="{label}" disabled="{disabled}" class="inline-flex size-11 items-center justify-center rounded-xl transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {variant === 'primary' ? 'bg-violet-600 text-white hover:bg-violet-700' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'} {class}"><span aria-hidden="true">{icon}</span></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/icon-picker.wrn b/app/pages/components/icon-picker.wrn new file mode 100644 index 00000000..b306344d --- /dev/null +++ b/app/pages/components/icon-picker.wrn @@ -0,0 +1,37 @@ +page IconPickercomponent { + seo { + title = "IconPicker component" + description = "Reusable icon picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

IconPicker

Reusable icon picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IconPicker label="Icon" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="IconPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Icon"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IconPicker.wrn

component IconPicker {
+  props {
+    label = "Icon" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/icon-selector.wrn b/app/pages/components/icon-selector.wrn new file mode 100644 index 00000000..800e1e91 --- /dev/null +++ b/app/pages/components/icon-selector.wrn @@ -0,0 +1,37 @@ +page IconSelectorcomponent { + seo { + title = "IconSelector component" + description = "Reusable icon selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

IconSelector

Reusable icon selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IconSelector label="Icon" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="IconSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Icon"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IconSelector.wrn

component IconSelector {
+  props {
+    label = "Icon" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/icon.wrn b/app/pages/components/icon.wrn new file mode 100644 index 00000000..fc7cc5e0 --- /dev/null +++ b/app/pages/components/icon.wrn @@ -0,0 +1,34 @@ +page Iconcomponent { + seo { + title = "Icon component" + description = "Reusable icon component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Icon

Reusable icon component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Icon eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Icon".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Icon.wrn

component Icon {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/identifier-input.wrn b/app/pages/components/identifier-input.wrn new file mode 100644 index 00000000..039dd3e8 --- /dev/null +++ b/app/pages/components/identifier-input.wrn @@ -0,0 +1,37 @@ +page IdentifierInputcomponent { + seo { + title = "IdentifierInput component" + description = "Reusable identifier input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

IdentifierInput

Reusable identifier input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IdentifierInput label="Identifier" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="IdentifierInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Identifier"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IdentifierInput.wrn

component IdentifierInput {
+  props {
+    label = "Identifier" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/illustration.wrn b/app/pages/components/illustration.wrn new file mode 100644 index 00000000..f3932346 --- /dev/null +++ b/app/pages/components/illustration.wrn @@ -0,0 +1,34 @@ +page Illustrationcomponent { + seo { + title = "Illustration component" + description = "Reusable illustration component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Illustration

Reusable illustration component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Illustration eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Illustration".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Illustration.wrn

component Illustration {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/image-compression-preview.wrn b/app/pages/components/image-compression-preview.wrn new file mode 100644 index 00000000..bc2d7329 --- /dev/null +++ b/app/pages/components/image-compression-preview.wrn @@ -0,0 +1,34 @@ +page ImageCompressionPreviewcomponent { + seo { + title = "ImageCompressionPreview component" + description = "Reusable image compression preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ImageCompressionPreview

Reusable image compression preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ImageCompressionPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ImageCompressionPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ImageCompressionPreview.wrn

component ImageCompressionPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/image-editor.wrn b/app/pages/components/image-editor.wrn new file mode 100644 index 00000000..e7cdc487 --- /dev/null +++ b/app/pages/components/image-editor.wrn @@ -0,0 +1,37 @@ +page ImageEditorcomponent { + seo { + title = "ImageEditor component" + description = "Reusable image editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ImageEditor

Reusable image editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ImageEditor label="Image" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ImageEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Image"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ImageEditor.wrn

component ImageEditor {
+  props {
+    label = "Image" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/image-preview-dialog.wrn b/app/pages/components/image-preview-dialog.wrn new file mode 100644 index 00000000..729b241f --- /dev/null +++ b/app/pages/components/image-preview-dialog.wrn @@ -0,0 +1,31 @@ +page ImagePreviewDialogcomponent { + seo { + title = "ImagePreviewDialog component" + description = "Reusable image preview dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

ImagePreviewDialog

Reusable image preview dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ImagePreviewDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="ImagePreviewDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ImagePreviewDialog.wrn

component ImagePreviewDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/image-selector.wrn b/app/pages/components/image-selector.wrn new file mode 100644 index 00000000..5db9746b --- /dev/null +++ b/app/pages/components/image-selector.wrn @@ -0,0 +1,37 @@ +page ImageSelectorcomponent { + seo { + title = "ImageSelector component" + description = "Reusable image selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ImageSelector

Reusable image selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ImageSelector label="Image" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ImageSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Image"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ImageSelector.wrn

component ImageSelector {
+  props {
+    label = "Image" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/image-upload.wrn b/app/pages/components/image-upload.wrn new file mode 100644 index 00000000..c058c1c8 --- /dev/null +++ b/app/pages/components/image-upload.wrn @@ -0,0 +1,34 @@ +page ImageUploadcomponent { + seo { + title = "ImageUpload component" + description = "Reusable image upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ImageUpload

Reusable image upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ImageUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ImageUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ImageUpload.wrn

component ImageUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/import-progress.wrn b/app/pages/components/import-progress.wrn new file mode 100644 index 00000000..714ec3a3 --- /dev/null +++ b/app/pages/components/import-progress.wrn @@ -0,0 +1,32 @@ +page ImportProgresscomponent { + seo { + title = "ImportProgress component" + description = "Reusable import progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ImportProgress

Reusable import progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ImportProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ImportProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ImportProgress.wrn

component ImportProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/incident-alert.wrn b/app/pages/components/incident-alert.wrn new file mode 100644 index 00000000..ac72c724 --- /dev/null +++ b/app/pages/components/incident-alert.wrn @@ -0,0 +1,32 @@ +page IncidentAlertcomponent { + seo { + title = "IncidentAlert component" + description = "Reusable incident alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

IncidentAlert

Reusable incident alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IncidentAlert label="Incident" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="IncidentAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Incident"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IncidentAlert.wrn

component IncidentAlert {
+  props {
+    label = "Incident" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/incident-banner.wrn b/app/pages/components/incident-banner.wrn new file mode 100644 index 00000000..01cf9f0b --- /dev/null +++ b/app/pages/components/incident-banner.wrn @@ -0,0 +1,32 @@ +page IncidentBannercomponent { + seo { + title = "IncidentBanner component" + description = "Reusable incident banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

IncidentBanner

Reusable incident banner component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IncidentBanner label="Incident" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="IncidentBanner".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Incident"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IncidentBanner.wrn

component IncidentBanner {
+  props {
+    label = "Incident" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/incident-card.wrn b/app/pages/components/incident-card.wrn new file mode 100644 index 00000000..0927426a --- /dev/null +++ b/app/pages/components/incident-card.wrn @@ -0,0 +1,34 @@ +page IncidentCardcomponent { + seo { + title = "IncidentCard component" + description = "Reusable incident card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

IncidentCard

Reusable incident card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IncidentCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="IncidentCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IncidentCard.wrn

component IncidentCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/incident-list.wrn b/app/pages/components/incident-list.wrn new file mode 100644 index 00000000..885d69bc --- /dev/null +++ b/app/pages/components/incident-list.wrn @@ -0,0 +1,31 @@ +page IncidentListcomponent { + seo { + title = "IncidentList component" + description = "Reusable incident list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

IncidentList

Reusable incident list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IncidentList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="IncidentList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IncidentList.wrn

component IncidentList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/incident-response-flow.wrn b/app/pages/components/incident-response-flow.wrn new file mode 100644 index 00000000..1e6a096b --- /dev/null +++ b/app/pages/components/incident-response-flow.wrn @@ -0,0 +1,32 @@ +page IncidentResponseFlowcomponent { + seo { + title = "IncidentResponseFlow component" + description = "Reusable incident response flow component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

IncidentResponseFlow

Reusable incident response flow component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IncidentResponseFlow title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="IncidentResponseFlow".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IncidentResponseFlow.wrn

component IncidentResponseFlow {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/incident-severity-badge.wrn b/app/pages/components/incident-severity-badge.wrn new file mode 100644 index 00000000..b4364b2c --- /dev/null +++ b/app/pages/components/incident-severity-badge.wrn @@ -0,0 +1,32 @@ +page IncidentSeverityBadgecomponent { + seo { + title = "IncidentSeverityBadge component" + description = "Reusable incident severity badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

IncidentSeverityBadge

Reusable incident severity badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IncidentSeverityBadge label="IncidentSeverity" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="IncidentSeverityBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"IncidentSeverity"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IncidentSeverityBadge.wrn

component IncidentSeverityBadge {
+  props {
+    label = "IncidentSeverity" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/incident-timeline.wrn b/app/pages/components/incident-timeline.wrn new file mode 100644 index 00000000..713657be --- /dev/null +++ b/app/pages/components/incident-timeline.wrn @@ -0,0 +1,32 @@ +page IncidentTimelinecomponent { + seo { + title = "IncidentTimeline component" + description = "Reusable incident timeline component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

IncidentTimeline

Reusable incident timeline component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IncidentTimeline title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="IncidentTimeline".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IncidentTimeline.wrn

component IncidentTimeline {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/industry-badge.wrn b/app/pages/components/industry-badge.wrn new file mode 100644 index 00000000..8a0d36ce --- /dev/null +++ b/app/pages/components/industry-badge.wrn @@ -0,0 +1,32 @@ +page IndustryBadgecomponent { + seo { + title = "IndustryBadge component" + description = "Reusable industry badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

IndustryBadge

Reusable industry badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IndustryBadge label="Industry" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="IndustryBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Industry"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IndustryBadge.wrn

component IndustryBadge {
+  props {
+    label = "Industry" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/industry-selector.wrn b/app/pages/components/industry-selector.wrn new file mode 100644 index 00000000..95a31c18 --- /dev/null +++ b/app/pages/components/industry-selector.wrn @@ -0,0 +1,37 @@ +page IndustrySelectorcomponent { + seo { + title = "IndustrySelector component" + description = "Reusable industry selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

IndustrySelector

Reusable industry selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IndustrySelector label="Industry" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="IndustrySelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Industry"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IndustrySelector.wrn

component IndustrySelector {
+  props {
+    label = "Industry" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/info-card.wrn b/app/pages/components/info-card.wrn new file mode 100644 index 00000000..4e8822d9 --- /dev/null +++ b/app/pages/components/info-card.wrn @@ -0,0 +1,30 @@ +page InfoCardcomponent { + seo { + title = "InfoCard component" + description = "Reusable info card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

InfoCard

Reusable info card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<InfoCard title="title" description="description" href="href" />

Legacy mount name: data-component="InfoCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/InfoCard.wrn

component InfoCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--info {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/inline-alert.wrn b/app/pages/components/inline-alert.wrn new file mode 100644 index 00000000..0fa32dcb --- /dev/null +++ b/app/pages/components/inline-alert.wrn @@ -0,0 +1,32 @@ +page InlineAlertcomponent { + seo { + title = "InlineAlert component" + description = "Reusable inline alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

InlineAlert

Reusable inline alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<InlineAlert label="Inline" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="InlineAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Inline"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/InlineAlert.wrn

component InlineAlert {
+  props {
+    label = "Inline" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/inline-code.wrn b/app/pages/components/inline-code.wrn new file mode 100644 index 00000000..dcc3fd37 --- /dev/null +++ b/app/pages/components/inline-code.wrn @@ -0,0 +1,29 @@ +page InlineCodecomponent { + seo { + title = "InlineCode component" + description = "Reusable inline code component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

InlineCode

Reusable inline code component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<InlineCode text="text" align="start" />

Legacy mount name: data-component="InlineCode".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/InlineCode.wrn

component InlineCode {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--small wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/inline.wrn b/app/pages/components/inline.wrn new file mode 100644 index 00000000..2c9d22f4 --- /dev/null +++ b/app/pages/components/inline.wrn @@ -0,0 +1,30 @@ +page Inlinecomponent { + seo { + title = "Inline component" + description = "Reusable inline component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Inline

Reusable inline component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Inline gap="4" />

Legacy mount name: data-component="Inline".

Props and attributes

PropTypeRequirementDefault
gapstringOptional"4"
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Inline.wrn

component Inline {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/input-group.wrn b/app/pages/components/input-group.wrn new file mode 100644 index 00000000..6c44ca04 --- /dev/null +++ b/app/pages/components/input-group.wrn @@ -0,0 +1,37 @@ +page InputGroupcomponent { + seo { + title = "InputGroup component" + description = "Reusable input group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

InputGroup

Reusable input group component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<InputGroup label="Input" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="InputGroup".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Input"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/InputGroup.wrn

component InputGroup {
+  props {
+    label = "Input" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/input.wrn b/app/pages/components/input.wrn new file mode 100644 index 00000000..ba08daee --- /dev/null +++ b/app/pages/components/input.wrn @@ -0,0 +1,34 @@ +page inputcomponent { + seo { + title = "input component" + description = "Reusable input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

input

Reusable input component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<input type="text" name="name" value="value" placeholder="placeholder" />

Legacy mount name: data-component="input".

Props and attributes

PropTypeRequirementDefault
typestringOptional"text"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/input.wrn

// Text input. Pairs with the validation system (name maps to a field).
+component Input {
+  props {
+    type = "text"
+    name = ""
+    value = ""
+    placeholder = ""
+    class = ""
+  }
+  view {
+    <input type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" class="wire-input {class}">
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/inset-panel.wrn b/app/pages/components/inset-panel.wrn new file mode 100644 index 00000000..457a1fb8 --- /dev/null +++ b/app/pages/components/inset-panel.wrn @@ -0,0 +1,27 @@ +page InsetPanelcomponent { + seo { + title = "InsetPanel component" + description = "Reusable inset panel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

InsetPanel

Reusable inset panel component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<InsetPanel />

Legacy mount name: data-component="InsetPanel".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/InsetPanel.wrn

component InsetPanel {
+  props {
+    class = ""
+  }
+  view { <div class="wire-inset-panel {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/integer-input.wrn b/app/pages/components/integer-input.wrn new file mode 100644 index 00000000..f3c67969 --- /dev/null +++ b/app/pages/components/integer-input.wrn @@ -0,0 +1,37 @@ +page IntegerInputcomponent { + seo { + title = "IntegerInput component" + description = "Reusable integer input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

IntegerInput

Reusable integer input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IntegerInput label="Integer" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="IntegerInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Integer"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IntegerInput.wrn

component IntegerInput {
+  props {
+    label = "Integer" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/integration-card.wrn b/app/pages/components/integration-card.wrn new file mode 100644 index 00000000..a2d3917d --- /dev/null +++ b/app/pages/components/integration-card.wrn @@ -0,0 +1,30 @@ +page IntegrationCardcomponent { + seo { + title = "IntegrationCard component" + description = "Reusable integration card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

IntegrationCard

Reusable integration card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IntegrationCard title="title" description="description" href="href" />

Legacy mount name: data-component="IntegrationCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IntegrationCard.wrn

component IntegrationCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/invoice-line-item.wrn b/app/pages/components/invoice-line-item.wrn new file mode 100644 index 00000000..995ee721 --- /dev/null +++ b/app/pages/components/invoice-line-item.wrn @@ -0,0 +1,34 @@ +page InvoiceLineItemcomponent { + seo { + title = "InvoiceLineItem component" + description = "Reusable invoice line item component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

InvoiceLineItem

Reusable invoice line item component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<InvoiceLineItem eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="InvoiceLineItem".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/InvoiceLineItem.wrn

component InvoiceLineItem {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/invoice-summary.wrn b/app/pages/components/invoice-summary.wrn new file mode 100644 index 00000000..4cdf8314 --- /dev/null +++ b/app/pages/components/invoice-summary.wrn @@ -0,0 +1,34 @@ +page InvoiceSummarycomponent { + seo { + title = "InvoiceSummary component" + description = "Reusable invoice summary component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

InvoiceSummary

Reusable invoice summary component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<InvoiceSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="InvoiceSummary".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/InvoiceSummary.wrn

component InvoiceSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/ip-address-input.wrn b/app/pages/components/ip-address-input.wrn new file mode 100644 index 00000000..389b8158 --- /dev/null +++ b/app/pages/components/ip-address-input.wrn @@ -0,0 +1,37 @@ +page IpAddressInputcomponent { + seo { + title = "IpAddressInput component" + description = "Reusable ip address input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

IpAddressInput

Reusable ip address input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IpAddressInput label="IpAddress" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="IpAddressInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"IpAddress"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/IpAddressInput.wrn

component IpAddressInput {
+  props {
+    label = "IpAddress" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/job-card.wrn b/app/pages/components/job-card.wrn new file mode 100644 index 00000000..61042934 --- /dev/null +++ b/app/pages/components/job-card.wrn @@ -0,0 +1,34 @@ +page JobCardcomponent { + seo { + title = "JobCard component" + description = "Reusable job card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

JobCard

Reusable job card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<JobCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="JobCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/JobCard.wrn

component JobCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/job-progress.wrn b/app/pages/components/job-progress.wrn new file mode 100644 index 00000000..c5517689 --- /dev/null +++ b/app/pages/components/job-progress.wrn @@ -0,0 +1,32 @@ +page JobProgresscomponent { + seo { + title = "JobProgress component" + description = "Reusable job progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

JobProgress

Reusable job progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<JobProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="JobProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/JobProgress.wrn

component JobProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/job-title-input.wrn b/app/pages/components/job-title-input.wrn new file mode 100644 index 00000000..bb8143b6 --- /dev/null +++ b/app/pages/components/job-title-input.wrn @@ -0,0 +1,37 @@ +page JobTitleInputcomponent { + seo { + title = "JobTitleInput component" + description = "Reusable job title input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

JobTitleInput

Reusable job title input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<JobTitleInput label="JobTitle" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="JobTitleInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"JobTitle"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/JobTitleInput.wrn

component JobTitleInput {
+  props {
+    label = "JobTitle" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/json-input.wrn b/app/pages/components/json-input.wrn new file mode 100644 index 00000000..c8ed3298 --- /dev/null +++ b/app/pages/components/json-input.wrn @@ -0,0 +1,37 @@ +page JsonInputcomponent { + seo { + title = "JsonInput component" + description = "Reusable json input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

JsonInput

Reusable json input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<JsonInput label="Json" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="JsonInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Json"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/JsonInput.wrn

component JsonInput {
+  props {
+    label = "Json" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/json-viewer.wrn b/app/pages/components/json-viewer.wrn new file mode 100644 index 00000000..fad831c8 --- /dev/null +++ b/app/pages/components/json-viewer.wrn @@ -0,0 +1,34 @@ +page JsonViewercomponent { + seo { + title = "JsonViewer component" + description = "Reusable json viewer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

JsonViewer

Reusable json viewer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<JsonViewer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="JsonViewer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/JsonViewer.wrn

component JsonViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/key-value-table.wrn b/app/pages/components/key-value-table.wrn new file mode 100644 index 00000000..4c03ea52 --- /dev/null +++ b/app/pages/components/key-value-table.wrn @@ -0,0 +1,31 @@ +page KeyValueTablecomponent { + seo { + title = "KeyValueTable component" + description = "Reusable key value table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

KeyValueTable

Reusable key value table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<KeyValueTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="KeyValueTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/KeyValueTable.wrn

component KeyValueTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/kyc-document-upload.wrn b/app/pages/components/kyc-document-upload.wrn new file mode 100644 index 00000000..aedd8602 --- /dev/null +++ b/app/pages/components/kyc-document-upload.wrn @@ -0,0 +1,34 @@ +page KycDocumentUploadcomponent { + seo { + title = "KycDocumentUpload component" + description = "Reusable kyc document upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

KycDocumentUpload

Reusable kyc document upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<KycDocumentUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="KycDocumentUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/KycDocumentUpload.wrn

component KycDocumentUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/language-selector.wrn b/app/pages/components/language-selector.wrn new file mode 100644 index 00000000..512b27cc --- /dev/null +++ b/app/pages/components/language-selector.wrn @@ -0,0 +1,37 @@ +page LanguageSelectorcomponent { + seo { + title = "LanguageSelector component" + description = "Reusable language selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LanguageSelector

Reusable language selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LanguageSelector label="Language" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LanguageSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Language"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LanguageSelector.wrn

component LanguageSelector {
+  props {
+    label = "Language" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/language-switcher.wrn b/app/pages/components/language-switcher.wrn new file mode 100644 index 00000000..88aaba28 --- /dev/null +++ b/app/pages/components/language-switcher.wrn @@ -0,0 +1,34 @@ +page LanguageSwitchercomponent { + seo { + title = "LanguageSwitcher component" + description = "Reusable language switcher component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

LanguageSwitcher

Reusable language switcher component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LanguageSwitcher eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="LanguageSwitcher".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LanguageSwitcher.wrn

component LanguageSwitcher {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/last-name-input.wrn b/app/pages/components/last-name-input.wrn new file mode 100644 index 00000000..eebd93ce --- /dev/null +++ b/app/pages/components/last-name-input.wrn @@ -0,0 +1,37 @@ +page LastNameInputcomponent { + seo { + title = "LastNameInput component" + description = "Reusable last name input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LastNameInput

Reusable last name input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LastNameInput label="LastName" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LastNameInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LastName"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LastNameInput.wrn

component LastNameInput {
+  props {
+    label = "LastName" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/latency-metric.wrn b/app/pages/components/latency-metric.wrn new file mode 100644 index 00000000..9c523f02 --- /dev/null +++ b/app/pages/components/latency-metric.wrn @@ -0,0 +1,32 @@ +page LatencyMetriccomponent { + seo { + title = "LatencyMetric component" + description = "Reusable latency metric component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

LatencyMetric

Reusable latency metric component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LatencyMetric title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="LatencyMetric".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LatencyMetric.wrn

component LatencyMetric {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/latitude-input.wrn b/app/pages/components/latitude-input.wrn new file mode 100644 index 00000000..24cc977d --- /dev/null +++ b/app/pages/components/latitude-input.wrn @@ -0,0 +1,37 @@ +page LatitudeInputcomponent { + seo { + title = "LatitudeInput component" + description = "Reusable latitude input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LatitudeInput

Reusable latitude input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LatitudeInput label="Latitude" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LatitudeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Latitude"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LatitudeInput.wrn

component LatitudeInput {
+  props {
+    label = "Latitude" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/lead-text.wrn b/app/pages/components/lead-text.wrn new file mode 100644 index 00000000..9eb02fe5 --- /dev/null +++ b/app/pages/components/lead-text.wrn @@ -0,0 +1,29 @@ +page LeadTextcomponent { + seo { + title = "LeadText component" + description = "Reusable lead text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

LeadText

Reusable lead text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LeadText text="text" align="start" />

Legacy mount name: data-component="LeadText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LeadText.wrn

component LeadText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--lead wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/leadership-grid.wrn b/app/pages/components/leadership-grid.wrn new file mode 100644 index 00000000..dc7db0cc --- /dev/null +++ b/app/pages/components/leadership-grid.wrn @@ -0,0 +1,31 @@ +page LeadershipGridcomponent { + seo { + title = "LeadershipGrid component" + description = "Reusable leadership grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

LeadershipGrid

Reusable leadership grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LeadershipGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="LeadershipGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LeadershipGrid.wrn

component LeadershipGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-acceptance-notice.wrn b/app/pages/components/legal-acceptance-notice.wrn new file mode 100644 index 00000000..d615e686 --- /dev/null +++ b/app/pages/components/legal-acceptance-notice.wrn @@ -0,0 +1,32 @@ +page LegalAcceptanceNoticecomponent { + seo { + title = "LegalAcceptanceNotice component" + description = "Reusable legal acceptance notice component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

LegalAcceptanceNotice

Reusable legal acceptance notice component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalAcceptanceNotice label="LegalAcceptance" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="LegalAcceptanceNotice".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LegalAcceptance"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalAcceptanceNotice.wrn

component LegalAcceptanceNotice {
+  props {
+    label = "LegalAcceptance" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-bullet-list.wrn b/app/pages/components/legal-bullet-list.wrn new file mode 100644 index 00000000..342cae33 --- /dev/null +++ b/app/pages/components/legal-bullet-list.wrn @@ -0,0 +1,31 @@ +page LegalBulletListcomponent { + seo { + title = "LegalBulletList component" + description = "Reusable legal bullet list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

LegalBulletList

Reusable legal bullet list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalBulletList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="LegalBulletList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalBulletList.wrn

component LegalBulletList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-contact-block.wrn b/app/pages/components/legal-contact-block.wrn new file mode 100644 index 00000000..f3a66485 --- /dev/null +++ b/app/pages/components/legal-contact-block.wrn @@ -0,0 +1,34 @@ +page LegalContactBlockcomponent { + seo { + title = "LegalContactBlock component" + description = "Reusable legal contact block component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

LegalContactBlock

Reusable legal contact block component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalContactBlock eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="LegalContactBlock".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalContactBlock.wrn

component LegalContactBlock {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-definition-list.wrn b/app/pages/components/legal-definition-list.wrn new file mode 100644 index 00000000..7d0cd5bc --- /dev/null +++ b/app/pages/components/legal-definition-list.wrn @@ -0,0 +1,31 @@ +page LegalDefinitionListcomponent { + seo { + title = "LegalDefinitionList component" + description = "Reusable legal definition list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

LegalDefinitionList

Reusable legal definition list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalDefinitionList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="LegalDefinitionList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalDefinitionList.wrn

component LegalDefinitionList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-document-header.wrn b/app/pages/components/legal-document-header.wrn new file mode 100644 index 00000000..baba429d --- /dev/null +++ b/app/pages/components/legal-document-header.wrn @@ -0,0 +1,31 @@ +page LegalDocumentHeadercomponent { + seo { + title = "LegalDocumentHeader component" + description = "Reusable legal document header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

LegalDocumentHeader

Reusable legal document header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalDocumentHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="LegalDocumentHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalDocumentHeader.wrn

component LegalDocumentHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-document-layout.wrn b/app/pages/components/legal-document-layout.wrn new file mode 100644 index 00000000..9f4a34b0 --- /dev/null +++ b/app/pages/components/legal-document-layout.wrn @@ -0,0 +1,32 @@ +page LegalDocumentLayoutcomponent { + seo { + title = "LegalDocumentLayout component" + description = "Reusable legal document layout component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

LegalDocumentLayout

Reusable legal document layout component.

@wrnexus/ui 0.2.644 props2 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalDocumentLayout title="Legal document" effectiveDate="effectiveDate" updatedDate="updatedDate" />

Legacy mount name: data-component="LegalDocumentLayout".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Legal document"
effectiveDatestringOptional""
updatedDatestringOptional""

Slots

  • toc
  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalDocumentLayout.wrn

component LegalDocumentLayout {
+  props {
+    class = ""
+    title = "Legal document"
+    effectiveDate = ""
+    updatedDate = ""
+  }
+  view {
+    <article class="grid max-w-7xl gap-10 lg:grid-cols-[16rem_minmax(0,1fr)] {class}"><aside class="lg:sticky lg:top-24 lg:self-start"><div class="text-sm font-semibold">On this page</div><nav class="mt-4 text-sm text-slate-500"><slot name="toc" /></nav></aside><main class="min-w-0 max-w-3xl"><header class="border-b border-slate-200 pb-8 dark:border-slate-800"><h1 class="text-4xl font-black tracking-tight">{title}</h1><div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-500"><span data-show="effectiveDate">Effective: {effectiveDate}</span><span data-show="updatedDate">Updated: {updatedDate}</span></div></header><div class="prose prose-slate mt-8 max-w-none dark:prose-invert"><slot /></div></main></article>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-hero.wrn b/app/pages/components/legal-hero.wrn new file mode 100644 index 00000000..a671b2dc --- /dev/null +++ b/app/pages/components/legal-hero.wrn @@ -0,0 +1,31 @@ +page LegalHerocomponent { + seo { + title = "LegalHero component" + description = "Reusable legal hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

LegalHero

Reusable legal hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="LegalHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalHero.wrn

component LegalHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-language-selector.wrn b/app/pages/components/legal-language-selector.wrn new file mode 100644 index 00000000..55ce00ab --- /dev/null +++ b/app/pages/components/legal-language-selector.wrn @@ -0,0 +1,37 @@ +page LegalLanguageSelectorcomponent { + seo { + title = "LegalLanguageSelector component" + description = "Reusable legal language selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LegalLanguageSelector

Reusable legal language selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalLanguageSelector label="LegalLanguage" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LegalLanguageSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LegalLanguage"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalLanguageSelector.wrn

component LegalLanguageSelector {
+  props {
+    label = "LegalLanguage" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-notice.wrn b/app/pages/components/legal-notice.wrn new file mode 100644 index 00000000..08e46d07 --- /dev/null +++ b/app/pages/components/legal-notice.wrn @@ -0,0 +1,32 @@ +page LegalNoticecomponent { + seo { + title = "LegalNotice component" + description = "Reusable legal notice component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

LegalNotice

Reusable legal notice component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalNotice label="Legal" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="LegalNotice".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Legal"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalNotice.wrn

component LegalNotice {
+  props {
+    label = "Legal" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-page-shell.wrn b/app/pages/components/legal-page-shell.wrn new file mode 100644 index 00000000..1c65edd6 --- /dev/null +++ b/app/pages/components/legal-page-shell.wrn @@ -0,0 +1,27 @@ +page LegalPageShellcomponent { + seo { + title = "LegalPageShell component" + description = "Reusable legal page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

LegalPageShell

Reusable legal page shell component.

@wrnexus/ui 0.2.641 props2 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalPageShell />

Legacy mount name: data-component="LegalPageShell".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • navigation
  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalPageShell.wrn

component LegalPageShell {
+  props {
+    class = ""
+  }
+  view { <div class="wire-page-shell wire-page-shell--legal {class}"><aside class="wire-page-shell__aside"><slot name="navigation" /></aside><main class="wire-page-shell__main"><slot /></main></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-print-button.wrn b/app/pages/components/legal-print-button.wrn new file mode 100644 index 00000000..a129f29e --- /dev/null +++ b/app/pages/components/legal-print-button.wrn @@ -0,0 +1,32 @@ +page LegalPrintButtoncomponent { + seo { + title = "LegalPrintButton component" + description = "Reusable legal print button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

LegalPrintButton

Reusable legal print button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalPrintButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="LegalPrintButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalPrintButton.wrn

component LegalPrintButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-region-selector.wrn b/app/pages/components/legal-region-selector.wrn new file mode 100644 index 00000000..80b9002e --- /dev/null +++ b/app/pages/components/legal-region-selector.wrn @@ -0,0 +1,37 @@ +page LegalRegionSelectorcomponent { + seo { + title = "LegalRegionSelector component" + description = "Reusable legal region selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LegalRegionSelector

Reusable legal region selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalRegionSelector label="LegalRegion" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LegalRegionSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LegalRegion"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalRegionSelector.wrn

component LegalRegionSelector {
+  props {
+    label = "LegalRegion" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-section.wrn b/app/pages/components/legal-section.wrn new file mode 100644 index 00000000..d5bfe9dc --- /dev/null +++ b/app/pages/components/legal-section.wrn @@ -0,0 +1,31 @@ +page LegalSectioncomponent { + seo { + title = "LegalSection component" + description = "Reusable legal section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

LegalSection

Reusable legal section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="LegalSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalSection.wrn

component LegalSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-summary.wrn b/app/pages/components/legal-summary.wrn new file mode 100644 index 00000000..d856d1a2 --- /dev/null +++ b/app/pages/components/legal-summary.wrn @@ -0,0 +1,34 @@ +page LegalSummarycomponent { + seo { + title = "LegalSummary component" + description = "Reusable legal summary component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

LegalSummary

Reusable legal summary component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="LegalSummary".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalSummary.wrn

component LegalSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-table-of-contents.wrn b/app/pages/components/legal-table-of-contents.wrn new file mode 100644 index 00000000..e4307779 --- /dev/null +++ b/app/pages/components/legal-table-of-contents.wrn @@ -0,0 +1,29 @@ +page LegalTableOfContentscomponent { + seo { + title = "LegalTableOfContents component" + description = "Reusable legal table of contents component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

LegalTableOfContents

Reusable legal table of contents component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalTableOfContents title="On this page" items="[]" />

Legacy mount name: data-component="LegalTableOfContents".

Props and attributes

PropTypeRequirementDefault
titlestringOptional"On this page"
itemsstringOptional[]
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalTableOfContents.wrn

component LegalTableOfContents {
+  props {
+    title = "On this page"
+    items = []
+    class = ""
+  }
+  view { <nav aria-label="{title}" class="wire-legal-toc {class}"><h2>{title}</h2><ol>{#each items as item}<li><a href="{item.href}">{item.label}</a></li>{/each}</ol></nav> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-table.wrn b/app/pages/components/legal-table.wrn new file mode 100644 index 00000000..3d03b44b --- /dev/null +++ b/app/pages/components/legal-table.wrn @@ -0,0 +1,31 @@ +page LegalTablecomponent { + seo { + title = "LegalTable component" + description = "Reusable legal table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

LegalTable

Reusable legal table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="LegalTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalTable.wrn

component LegalTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/legal-version-badge.wrn b/app/pages/components/legal-version-badge.wrn new file mode 100644 index 00000000..bf8d2ff6 --- /dev/null +++ b/app/pages/components/legal-version-badge.wrn @@ -0,0 +1,32 @@ +page LegalVersionBadgecomponent { + seo { + title = "LegalVersionBadge component" + description = "Reusable legal version badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

LegalVersionBadge

Reusable legal version badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalVersionBadge label="LegalVersion" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="LegalVersionBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LegalVersion"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalVersionBadge.wrn

component LegalVersionBadge {
+  props {
+    label = "LegalVersion" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/letter-spacing-picker.wrn b/app/pages/components/letter-spacing-picker.wrn new file mode 100644 index 00000000..4edb485a --- /dev/null +++ b/app/pages/components/letter-spacing-picker.wrn @@ -0,0 +1,37 @@ +page LetterSpacingPickercomponent { + seo { + title = "LetterSpacingPicker component" + description = "Reusable letter spacing picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LetterSpacingPicker

Reusable letter spacing picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LetterSpacingPicker label="LetterSpacing" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LetterSpacingPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LetterSpacing"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LetterSpacingPicker.wrn

component LetterSpacingPicker {
+  props {
+    label = "LetterSpacing" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/license-key-input.wrn b/app/pages/components/license-key-input.wrn new file mode 100644 index 00000000..174093e0 --- /dev/null +++ b/app/pages/components/license-key-input.wrn @@ -0,0 +1,37 @@ +page LicenseKeyInputcomponent { + seo { + title = "LicenseKeyInput component" + description = "Reusable license key input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LicenseKeyInput

Reusable license key input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LicenseKeyInput label="LicenseKey" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LicenseKeyInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LicenseKey"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LicenseKeyInput.wrn

component LicenseKeyInput {
+  props {
+    label = "LicenseKey" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/lightbox.wrn b/app/pages/components/lightbox.wrn new file mode 100644 index 00000000..460614f7 --- /dev/null +++ b/app/pages/components/lightbox.wrn @@ -0,0 +1,31 @@ +page Lightboxcomponent { + seo { + title = "Lightbox component" + description = "Reusable lightbox component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

Lightbox

Reusable lightbox component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Lightbox title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="Lightbox".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Lightbox.wrn

component Lightbox {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/line-chart.wrn b/app/pages/components/line-chart.wrn new file mode 100644 index 00000000..27a7578e --- /dev/null +++ b/app/pages/components/line-chart.wrn @@ -0,0 +1,32 @@ +page LineChartcomponent { + seo { + title = "LineChart component" + description = "Reusable line chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

LineChart

Reusable line chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LineChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="LineChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LineChart.wrn

component LineChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/line-height-picker.wrn b/app/pages/components/line-height-picker.wrn new file mode 100644 index 00000000..003d76bd --- /dev/null +++ b/app/pages/components/line-height-picker.wrn @@ -0,0 +1,37 @@ +page LineHeightPickercomponent { + seo { + title = "LineHeightPicker component" + description = "Reusable line height picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LineHeightPicker

Reusable line height picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LineHeightPicker label="LineHeight" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LineHeightPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"LineHeight"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LineHeightPicker.wrn

component LineHeightPicker {
+  props {
+    label = "LineHeight" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/link-button.wrn b/app/pages/components/link-button.wrn new file mode 100644 index 00000000..909a764a --- /dev/null +++ b/app/pages/components/link-button.wrn @@ -0,0 +1,30 @@ +page LinkButtoncomponent { + seo { + title = "LinkButton component" + description = "Reusable link button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

LinkButton

Reusable link button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LinkButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="LinkButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LinkButton.wrn

component LinkButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/link.wrn b/app/pages/components/link.wrn new file mode 100644 index 00000000..1bb29f75 --- /dev/null +++ b/app/pages/components/link.wrn @@ -0,0 +1,32 @@ +page Linkcomponent { + seo { + title = "Link component" + description = "Reusable link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Link

Reusable link component.

@wrnexus/ui 0.2.644 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Link href="#" label="Link" external="false" />

Legacy mount name: data-component="Link".

Props and attributes

PropTypeRequirementDefault
hrefstringOptional"#"
labelstringOptional"Link"
externalbooleanOptionalfalse
classNamestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Link.wrn

component Link {
+  props {
+    href = "#"
+    label = "Link"
+    external = false
+    className = ""
+  }
+  view {
+    <a href="{href}" target="{external ? '_blank' : ''}" rel="{external ? 'noreferrer' : ''}" class="font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 {className}">{label}<span data-show="external" aria-hidden="true"> ↗</span></a>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/list.wrn b/app/pages/components/list.wrn new file mode 100644 index 00000000..279f7e08 --- /dev/null +++ b/app/pages/components/list.wrn @@ -0,0 +1,31 @@ +page Listcomponent { + seo { + title = "List component" + description = "Reusable list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

List

Reusable list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<List title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="List".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/List.wrn

component List {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/loading-button.wrn b/app/pages/components/loading-button.wrn new file mode 100644 index 00000000..46b56b26 --- /dev/null +++ b/app/pages/components/loading-button.wrn @@ -0,0 +1,35 @@ +page LoadingButtoncomponent { + seo { + title = "LoadingButton component" + description = "Reusable loading button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

LoadingButton

Reusable loading button component.

@wrnexus/ui 0.2.647 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LoadingButton label="Continue" loadingLabel="Loading…" loading="false" disabled="false" type="button" />

Legacy mount name: data-component="LoadingButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Continue"
loadingLabelstringOptional"Loading…"
loadingbooleanOptionalfalse
disabledbooleanOptionalfalse
typestringOptional"button"
variantstringOptional"primary"
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/LoadingButton.wrn

component LoadingButton {
+  props {
+    label = "Continue"
+    loadingLabel = "Loading…"
+    loading = false
+    disabled = false
+    type = "button"
+    variant = "primary"
+    class = ""
+  }
+  view {
+    <button type="{type}" disabled="{disabled || loading}" aria-disabled="{disabled || loading}" aria-busy="{loading}" class="wire-btn wire-btn--{variant} wire-loading-button {class}"><span data-show="loading" class="wire-spinner wire-spinner--inline" aria-hidden="true"></span><span>{loading ? loadingLabel : label}</span></button>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/locale-selector.wrn b/app/pages/components/locale-selector.wrn new file mode 100644 index 00000000..619236e3 --- /dev/null +++ b/app/pages/components/locale-selector.wrn @@ -0,0 +1,37 @@ +page LocaleSelectorcomponent { + seo { + title = "LocaleSelector component" + description = "Reusable locale selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LocaleSelector

Reusable locale selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LocaleSelector label="Locale" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LocaleSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Locale"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LocaleSelector.wrn

component LocaleSelector {
+  props {
+    label = "Locale" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/localized-route-link.wrn b/app/pages/components/localized-route-link.wrn new file mode 100644 index 00000000..1d6a1fa9 --- /dev/null +++ b/app/pages/components/localized-route-link.wrn @@ -0,0 +1,32 @@ +page LocalizedRouteLinkcomponent { + seo { + title = "LocalizedRouteLink component" + description = "Reusable localized route link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

LocalizedRouteLink

Reusable localized route link component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LocalizedRouteLink label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="LocalizedRouteLink".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LocalizedRouteLink.wrn

component LocalizedRouteLink {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/location-picker.wrn b/app/pages/components/location-picker.wrn new file mode 100644 index 00000000..e1a2f78e --- /dev/null +++ b/app/pages/components/location-picker.wrn @@ -0,0 +1,37 @@ +page LocationPickercomponent { + seo { + title = "LocationPicker component" + description = "Reusable location picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LocationPicker

Reusable location picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LocationPicker label="Location" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LocationPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Location"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LocationPicker.wrn

component LocationPicker {
+  props {
+    label = "Location" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/log-table.wrn b/app/pages/components/log-table.wrn new file mode 100644 index 00000000..c38428d9 --- /dev/null +++ b/app/pages/components/log-table.wrn @@ -0,0 +1,31 @@ +page LogTablecomponent { + seo { + title = "LogTable component" + description = "Reusable log table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

LogTable

Reusable log table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LogTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="LogTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LogTable.wrn

component LogTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/logo-cloud.wrn b/app/pages/components/logo-cloud.wrn new file mode 100644 index 00000000..ecdd5925 --- /dev/null +++ b/app/pages/components/logo-cloud.wrn @@ -0,0 +1,171 @@ +page LogoCloudcomponent { + seo { + title = "LogoCloud component" + description = "Reusable logo cloud component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

LogoCloud

Reusable logo cloud component.

@wrnexus/ui 0.2.6411 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LogoCloud eyebrow="eyebrow" title="Trusted by teams building modern products" description="description" logos="[]" centered="true" />

Legacy mount name: data-component="LogoCloud".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional"Trusted by teams building modern products"
descriptionstringOptional""
logosstringOptional[]
centeredbooleanOptionaltrue
compactbooleanOptionalfalse
variantstringOptional"strip"
grayscalebooleanOptionaltrue
showNamesbooleanOptionalfalse
maxItemsnumberOptional8

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/LogoCloud.wrn

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 {
+        <section
+            aria-labelledby="logo-cloud-title"
+            class="w-full px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
+            class:py-10="compact"
+            class:sm:py-12="compact"
+            class:py-14="!compact"
+            class:sm:py-16="!compact"
+            class:lg:py-20="!compact"
+            class:hidden="logos.length === 0"
+        >
+            <div
+                class=" relative mx-auto w-full max-w-7xl overflow-hidden {variant === 'card' ? 'rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50/80 via-white to-violet-50/70 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20' : '' } "
+            >
+                <!-- Decorative background -->
+                <div
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 overflow-hidden"
+                    class:hidden="variant !== 'card'"
+                >
+                    <div class="absolute -right-24 -top-28 h-64 w-64 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10"></div>
+
+                    <div class="absolute -bottom-28 -left-24 h-64 w-64 rounded-full bg-violet-300/15 blur-3xl dark:bg-violet-500/5"></div>
+
+                    <div class="absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-400/60 to-transparent dark:via-indigo-400/20"></div>
+                </div>
+
+                <div
+                    class="relative"
+                    class:px-6="compact"
+                    class:py-8="compact"
+                    class:sm:px-8="compact"
+                    class:sm:py-10="compact"
+                    class:px-7="!compact"
+                    class:py-10="!compact"
+                    class:sm:px-10="!compact"
+                    class:sm:py-12="!compact"
+                    class:lg:px-12="!compact"
+                    class:lg:py-14="!compact"
+                >
+                    <!-- Heading -->
+                    <div
+                        class="max-w-3xl"
+                        class:mx-auto="centered"
+                        class:text-center="centered"
+                    >
+                        <p
+                            class="text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
+                            class:hidden="eyebrow === ''"
+                        >
+                            {eyebrow}
+                        </p>
+
+                        <h2
+                            id="logo-cloud-title"
+                            class=" font-bold leading-tight tracking-tight text-slate-950 dark:text-white {eyebrow !== '' ? 'mt-3' : ''} {compact ? 'text-2xl sm:text-3xl' : 'text-3xl sm:text-4xl' } "
+                        >
+                            {title}
+                        </h2>
+
+                        <p
+                            class=" mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400 {centered ? 'mx-auto max-w-2xl' : 'max-w-2xl'} {!compact ? 'sm:text-base' : ''} "
+                            class:hidden="description === ''"
+                        >
+                            {description}
+                        </p>
+                    </div>
+
+                    <!-- Dynamic logo list -->
+                    <div
+                        class=" mt-8 flex flex-wrap justify-center {variant === 'cards' ? 'gap-4 sm:mt-10' : 'items-center gap-x-10 gap-y-7 sm:mt-10 lg:gap-x-14' } "
+                    >
+                        {#each logos.slice(0, maxItems) as logo}
+                        <a
+                            href="{logo.href}"
+                            target="{logo.external ? '_blank' : '_self'}"
+                            rel="{logo.external ? 'noopener noreferrer' : ''}"
+                            aria-label="{logo.name}"
+                            class=" group min-w-0 transition duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 {variant === 'cards' ? 'flex w-full items-center gap-4 rounded-2xl border border-slate-200/80 bg-white/80 p-4 shadow-sm backdrop-blur-sm hover:-translate-y-1 hover:border-indigo-300 hover:bg-white hover:shadow-lg dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 sm:w-[calc(50%-0.5rem)] lg:w-[calc(25%-0.75rem)]' : 'flex h-12 items-center justify-center px-2 opacity-70 hover:opacity-100' } "
+                        >
+                            <!-- Logo mark -->
+                            <div
+                                class=" flex shrink-0 items-center justify-center {variant === 'cards' ? 'h-12 w-12 rounded-xl bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' : '' } "
+                            >
+                                <img
+                                    src="{logo.src}"
+                                    alt="{logo.alt !== '' ? logo.alt : logo.name}"
+                                    loading="lazy"
+                                    class=" block object-contain transition duration-200 {variant === 'cards' ? 'max-h-7 max-w-9' : 'max-h-8 max-w-36' } {grayscale ? 'grayscale group-hover:grayscale-0' : '' } "
+                                />
+
+                                <!-- Fallback mark -->
+                                <span
+                                    class=" hidden h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-sm font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300 "
+                                >
+                                    {logo.name.slice(0, 1)}
+                                </span>
+                            </div>
+
+                            <!-- Partner text -->
+                            <div
+                                class="min-w-0"
+                                class:hidden="variant !== 'cards' && !showNames"
+                            >
+                                <p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-200">
+                                    {logo.name}
+                                </p>
+
+                                <p
+                                    class="mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400"
+                                    class:hidden="logo.description === ''"
+                                >
+                                    {logo.description}
+                                </p>
+                            </div>
+                        </a>
+                        {/each}
+                    </div>
+
+                    <!-- Optional count -->
+                    <p
+                        class="mt-6 text-sm text-slate-500 dark:text-slate-400"
+                        class:hidden="logos.length <= maxItems"
+                        class:text-center="centered"
+                    >
+                        And {logos.length - maxItems} more teams using WRNexusJS.
+                    </p>
+                </div>
+            </div>
+        </section>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/logo-upload.wrn b/app/pages/components/logo-upload.wrn new file mode 100644 index 00000000..fc27eb08 --- /dev/null +++ b/app/pages/components/logo-upload.wrn @@ -0,0 +1,34 @@ +page LogoUploadcomponent { + seo { + title = "LogoUpload component" + description = "Reusable logo upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

LogoUpload

Reusable logo upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LogoUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="LogoUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LogoUpload.wrn

component LogoUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/logo.wrn b/app/pages/components/logo.wrn new file mode 100644 index 00000000..4f082b38 --- /dev/null +++ b/app/pages/components/logo.wrn @@ -0,0 +1,34 @@ +page Logocomponent { + seo { + title = "Logo component" + description = "Reusable logo component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Logo

Reusable logo component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Logo eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Logo".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Logo.wrn

component Logo {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/logout-dialog.wrn b/app/pages/components/logout-dialog.wrn new file mode 100644 index 00000000..2bc57328 --- /dev/null +++ b/app/pages/components/logout-dialog.wrn @@ -0,0 +1,31 @@ +page LogoutDialogcomponent { + seo { + title = "LogoutDialog component" + description = "Reusable logout dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

LogoutDialog

Reusable logout dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LogoutDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="LogoutDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LogoutDialog.wrn

component LogoutDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/longitude-input.wrn b/app/pages/components/longitude-input.wrn new file mode 100644 index 00000000..f1f72b48 --- /dev/null +++ b/app/pages/components/longitude-input.wrn @@ -0,0 +1,37 @@ +page LongitudeInputcomponent { + seo { + title = "LongitudeInput component" + description = "Reusable longitude input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

LongitudeInput

Reusable longitude input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LongitudeInput label="Longitude" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="LongitudeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Longitude"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LongitudeInput.wrn

component LongitudeInput {
+  props {
+    label = "Longitude" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/maintenance-alert.wrn b/app/pages/components/maintenance-alert.wrn new file mode 100644 index 00000000..0417d71b --- /dev/null +++ b/app/pages/components/maintenance-alert.wrn @@ -0,0 +1,32 @@ +page MaintenanceAlertcomponent { + seo { + title = "MaintenanceAlert component" + description = "Reusable maintenance alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

MaintenanceAlert

Reusable maintenance alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MaintenanceAlert label="Maintenance" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="MaintenanceAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Maintenance"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MaintenanceAlert.wrn

component MaintenanceAlert {
+  props {
+    label = "Maintenance" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/maintenance-banner.wrn b/app/pages/components/maintenance-banner.wrn new file mode 100644 index 00000000..483ce740 --- /dev/null +++ b/app/pages/components/maintenance-banner.wrn @@ -0,0 +1,32 @@ +page MaintenanceBannercomponent { + seo { + title = "MaintenanceBanner component" + description = "Reusable maintenance banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

MaintenanceBanner

Reusable maintenance banner component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MaintenanceBanner label="Maintenance" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="MaintenanceBanner".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Maintenance"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MaintenanceBanner.wrn

component MaintenanceBanner {
+  props {
+    label = "Maintenance" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/maintenance-card.wrn b/app/pages/components/maintenance-card.wrn new file mode 100644 index 00000000..d7940f5a --- /dev/null +++ b/app/pages/components/maintenance-card.wrn @@ -0,0 +1,34 @@ +page MaintenanceCardcomponent { + seo { + title = "MaintenanceCard component" + description = "Reusable maintenance card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MaintenanceCard

Reusable maintenance card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MaintenanceCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MaintenanceCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MaintenanceCard.wrn

component MaintenanceCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/maintenance-page.wrn b/app/pages/components/maintenance-page.wrn new file mode 100644 index 00000000..8654e48c --- /dev/null +++ b/app/pages/components/maintenance-page.wrn @@ -0,0 +1,34 @@ +page MaintenancePagecomponent { + seo { + title = "MaintenancePage component" + description = "Reusable maintenance page component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MaintenancePage

Reusable maintenance page component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MaintenancePage eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MaintenancePage".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MaintenancePage.wrn

component MaintenancePage {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/maintenance-state.wrn b/app/pages/components/maintenance-state.wrn new file mode 100644 index 00000000..f703cc4b --- /dev/null +++ b/app/pages/components/maintenance-state.wrn @@ -0,0 +1,32 @@ +page MaintenanceStatecomponent { + seo { + title = "MaintenanceState component" + description = "Reusable maintenance state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

MaintenanceState

Reusable maintenance state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MaintenanceState label="Maintenance" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="MaintenanceState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Maintenance"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MaintenanceState.wrn

component MaintenanceState {
+  props {
+    label = "Maintenance" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/maintenance-window-picker.wrn b/app/pages/components/maintenance-window-picker.wrn new file mode 100644 index 00000000..89e31cc2 --- /dev/null +++ b/app/pages/components/maintenance-window-picker.wrn @@ -0,0 +1,37 @@ +page MaintenanceWindowPickercomponent { + seo { + title = "MaintenanceWindowPicker component" + description = "Reusable maintenance window picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MaintenanceWindowPicker

Reusable maintenance window picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MaintenanceWindowPicker label="MaintenanceWindow" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MaintenanceWindowPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"MaintenanceWindow"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MaintenanceWindowPicker.wrn

component MaintenanceWindowPicker {
+  props {
+    label = "MaintenanceWindow" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/map-picker.wrn b/app/pages/components/map-picker.wrn new file mode 100644 index 00000000..0e0bfb5b --- /dev/null +++ b/app/pages/components/map-picker.wrn @@ -0,0 +1,37 @@ +page MapPickercomponent { + seo { + title = "MapPicker component" + description = "Reusable map picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MapPicker

Reusable map picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MapPicker label="Map" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MapPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Map"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MapPicker.wrn

component MapPicker {
+  props {
+    label = "Map" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/markdown-editor.wrn b/app/pages/components/markdown-editor.wrn new file mode 100644 index 00000000..dbd7775c --- /dev/null +++ b/app/pages/components/markdown-editor.wrn @@ -0,0 +1,37 @@ +page MarkdownEditorcomponent { + seo { + title = "MarkdownEditor component" + description = "Reusable markdown editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MarkdownEditor

Reusable markdown editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MarkdownEditor label="Markdown" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MarkdownEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Markdown"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MarkdownEditor.wrn

component MarkdownEditor {
+  props {
+    label = "Markdown" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/marketing-page-shell.wrn b/app/pages/components/marketing-page-shell.wrn new file mode 100644 index 00000000..4142dfac --- /dev/null +++ b/app/pages/components/marketing-page-shell.wrn @@ -0,0 +1,27 @@ +page MarketingPageShellcomponent { + seo { + title = "MarketingPageShell component" + description = "Reusable marketing page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

MarketingPageShell

Reusable marketing page shell component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MarketingPageShell />

Legacy mount name: data-component="MarketingPageShell".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MarketingPageShell.wrn

component MarketingPageShell {
+  props {
+    class = ""
+  }
+  view { <div class="wire-page-shell wire-page-shell--marketing {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/marketing-section-header.wrn b/app/pages/components/marketing-section-header.wrn new file mode 100644 index 00000000..c0864476 --- /dev/null +++ b/app/pages/components/marketing-section-header.wrn @@ -0,0 +1,31 @@ +page MarketingSectionHeadercomponent { + seo { + title = "MarketingSectionHeader component" + description = "Reusable marketing section header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

MarketingSectionHeader

Reusable marketing section header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MarketingSectionHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="MarketingSectionHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MarketingSectionHeader.wrn

component MarketingSectionHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/masked-secret-field.wrn b/app/pages/components/masked-secret-field.wrn new file mode 100644 index 00000000..399ecc6c --- /dev/null +++ b/app/pages/components/masked-secret-field.wrn @@ -0,0 +1,37 @@ +page MaskedSecretFieldcomponent { + seo { + title = "MaskedSecretField component" + description = "Reusable masked secret field component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MaskedSecretField

Reusable masked secret field component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MaskedSecretField label="MaskedSecret" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MaskedSecretField".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"MaskedSecret"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MaskedSecretField.wrn

component MaskedSecretField {
+  props {
+    label = "MaskedSecret" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mega-menu.wrn b/app/pages/components/mega-menu.wrn new file mode 100644 index 00000000..05819309 --- /dev/null +++ b/app/pages/components/mega-menu.wrn @@ -0,0 +1,32 @@ +page MegaMenucomponent { + seo { + title = "MegaMenu component" + description = "Reusable mega menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

MegaMenu

Reusable mega menu component.

@wrnexus/ui 0.2.643 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MegaMenu label="Explore" sections="[]" />

Legacy mount name: data-component="MegaMenu".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Explore"
sectionsstringOptional[]
classstringOptional""

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/MegaMenu.wrn

component MegaMenu {
+  props {
+    label = "Explore"
+    sections = []
+    class = ""
+  }
+  state open = false
+  view {
+    <div class="wire-mega-menu {class}"><button type="button" class="wire-mega-menu__trigger" aria-expanded="{open}" @click="open = !open">{label}<span aria-hidden="true">⌄</span></button><div data-show="open" class="wire-mega-menu__panel">{#each sections as section}<section><h3>{section.title}</h3><ul>{#each section.items as item}<li><a href="{item.href}">{item.label}</a></li>{/each}</ul></section>{/each}</div></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/member-list.wrn b/app/pages/components/member-list.wrn new file mode 100644 index 00000000..e5ce2295 --- /dev/null +++ b/app/pages/components/member-list.wrn @@ -0,0 +1,31 @@ +page MemberListcomponent { + seo { + title = "MemberList component" + description = "Reusable member list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

MemberList

Reusable member list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MemberList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="MemberList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MemberList.wrn

component MemberList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mention-input.wrn b/app/pages/components/mention-input.wrn new file mode 100644 index 00000000..6ec967ac --- /dev/null +++ b/app/pages/components/mention-input.wrn @@ -0,0 +1,37 @@ +page MentionInputcomponent { + seo { + title = "MentionInput component" + description = "Reusable mention input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MentionInput

Reusable mention input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MentionInput label="Mention" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MentionInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Mention"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MentionInput.wrn

component MentionInput {
+  props {
+    label = "Mention" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/message-character-counter.wrn b/app/pages/components/message-character-counter.wrn new file mode 100644 index 00000000..23d25363 --- /dev/null +++ b/app/pages/components/message-character-counter.wrn @@ -0,0 +1,32 @@ +page MessageCharacterCountercomponent { + seo { + title = "MessageCharacterCounter component" + description = "Reusable message character counter component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

MessageCharacterCounter

Reusable message character counter component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MessageCharacterCounter label="MessageCharacter" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="MessageCharacterCounter".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"MessageCharacter"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MessageCharacterCounter.wrn

component MessageCharacterCounter {
+  props {
+    label = "MessageCharacter" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/message-composer-preview.wrn b/app/pages/components/message-composer-preview.wrn new file mode 100644 index 00000000..bee925da --- /dev/null +++ b/app/pages/components/message-composer-preview.wrn @@ -0,0 +1,34 @@ +page MessageComposerPreviewcomponent { + seo { + title = "MessageComposerPreview component" + description = "Reusable message composer preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MessageComposerPreview

Reusable message composer preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MessageComposerPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MessageComposerPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MessageComposerPreview.wrn

component MessageComposerPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/message-composer.wrn b/app/pages/components/message-composer.wrn new file mode 100644 index 00000000..0d3190ff --- /dev/null +++ b/app/pages/components/message-composer.wrn @@ -0,0 +1,34 @@ +page MessageComposercomponent { + seo { + title = "MessageComposer component" + description = "Reusable message composer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MessageComposer

Reusable message composer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MessageComposer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MessageComposer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MessageComposer.wrn

component MessageComposer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/message-limit-input.wrn b/app/pages/components/message-limit-input.wrn new file mode 100644 index 00000000..3cc4ad00 --- /dev/null +++ b/app/pages/components/message-limit-input.wrn @@ -0,0 +1,37 @@ +page MessageLimitInputcomponent { + seo { + title = "MessageLimitInput component" + description = "Reusable message limit input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MessageLimitInput

Reusable message limit input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MessageLimitInput label="MessageLimit" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MessageLimitInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"MessageLimit"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MessageLimitInput.wrn

component MessageLimitInput {
+  props {
+    label = "MessageLimit" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/message-preview.wrn b/app/pages/components/message-preview.wrn new file mode 100644 index 00000000..29804211 --- /dev/null +++ b/app/pages/components/message-preview.wrn @@ -0,0 +1,34 @@ +page MessagePreviewcomponent { + seo { + title = "MessagePreview component" + description = "Reusable message preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MessagePreview

Reusable message preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MessagePreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MessagePreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MessagePreview.wrn

component MessagePreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/message-volume-slider.wrn b/app/pages/components/message-volume-slider.wrn new file mode 100644 index 00000000..d2663538 --- /dev/null +++ b/app/pages/components/message-volume-slider.wrn @@ -0,0 +1,34 @@ +page MessageVolumeSlidercomponent { + seo { + title = "MessageVolumeSlider component" + description = "Reusable message volume slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MessageVolumeSlider

Reusable message volume slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MessageVolumeSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MessageVolumeSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MessageVolumeSlider.wrn

component MessageVolumeSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/metric-card.wrn b/app/pages/components/metric-card.wrn new file mode 100644 index 00000000..d60cf166 --- /dev/null +++ b/app/pages/components/metric-card.wrn @@ -0,0 +1,34 @@ +page MetricCardcomponent { + seo { + title = "MetricCard component" + description = "Reusable metric card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MetricCard

Reusable metric card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MetricCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MetricCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MetricCard.wrn

component MetricCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/metric-grid.wrn b/app/pages/components/metric-grid.wrn new file mode 100644 index 00000000..1e492edb --- /dev/null +++ b/app/pages/components/metric-grid.wrn @@ -0,0 +1,29 @@ +page MetricGridcomponent { + seo { + title = "MetricGrid component" + description = "Reusable metric grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

MetricGrid

Reusable metric grid component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MetricGrid label="Key metrics" metrics="[]" />

Legacy mount name: data-component="MetricGrid".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Key metrics"
metricsstringOptional[]
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/MetricGrid.wrn

component MetricGrid {
+  props {
+    label = "Key metrics"
+    metrics = []
+    class = ""
+  }
+  view { <section aria-label="{label}" class="wire-metric-grid {class}">{#each metrics as metric}<article class="wire-metric"><p class="wire-metric__value">{metric.value}</p><p class="wire-metric__label">{metric.label}</p><p data-show="metric.description" class="wire-metric__description">{metric.description}</p></article>{/each}</section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/metric-text.wrn b/app/pages/components/metric-text.wrn new file mode 100644 index 00000000..72f08328 --- /dev/null +++ b/app/pages/components/metric-text.wrn @@ -0,0 +1,29 @@ +page MetricTextcomponent { + seo { + title = "MetricText component" + description = "Reusable metric text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MetricText

Reusable metric text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MetricText text="text" align="start" />

Legacy mount name: data-component="MetricText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MetricText.wrn

component MetricText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--display wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/metric.wrn b/app/pages/components/metric.wrn new file mode 100644 index 00000000..e70b4bde --- /dev/null +++ b/app/pages/components/metric.wrn @@ -0,0 +1,32 @@ +page Metriccomponent { + seo { + title = "Metric component" + description = "Reusable metric component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

Metric

Reusable metric component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Metric title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="Metric".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Metric.wrn

component Metric {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/minute-picker.wrn b/app/pages/components/minute-picker.wrn new file mode 100644 index 00000000..0a252e9b --- /dev/null +++ b/app/pages/components/minute-picker.wrn @@ -0,0 +1,37 @@ +page MinutePickercomponent { + seo { + title = "MinutePicker component" + description = "Reusable minute picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MinutePicker

Reusable minute picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MinutePicker label="Minute" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MinutePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Minute"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MinutePicker.wrn

component MinutePicker {
+  props {
+    label = "Minute" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mission-section.wrn b/app/pages/components/mission-section.wrn new file mode 100644 index 00000000..3f18882a --- /dev/null +++ b/app/pages/components/mission-section.wrn @@ -0,0 +1,31 @@ +page MissionSectioncomponent { + seo { + title = "MissionSection component" + description = "Reusable mission section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

MissionSection

Reusable mission section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MissionSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="MissionSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MissionSection.wrn

component MissionSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mobile-device-frame.wrn b/app/pages/components/mobile-device-frame.wrn new file mode 100644 index 00000000..d566ac26 --- /dev/null +++ b/app/pages/components/mobile-device-frame.wrn @@ -0,0 +1,31 @@ +page MobileDeviceFramecomponent { + seo { + title = "MobileDeviceFrame component" + description = "Reusable mobile device frame component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

MobileDeviceFrame

Reusable mobile device frame component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MobileDeviceFrame eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="MobileDeviceFrame".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MobileDeviceFrame.wrn

component MobileDeviceFrame {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mobile-input.wrn b/app/pages/components/mobile-input.wrn new file mode 100644 index 00000000..cfbed6dd --- /dev/null +++ b/app/pages/components/mobile-input.wrn @@ -0,0 +1,37 @@ +page MobileInputcomponent { + seo { + title = "MobileInput component" + description = "Reusable mobile input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MobileInput

Reusable mobile input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MobileInput label="Mobile" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MobileInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Mobile"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MobileInput.wrn

component MobileInput {
+  props {
+    label = "Mobile" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mobile-menu-button.wrn b/app/pages/components/mobile-menu-button.wrn new file mode 100644 index 00000000..b33408c6 --- /dev/null +++ b/app/pages/components/mobile-menu-button.wrn @@ -0,0 +1,32 @@ +page MobileMenuButtoncomponent { + seo { + title = "MobileMenuButton component" + description = "Reusable mobile menu button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

MobileMenuButton

Reusable mobile menu button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MobileMenuButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="MobileMenuButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MobileMenuButton.wrn

component MobileMenuButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mobile-navigation.wrn b/app/pages/components/mobile-navigation.wrn new file mode 100644 index 00000000..6a3bfbd8 --- /dev/null +++ b/app/pages/components/mobile-navigation.wrn @@ -0,0 +1,33 @@ +page MobileNavigationcomponent { + seo { + title = "MobileNavigation component" + description = "Reusable mobile navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

MobileNavigation

Reusable mobile navigation component.

@wrnexus/ui 0.2.644 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MobileNavigation label="Menu" closeLabel="Close menu" items="[]" />

Legacy mount name: data-component="MobileNavigation".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Menu"
closeLabelstringOptional"Close menu"
itemsstringOptional[]
classstringOptional""

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/MobileNavigation.wrn

component MobileNavigation {
+  props {
+    label = "Menu"
+    closeLabel = "Close menu"
+    items = []
+    class = ""
+  }
+  state open = false
+  view {
+    <div class="wire-mobile-nav {class}"><button type="button" class="wire-btn wire-btn--ghost" aria-expanded="{open}" aria-controls="wire-mobile-navigation" @click="open = !open">{open ? closeLabel : label}</button><nav id="wire-mobile-navigation" data-show="open" aria-label="Mobile navigation" class="wire-mobile-nav__panel"><ul>{#each items as item}<li><a href="{item.href}">{item.label}</a></li>{/each}</ul></nav></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/mobile-table-card.wrn b/app/pages/components/mobile-table-card.wrn new file mode 100644 index 00000000..250dee1d --- /dev/null +++ b/app/pages/components/mobile-table-card.wrn @@ -0,0 +1,34 @@ +page MobileTableCardcomponent { + seo { + title = "MobileTableCard component" + description = "Reusable mobile table card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MobileTableCard

Reusable mobile table card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MobileTableCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MobileTableCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MobileTableCard.wrn

component MobileTableCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/modal.wrn b/app/pages/components/modal.wrn new file mode 100644 index 00000000..1fcd42b6 --- /dev/null +++ b/app/pages/components/modal.wrn @@ -0,0 +1,35 @@ +page Modalcomponent { + seo { + title = "Modal component" + description = "Reusable modal component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Modal

Reusable modal component.

@wrnexus/ui 0.2.646 props1 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Modal title="Dialog" description="description" open="false" size="md" closeLabel="Close" />

Legacy mount name: data-component="Modal".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Dialog"
descriptionstringOptional""
openbooleanOptionalfalse
sizestringOptional"md"
closeLabelstringOptional"Close"

Slots

  • default

Events

  • click

Source contract

Installed source: components/Modal.wrn

component Modal {
+  props {
+    class = ""
+    title = "Dialog"
+    description = ""
+    open = false
+    size = "md"
+    closeLabel = "Close"
+  }
+  state visible = open
+  view {
+    <div data-show="visible" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center {class}" role="dialog" aria-modal="true" aria-labelledby="modal-title"><button class="absolute inset-0 bg-slate-950/60 backdrop-blur-sm" aria-label="{closeLabel}" @click="visible = false"></button><section class="relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'}"><header class="flex items-start justify-between gap-4"><div><h2 id="modal-title" class="text-xl font-bold">{title}</h2><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="{closeLabel}" @click="visible = false" class="inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">×</button></header><div class="mt-5"><slot /></div></section></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/month-picker.wrn b/app/pages/components/month-picker.wrn new file mode 100644 index 00000000..a783dfde --- /dev/null +++ b/app/pages/components/month-picker.wrn @@ -0,0 +1,37 @@ +page MonthPickercomponent { + seo { + title = "MonthPicker component" + description = "Reusable month picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MonthPicker

Reusable month picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MonthPicker label="Month" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MonthPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Month"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MonthPicker.wrn

component MonthPicker {
+  props {
+    label = "Month" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/month-year-picker.wrn b/app/pages/components/month-year-picker.wrn new file mode 100644 index 00000000..8efa72ef --- /dev/null +++ b/app/pages/components/month-year-picker.wrn @@ -0,0 +1,37 @@ +page MonthYearPickercomponent { + seo { + title = "MonthYearPicker component" + description = "Reusable month year picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MonthYearPicker

Reusable month year picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MonthYearPicker label="MonthYear" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MonthYearPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"MonthYear"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MonthYearPicker.wrn

component MonthYearPicker {
+  props {
+    label = "MonthYear" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/monthly-volume-selector.wrn b/app/pages/components/monthly-volume-selector.wrn new file mode 100644 index 00000000..048b600c --- /dev/null +++ b/app/pages/components/monthly-volume-selector.wrn @@ -0,0 +1,37 @@ +page MonthlyVolumeSelectorcomponent { + seo { + title = "MonthlyVolumeSelector component" + description = "Reusable monthly volume selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MonthlyVolumeSelector

Reusable monthly volume selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MonthlyVolumeSelector label="MonthlyVolume" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MonthlyVolumeSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"MonthlyVolume"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MonthlyVolumeSelector.wrn

component MonthlyVolumeSelector {
+  props {
+    label = "MonthlyVolume" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/multi-file-upload.wrn b/app/pages/components/multi-file-upload.wrn new file mode 100644 index 00000000..0803ef48 --- /dev/null +++ b/app/pages/components/multi-file-upload.wrn @@ -0,0 +1,34 @@ +page MultiFileUploadcomponent { + seo { + title = "MultiFileUpload component" + description = "Reusable multi file upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MultiFileUpload

Reusable multi file upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MultiFileUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="MultiFileUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MultiFileUpload.wrn

component MultiFileUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/multi-select.wrn b/app/pages/components/multi-select.wrn new file mode 100644 index 00000000..89ed6f0e --- /dev/null +++ b/app/pages/components/multi-select.wrn @@ -0,0 +1,36 @@ +page MultiSelectcomponent { + seo { + title = "MultiSelect component" + description = "Reusable multi select component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

MultiSelect

Reusable multi select component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MultiSelect id="multi-select" name="name" label="Choose options" options="[]" required="false" />

Legacy mount name: data-component="MultiSelect".

Props and attributes

PropTypeRequirementDefault
idstringOptional"multi-select"
namestringOptional""
labelstringOptional"Choose options"
optionsstringOptional[]
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
sizenumberOptional5
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/MultiSelect.wrn

component MultiSelect {
+  props {
+    id = "multi-select"
+    name = ""
+    label = "Choose options"
+    options = []
+    required = false
+    disabled = false
+    size = 5
+    class = ""
+  }
+  view {
+    <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><select id="{id}" name="{name}" multiple required="{required}" disabled="{disabled}" size="{size}" class="wire-input wire-multiselect">{#each options as option}<option value="{option.value}" selected="{option.selected}">{option.label}</option>{/each}</select></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/multiple-email-input.wrn b/app/pages/components/multiple-email-input.wrn new file mode 100644 index 00000000..2b75a589 --- /dev/null +++ b/app/pages/components/multiple-email-input.wrn @@ -0,0 +1,37 @@ +page MultipleEmailInputcomponent { + seo { + title = "MultipleEmailInput component" + description = "Reusable multiple email input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

MultipleEmailInput

Reusable multiple email input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MultipleEmailInput label="MultipleEmail" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="MultipleEmailInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"MultipleEmail"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MultipleEmailInput.wrn

component MultipleEmailInput {
+  props {
+    label = "MultipleEmail" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/muted-text.wrn b/app/pages/components/muted-text.wrn new file mode 100644 index 00000000..ff9d232c --- /dev/null +++ b/app/pages/components/muted-text.wrn @@ -0,0 +1,29 @@ +page MutedTextcomponent { + seo { + title = "MutedText component" + description = "Reusable muted text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

MutedText

Reusable muted text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MutedText text="text" align="start" />

Legacy mount name: data-component="MutedText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/MutedText.wrn

component MutedText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--small wire-text--{align} wire-muted {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/name-input.wrn b/app/pages/components/name-input.wrn new file mode 100644 index 00000000..c6680fa5 --- /dev/null +++ b/app/pages/components/name-input.wrn @@ -0,0 +1,37 @@ +page NameInputcomponent { + seo { + title = "NameInput component" + description = "Reusable name input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

NameInput

Reusable name input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NameInput label="Name" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="NameInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Name"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NameInput.wrn

component NameInput {
+  props {
+    label = "Name" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/narrow-container.wrn b/app/pages/components/narrow-container.wrn new file mode 100644 index 00000000..df3d2c76 --- /dev/null +++ b/app/pages/components/narrow-container.wrn @@ -0,0 +1,27 @@ +page NarrowContainercomponent { + seo { + title = "NarrowContainer component" + description = "Reusable narrow container component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

NarrowContainer

Reusable narrow container component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NarrowContainer />

Legacy mount name: data-component="NarrowContainer".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NarrowContainer.wrn

component NarrowContainer {
+  props {
+    class = ""
+  }
+  view { <div class="wire-container wire-container--narrow {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/navigation-item.wrn b/app/pages/components/navigation-item.wrn new file mode 100644 index 00000000..4b0d1563 --- /dev/null +++ b/app/pages/components/navigation-item.wrn @@ -0,0 +1,34 @@ +page NavigationItemcomponent { + seo { + title = "NavigationItem component" + description = "Reusable navigation item component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

NavigationItem

Reusable navigation item component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NavigationItem eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="NavigationItem".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NavigationItem.wrn

component NavigationItem {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/navigation-mega-menu.wrn b/app/pages/components/navigation-mega-menu.wrn new file mode 100644 index 00000000..087acb91 --- /dev/null +++ b/app/pages/components/navigation-mega-menu.wrn @@ -0,0 +1,31 @@ +page NavigationMegaMenucomponent { + seo { + title = "NavigationMegaMenu component" + description = "Reusable navigation mega menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

NavigationMegaMenu

Reusable navigation mega menu component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NavigationMegaMenu title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="NavigationMegaMenu".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NavigationMegaMenu.wrn

component NavigationMegaMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/navigation.wrn b/app/pages/components/navigation.wrn new file mode 100644 index 00000000..e974fc09 --- /dev/null +++ b/app/pages/components/navigation.wrn @@ -0,0 +1,31 @@ +page Navigationcomponent { + seo { + title = "Navigation component" + description = "Reusable navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

Navigation

Reusable navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Navigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="Navigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Navigation.wrn

component Navigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/new-badge.wrn b/app/pages/components/new-badge.wrn new file mode 100644 index 00000000..24974424 --- /dev/null +++ b/app/pages/components/new-badge.wrn @@ -0,0 +1,29 @@ +page NewBadgecomponent { + seo { + title = "NewBadge component" + description = "Reusable new badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

NewBadge

Reusable new badge component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NewBadge label="New" variant="default" />

Legacy mount name: data-component="NewBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"New"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NewBadge.wrn

component NewBadge {
+  props {
+    label = "New"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--newbadge {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/new-password-input.wrn b/app/pages/components/new-password-input.wrn new file mode 100644 index 00000000..9d3a7cca --- /dev/null +++ b/app/pages/components/new-password-input.wrn @@ -0,0 +1,37 @@ +page NewPasswordInputcomponent { + seo { + title = "NewPasswordInput component" + description = "Reusable new password input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

NewPasswordInput

Reusable new password input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NewPasswordInput label="NewPassword" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="NewPasswordInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"NewPassword"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NewPasswordInput.wrn

component NewPasswordInput {
+  props {
+    label = "NewPassword" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/newsletter-cta.wrn b/app/pages/components/newsletter-cta.wrn new file mode 100644 index 00000000..4bf8b4ba --- /dev/null +++ b/app/pages/components/newsletter-cta.wrn @@ -0,0 +1,32 @@ +page NewsletterCTAcomponent { + seo { + title = "NewsletterCTA component" + description = "Reusable newsletter c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

NewsletterCTA

Reusable newsletter c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NewsletterCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="NewsletterCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NewsletterCTA.wrn

component NewsletterCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/newsletter-form.wrn b/app/pages/components/newsletter-form.wrn new file mode 100644 index 00000000..bd3e3561 --- /dev/null +++ b/app/pages/components/newsletter-form.wrn @@ -0,0 +1,235 @@ +page NewsletterFormcomponent { + seo { + title = "NewsletterForm component" + description = "Reusable newsletter form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

NewsletterForm

Reusable newsletter form component.

@wrnexus/ui 0.2.6419 props0 slots2 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NewsletterForm eyebrow="eyebrow" title="Stay up to date" description="description" placeholder="Enter your email" buttonLabel="Subscribe" />

Legacy mount name: data-component="NewsletterForm".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional"Stay up to date"
descriptionstringOptional""
placeholderstringOptional"Enter your email"
buttonLabelstringOptional"Subscribe"
actionstringOptional"/newsletter/subscribe"
methodstringOptional"post"
emailNamestringOptional"email"
privacyLabelstringOptional""
privacyHrefstringOptional"/privacy"
successMessagestringOptional"You are subscribed."
errorMessagestringOptional"Something went wrong. Please try again."
iconClassstringOptional"icon-[lucide--mail]"
centeredbooleanOptionalfalse
compactbooleanOptionalfalse
showIconbooleanOptionaltrue
showPrivacybooleanOptionaltrue
fullWidthbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

  • submit
  • input

Source contract

Installed source: components/NewsletterForm.wrn

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 {
+        <section
+            aria-labelledby="newsletter-form-title"
+            class="w-full px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
+        >
+            <div
+                class=" relative mx-auto w-full overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20 "
+                class:max-w-7xl="fullWidth"
+                class:max-w-3xl="!fullWidth"
+            >
+                <!-- Background decoration -->
+                <div
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 overflow-hidden"
+                >
+                    <div class="absolute -right-20 -top-24 h-64 w-64 rounded-full bg-indigo-300/25 blur-3xl dark:bg-indigo-500/10"></div>
+
+                    <div class="absolute -bottom-28 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10"></div>
+
+                    <div class="absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-400/60 to-transparent dark:via-indigo-400/20"></div>
+                </div>
+
+                <div
+                    class="relative"
+                    class:p-5="compact"
+                    class:sm:p-6="compact"
+                    class:p-7="!compact"
+                    class:sm:p-9="!compact"
+                    class:lg:p-10="!compact"
+                >
+                    <div
+                        class=" {compact ? 'flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between lg:gap-10' : centered ? 'mx-auto flex max-w-2xl flex-col items-center gap-7 text-center' : 'grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(360px,480px)] lg:items-center lg:gap-12' } "
+                    >
+                        <!-- Content -->
+                        <div
+                            class=" min-w-0 {compact ? 'max-w-2xl' : ''} {centered && !compact ? 'w-full max-w-2xl' : ''} "
+                        >
+                            <div class=" flex gap-4 {centered && !compact ? 'flex-col items-center' : 'items-start' } " >
+                                <!-- Icon -->
+                                <div
+                                    class="relative shrink-0"
+                                    class:hidden="!showIcon"
+                                >
+                                    <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/25 blur-xl" ></div>
+
+                                    <span
+                                        class=" relative grid place-items-center rounded-2xl border border-indigo-200 bg-white/90 text-indigo-600 shadow-lg shadow-indigo-950/10 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:shadow-black/20 {compact ? 'h-11 w-11' : 'h-13 w-13'} "
+                                    >
+                                        <span class=" {iconClass} {compact ? 'h-5 w-5' : 'h-6 w-6'} " aria-hidden="true" ></span>
+                                    </span>
+                                </div>
+
+                                <div class="min-w-0">
+                                    <!-- Eyebrow -->
+                                    <p
+                                        class="text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
+                                        class:hidden="eyebrow === ''"
+                                    >
+                                        {eyebrow}
+                                    </p>
+
+                                    <!-- Title -->
+                                    <h2
+                                        id="newsletter-form-title"
+                                        class=" font-bold leading-tight tracking-tight text-slate-950 dark:text-white {eyebrow !== '' ? 'mt-2' : ''} {compact ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl' } "
+                                    >
+                                        {title}
+                                    </h2>
+                                </div>
+                            </div>
+
+                            <!-- Description -->
+                            <p
+                                class=" mt-4 text-sm leading-6 text-slate-600 dark:text-slate-400 {!compact ? 'sm:text-base sm:leading-7' : ''} {centered && !compact ? 'mx-auto max-w-xl' : 'max-w-2xl' } "
+                                class:hidden="description === ''"
+                            >
+                                {description}
+                            </p>
+                        </div>
+
+                        <!-- Form -->
+                        <div class=" w-full {compact ? 'lg:max-w-xl' : ''} {centered && !compact ? 'max-w-2xl' : ''} " >
+                            <form
+                                action="{action}"
+                                method="{method}"
+                                class="w-full"
+                                @submit=" status = 'loading'; message = ''; "
+                            >
+                                <label
+                                    for="newsletter-email"
+                                    class="sr-only"
+                                >
+                                    Email address
+                                </label>
+
+                                <div
+                                    class=" flex w-full flex-col gap-2 rounded-2xl border border-slate-200 bg-white/85 p-2 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5 sm:flex-row "
+                                >
+                                    <div class="relative min-w-0 flex-1">
+                                        <span class="pointer-events-none absolute left-3.5 top-1/2 h-4.5 w-4.5 -translate-y-1/2 text-slate-400 icon-[lucide--mail] dark:text-slate-500" aria-hidden="true" ></span>
+
+                                        <input
+                                            id="newsletter-email"
+                                            type="email"
+                                            name="{emailName}"
+                                            value="{email}"
+                                            placeholder="{placeholder}"
+                                            autocomplete="email"
+                                            required
+                                            @input="email = event.target.value"
+                                            class=" w-full rounded-xl bg-transparent pl-10 pr-3 text-sm text-slate-950 outline-none placeholder:text-slate-400 focus:bg-white dark:text-white dark:placeholder:text-slate-500 dark:focus:bg-white/5 {compact ? 'h-10' : 'h-11'} "
+                                        />
+                                    </div>
+
+                                    <button
+                                        type="submit"
+                                        class=" group inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-70 dark:focus-visible:ring-offset-slate-900 {compact ? 'h-10' : 'h-11'} "
+                                        disabled="{status === 'loading'}"
+                                    >
+                                        <span class="icon-[lucide--loader-circle] h-4 w-4 animate-spin" aria-hidden="true" class:hidden="status !== 'loading'" ></span>
+
+                                        <span class:hidden="status === 'loading'">
+                                            {buttonLabel}
+                                        </span>
+
+                                        <span class:hidden="status !== 'loading'">
+                                            Subscribing
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" class:hidden="status === 'loading'" ></span>
+                                    </button>
+                                </div>
+                            </form>
+
+                            <p
+                                class="mt-3 text-xs leading-5 text-slate-500 dark:text-slate-400"
+                                class:hidden="!showPrivacy"
+                                class:text-center="centered && !compact"
+                            >
+                                No spam. Unsubscribe at any time.
+
+                                <a
+                                    href="{privacyHref}"
+                                    class="font-semibold text-indigo-600 transition hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                    class:hidden="privacyLabel === ''"
+                                >
+                                    {privacyLabel}
+                                </a>
+                            </p>
+
+                            <div
+                                role="status"
+                                aria-live="polite"
+                                class="mt-3 rounded-xl px-3 py-2.5 text-sm font-medium"
+                                class:hidden="message === ''"
+                                class:bg-emerald-50="status === 'success'"
+                                class:text-emerald-700="status === 'success'"
+                                class:ring-1="status === 'success'"
+                                class:ring-inset="status === 'success'"
+                                class:ring-emerald-200="status === 'success'"
+                                class:dark:bg-emerald-500/10="status === 'success'"
+                                class:dark:text-emerald-300="status === 'success'"
+                                class:dark:ring-emerald-500/20="status === 'success'"
+                                class:bg-rose-50="status === 'error'"
+                                class:text-rose-700="status === 'error'"
+                                class:ring-1="status === 'error'"
+                                class:ring-inset="status === 'error'"
+                                class:ring-rose-200="status === 'error'"
+                                class:dark:bg-rose-500/10="status === 'error'"
+                                class:dark:text-rose-300="status === 'error'"
+                                class:dark:ring-rose-500/20="status === 'error'"
+                            >
+                                {message}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/no-results-state.wrn b/app/pages/components/no-results-state.wrn new file mode 100644 index 00000000..418a6781 --- /dev/null +++ b/app/pages/components/no-results-state.wrn @@ -0,0 +1,32 @@ +page NoResultsStatecomponent { + seo { + title = "NoResultsState component" + description = "Reusable no results state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

NoResultsState

Reusable no results state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NoResultsState label="NoResults" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="NoResultsState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"NoResults"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NoResultsState.wrn

component NoResultsState {
+  props {
+    label = "NoResults" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/not-found-page.wrn b/app/pages/components/not-found-page.wrn new file mode 100644 index 00000000..70568d8b --- /dev/null +++ b/app/pages/components/not-found-page.wrn @@ -0,0 +1,34 @@ +page NotFoundPagecomponent { + seo { + title = "NotFoundPage component" + description = "Reusable not found page component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

NotFoundPage

Reusable not found page component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NotFoundPage eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="NotFoundPage".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NotFoundPage.wrn

component NotFoundPage {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/not-found-state.wrn b/app/pages/components/not-found-state.wrn new file mode 100644 index 00000000..387b7c83 --- /dev/null +++ b/app/pages/components/not-found-state.wrn @@ -0,0 +1,32 @@ +page NotFoundStatecomponent { + seo { + title = "NotFoundState component" + description = "Reusable not found state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

NotFoundState

Reusable not found state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NotFoundState label="NotFound" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="NotFoundState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"NotFound"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NotFoundState.wrn

component NotFoundState {
+  props {
+    label = "NotFound" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/notification-card.wrn b/app/pages/components/notification-card.wrn new file mode 100644 index 00000000..0c6c253d --- /dev/null +++ b/app/pages/components/notification-card.wrn @@ -0,0 +1,30 @@ +page NotificationCardcomponent { + seo { + title = "NotificationCard component" + description = "Reusable notification card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

NotificationCard

Reusable notification card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NotificationCard title="title" description="description" href="href" />

Legacy mount name: data-component="NotificationCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NotificationCard.wrn

component NotificationCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--notification {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/notification-dot.wrn b/app/pages/components/notification-dot.wrn new file mode 100644 index 00000000..72f24798 --- /dev/null +++ b/app/pages/components/notification-dot.wrn @@ -0,0 +1,29 @@ +page NotificationDotcomponent { + seo { + title = "NotificationDot component" + description = "Reusable notification dot component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

NotificationDot

Reusable notification dot component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NotificationDot label="Notification" variant="default" />

Legacy mount name: data-component="NotificationDot".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Notification"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NotificationDot.wrn

component NotificationDot {
+  props {
+    label = "Notification"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--notificationdot {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/notification-list.wrn b/app/pages/components/notification-list.wrn new file mode 100644 index 00000000..27e65265 --- /dev/null +++ b/app/pages/components/notification-list.wrn @@ -0,0 +1,31 @@ +page NotificationListcomponent { + seo { + title = "NotificationList component" + description = "Reusable notification list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

NotificationList

Reusable notification list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NotificationList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="NotificationList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/NotificationList.wrn

component NotificationList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/number-input.wrn b/app/pages/components/number-input.wrn new file mode 100644 index 00000000..5cb993cd --- /dev/null +++ b/app/pages/components/number-input.wrn @@ -0,0 +1,45 @@ +page NumberInputcomponent { + seo { + title = "NumberInput component" + description = "Reusable number input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

NumberInput

Reusable number input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<NumberInput id="id" name="name" label="Number" value="value" placeholder="placeholder" />

Legacy mount name: data-component="NumberInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Number"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/NumberInput.wrn

component NumberInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Number"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="number" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/office-card.wrn b/app/pages/components/office-card.wrn new file mode 100644 index 00000000..8231800c --- /dev/null +++ b/app/pages/components/office-card.wrn @@ -0,0 +1,34 @@ +page OfficeCardcomponent { + seo { + title = "OfficeCard component" + description = "Reusable office card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

OfficeCard

Reusable office card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OfficeCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="OfficeCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OfficeCard.wrn

component OfficeCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/offline-page.wrn b/app/pages/components/offline-page.wrn new file mode 100644 index 00000000..3a302e43 --- /dev/null +++ b/app/pages/components/offline-page.wrn @@ -0,0 +1,34 @@ +page OfflinePagecomponent { + seo { + title = "OfflinePage component" + description = "Reusable offline page component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

OfflinePage

Reusable offline page component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OfflinePage eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="OfflinePage".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OfflinePage.wrn

component OfflinePage {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/offline-state.wrn b/app/pages/components/offline-state.wrn new file mode 100644 index 00000000..48aad5b4 --- /dev/null +++ b/app/pages/components/offline-state.wrn @@ -0,0 +1,32 @@ +page OfflineStatecomponent { + seo { + title = "OfflineState component" + description = "Reusable offline state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

OfflineState

Reusable offline state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OfflineState label="Offline" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="OfflineState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Offline"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OfflineState.wrn

component OfflineState {
+  props {
+    label = "Offline" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/onboarding-progress.wrn b/app/pages/components/onboarding-progress.wrn new file mode 100644 index 00000000..537d69a3 --- /dev/null +++ b/app/pages/components/onboarding-progress.wrn @@ -0,0 +1,32 @@ +page OnboardingProgresscomponent { + seo { + title = "OnboardingProgress component" + description = "Reusable onboarding progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

OnboardingProgress

Reusable onboarding progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OnboardingProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="OnboardingProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OnboardingProgress.wrn

component OnboardingProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/one-time-secret-display.wrn b/app/pages/components/one-time-secret-display.wrn new file mode 100644 index 00000000..9235f968 --- /dev/null +++ b/app/pages/components/one-time-secret-display.wrn @@ -0,0 +1,34 @@ +page OneTimeSecretDisplaycomponent { + seo { + title = "OneTimeSecretDisplay component" + description = "Reusable one time secret display component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

OneTimeSecretDisplay

Reusable one time secret display component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OneTimeSecretDisplay eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="OneTimeSecretDisplay".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OneTimeSecretDisplay.wrn

component OneTimeSecretDisplay {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/online-indicator.wrn b/app/pages/components/online-indicator.wrn new file mode 100644 index 00000000..75529f3a --- /dev/null +++ b/app/pages/components/online-indicator.wrn @@ -0,0 +1,29 @@ +page OnlineIndicatorcomponent { + seo { + title = "OnlineIndicator component" + description = "Reusable online indicator component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

OnlineIndicator

Reusable online indicator component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OnlineIndicator label="Online" variant="default" />

Legacy mount name: data-component="OnlineIndicator".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Online"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OnlineIndicator.wrn

component OnlineIndicator {
+  props {
+    label = "Online"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--onlineindicator {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/opacity-slider.wrn b/app/pages/components/opacity-slider.wrn new file mode 100644 index 00000000..fd7dd812 --- /dev/null +++ b/app/pages/components/opacity-slider.wrn @@ -0,0 +1,34 @@ +page OpacitySlidercomponent { + seo { + title = "OpacitySlider component" + description = "Reusable opacity slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

OpacitySlider

Reusable opacity slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OpacitySlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="OpacitySlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OpacitySlider.wrn

component OpacitySlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/open-apicta.wrn b/app/pages/components/open-apicta.wrn new file mode 100644 index 00000000..ad3a4cc0 --- /dev/null +++ b/app/pages/components/open-apicta.wrn @@ -0,0 +1,32 @@ +page OpenAPICTAcomponent { + seo { + title = "OpenAPICTA component" + description = "Reusable open a p i c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

OpenAPICTA

Reusable open a p i c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OpenAPICTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="OpenAPICTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OpenAPICTA.wrn

component OpenAPICTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/optional-indicator.wrn b/app/pages/components/optional-indicator.wrn new file mode 100644 index 00000000..b87ed81b --- /dev/null +++ b/app/pages/components/optional-indicator.wrn @@ -0,0 +1,32 @@ +page OptionalIndicatorcomponent { + seo { + title = "OptionalIndicator component" + description = "Reusable optional indicator component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

OptionalIndicator

Reusable optional indicator component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OptionalIndicator label="Optional" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="OptionalIndicator".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Optional"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OptionalIndicator.wrn

component OptionalIndicator {
+  props {
+    label = "Optional" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/organization-selector.wrn b/app/pages/components/organization-selector.wrn new file mode 100644 index 00000000..c26eab93 --- /dev/null +++ b/app/pages/components/organization-selector.wrn @@ -0,0 +1,37 @@ +page OrganizationSelectorcomponent { + seo { + title = "OrganizationSelector component" + description = "Reusable organization selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

OrganizationSelector

Reusable organization selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OrganizationSelector label="Organization" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="OrganizationSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Organization"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OrganizationSelector.wrn

component OrganizationSelector {
+  props {
+    label = "Organization" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/otp-input.wrn b/app/pages/components/otp-input.wrn new file mode 100644 index 00000000..00b648b2 --- /dev/null +++ b/app/pages/components/otp-input.wrn @@ -0,0 +1,32 @@ +page OtpInputcomponent { + seo { + title = "OtpInput component" + description = "Reusable otp input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

OtpInput

Reusable otp input component.

@wrnexus/ui 0.2.644 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OtpInput name="otp" length="6" label="Verification code" />

Legacy mount name: data-component="OtpInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
namestringOptional"otp"
lengthnumberOptional6
labelstringOptional"Verification code"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/OtpInput.wrn

component OtpInput {
+  props {
+    class = ""
+    name = "otp"
+    length = 6
+    label = "Verification code"
+  }
+  view {
+    <fieldset class="{class}"><legend class="mb-3 text-sm font-semibold">{label}</legend><input name="{name}" inputmode="numeric" autocomplete="one-time-code" maxlength="{length}" pattern="[0-9]*" class="min-h-14 w-full rounded-2xl border border-slate-300 bg-white px-4 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950" /></fieldset>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/otp-verification-form.wrn b/app/pages/components/otp-verification-form.wrn new file mode 100644 index 00000000..3e7063c3 --- /dev/null +++ b/app/pages/components/otp-verification-form.wrn @@ -0,0 +1,34 @@ +page OtpVerificationFormcomponent { + seo { + title = "OtpVerificationForm component" + description = "Reusable otp verification form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

OtpVerificationForm

Reusable otp verification form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OtpVerificationForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="OtpVerificationForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OtpVerificationForm.wrn

component OtpVerificationForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/outlined-card.wrn b/app/pages/components/outlined-card.wrn new file mode 100644 index 00000000..fd6f8822 --- /dev/null +++ b/app/pages/components/outlined-card.wrn @@ -0,0 +1,30 @@ +page OutlinedCardcomponent { + seo { + title = "OutlinedCard component" + description = "Reusable outlined card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

OutlinedCard

Reusable outlined card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<OutlinedCard title="title" description="description" href="href" />

Legacy mount name: data-component="OutlinedCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/OutlinedCard.wrn

component OutlinedCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--outlined {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/page-alert.wrn b/app/pages/components/page-alert.wrn new file mode 100644 index 00000000..25aecc87 --- /dev/null +++ b/app/pages/components/page-alert.wrn @@ -0,0 +1,32 @@ +page PageAlertcomponent { + seo { + title = "PageAlert component" + description = "Reusable page alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

PageAlert

Reusable page alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PageAlert label="Page" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="PageAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Page"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PageAlert.wrn

component PageAlert {
+  props {
+    label = "Page" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/page-header.wrn b/app/pages/components/page-header.wrn new file mode 100644 index 00000000..3b610995 --- /dev/null +++ b/app/pages/components/page-header.wrn @@ -0,0 +1,193 @@ +page PageHeadercomponent { + seo { + title = "PageHeader component" + description = "Reusable page header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

PageHeader

Reusable page header component.

@wrnexus/ui 0.2.6416 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PageHeader eyebrow="eyebrow" title="title" description="description" primaryLabel="primaryLabel" primaryHref="primaryHref" />

Legacy mount name: data-component="PageHeader".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
primaryLabelstringOptional""
primaryHrefstringOptional""
secondaryLabelstringOptional""
secondaryHrefstringOptional""
iconstringOptional"sparkles"
centeredbooleanOptionalfalse
compactbooleanOptionalfalse
showBreadcrumbsbooleanOptionalfalse
breadcrumbParentstringOptional""
breadcrumbParentHrefstringOptional""
breadcrumbCurrentstringOptional""
highlightsstringOptional[]

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/PageHeader.wrn

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 {
+        <section
+            aria-labelledby="public-page-title"
+            class="relative overflow-hidden border-b border-slate-200 bg-white dark:border-white/10 dark:bg-slate-950 {class}"
+        >
+            <!-- Background decoration -->
+            <div
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 overflow-hidden"
+            >
+                <div class="absolute -right-40 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10" ></div>
+
+                <div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-violet-300/15 blur-3xl dark:bg-violet-500/5" ></div>
+
+                <div class="absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-300/60 to-transparent dark:via-indigo-500/20" ></div>
+            </div>
+
+            <div class="relative w-full px-5 sm:px-8 lg:px-10 xl:px-12">
+
+                <!-- Breadcrumbs -->
+                <div
+                    class="border-b border-slate-200/80 py-3 dark:border-white/10"
+                    class:hidden="!showBreadcrumbs"
+                >
+                    <Breadcrumbs
+                        centered="{centered}"
+                        compact="{false}"
+                        items="{[ ...(breadcrumbParent !== '' ? [{ label: breadcrumbParent, href: breadcrumbParentHref, current: false }] : []), ...(breadcrumbCurrent !== '' ? [{ label: breadcrumbCurrent, href: '', current: true }] : []) ]}"
+                    />
+                </div>
+
+                <!-- Header body -->
+                <div
+                    class=" {compact ? 'py-9 sm:py-10 lg:py-12' : 'py-12 sm:py-14 lg:py-16' }  {centered ? 'mx-auto flex max-w-5xl flex-col items-center text-center' : 'grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start lg:gap-12' } "
+                >
+                    <!-- Content -->
+                    <div class=" min-w-0 {centered ? 'w-full max-w-4xl' : 'max-w-4xl'} " >
+                        <!-- Eyebrow -->
+                        <div
+                            class="flex"
+                            class:hidden="eyebrow === ''"
+                            class:justify-center="centered"
+                            class:justify-start="!centered"
+                        >
+                            <span
+                                class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300"
+                            >
+                                <span class="grid h-5 w-5 place-items-center rounded-full bg-indigo-100 dark:bg-indigo-500/15" >
+                                    <span class="icon-[lucide--{icon}] h-3 w-3" aria-hidden="true" ></span>
+                                </span>
+
+                                {eyebrow}
+                            </span>
+                        </div>
+
+                        <!-- Title -->
+                        <h1
+                            id="public-page-title"
+                            class=" font-bold tracking-tight text-slate-950 dark:text-white {eyebrow !== '' ? 'mt-6' : ''} {compact ? 'text-3xl leading-tight sm:text-4xl lg:text-5xl' : 'text-4xl leading-[1.08] sm:text-5xl lg:text-[3.25rem]' } "
+                        >
+                            {title}
+                        </h1>
+
+                        <!-- Description -->
+                        <p
+                            class=" mt-5 text-base text-slate-600 dark:text-slate-400 {compact ? 'leading-7' : 'leading-8 sm:text-lg'} {centered ? 'mx-auto max-w-3xl' : 'max-w-2xl'} "
+                            class:hidden="description === ''"
+                        >
+                            {description}
+                        </p>
+                    </div>
+
+                    <!-- Single dynamic action group -->
+                    <div
+                        class=" flex flex-col gap-3 sm:flex-row {centered ? 'mt-8 justify-center' : 'lg:pt-1' } "
+                        class:hidden="primaryLabel === '' && secondaryLabel === ''"
+                    >
+                        <!-- Secondary action -->
+                        <a
+                            href="{secondaryHref}"
+                            class="h-12 items-center justify-center rounded-xl border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
+                            class:hidden="secondaryLabel === ''"
+                            class:inline-flex="secondaryLabel !== ''"
+                        >
+                            {secondaryLabel}
+                        </a>
+
+                        <!-- Primary action -->
+                        <a
+                            href="{primaryHref}"
+                            class="group h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950"
+                            class:hidden="primaryLabel === ''"
+                            class:inline-flex="primaryLabel !== ''"
+                        >
+                            {primaryLabel}
+
+                            <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Dynamic highlight strip -->
+                <div
+                    class="border-t border-slate-200 py-5 dark:border-white/10"
+                    class:hidden="compact || highlights.length === 0"
+                    class:block="!compact && highlights.length > 0"
+                >
+                    <div class="flex gap-y-5">
+                        {#each highlights as highlight}
+                        <div
+                            class="w-full min-w-0 pr-6"
+                            class:w-full="highlights.length === 1"
+                            class:sm:w-1/2="highlights.length >= 2"
+                            class:lg:w-1/2="highlights.length === 2"
+                            class:lg:w-1/3="highlights.length === 3"
+                            class:lg:w-1/4="highlights.length >= 4"
+                        >
+                            <div
+                                class="flex min-w-0 items-center gap-3"
+                                class:justify-center="centered"
+                            >
+                                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl {highlight.iconBoxClass}" >
+                                    <span class="{highlight.iconClass} h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <div class="min-w-0">
+                                    <p class="text-sm font-semibold text-slate-950 dark:text-white">
+                                        {highlight.title}
+                                    </p>
+
+                                    <p
+                                        class="mt-0.5 text-xs leading-5 text-slate-500 dark:text-slate-400"
+                                        class:hidden="highlight.description === ''"
+                                    >
+                                        {highlight.description}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        {/each}
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/page-heading.wrn b/app/pages/components/page-heading.wrn new file mode 100644 index 00000000..a118753b --- /dev/null +++ b/app/pages/components/page-heading.wrn @@ -0,0 +1,29 @@ +page PageHeadingcomponent { + seo { + title = "PageHeading component" + description = "Reusable page heading component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

PageHeading

Reusable page heading component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PageHeading text="text" align="start" />

Legacy mount name: data-component="PageHeading".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PageHeading.wrn

component PageHeading {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--heading wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/page-shell.wrn b/app/pages/components/page-shell.wrn new file mode 100644 index 00000000..3090ce78 --- /dev/null +++ b/app/pages/components/page-shell.wrn @@ -0,0 +1,29 @@ +page PageShellcomponent { + seo { + title = "PageShell component" + description = "Reusable page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

PageShell

Reusable page shell component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PageShell />

Legacy mount name: data-component="PageShell".

Props and attributes

PropTypeRequirementDefault
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PageShell.wrn

component PageShell {
+  props {
+    className = ""
+  }
+  view {
+    <div class="min-h-screen bg-white text-slate-950 antialiased selection:bg-violet-200 dark:bg-slate-950 dark:text-white dark:selection:bg-violet-800 {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/page-skeleton.wrn b/app/pages/components/page-skeleton.wrn new file mode 100644 index 00000000..6560b4f1 --- /dev/null +++ b/app/pages/components/page-skeleton.wrn @@ -0,0 +1,32 @@ +page PageSkeletoncomponent { + seo { + title = "PageSkeleton component" + description = "Reusable page skeleton component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

PageSkeleton

Reusable page skeleton component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PageSkeleton label="Page" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="PageSkeleton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Page"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PageSkeleton.wrn

component PageSkeleton {
+  props {
+    label = "Page" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pagination.wrn b/app/pages/components/pagination.wrn new file mode 100644 index 00000000..f1cc4f88 --- /dev/null +++ b/app/pages/components/pagination.wrn @@ -0,0 +1,208 @@ +page Paginationcomponent { + seo { + title = "Pagination component" + description = "Reusable pagination component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Pagination

Reusable pagination component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Pagination currentPage="1" totalPages="1" previousHref="previousHref" nextHref="nextHref" pages="[]" />

Legacy mount name: data-component="Pagination".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
currentPagenumberOptional1
totalPagesnumberOptional1
previousHrefstringOptional""
nextHrefstringOptional""
pagesstringOptional[]
showNumbersbooleanOptionaltrue
showSummarybooleanOptionaltrue
totalItemsnumberOptional0
pageSizenumberOptional10
compactbooleanOptionalfalse
centeredbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Pagination.wrn

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 {
+        <nav
+            aria-label="Pagination"
+            class="w-full {class}"
+            class:hidden="totalPages <= 1"
+        >
+            <!-- Result summary -->
+            <div
+                class="mb-4 text-sm text-slate-500 dark:text-slate-400"
+                class:hidden="!showSummary || totalItems <= 0"
+                class:text-center="centered"
+            >
+                Showing
+
+                <span class="font-semibold text-slate-950 dark:text-white">
+                    {(currentPage - 1) * pageSize + 1}
+                </span>
+
+                to
+
+                <span class="font-semibold text-slate-950 dark:text-white">
+                    {currentPage * pageSize > totalItems ? totalItems : currentPage * pageSize}
+                </span>
+
+                of
+
+                <span class="font-semibold text-slate-950 dark:text-white">
+                    {totalItems}
+                </span>
+
+                results
+            </div>
+
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-center"
+                class:sm:justify-center="centered"
+                class:sm:justify-between="!centered"
+            >
+                <!-- Previous -->
+                <a
+                    href="{previousHref}"
+                    aria-label="Go to previous page"
+                    class="group h-11 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
+                    class:hidden="previousHref === ''"
+                    class:inline-flex="previousHref !== ''"
+                >
+                    <span class="icon-[lucide--arrow-left] h-4 w-4 transition-transform group-hover:-translate-x-0.5" aria-hidden="true" ></span>
+
+                    <span class:hidden="compact">
+                        Previous
+                    </span>
+                </a>
+
+                <span
+                    aria-disabled="true"
+                    class="h-11 cursor-not-allowed items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-slate-600"
+                    class:hidden="previousHref !== ''"
+                    class:inline-flex="previousHref === ''"
+                >
+                    <span class="icon-[lucide--arrow-left] h-4 w-4" aria-hidden="true" ></span>
+
+                    <span class:hidden="compact">
+                        Previous
+                    </span>
+                </span>
+
+                <!-- Numbered pages -->
+                <div
+                    class="flex flex-wrap items-center justify-center gap-1.5"
+                    class:hidden="!showNumbers"
+                >
+                    {#each pages as page}
+                    <!-- Ellipsis -->
+                    <span
+                        class="grid h-10 w-10 place-items-center text-sm font-semibold text-slate-400"
+                        class:hidden="!page.ellipsis"
+                    >
+                        …
+                    </span>
+
+                    <!-- Page link -->
+                    <a
+                        href="{page.href}"
+                        aria-label="Go to page {page.number}"
+                        class="h-10 min-w-10 items-center justify-center rounded-xl px-3 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
+                        class:hidden="page.ellipsis || page.current"
+                        class:inline-flex="!page.ellipsis && !page.current"
+                        class:border="!page.current"
+                        class:border-slate-200="!page.current"
+                        class:bg-white="!page.current"
+                        class:text-slate-600="!page.current"
+                        class:hover:border-indigo-300="!page.current"
+                        class:hover:bg-indigo-50="!page.current"
+                        class:hover:text-indigo-700="!page.current"
+                        class:dark:border-white/10="!page.current"
+                        class:dark:bg-white/5="!page.current"
+                        class:dark:text-slate-300="!page.current"
+                        class:dark:hover:border-indigo-500/30="!page.current"
+                        class:dark:hover:bg-indigo-500/10="!page.current"
+                        class:dark:hover:text-indigo-300="!page.current"
+                    >
+                        {page.number}
+                    </a>
+
+                    <!-- Current page -->
+                    <span
+                        aria-current="page"
+                        aria-label="Current page, page {page.number}"
+                        class="h-10 min-w-10 items-center justify-center rounded-xl bg-indigo-600 px-3 text-sm font-bold text-white shadow-lg shadow-indigo-600/20"
+                        class:hidden="page.ellipsis || !page.current"
+                        class:inline-flex="!page.ellipsis && page.current"
+                    >
+                        {page.number}
+                    </span>
+                    {/each}
+                </div>
+
+                <!-- Mobile page counter -->
+                <div
+                    class="flex items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400"
+                    class:hidden="showNumbers"
+                >
+                    Page
+
+                    <span class="mx-1 font-bold text-slate-950 dark:text-white">
+                        {currentPage}
+                    </span>
+
+                    of
+
+                    <span class="ml-1 font-bold text-slate-950 dark:text-white">
+                        {totalPages}
+                    </span>
+                </div>
+
+                <!-- Next -->
+                <a
+                    href="{nextHref}"
+                    aria-label="Go to next page"
+                    class="group h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950"
+                    class:hidden="nextHref === ''"
+                    class:inline-flex="nextHref !== ''"
+                >
+                    <span class:hidden="compact">
+                        Next
+                    </span>
+
+                    <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
+                </a>
+
+                <span
+                    aria-disabled="true"
+                    class="h-11 cursor-not-allowed items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-slate-600"
+                    class:hidden="nextHref !== ''"
+                    class:inline-flex="nextHref === ''"
+                >
+                    <span class:hidden="compact">
+                        Next
+                    </span>
+
+                    <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                </span>
+            </div>
+        </nav>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/panel.wrn b/app/pages/components/panel.wrn new file mode 100644 index 00000000..1a91821e --- /dev/null +++ b/app/pages/components/panel.wrn @@ -0,0 +1,27 @@ +page Panelcomponent { + seo { + title = "Panel component" + description = "Reusable panel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

Panel

Reusable panel component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Panel />

Legacy mount name: data-component="Panel".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Panel.wrn

component Panel {
+  props {
+    class = ""
+  }
+  view { <div class="wire-panel {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/partner-application-form.wrn b/app/pages/components/partner-application-form.wrn new file mode 100644 index 00000000..6fdea619 --- /dev/null +++ b/app/pages/components/partner-application-form.wrn @@ -0,0 +1,34 @@ +page PartnerApplicationFormcomponent { + seo { + title = "PartnerApplicationForm component" + description = "Reusable partner application form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PartnerApplicationForm

Reusable partner application form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PartnerApplicationForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PartnerApplicationForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PartnerApplicationForm.wrn

component PartnerApplicationForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/partner-logo-grid.wrn b/app/pages/components/partner-logo-grid.wrn new file mode 100644 index 00000000..9f7a02c1 --- /dev/null +++ b/app/pages/components/partner-logo-grid.wrn @@ -0,0 +1,31 @@ +page PartnerLogoGridcomponent { + seo { + title = "PartnerLogoGrid component" + description = "Reusable partner logo grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PartnerLogoGrid

Reusable partner logo grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PartnerLogoGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="PartnerLogoGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PartnerLogoGrid.wrn

component PartnerLogoGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/partner-program-card.wrn b/app/pages/components/partner-program-card.wrn new file mode 100644 index 00000000..d0e4dd5f --- /dev/null +++ b/app/pages/components/partner-program-card.wrn @@ -0,0 +1,34 @@ +page PartnerProgramCardcomponent { + seo { + title = "PartnerProgramCard component" + description = "Reusable partner program card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PartnerProgramCard

Reusable partner program card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PartnerProgramCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PartnerProgramCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PartnerProgramCard.wrn

component PartnerProgramCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/passkey-button.wrn b/app/pages/components/passkey-button.wrn new file mode 100644 index 00000000..dd2ee741 --- /dev/null +++ b/app/pages/components/passkey-button.wrn @@ -0,0 +1,32 @@ +page PasskeyButtoncomponent { + seo { + title = "PasskeyButton component" + description = "Reusable passkey button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

PasskeyButton

Reusable passkey button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PasskeyButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="PasskeyButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PasskeyButton.wrn

component PasskeyButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/password-input.wrn b/app/pages/components/password-input.wrn new file mode 100644 index 00000000..7ba3e877 --- /dev/null +++ b/app/pages/components/password-input.wrn @@ -0,0 +1,45 @@ +page PasswordInputcomponent { + seo { + title = "PasswordInput component" + description = "Reusable password input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PasswordInput

Reusable password input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PasswordInput id="id" name="name" label="Password" value="value" placeholder="placeholder" />

Legacy mount name: data-component="PasswordInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Password"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/PasswordInput.wrn

component PasswordInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Password"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="password" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/password-requirement-list.wrn b/app/pages/components/password-requirement-list.wrn new file mode 100644 index 00000000..ec883bd5 --- /dev/null +++ b/app/pages/components/password-requirement-list.wrn @@ -0,0 +1,31 @@ +page PasswordRequirementListcomponent { + seo { + title = "PasswordRequirementList component" + description = "Reusable password requirement list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PasswordRequirementList

Reusable password requirement list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PasswordRequirementList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="PasswordRequirementList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PasswordRequirementList.wrn

component PasswordRequirementList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/password-strength-meter.wrn b/app/pages/components/password-strength-meter.wrn new file mode 100644 index 00000000..acec78f5 --- /dev/null +++ b/app/pages/components/password-strength-meter.wrn @@ -0,0 +1,32 @@ +page PasswordStrengthMetercomponent { + seo { + title = "PasswordStrengthMeter component" + description = "Reusable password strength meter component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

PasswordStrengthMeter

Reusable password strength meter component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PasswordStrengthMeter title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="PasswordStrengthMeter".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PasswordStrengthMeter.wrn

component PasswordStrengthMeter {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/password-visibility-toggle.wrn b/app/pages/components/password-visibility-toggle.wrn new file mode 100644 index 00000000..1f9a41fb --- /dev/null +++ b/app/pages/components/password-visibility-toggle.wrn @@ -0,0 +1,37 @@ +page PasswordVisibilityTogglecomponent { + seo { + title = "PasswordVisibilityToggle component" + description = "Reusable password visibility toggle component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PasswordVisibilityToggle

Reusable password visibility toggle component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PasswordVisibilityToggle label="PasswordVisibility" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PasswordVisibilityToggle".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PasswordVisibility"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PasswordVisibilityToggle.wrn

component PasswordVisibilityToggle {
+  props {
+    label = "PasswordVisibility" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/path-input.wrn b/app/pages/components/path-input.wrn new file mode 100644 index 00000000..10f2de92 --- /dev/null +++ b/app/pages/components/path-input.wrn @@ -0,0 +1,37 @@ +page PathInputcomponent { + seo { + title = "PathInput component" + description = "Reusable path input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PathInput

Reusable path input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PathInput label="Path" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PathInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Path"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PathInput.wrn

component PathInput {
+  props {
+    label = "Path" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/payment-method-card.wrn b/app/pages/components/payment-method-card.wrn new file mode 100644 index 00000000..bef5ef10 --- /dev/null +++ b/app/pages/components/payment-method-card.wrn @@ -0,0 +1,34 @@ +page PaymentMethodCardcomponent { + seo { + title = "PaymentMethodCard component" + description = "Reusable payment method card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PaymentMethodCard

Reusable payment method card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PaymentMethodCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PaymentMethodCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PaymentMethodCard.wrn

component PaymentMethodCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pdf-preview.wrn b/app/pages/components/pdf-preview.wrn new file mode 100644 index 00000000..014e5086 --- /dev/null +++ b/app/pages/components/pdf-preview.wrn @@ -0,0 +1,34 @@ +page PdfPreviewcomponent { + seo { + title = "PdfPreview component" + description = "Reusable pdf preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PdfPreview

Reusable pdf preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PdfPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PdfPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PdfPreview.wrn

component PdfPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/percentage-input.wrn b/app/pages/components/percentage-input.wrn new file mode 100644 index 00000000..6cecae67 --- /dev/null +++ b/app/pages/components/percentage-input.wrn @@ -0,0 +1,37 @@ +page PercentageInputcomponent { + seo { + title = "PercentageInput component" + description = "Reusable percentage input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PercentageInput

Reusable percentage input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PercentageInput label="Percentage" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PercentageInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Percentage"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PercentageInput.wrn

component PercentageInput {
+  props {
+    label = "Percentage" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/permission-selector.wrn b/app/pages/components/permission-selector.wrn new file mode 100644 index 00000000..363d9ede --- /dev/null +++ b/app/pages/components/permission-selector.wrn @@ -0,0 +1,37 @@ +page PermissionSelectorcomponent { + seo { + title = "PermissionSelector component" + description = "Reusable permission selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PermissionSelector

Reusable permission selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PermissionSelector label="Permission" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PermissionSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Permission"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PermissionSelector.wrn

component PermissionSelector {
+  props {
+    label = "Permission" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/phone-input.wrn b/app/pages/components/phone-input.wrn new file mode 100644 index 00000000..c0253dd0 --- /dev/null +++ b/app/pages/components/phone-input.wrn @@ -0,0 +1,45 @@ +page PhoneInputcomponent { + seo { + title = "PhoneInput component" + description = "Reusable phone input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PhoneInput

Reusable phone input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PhoneInput id="id" name="name" label="Phone" value="value" placeholder="placeholder" />

Legacy mount name: data-component="PhoneInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Phone"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/PhoneInput.wrn

component PhoneInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Phone"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="tel" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pie-chart.wrn b/app/pages/components/pie-chart.wrn new file mode 100644 index 00000000..3140220a --- /dev/null +++ b/app/pages/components/pie-chart.wrn @@ -0,0 +1,32 @@ +page PieChartcomponent { + seo { + title = "PieChart component" + description = "Reusable pie chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

PieChart

Reusable pie chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PieChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="PieChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PieChart.wrn

component PieChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pill.wrn b/app/pages/components/pill.wrn new file mode 100644 index 00000000..e28329d7 --- /dev/null +++ b/app/pages/components/pill.wrn @@ -0,0 +1,29 @@ +page Pillcomponent { + seo { + title = "Pill component" + description = "Reusable pill component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Pill

Reusable pill component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Pill label="Pill" variant="default" />

Legacy mount name: data-component="Pill".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Pill"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Pill.wrn

component Pill {
+  props {
+    label = "Pill"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--pill {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pin-input.wrn b/app/pages/components/pin-input.wrn new file mode 100644 index 00000000..c6ce073b --- /dev/null +++ b/app/pages/components/pin-input.wrn @@ -0,0 +1,37 @@ +page PinInputcomponent { + seo { + title = "PinInput component" + description = "Reusable pin input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PinInput

Reusable pin input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PinInput label="Pin" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PinInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Pin"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PinInput.wrn

component PinInput {
+  props {
+    label = "Pin" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/plain-text-editor.wrn b/app/pages/components/plain-text-editor.wrn new file mode 100644 index 00000000..2088c9f3 --- /dev/null +++ b/app/pages/components/plain-text-editor.wrn @@ -0,0 +1,37 @@ +page PlainTextEditorcomponent { + seo { + title = "PlainTextEditor component" + description = "Reusable plain text editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PlainTextEditor

Reusable plain text editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PlainTextEditor label="PlainText" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PlainTextEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PlainText"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PlainTextEditor.wrn

component PlainTextEditor {
+  props {
+    label = "PlainText" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/plan-cta.wrn b/app/pages/components/plan-cta.wrn new file mode 100644 index 00000000..5c4768d0 --- /dev/null +++ b/app/pages/components/plan-cta.wrn @@ -0,0 +1,32 @@ +page PlanCTAcomponent { + seo { + title = "PlanCTA component" + description = "Reusable plan c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

PlanCTA

Reusable plan c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PlanCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="PlanCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PlanCTA.wrn

component PlanCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/plan-feature-list.wrn b/app/pages/components/plan-feature-list.wrn new file mode 100644 index 00000000..f521755d --- /dev/null +++ b/app/pages/components/plan-feature-list.wrn @@ -0,0 +1,31 @@ +page PlanFeatureListcomponent { + seo { + title = "PlanFeatureList component" + description = "Reusable plan feature list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PlanFeatureList

Reusable plan feature list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PlanFeatureList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="PlanFeatureList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PlanFeatureList.wrn

component PlanFeatureList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/plan-limit-list.wrn b/app/pages/components/plan-limit-list.wrn new file mode 100644 index 00000000..61cc8d01 --- /dev/null +++ b/app/pages/components/plan-limit-list.wrn @@ -0,0 +1,31 @@ +page PlanLimitListcomponent { + seo { + title = "PlanLimitList component" + description = "Reusable plan limit list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PlanLimitList

Reusable plan limit list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PlanLimitList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="PlanLimitList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PlanLimitList.wrn

component PlanLimitList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/plan-selector.wrn b/app/pages/components/plan-selector.wrn new file mode 100644 index 00000000..635d546b --- /dev/null +++ b/app/pages/components/plan-selector.wrn @@ -0,0 +1,37 @@ +page PlanSelectorcomponent { + seo { + title = "PlanSelector component" + description = "Reusable plan selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PlanSelector

Reusable plan selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PlanSelector label="Plan" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PlanSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Plan"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PlanSelector.wrn

component PlanSelector {
+  props {
+    label = "Plan" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/platform-pillar-card.wrn b/app/pages/components/platform-pillar-card.wrn new file mode 100644 index 00000000..e34b8b7d --- /dev/null +++ b/app/pages/components/platform-pillar-card.wrn @@ -0,0 +1,34 @@ +page PlatformPillarCardcomponent { + seo { + title = "PlatformPillarCard component" + description = "Reusable platform pillar card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PlatformPillarCard

Reusable platform pillar card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PlatformPillarCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PlatformPillarCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PlatformPillarCard.wrn

component PlatformPillarCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/policy-version-table.wrn b/app/pages/components/policy-version-table.wrn new file mode 100644 index 00000000..384f5e77 --- /dev/null +++ b/app/pages/components/policy-version-table.wrn @@ -0,0 +1,31 @@ +page PolicyVersionTablecomponent { + seo { + title = "PolicyVersionTable component" + description = "Reusable policy version table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PolicyVersionTable

Reusable policy version table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PolicyVersionTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="PolicyVersionTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PolicyVersionTable.wrn

component PolicyVersionTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/popover.wrn b/app/pages/components/popover.wrn new file mode 100644 index 00000000..cf8da898 --- /dev/null +++ b/app/pages/components/popover.wrn @@ -0,0 +1,31 @@ +page Popovercomponent { + seo { + title = "Popover component" + description = "Reusable popover component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

Popover

Reusable popover component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Popover title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="Popover".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Popover.wrn

component Popover {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/port-input.wrn b/app/pages/components/port-input.wrn new file mode 100644 index 00000000..41c59c5b --- /dev/null +++ b/app/pages/components/port-input.wrn @@ -0,0 +1,37 @@ +page PortInputcomponent { + seo { + title = "PortInput component" + description = "Reusable port input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PortInput

Reusable port input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PortInput label="Port" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PortInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Port"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PortInput.wrn

component PortInput {
+  props {
+    label = "Port" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/port-number-input.wrn b/app/pages/components/port-number-input.wrn new file mode 100644 index 00000000..ea975e2a --- /dev/null +++ b/app/pages/components/port-number-input.wrn @@ -0,0 +1,37 @@ +page PortNumberInputcomponent { + seo { + title = "PortNumberInput component" + description = "Reusable port number input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PortNumberInput

Reusable port number input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PortNumberInput label="PortNumber" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PortNumberInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PortNumber"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PortNumberInput.wrn

component PortNumberInput {
+  props {
+    label = "PortNumber" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/positive-number-input.wrn b/app/pages/components/positive-number-input.wrn new file mode 100644 index 00000000..20e52e11 --- /dev/null +++ b/app/pages/components/positive-number-input.wrn @@ -0,0 +1,37 @@ +page PositiveNumberInputcomponent { + seo { + title = "PositiveNumberInput component" + description = "Reusable positive number input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PositiveNumberInput

Reusable positive number input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PositiveNumberInput label="PositiveNumber" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PositiveNumberInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PositiveNumber"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PositiveNumberInput.wrn

component PositiveNumberInput {
+  props {
+    label = "PositiveNumber" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/postal-code-input.wrn b/app/pages/components/postal-code-input.wrn new file mode 100644 index 00000000..a9f81032 --- /dev/null +++ b/app/pages/components/postal-code-input.wrn @@ -0,0 +1,37 @@ +page PostalCodeInputcomponent { + seo { + title = "PostalCodeInput component" + description = "Reusable postal code input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PostalCodeInput

Reusable postal code input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PostalCodeInput label="PostalCode" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PostalCodeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PostalCode"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PostalCodeInput.wrn

component PostalCodeInput {
+  props {
+    label = "PostalCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/postman-cta.wrn b/app/pages/components/postman-cta.wrn new file mode 100644 index 00000000..02c3b8e6 --- /dev/null +++ b/app/pages/components/postman-cta.wrn @@ -0,0 +1,32 @@ +page PostmanCTAcomponent { + seo { + title = "PostmanCTA component" + description = "Reusable postman c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

PostmanCTA

Reusable postman c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PostmanCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="PostmanCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PostmanCTA.wrn

component PostmanCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/preset-date-range-picker.wrn b/app/pages/components/preset-date-range-picker.wrn new file mode 100644 index 00000000..808f416a --- /dev/null +++ b/app/pages/components/preset-date-range-picker.wrn @@ -0,0 +1,37 @@ +page PresetDateRangePickercomponent { + seo { + title = "PresetDateRangePicker component" + description = "Reusable preset date range picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PresetDateRangePicker

Reusable preset date range picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PresetDateRangePicker label="PresetDateRange" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PresetDateRangePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PresetDateRange"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PresetDateRangePicker.wrn

component PresetDateRangePicker {
+  props {
+    label = "PresetDateRange" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/press-release-card.wrn b/app/pages/components/press-release-card.wrn new file mode 100644 index 00000000..c1fe099d --- /dev/null +++ b/app/pages/components/press-release-card.wrn @@ -0,0 +1,34 @@ +page PressReleaseCardcomponent { + seo { + title = "PressReleaseCard component" + description = "Reusable press release card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PressReleaseCard

Reusable press release card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PressReleaseCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PressReleaseCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PressReleaseCard.wrn

component PressReleaseCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/preview-badge.wrn b/app/pages/components/preview-badge.wrn new file mode 100644 index 00000000..703d3d99 --- /dev/null +++ b/app/pages/components/preview-badge.wrn @@ -0,0 +1,29 @@ +page PreviewBadgecomponent { + seo { + title = "PreviewBadge component" + description = "Reusable preview badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

PreviewBadge

Reusable preview badge component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PreviewBadge label="Preview" variant="default" />

Legacy mount name: data-component="PreviewBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Preview"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PreviewBadge.wrn

component PreviewBadge {
+  props {
+    label = "Preview"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--previewbadge {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/previous-next-navigation.wrn b/app/pages/components/previous-next-navigation.wrn new file mode 100644 index 00000000..92695d0c --- /dev/null +++ b/app/pages/components/previous-next-navigation.wrn @@ -0,0 +1,31 @@ +page PreviousNextNavigationcomponent { + seo { + title = "PreviousNextNavigation component" + description = "Reusable previous next navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

PreviousNextNavigation

Reusable previous next navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PreviousNextNavigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="PreviousNextNavigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PreviousNextNavigation.wrn

component PreviousNextNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/price-input.wrn b/app/pages/components/price-input.wrn new file mode 100644 index 00000000..08172b4c --- /dev/null +++ b/app/pages/components/price-input.wrn @@ -0,0 +1,37 @@ +page PriceInputcomponent { + seo { + title = "PriceInput component" + description = "Reusable price input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PriceInput

Reusable price input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PriceInput label="Price" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PriceInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Price"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PriceInput.wrn

component PriceInput {
+  props {
+    label = "Price" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/price-range-slider.wrn b/app/pages/components/price-range-slider.wrn new file mode 100644 index 00000000..9165d1f4 --- /dev/null +++ b/app/pages/components/price-range-slider.wrn @@ -0,0 +1,34 @@ +page PriceRangeSlidercomponent { + seo { + title = "PriceRangeSlider component" + description = "Reusable price range slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PriceRangeSlider

Reusable price range slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PriceRangeSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PriceRangeSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PriceRangeSlider.wrn

component PriceRangeSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/price-text.wrn b/app/pages/components/price-text.wrn new file mode 100644 index 00000000..793177da --- /dev/null +++ b/app/pages/components/price-text.wrn @@ -0,0 +1,29 @@ +page PriceTextcomponent { + seo { + title = "PriceText component" + description = "Reusable price text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PriceText

Reusable price text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PriceText text="text" align="start" />

Legacy mount name: data-component="PriceText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PriceText.wrn

component PriceText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--display wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-card.wrn b/app/pages/components/pricing-card.wrn new file mode 100644 index 00000000..f23ee266 --- /dev/null +++ b/app/pages/components/pricing-card.wrn @@ -0,0 +1,34 @@ +page PricingCardcomponent { + seo { + title = "PricingCard component" + description = "Reusable pricing card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PricingCard

Reusable pricing card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PricingCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingCard.wrn

component PricingCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-comparison-table.wrn b/app/pages/components/pricing-comparison-table.wrn new file mode 100644 index 00000000..08ee377d --- /dev/null +++ b/app/pages/components/pricing-comparison-table.wrn @@ -0,0 +1,30 @@ +page PricingComparisonTablecomponent { + seo { + title = "PricingComparisonTable component" + description = "Reusable pricing comparison table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PricingComparisonTable

Reusable pricing comparison table component.

@wrnexus/ui 0.2.644 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingComparisonTable caption="Plan comparison" plans="[]" features="[]" />

Legacy mount name: data-component="PricingComparisonTable".

Props and attributes

PropTypeRequirementDefault
captionstringOptional"Plan comparison"
plansstringOptional[]
featuresstringOptional[]
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingComparisonTable.wrn

component PricingComparisonTable {
+  props {
+    caption = "Plan comparison"
+    plans = []
+    features = []
+    class = ""
+  }
+  view { <div class="wire-table-wrap {class}" tabindex="0" role="region" aria-label="{caption}"><table class="wire-table wire-comparison-table"><caption class="wire-visually-hidden">{caption}</caption><thead><tr><th scope="col">Feature</th>{#each plans as plan}<th scope="col">{plan.name}</th>{/each}</tr></thead><tbody>{#each features as feature}<tr><th scope="row">{feature.label}</th>{#each feature.values as value}<td>{value}</td>{/each}</tr>{/each}</tbody></table></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-contact-form.wrn b/app/pages/components/pricing-contact-form.wrn new file mode 100644 index 00000000..8d450fa9 --- /dev/null +++ b/app/pages/components/pricing-contact-form.wrn @@ -0,0 +1,34 @@ +page PricingContactFormcomponent { + seo { + title = "PricingContactForm component" + description = "Reusable pricing contact form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PricingContactForm

Reusable pricing contact form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingContactForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PricingContactForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingContactForm.wrn

component PricingContactForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-feature-group.wrn b/app/pages/components/pricing-feature-group.wrn new file mode 100644 index 00000000..708d97c6 --- /dev/null +++ b/app/pages/components/pricing-feature-group.wrn @@ -0,0 +1,37 @@ +page PricingFeatureGroupcomponent { + seo { + title = "PricingFeatureGroup component" + description = "Reusable pricing feature group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PricingFeatureGroup

Reusable pricing feature group component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingFeatureGroup label="PricingFeature" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PricingFeatureGroup".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PricingFeature"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingFeatureGroup.wrn

component PricingFeatureGroup {
+  props {
+    label = "PricingFeature" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-grid.wrn b/app/pages/components/pricing-grid.wrn new file mode 100644 index 00000000..4c48a1fd --- /dev/null +++ b/app/pages/components/pricing-grid.wrn @@ -0,0 +1,31 @@ +page PricingGridcomponent { + seo { + title = "PricingGrid component" + description = "Reusable pricing grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PricingGrid

Reusable pricing grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="PricingGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingGrid.wrn

component PricingGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-hero.wrn b/app/pages/components/pricing-hero.wrn new file mode 100644 index 00000000..5d3f5df4 --- /dev/null +++ b/app/pages/components/pricing-hero.wrn @@ -0,0 +1,31 @@ +page PricingHerocomponent { + seo { + title = "PricingHero component" + description = "Reusable pricing hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

PricingHero

Reusable pricing hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="PricingHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingHero.wrn

component PricingHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-plan-card.wrn b/app/pages/components/pricing-plan-card.wrn new file mode 100644 index 00000000..4ab9a0d2 --- /dev/null +++ b/app/pages/components/pricing-plan-card.wrn @@ -0,0 +1,36 @@ +page PricingPlanCardcomponent { + seo { + title = "PricingPlanCard component" + description = "Reusable pricing plan card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PricingPlanCard

Reusable pricing plan card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingPlanCard name="Starter" description="description" price="₹0" period="/month" featured="false" />

Legacy mount name: data-component="PricingPlanCard".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
namestringOptional"Starter"
descriptionstringOptional""
pricestringOptional"₹0"
periodstringOptional"/month"
featuredbooleanOptionalfalse
ctaLabelstringOptional"Choose plan"
ctaHrefstringOptional"#"

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingPlanCard.wrn

component PricingPlanCard {
+  props {
+    class = ""
+    name = "Starter"
+    description = ""
+    price = "₹0"
+    period = "/month"
+    featured = false
+    ctaLabel = "Choose plan"
+    ctaHref = "#"
+  }
+  view {
+    <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'} {class}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-table.wrn b/app/pages/components/pricing-table.wrn new file mode 100644 index 00000000..7d37107a --- /dev/null +++ b/app/pages/components/pricing-table.wrn @@ -0,0 +1,31 @@ +page PricingTablecomponent { + seo { + title = "PricingTable component" + description = "Reusable pricing table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

PricingTable

Reusable pricing table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="PricingTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingTable.wrn

component PricingTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/pricing-toggle.wrn b/app/pages/components/pricing-toggle.wrn new file mode 100644 index 00000000..938e643b --- /dev/null +++ b/app/pages/components/pricing-toggle.wrn @@ -0,0 +1,37 @@ +page PricingTogglecomponent { + seo { + title = "PricingToggle component" + description = "Reusable pricing toggle component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PricingToggle

Reusable pricing toggle component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingToggle label="Pricing" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PricingToggle".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Pricing"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingToggle.wrn

component PricingToggle {
+  props {
+    label = "Pricing" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/primary-button.wrn b/app/pages/components/primary-button.wrn new file mode 100644 index 00000000..27ea316b --- /dev/null +++ b/app/pages/components/primary-button.wrn @@ -0,0 +1,30 @@ +page PrimaryButtoncomponent { + seo { + title = "PrimaryButton component" + description = "Reusable primary button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

PrimaryButton

Reusable primary button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PrimaryButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="PrimaryButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PrimaryButton.wrn

component PrimaryButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--primary {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/print-action.wrn b/app/pages/components/print-action.wrn new file mode 100644 index 00000000..6f46ee8e --- /dev/null +++ b/app/pages/components/print-action.wrn @@ -0,0 +1,32 @@ +page PrintActioncomponent { + seo { + title = "PrintAction component" + description = "Reusable print action component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

PrintAction

Reusable print action component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PrintAction label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="PrintAction".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PrintAction.wrn

component PrintAction {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/print-policy-button.wrn b/app/pages/components/print-policy-button.wrn new file mode 100644 index 00000000..6cbc9194 --- /dev/null +++ b/app/pages/components/print-policy-button.wrn @@ -0,0 +1,32 @@ +page PrintPolicyButtoncomponent { + seo { + title = "PrintPolicyButton component" + description = "Reusable print policy button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

PrintPolicyButton

Reusable print policy button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PrintPolicyButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="PrintPolicyButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PrintPolicyButton.wrn

component PrintPolicyButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/priority-selector.wrn b/app/pages/components/priority-selector.wrn new file mode 100644 index 00000000..890842c8 --- /dev/null +++ b/app/pages/components/priority-selector.wrn @@ -0,0 +1,37 @@ +page PrioritySelectorcomponent { + seo { + title = "PrioritySelector component" + description = "Reusable priority selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PrioritySelector

Reusable priority selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PrioritySelector label="Priority" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PrioritySelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Priority"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PrioritySelector.wrn

component PrioritySelector {
+  props {
+    label = "Priority" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/privacy-notice.wrn b/app/pages/components/privacy-notice.wrn new file mode 100644 index 00000000..11786cc0 --- /dev/null +++ b/app/pages/components/privacy-notice.wrn @@ -0,0 +1,32 @@ +page PrivacyNoticecomponent { + seo { + title = "PrivacyNotice component" + description = "Reusable privacy notice component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

PrivacyNotice

Reusable privacy notice component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PrivacyNotice label="Privacy" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="PrivacyNotice".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Privacy"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PrivacyNotice.wrn

component PrivacyNotice {
+  props {
+    label = "Privacy" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-architecture-diagram.wrn b/app/pages/components/product-architecture-diagram.wrn new file mode 100644 index 00000000..35f6f0bf --- /dev/null +++ b/app/pages/components/product-architecture-diagram.wrn @@ -0,0 +1,32 @@ +page ProductArchitectureDiagramcomponent { + seo { + title = "ProductArchitectureDiagram component" + description = "Reusable product architecture diagram component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ProductArchitectureDiagram

Reusable product architecture diagram component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductArchitectureDiagram title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ProductArchitectureDiagram".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductArchitectureDiagram.wrn

component ProductArchitectureDiagram {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-card.wrn b/app/pages/components/product-card.wrn new file mode 100644 index 00000000..60ce31a4 --- /dev/null +++ b/app/pages/components/product-card.wrn @@ -0,0 +1,33 @@ +page ProductCardcomponent { + seo { + title = "ProductCard component" + description = "Reusable product card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProductCard

Reusable product card component.

@wrnexus/ui 0.2.647 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductCard eyebrow="Product" title="Product name" description="description" href="#" actionLabel="Learn more" />

Legacy mount name: data-component="ProductCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional"Product"
titlestringOptional"Product name"
descriptionstringOptional""
hrefstringOptional"#"
actionLabelstringOptional"Learn more"
statusstringOptional""
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductCard.wrn

component ProductCard {
+  props {
+    eyebrow = "Product"
+    title = "Product name"
+    description = ""
+    href = "#"
+    actionLabel = "Learn more"
+    status = ""
+    class = ""
+  }
+  view { <article class="wire-product-card {class}"><div class="wire-product-card__meta"><span class="wire-eyebrow">{eyebrow}</span><span data-show="status" class="wire-badge">{status}</span></div><h3>{title}</h3><p>{description}</p><a href="{href}" class="wire-product-card__link">{actionLabel}<span aria-hidden="true"> →</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-category-section.wrn b/app/pages/components/product-category-section.wrn new file mode 100644 index 00000000..4d2f9fab --- /dev/null +++ b/app/pages/components/product-category-section.wrn @@ -0,0 +1,31 @@ +page ProductCategorySectioncomponent { + seo { + title = "ProductCategorySection component" + description = "Reusable product category section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ProductCategorySection

Reusable product category section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductCategorySection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ProductCategorySection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductCategorySection.wrn

component ProductCategorySection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-cta.wrn b/app/pages/components/product-cta.wrn new file mode 100644 index 00000000..25225e57 --- /dev/null +++ b/app/pages/components/product-cta.wrn @@ -0,0 +1,32 @@ +page ProductCTAcomponent { + seo { + title = "ProductCTA component" + description = "Reusable product c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ProductCTA

Reusable product c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ProductCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductCTA.wrn

component ProductCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-feature-list.wrn b/app/pages/components/product-feature-list.wrn new file mode 100644 index 00000000..5d05596c --- /dev/null +++ b/app/pages/components/product-feature-list.wrn @@ -0,0 +1,31 @@ +page ProductFeatureListcomponent { + seo { + title = "ProductFeatureList component" + description = "Reusable product feature list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ProductFeatureList

Reusable product feature list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductFeatureList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ProductFeatureList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductFeatureList.wrn

component ProductFeatureList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-grid.wrn b/app/pages/components/product-grid.wrn new file mode 100644 index 00000000..efefc2ac --- /dev/null +++ b/app/pages/components/product-grid.wrn @@ -0,0 +1,31 @@ +page ProductGridcomponent { + seo { + title = "ProductGrid component" + description = "Reusable product grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ProductGrid

Reusable product grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ProductGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductGrid.wrn

component ProductGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-hero.wrn b/app/pages/components/product-hero.wrn new file mode 100644 index 00000000..65503ac8 --- /dev/null +++ b/app/pages/components/product-hero.wrn @@ -0,0 +1,31 @@ +page ProductHerocomponent { + seo { + title = "ProductHero component" + description = "Reusable product hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ProductHero

Reusable product hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ProductHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductHero.wrn

component ProductHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-icon.wrn b/app/pages/components/product-icon.wrn new file mode 100644 index 00000000..ea0a054b --- /dev/null +++ b/app/pages/components/product-icon.wrn @@ -0,0 +1,34 @@ +page ProductIconcomponent { + seo { + title = "ProductIcon component" + description = "Reusable product icon component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProductIcon

Reusable product icon component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductIcon eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ProductIcon".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductIcon.wrn

component ProductIcon {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-integration-list.wrn b/app/pages/components/product-integration-list.wrn new file mode 100644 index 00000000..f05cd979 --- /dev/null +++ b/app/pages/components/product-integration-list.wrn @@ -0,0 +1,31 @@ +page ProductIntegrationListcomponent { + seo { + title = "ProductIntegrationList component" + description = "Reusable product integration list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ProductIntegrationList

Reusable product integration list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductIntegrationList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ProductIntegrationList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductIntegrationList.wrn

component ProductIntegrationList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-list.wrn b/app/pages/components/product-list.wrn new file mode 100644 index 00000000..a8e9b257 --- /dev/null +++ b/app/pages/components/product-list.wrn @@ -0,0 +1,31 @@ +page ProductListcomponent { + seo { + title = "ProductList component" + description = "Reusable product list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ProductList

Reusable product list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ProductList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductList.wrn

component ProductList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-logo.wrn b/app/pages/components/product-logo.wrn new file mode 100644 index 00000000..2bd25679 --- /dev/null +++ b/app/pages/components/product-logo.wrn @@ -0,0 +1,34 @@ +page ProductLogocomponent { + seo { + title = "ProductLogo component" + description = "Reusable product logo component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProductLogo

Reusable product logo component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductLogo eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ProductLogo".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductLogo.wrn

component ProductLogo {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-mega-menu.wrn b/app/pages/components/product-mega-menu.wrn new file mode 100644 index 00000000..bd3fe49f --- /dev/null +++ b/app/pages/components/product-mega-menu.wrn @@ -0,0 +1,353 @@ +page ProductMegaMenucomponent { + seo { + title = "ProductMegaMenu component" + description = "Reusable product mega menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

ProductMegaMenu

Reusable product mega menu component.

@wrnexus/ui 0.2.641 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductMegaMenu />

Legacy mount name: data-component="ProductMegaMenu".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductMegaMenu.wrn

component ProductMegaMenu {
+    props {
+        class: string = ""
+    }
+    view {
+        <div
+            class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
+        >
+            <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
+                <div class="grid gap-8 lg:grid-cols-[minmax(0,1.65fr)_minmax(18rem,0.7fr)]">
+
+                    <!-- Main product links -->
+                    <div>
+                        <div class="mb-5 flex items-end justify-between gap-6">
+                            <div>
+                                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
+                                    WRNexusJS platform
+                                </p>
+
+                                <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
+                                    Everything you need to manage identity
+                                </h2>
+                            </div>
+
+                            <a
+                                href="/product"
+                                class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
+                            >
+                                View all features
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+
+                        <div class="grid gap-2 md:grid-cols-2">
+
+                            <!-- Platform -->
+                            <a
+                                href="/platform"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--layers-3] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Platform
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Unified identity infrastructure for every application.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Authentication -->
+                            <a
+                                href="/authentication"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--fingerprint] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Authentication
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Passwords, passkeys, social login, MFA, and SSO.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- User management -->
+                            <a
+                                href="/user-management"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--users-round] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            User management
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Profiles, sessions, invitations, and user lifecycle.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Organizations -->
+                            <a
+                                href="/organizations"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--building-2] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Organizations
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Multi-tenant workspaces, teams, domains, and membership.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Authorization -->
+                            <a
+                                href="/authorization"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--key-square] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Authorization
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Roles, permissions, policies, and protected resources.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Security -->
+                            <a
+                                href="/security"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--shield-check] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Security
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Session controls, recovery, audit logs, and threat protection.
+                                    </span>
+                                </span>
+                            </a>
+                        </div>
+
+                        <a
+                            href="/product"
+                            class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
+                        >
+                            View all product features
+
+                            <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                        </a>
+                    </div>
+
+                    <!-- Featured panel -->
+                    <aside
+                        class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10"
+                    >
+                        <div aria-hidden="true" class="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" ></div>
+
+                        <div aria-hidden="true" class="absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" ></div>
+
+                        <div class="relative">
+                            <span
+                                class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--sparkles] h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                Featured
+                            </span>
+
+                            <div
+                                class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20"
+                            >
+                                <span class="icon-[lucide--shield-user] h-6 w-6" aria-hidden="true" ></span>
+                            </div>
+
+                            <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
+                                Identity built for modern SaaS
+                            </h3>
+
+                            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
+                                Add secure authentication, organizations, permissions, and user
+                                management without rebuilding identity infrastructure.
+                            </p>
+
+                            <ul class="mt-5 space-y-3">
+                                <li class="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
+                                    <span
+                                        class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+                                    >
+                                        <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" ></span>
+                                    </span>
+
+                                    Passkeys and multifactor authentication
+                                </li>
+
+                                <li class="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
+                                    <span
+                                        class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+                                    >
+                                        <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" ></span>
+                                    </span>
+
+                                    Organizations and workspace isolation
+                                </li>
+
+                                <li class="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
+                                    <span
+                                        class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+                                    >
+                                        <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" ></span>
+                                    </span>
+
+                                    APIs and SDKs for every stack
+                                </li>
+                            </ul>
+
+                            <a
+                                href="/solutions/saas"
+                                class="group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                            >
+                                Explore SaaS identity
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+
+                            <div class="mt-4 flex items-center justify-center gap-2 text-xs text-slate-500 dark:text-slate-400">
+                                <span class="icon-[lucide--code-2] h-4 w-4 text-indigo-600 dark:text-indigo-400" aria-hidden="true" ></span>
+
+                                Developer-first and API-ready
+                            </div>
+                        </div>
+                    </aside>
+
+                </div>
+
+                <!-- Bottom quick links -->
+                <div
+                    class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
+                >
+                    <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
+                        <a
+                            href="/integrations"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--plug] h-4 w-4" aria-hidden="true" ></span>
+
+                            Integrations
+                        </a>
+
+                        <a
+                            href="/enterprise-sso"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--building-2] h-4 w-4" aria-hidden="true" ></span>
+
+                            Enterprise SSO
+                        </a>
+
+                        <a
+                            href="/audit-logs"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--scroll-text] h-4 w-4" aria-hidden="true" ></span>
+
+                            Audit logs
+                        </a>
+                    </div>
+
+                    <a
+                        href="/docs"
+                        class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                    >
+                        Read the documentation
+
+                        <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-mini-card.wrn b/app/pages/components/product-mini-card.wrn new file mode 100644 index 00000000..fdaed0f8 --- /dev/null +++ b/app/pages/components/product-mini-card.wrn @@ -0,0 +1,34 @@ +page ProductMiniCardcomponent { + seo { + title = "ProductMiniCard component" + description = "Reusable product mini card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProductMiniCard

Reusable product mini card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductMiniCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ProductMiniCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductMiniCard.wrn

component ProductMiniCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-navigation-card.wrn b/app/pages/components/product-navigation-card.wrn new file mode 100644 index 00000000..87cef3f6 --- /dev/null +++ b/app/pages/components/product-navigation-card.wrn @@ -0,0 +1,34 @@ +page ProductNavigationCardcomponent { + seo { + title = "ProductNavigationCard component" + description = "Reusable product navigation card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProductNavigationCard

Reusable product navigation card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductNavigationCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ProductNavigationCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductNavigationCard.wrn

component ProductNavigationCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-page-shell.wrn b/app/pages/components/product-page-shell.wrn new file mode 100644 index 00000000..0f5a4bec --- /dev/null +++ b/app/pages/components/product-page-shell.wrn @@ -0,0 +1,27 @@ +page ProductPageShellcomponent { + seo { + title = "ProductPageShell component" + description = "Reusable product page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ProductPageShell

Reusable product page shell component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductPageShell />

Legacy mount name: data-component="ProductPageShell".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductPageShell.wrn

component ProductPageShell {
+  props {
+    class = ""
+  }
+  view { <div class="wire-page-shell wire-page-shell--product {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-selector.wrn b/app/pages/components/product-selector.wrn new file mode 100644 index 00000000..5ae8437a --- /dev/null +++ b/app/pages/components/product-selector.wrn @@ -0,0 +1,37 @@ +page ProductSelectorcomponent { + seo { + title = "ProductSelector component" + description = "Reusable product selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ProductSelector

Reusable product selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductSelector label="Product" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ProductSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Product"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductSelector.wrn

component ProductSelector {
+  props {
+    label = "Product" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-status-badge.wrn b/app/pages/components/product-status-badge.wrn new file mode 100644 index 00000000..419452ad --- /dev/null +++ b/app/pages/components/product-status-badge.wrn @@ -0,0 +1,29 @@ +page ProductStatusBadgecomponent { + seo { + title = "ProductStatusBadge component" + description = "Reusable product status badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ProductStatusBadge

Reusable product status badge component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductStatusBadge label="ProductStatus" variant="default" />

Legacy mount name: data-component="ProductStatusBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ProductStatus"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductStatusBadge.wrn

component ProductStatusBadge {
+  props {
+    label = "ProductStatus"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--productstatusbadge {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/product-use-case-list.wrn b/app/pages/components/product-use-case-list.wrn new file mode 100644 index 00000000..a0735cd6 --- /dev/null +++ b/app/pages/components/product-use-case-list.wrn @@ -0,0 +1,31 @@ +page ProductUseCaseListcomponent { + seo { + title = "ProductUseCaseList component" + description = "Reusable product use case list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ProductUseCaseList

Reusable product use case list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductUseCaseList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ProductUseCaseList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductUseCaseList.wrn

component ProductUseCaseList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/products-mega-menu.wrn b/app/pages/components/products-mega-menu.wrn new file mode 100644 index 00000000..b23532ee --- /dev/null +++ b/app/pages/components/products-mega-menu.wrn @@ -0,0 +1,29 @@ +page ProductsMegaMenucomponent { + seo { + title = "ProductsMegaMenu component" + description = "Reusable products mega menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

ProductsMegaMenu

Reusable products mega menu component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProductsMegaMenu label="Products" sections="[]" />

Legacy mount name: data-component="ProductsMegaMenu".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Products"
sectionsstringOptional[]
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductsMegaMenu.wrn

component ProductsMegaMenu {
+  props {
+    label = "Products"
+    sections = []
+    class = ""
+  }
+  view { <MegaMenu label="{label}" sections="{sections}" class="{class}" /> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/progress-bar.wrn b/app/pages/components/progress-bar.wrn new file mode 100644 index 00000000..b5edc1dc --- /dev/null +++ b/app/pages/components/progress-bar.wrn @@ -0,0 +1,33 @@ +page ProgressBarcomponent { + seo { + title = "ProgressBar component" + description = "Reusable progress bar component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

ProgressBar

Reusable progress bar component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProgressBar value="0" max="100" label="Progress" showValue="true" />

Legacy mount name: data-component="ProgressBar".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
valuenumberOptional0
maxnumberOptional100
labelstringOptional"Progress"
showValuebooleanOptionaltrue

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProgressBar.wrn

component ProgressBar {
+  props {
+    class = ""
+    value = 0
+    max = 100
+    label = "Progress"
+    showValue = true
+  }
+  view {
+    <div class="{class}"><div class="mb-2 flex justify-between text-sm"><span>{label}</span><span data-show="showValue">{value}%</span></div><div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800" role="progressbar" aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max}"><div class="h-full rounded-full bg-violet-600 transition-all duration-500" style="width: {value}%"></div></div></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/progress-chart.wrn b/app/pages/components/progress-chart.wrn new file mode 100644 index 00000000..a5ac5d54 --- /dev/null +++ b/app/pages/components/progress-chart.wrn @@ -0,0 +1,32 @@ +page ProgressChartcomponent { + seo { + title = "ProgressChart component" + description = "Reusable progress chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ProgressChart

Reusable progress chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProgressChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ProgressChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProgressChart.wrn

component ProgressChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/progress-ring.wrn b/app/pages/components/progress-ring.wrn new file mode 100644 index 00000000..f793be4d --- /dev/null +++ b/app/pages/components/progress-ring.wrn @@ -0,0 +1,32 @@ +page ProgressRingcomponent { + seo { + title = "ProgressRing component" + description = "Reusable progress ring component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ProgressRing

Reusable progress ring component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProgressRing title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ProgressRing".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProgressRing.wrn

component ProgressRing {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/progress-slider.wrn b/app/pages/components/progress-slider.wrn new file mode 100644 index 00000000..4d79e237 --- /dev/null +++ b/app/pages/components/progress-slider.wrn @@ -0,0 +1,34 @@ +page ProgressSlidercomponent { + seo { + title = "ProgressSlider component" + description = "Reusable progress slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProgressSlider

Reusable progress slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProgressSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ProgressSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProgressSlider.wrn

component ProgressSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/progress.wrn b/app/pages/components/progress.wrn new file mode 100644 index 00000000..89519339 --- /dev/null +++ b/app/pages/components/progress.wrn @@ -0,0 +1,32 @@ +page progresscomponent { + seo { + title = "progress component" + description = "Reusable progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

progress

Reusable progress component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<progress value="0" max="100" />

Legacy mount name: data-component="progress".

Props and attributes

PropTypeRequirementDefault
valuenumberOptional0
maxnumberOptional100
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/progress.wrn

// Progress bar (native <progress>, themed).
+component Progress {
+  props {
+    value = 0
+    max = 100
+    class = ""
+  }
+  view {
+    <progress class="wire-progress {class}" value="{value}" max="{max}"></progress>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/project-card.wrn b/app/pages/components/project-card.wrn new file mode 100644 index 00000000..f3c1dc2f --- /dev/null +++ b/app/pages/components/project-card.wrn @@ -0,0 +1,30 @@ +page ProjectCardcomponent { + seo { + title = "ProjectCard component" + description = "Reusable project card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProjectCard

Reusable project card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProjectCard title="title" description="description" href="href" />

Legacy mount name: data-component="ProjectCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProjectCard.wrn

component ProjectCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--project {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/project-selector.wrn b/app/pages/components/project-selector.wrn new file mode 100644 index 00000000..4f7e0d73 --- /dev/null +++ b/app/pages/components/project-selector.wrn @@ -0,0 +1,37 @@ +page ProjectSelectorcomponent { + seo { + title = "ProjectSelector component" + description = "Reusable project selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ProjectSelector

Reusable project selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProjectSelector label="Project" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ProjectSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Project"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProjectSelector.wrn

component ProjectSelector {
+  props {
+    label = "Project" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/project-switcher.wrn b/app/pages/components/project-switcher.wrn new file mode 100644 index 00000000..e1b3fcfa --- /dev/null +++ b/app/pages/components/project-switcher.wrn @@ -0,0 +1,34 @@ +page ProjectSwitchercomponent { + seo { + title = "ProjectSwitcher component" + description = "Reusable project switcher component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ProjectSwitcher

Reusable project switcher component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProjectSwitcher eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ProjectSwitcher".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProjectSwitcher.wrn

component ProjectSwitcher {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/promo-code-input.wrn b/app/pages/components/promo-code-input.wrn new file mode 100644 index 00000000..b0d6fa95 --- /dev/null +++ b/app/pages/components/promo-code-input.wrn @@ -0,0 +1,37 @@ +page PromoCodeInputcomponent { + seo { + title = "PromoCodeInput component" + description = "Reusable promo code input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PromoCodeInput

Reusable promo code input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PromoCodeInput label="PromoCode" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PromoCodeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PromoCode"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PromoCodeInput.wrn

component PromoCodeInput {
+  props {
+    label = "PromoCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/prompt-dialog.wrn b/app/pages/components/prompt-dialog.wrn new file mode 100644 index 00000000..b1010f14 --- /dev/null +++ b/app/pages/components/prompt-dialog.wrn @@ -0,0 +1,31 @@ +page PromptDialogcomponent { + seo { + title = "PromptDialog component" + description = "Reusable prompt dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

PromptDialog

Reusable prompt dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PromptDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="PromptDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PromptDialog.wrn

component PromptDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/provider-selector.wrn b/app/pages/components/provider-selector.wrn new file mode 100644 index 00000000..fdf768b6 --- /dev/null +++ b/app/pages/components/provider-selector.wrn @@ -0,0 +1,37 @@ +page ProviderSelectorcomponent { + seo { + title = "ProviderSelector component" + description = "Reusable provider selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ProviderSelector

Reusable provider selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProviderSelector label="Provider" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ProviderSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Provider"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProviderSelector.wrn

component ProviderSelector {
+  props {
+    label = "Provider" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/public-footer.wrn b/app/pages/components/public-footer.wrn new file mode 100644 index 00000000..73631429 --- /dev/null +++ b/app/pages/components/public-footer.wrn @@ -0,0 +1,629 @@ +page PublicFootercomponent { + seo { + title = "PublicFooter component" + description = "Reusable public footer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

PublicFooter

Reusable public footer component.

@wrnexus/ui 0.2.641 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PublicFooter />

Legacy mount name: data-component="PublicFooter".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

  • submit

Source contract

Installed source: components/PublicFooter.wrn

component PublicFooter {
+    props {
+        class: string = ""
+    }
+    state email = ""
+    state newsletterSubmitted = false
+
+    view {
+        <footer
+            class="relative overflow-hidden border-t border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-slate-950 {class}"
+        >
+
+            <!-- Decorative background -->
+            <div
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-x-0 top-0 h-96 overflow-hidden"
+            >
+                <div class="absolute -left-32 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10"></div>
+
+                <div class="absolute -right-32 -top-48 h-96 w-96 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10"></div>
+            </div>
+
+            <div class="relative w-full px-5 py-12 sm:px-8 lg:px-10 lg:py-16 xl:px-12">
+
+                <!-- Newsletter and CTA -->
+                <section
+                    aria-labelledby="footer-newsletter-title"
+                    class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 sm:p-8 lg:p-10"
+                >
+                    <div aria-hidden="true" class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" ></div>
+
+                    <div aria-hidden="true" class="absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" ></div>
+
+                    <div class="relative grid items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,0.75fr)]">
+                        <div>
+                            <span
+                                class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/70 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--mail-plus] h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                WRNexusJS updates
+                            </span>
+
+                            <h2
+                                id="footer-newsletter-title"
+                                class="mt-5 max-w-2xl text-2xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-3xl"
+                            >
+                                Identity insights delivered to your inbox
+                            </h2>
+
+                            <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400 sm:text-base">
+                                Get product updates, security guidance, implementation
+                                strategies, and practical identity architecture resources.
+                            </p>
+                        </div>
+
+                        <div>
+                            <form
+                                method="post"
+                                action="/api/newsletter/subscribe"
+                                @submit="newsletterSubmitted = true"
+                                class="rounded-2xl border border-slate-200 bg-white/80 p-2 shadow-lg shadow-slate-950/5 backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
+                            >
+                                <div class="flex flex-col gap-2 sm:flex-row">
+                                    <label
+                                        class="sr-only"
+                                        for="footer-newsletter-email"
+                                    >
+                                        Work email address
+                                    </label>
+
+                                    <div class="relative min-w-0 flex-1">
+                                        <span class="icon-[lucide--mail] pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" aria-hidden="true" ></span>
+
+                                        <input
+                                            id="footer-newsletter-email"
+                                            name="email"
+                                            type="email"
+                                            autocomplete="email"
+                                            required
+                                            bind:value="email"
+                                            placeholder="Enter your work email"
+                                            class="h-12 w-full rounded-xl border border-transparent bg-transparent pl-11 pr-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-indigo-300 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 dark:text-white dark:focus:border-indigo-500/30 dark:focus:bg-slate-900"
+                                        />
+                                    </div>
+
+                                    <button
+                                        type="submit"
+                                        class="group inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                                    >
+                                        Subscribe
+
+                                        <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                                    </button>
+                                </div>
+                            </form>
+
+                            <p class="mt-3 flex items-start gap-2 text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                <span class="icon-[lucide--shield-check] mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" ></span>
+
+                                No spam. Unsubscribe at any time. Read our
+                                <a
+                                    href="/privacy"
+                                    class="font-semibold text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                >
+                                    privacy policy
+                                </a>.
+                            </p>
+
+                            <div
+                                data-show="newsletterSubmitted"
+                                role="status"
+                                class="mt-3 flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-sm font-medium text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300"
+                            >
+                                <span class="icon-[lucide--circle-check] h-4 w-4 shrink-0" aria-hidden="true" ></span>
+
+                                Thanks. Please check your inbox to confirm your subscription.
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Main footer -->
+                <div class="mt-12 grid gap-10 lg:grid-cols-[minmax(16rem,1.25fr)_minmax(0,3fr)] lg:gap-16">
+
+                    <!-- Brand -->
+                    <div>
+                        <a
+                            href="/"
+                            aria-label="WRNexusJS home"
+                            class="group inline-flex items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
+                        >
+                            <span
+                                class="grid h-11 w-11 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition group-hover:-translate-y-0.5 group-hover:bg-indigo-500"
+                            >
+                                <span class="icon-[lucide--blocks] h-5 w-5" aria-hidden="true" ></span>
+                            </span>
+
+                            <span>
+                                <span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
+                                    WRNexusJS
+                                </span>
+
+                                <span
+                                    class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
+                                >
+                                    Identity Cloud
+                                </span>
+                            </span>
+                        </a>
+
+                        <p class="mt-5 max-w-sm text-sm leading-6 text-slate-600 dark:text-slate-400">
+                            Secure authentication, user management, organizations,
+                            authorization, and enterprise identity for modern applications.
+                        </p>
+
+                        <div class="mt-6 flex flex-wrap items-center gap-2">
+                            <a
+                                href="/status"
+                                class="inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:hover:border-emerald-500/30"
+                            >
+                                <span class="relative flex h-2 w-2">
+                                    <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
+                                    <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
+                                </span>
+
+                                All systems operational
+                            </a>
+                        </div>
+
+                        <!-- Social links -->
+                        <div class="mt-6 flex items-center gap-2">
+                            <a
+                                href="https://github.com/wrnexus"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                aria-label="WRNexusJS on GitHub"
+                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--github] h-4.5 w-4.5" aria-hidden="true" ></span>
+                            </a>
+
+                            <a
+                                href="https://www.linkedin.com/company/wrnexus"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                aria-label="WRNexusJS on LinkedIn"
+                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--linkedin] h-4.5 w-4.5" aria-hidden="true" ></span>
+                            </a>
+
+                            <a
+                                href="https://x.com/wrnexus"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                aria-label="WRNexusJS on X"
+                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--twitter] h-4.5 w-4.5" aria-hidden="true" ></span>
+                            </a>
+
+                            <a
+                                href="https://www.youtube.com/@wrnexus"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                aria-label="WRNexusJS on YouTube"
+                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--youtube] h-4.5 w-4.5" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Navigation columns -->
+                    <nav
+                        aria-label="Footer navigation"
+                        class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 xl:grid-cols-5"
+                    >
+                        <!-- Product -->
+                        <div>
+                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                                Product
+                            </h3>
+
+                            <ul class="mt-4 space-y-3">
+                                <li>
+                                    <a
+                                        href="/platform"
+                                        class="footer-link"
+                                    >
+                                        Platform
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/authentication"
+                                        class="footer-link"
+                                    >
+                                        Authentication
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/user-management"
+                                        class="footer-link"
+                                    >
+                                        User management
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/organizations"
+                                        class="footer-link"
+                                    >
+                                        Organizations
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/authorization"
+                                        class="footer-link"
+                                    >
+                                        Authorization
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/enterprise-sso"
+                                        class="footer-link"
+                                    >
+                                        Enterprise SSO
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <!-- Solutions -->
+                        <div>
+                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                                Solutions
+                            </h3>
+
+                            <ul class="mt-4 space-y-3">
+                                <li>
+                                    <a
+                                        href="/solutions/startups"
+                                        class="footer-link"
+                                    >
+                                        Startups
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/solutions/saas"
+                                        class="footer-link"
+                                    >
+                                        SaaS
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/solutions/enterprise"
+                                        class="footer-link"
+                                    >
+                                        Enterprise
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/solutions/developers"
+                                        class="footer-link"
+                                    >
+                                        Developers
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/solutions/agencies"
+                                        class="footer-link"
+                                    >
+                                        Agencies
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/solutions/b2b"
+                                        class="footer-link"
+                                    >
+                                        B2B
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <!-- Developers -->
+                        <div>
+                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                                Developers
+                            </h3>
+
+                            <ul class="mt-4 space-y-3">
+                                <li>
+                                    <a
+                                        href="/docs"
+                                        class="footer-link"
+                                    >
+                                        Documentation
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/docs/api"
+                                        class="footer-link"
+                                    >
+                                        API reference
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/sdks"
+                                        class="footer-link"
+                                    >
+                                        SDKs
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/examples"
+                                        class="footer-link"
+                                    >
+                                        Examples
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/docs/webhooks"
+                                        class="footer-link"
+                                    >
+                                        Webhooks
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/changelog"
+                                        class="footer-link"
+                                    >
+                                        Changelog
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <!-- Resources -->
+                        <div>
+                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                                Resources
+                            </h3>
+
+                            <ul class="mt-4 space-y-3">
+                                <li>
+                                    <a
+                                        href="/blog"
+                                        class="footer-link"
+                                    >
+                                        Blog
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/guides"
+                                        class="footer-link"
+                                    >
+                                        Guides
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/customers"
+                                        class="footer-link"
+                                    >
+                                        Customers
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/help"
+                                        class="footer-link"
+                                    >
+                                        Help center
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/security"
+                                        class="footer-link"
+                                    >
+                                        Security
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/trust"
+                                        class="footer-link"
+                                    >
+                                        Trust center
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <!-- Company -->
+                        <div>
+                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                                Company
+                            </h3>
+
+                            <ul class="mt-4 space-y-3">
+                                <li>
+                                    <a
+                                        href="/about"
+                                        class="footer-link"
+                                    >
+                                        About
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/careers"
+                                        class="footer-link"
+                                    >
+                                        Careers
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/partners"
+                                        class="footer-link"
+                                    >
+                                        Partners
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/contact"
+                                        class="footer-link"
+                                    >
+                                        Contact
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/pricing"
+                                        class="footer-link"
+                                    >
+                                        Pricing
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a
+                                        href="/status"
+                                        class="footer-link"
+                                    >
+                                        Status
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+
+                <!-- Bottom bar -->
+                <div
+                    class="mt-12 flex flex-col gap-5 border-t border-slate-200 pt-6 dark:border-white/10 lg:flex-row lg:items-center lg:justify-between"
+                >
+                    <div
+                        class="flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400 sm:flex-row sm:items-center sm:gap-4"
+                    >
+                        <p>
+                            © 2026 WRNexusJS. All rights reserved.
+                        </p>
+
+                        <span class="hidden h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700 sm:block"></span>
+
+                        <p>
+                            Built by WorkRoot Workspace.
+                        </p>
+                    </div>
+
+                    <div class="flex flex-wrap items-center gap-x-5 gap-y-3">
+                        <a
+                            href="/privacy"
+                            class="footer-bottom-link"
+                        >
+                            Privacy
+                        </a>
+
+                        <a
+                            href="/terms"
+                            class="footer-bottom-link"
+                        >
+                            Terms
+                        </a>
+
+                        <a
+                            href="/cookies"
+                            class="footer-bottom-link"
+                        >
+                            Cookies
+                        </a>
+
+                        <a
+                            href="/legal"
+                            class="footer-bottom-link"
+                        >
+                            Legal
+                        </a>
+
+                        <button
+                            type="button"
+                            data-open-cookie-preferences
+                            class="footer-bottom-link"
+                        >
+                            Cookie preferences
+                        </button>
+
+                        <button
+                            type="button"
+                            data-wire-theme-toggle
+                            class="inline-flex items-center gap-2 rounded-lg text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--moon] h-3.5 w-3.5 dark:hidden" aria-hidden="true" ></span>
+
+                            <span class="icon-[lucide--sun] hidden h-3.5 w-3.5 dark:block" aria-hidden="true" ></span>
+
+                            Theme
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/public-header-logo.wrn b/app/pages/components/public-header-logo.wrn new file mode 100644 index 00000000..5d17631b --- /dev/null +++ b/app/pages/components/public-header-logo.wrn @@ -0,0 +1,34 @@ +page PublicHeaderLogocomponent { + seo { + title = "PublicHeaderLogo component" + description = "Reusable public header logo component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PublicHeaderLogo

Reusable public header logo component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PublicHeaderLogo eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PublicHeaderLogo".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PublicHeaderLogo.wrn

component PublicHeaderLogo {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/public-header.wrn b/app/pages/components/public-header.wrn new file mode 100644 index 00000000..8a050c03 --- /dev/null +++ b/app/pages/components/public-header.wrn @@ -0,0 +1,305 @@ +page PublicHeadercomponent { + seo { + title = "PublicHeader component" + description = "Reusable public header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

PublicHeader

Reusable public header component.

@wrnexus/ui 0.2.641 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PublicHeader />

Legacy mount name: data-component="PublicHeader".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/PublicHeader.wrn

component PublicHeader {
+    props {
+        class: string = ""
+    }
+    state activeMenu = ""
+    state mobileMenuOpen = false
+    state headerScrolled = false
+
+    view {
+        <header
+            data-public-header
+            class="relative sticky top-0 z-50 w-full border-b transition-all duration-300 {class}"
+            class:border-transparent="!headerScrolled"
+            class:bg-transparent="!headerScrolled"
+            class:border-slate-200/80="headerScrolled"
+            class:bg-white/90="headerScrolled"
+            class:shadow-sm="headerScrolled"
+            class:backdrop-blur-xl="headerScrolled"
+            class:dark:border-white/10="headerScrolled"
+            class:dark:bg-slate-950/90="headerScrolled"
+        >
+            <div
+                class="relative z-[60] flex h-18 w-full items-center justify-between gap-6 px-5 sm:px-8 lg:px-10 xl:px-12"
+            >
+
+                <!-- Brand -->
+                <a
+                    href="/"
+                    aria-label="WRNexusJS home"
+                    class="group inline-flex shrink-0 items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950"
+                >
+                    <span
+                        class="grid h-10 w-10 place-items-center rounded-xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition duration-200 group-hover:-translate-y-0.5 group-hover:bg-indigo-500 group-hover:shadow-xl"
+                    >
+                        <span class="icon-[lucide--blocks] h-5 w-5" aria-hidden="true" ></span>
+                    </span>
+
+                    <span class="min-w-0">
+                        <span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
+                            WRNexusJS
+                        </span>
+
+                        <span
+                            class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
+                        >
+                            Identity Cloud
+                        </span>
+                    </span>
+                </a>
+
+                <!-- Desktop navigation -->
+                <nav
+                    aria-label="Main navigation"
+                    class="hidden items-center gap-1 lg:flex"
+                >
+                    <!-- Product -->
+                    <button
+                        type="button"
+                        @click="activeMenu = activeMenu === 'product' ? '' : 'product'"
+                        aria-haspopup="true"
+                        aria-expanded="{activeMenu === 'product'}"
+                        class="inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
+                        class:bg-indigo-50="activeMenu === 'product'"
+                        class:text-indigo-700="activeMenu === 'product'"
+                        class:text-slate-700="activeMenu !== 'product'"
+                        class:hover:bg-slate-100="activeMenu !== 'product'"
+                        class:dark:bg-indigo-500/10="activeMenu === 'product'"
+                        class:dark:text-indigo-300="activeMenu === 'product'"
+                        class:dark:text-slate-300="activeMenu !== 'product'"
+                        class:dark:hover:bg-white/5="activeMenu !== 'product'"
+                    >
+                        Product
+
+                        <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'product'" aria-hidden="true" ></span>
+                    </button>
+
+                    <!-- Solutions -->
+                    <button
+                        type="button"
+                        @click="activeMenu = activeMenu === 'solutions' ? '' : 'solutions'"
+                        aria-haspopup="true"
+                        aria-expanded="{activeMenu === 'solutions'}"
+                        class="group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
+                        class:bg-indigo-50="activeMenu === 'solutions'"
+                        class:text-indigo-700="activeMenu === 'solutions'"
+                        class:text-slate-700="activeMenu !== 'solutions'"
+                        class:hover:bg-slate-100="activeMenu !== 'solutions'"
+                        class:hover:text-slate-950="activeMenu !== 'solutions'"
+                        class:dark:bg-indigo-500/10="activeMenu === 'solutions'"
+                        class:dark:text-indigo-300="activeMenu === 'solutions'"
+                        class:dark:text-slate-300="activeMenu !== 'solutions'"
+                        class:dark:hover:bg-white/5="activeMenu !== 'solutions'"
+                        class:dark:hover:text-white="activeMenu !== 'solutions'"
+                    >
+                        Solutions
+
+                        <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'solutions'" aria-hidden="true" ></span>
+                    </button>
+
+                    <!-- Developers -->
+                    <button
+                        type="button"
+                        @click="activeMenu = activeMenu === 'developers' ? '' : 'developers'"
+                        aria-haspopup="true"
+                        aria-expanded="{activeMenu === 'developers'}"
+                        class="group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
+                        class:bg-indigo-50="activeMenu === 'developers'"
+                        class:text-indigo-700="activeMenu === 'developers'"
+                        class:text-slate-700="activeMenu !== 'developers'"
+                        class:hover:bg-slate-100="activeMenu !== 'developers'"
+                        class:hover:text-slate-950="activeMenu !== 'developers'"
+                        class:dark:bg-indigo-500/10="activeMenu === 'developers'"
+                        class:dark:text-indigo-300="activeMenu === 'developers'"
+                        class:dark:text-slate-300="activeMenu !== 'developers'"
+                        class:dark:hover:bg-white/5="activeMenu !== 'developers'"
+                        class:dark:hover:text-white="activeMenu !== 'developers'"
+                    >
+                        Developers
+
+                        <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'developers'"  aria-hidden="true" ></span>
+                    </button>
+
+                    <!-- Resources -->
+                    <button
+                        type="button"
+                        @click="activeMenu = activeMenu === 'resources' ? '' : 'resources'"
+                        aria-haspopup="true"
+                        aria-expanded="{activeMenu === 'resources'}"
+                        class="group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
+                        class:bg-indigo-50="activeMenu === 'resources'"
+                        class:text-indigo-700="activeMenu === 'resources'"
+                        class:text-slate-700="activeMenu !== 'resources'"
+                        class:hover:bg-slate-100="activeMenu !== 'resources'"
+                        class:hover:text-slate-950="activeMenu !== 'resources'"
+                        class:dark:bg-indigo-500/10="activeMenu === 'resources'"
+                        class:dark:text-indigo-300="activeMenu === 'resources'"
+                        class:dark:text-slate-300="activeMenu !== 'resources'"
+                        class:dark:hover:bg-white/5="activeMenu !== 'resources'"
+                        class:dark:hover:text-white="activeMenu !== 'resources'"
+                    >
+                        Resources
+
+                        <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'resources'"  aria-hidden="true" ></span>
+                    </button>
+
+                    <a
+                        href="/pricing"
+                        class="inline-flex h-10 items-center rounded-xl px-3.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white"
+                    >
+                        Pricing
+                    </a>
+                </nav>
+
+                <!-- Desktop actions -->
+                <div class="hidden items-center gap-2 lg:flex">
+                    <a
+                        href="/status"
+                        class="mr-1 inline-flex items-center gap-2 rounded-xl px-3 py-2 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white"
+                    >
+                        <span class="relative flex h-2 w-2">
+                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
+                            <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
+                        </span>
+
+                        All systems operational
+                    </a>
+
+                    <button
+                        type="button"
+                        data-wire-theme-toggle
+                        aria-label="Toggle color theme"
+                        title="Toggle color theme"
+                        class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white"
+                    >
+                        <span class="icon-[lucide--moon] h-4 w-4 dark:hidden" aria-hidden="true" ></span>
+
+                        <span class="icon-[lucide--sun] hidden h-4 w-4 dark:block" aria-hidden="true" ></span>
+
+                        <span class="sr-only">
+                            Toggle color theme
+                        </span>
+                    </button>
+
+                    <a
+                        href="/sign-in"
+                        class="inline-flex h-10 items-center justify-center rounded-xl px-4 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-white"
+                    >
+                        Sign in
+                    </a>
+
+                    <a
+                        href="/sign-up"
+                        class="group inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950"
+                    >
+                        Start free
+
+                        <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+
+                <!-- Mobile actions -->
+                <div class="flex items-center gap-2 lg:hidden">
+                    <button
+                        type="button"
+                        data-wire-theme-toggle
+                        aria-label="Toggle color theme"
+                        title="Toggle color theme"
+                        class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white"
+                    >
+                        <span class="icon-[lucide--moon] h-4 w-4 dark:hidden" aria-hidden="true" ></span>
+
+                        <span class="icon-[lucide--sun] hidden h-4 w-4 dark:block" aria-hidden="true" ></span>
+                    </button>
+
+                    <button
+                        type="button"
+                        @click="mobileMenuOpen = !mobileMenuOpen"
+                        aria-label="{mobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}"
+                        aria-expanded="{mobileMenuOpen}"
+                        aria-controls="public-mobile-navigation"
+                        class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10 dark:hover:text-white"
+                    >
+                        <span data-show="!mobileMenuOpen" class="icon-[lucide--menu] h-5 w-5" aria-hidden="true" ></span>
+
+                        <span data-show="mobileMenuOpen" class="icon-[lucide--x] h-5 w-5" aria-hidden="true" ></span>
+
+                        <span class="sr-only">
+                            Toggle navigation
+                        </span>
+                    </button>
+                </div>
+
+            </div>
+
+            <!-- Outside-click backdrop -->
+            <button type="button" data-show="activeMenu !== ''" @click="activeMenu = ''" aria-label="Close navigation menu" class="fixed inset-0 z-40 hidden cursor-default bg-transparent lg:block" class:hidden="activeMenu === ''" class:block="activeMenu !== ''" ></button>
+
+            <!-- Desktop mega menus -->
+            <div
+                class="absolute inset-x-0 top-full z-50 max-lg:hidden"
+                class:hidden="activeMenu === ''"
+                class:block="activeMenu !== ''"
+            >
+                <div
+                    class:hidden="activeMenu !== 'product'"
+                    class:block="activeMenu === 'product'"
+                >
+                    <ProductMegaMenu />
+                </div>
+
+                <div
+                    class:hidden="activeMenu !== 'solutions'"
+                    class:block="activeMenu === 'solutions'"
+                >
+                    <SolutionsMegaMenu />
+                </div>
+
+                <div
+                    class:hidden="activeMenu !== 'developers'"
+                    class:block="activeMenu === 'developers'"
+                >
+                    <DevelopersMegaMenu />
+                </div>
+
+                <div
+                    class:hidden="activeMenu !== 'resources'"
+                    class:block="activeMenu === 'resources'"
+                >
+                    <ResourcesMegaMenu />
+                </div>
+            </div>
+
+            <!-- Mobile navigation -->
+            <div
+                id="public-mobile-navigation"
+                class="lg:hidden"
+                class:hidden="!mobileMenuOpen"
+                class:block="mobileMenuOpen"
+            >
+                <PublicMobileNavigation />
+            </div>
+        </header>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/public-mobile-navigation.wrn b/app/pages/components/public-mobile-navigation.wrn new file mode 100644 index 00000000..b800ed23 --- /dev/null +++ b/app/pages/components/public-mobile-navigation.wrn @@ -0,0 +1,610 @@ +page PublicMobileNavigationcomponent { + seo { + title = "PublicMobileNavigation component" + description = "Reusable public mobile navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

PublicMobileNavigation

Reusable public mobile navigation component.

@wrnexus/ui 0.2.641 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PublicMobileNavigation />

Legacy mount name: data-component="PublicMobileNavigation".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/PublicMobileNavigation.wrn

component PublicMobileNavigation {
+    props {
+        class: string = ""
+    }
+    state openSection = ""
+
+    view {
+        <div
+            class="border-t border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-slate-950 lg:hidden {class}"
+        >
+            <div class="mx-auto max-h-[calc(100dvh-4.5rem)] max-w-7xl overflow-y-auto px-5 py-5 sm:px-8">
+
+                <!-- Mobile status -->
+                <a
+                    href="/status"
+                    class="mb-5 flex items-center justify-between rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:hover:border-emerald-500/30 dark:hover:bg-emerald-500/15"
+                >
+                    <span class="flex items-center gap-3">
+                        <span class="relative flex h-2.5 w-2.5 shrink-0">
+                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
+                            <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
+                        </span>
+
+                        <span>
+                            <span class="block text-sm font-semibold text-emerald-900 dark:text-emerald-100">
+                                All systems operational
+                            </span>
+
+                            <span class="mt-0.5 block text-xs text-emerald-700 dark:text-emerald-300">
+                                View service status
+                            </span>
+                        </span>
+                    </span>
+
+                    <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-emerald-700 dark:text-emerald-300" aria-hidden="true" ></span>
+                </a>
+
+                <nav
+                    aria-label="Mobile navigation"
+                    class="space-y-2"
+                >
+
+                    <!-- Product -->
+                    <div
+                        class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
+                    >
+                        <button
+                            type="button"
+                            @click="openSection = openSection === 'product' ? '' : 'product'"
+                            aria-expanded="{openSection === 'product'}"
+                            aria-controls="mobile-product-menu"
+                            class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
+                            class:bg-indigo-50="openSection === 'product'"
+                            class:dark:bg-indigo-500/10="openSection === 'product'"
+                        >
+                            <span class="flex items-center gap-3">
+                                <span
+                                    class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
+                                    class:bg-indigo-100="openSection === 'product'"
+                                    class:text-indigo-700="openSection === 'product'"
+                                    class:bg-slate-100="openSection !== 'product'"
+                                    class:text-slate-600="openSection !== 'product'"
+                                    class:dark:bg-indigo-500/15="openSection === 'product'"
+                                    class:dark:text-indigo-300="openSection === 'product'"
+                                    class:dark:bg-white/5="openSection !== 'product'"
+                                    class:dark:text-slate-300="openSection !== 'product'"
+                                >
+                                    <span class="icon-[lucide--boxes] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span>
+                                    <span
+                                        class="block text-sm font-semibold"
+                                        class:text-indigo-950="openSection === 'product'"
+                                        class:text-slate-950="openSection !== 'product'"
+                                        class:dark:text-indigo-100="openSection === 'product'"
+                                        class:dark:text-white="openSection !== 'product'"
+                                    >
+                                        Product
+                                    </span>
+
+                                    <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                                        Explore the WRNexusJS platform
+                                    </span>
+                                </span>
+                            </span>
+
+                            <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'product'" aria-hidden="true" ></span>
+                        </button>
+
+                        <div
+                            id="mobile-product-menu"
+                            data-show="openSection === 'product'"
+                            class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
+                        >
+                            <div class="grid gap-1">
+                                <a
+                                    href="/platform"
+                                    class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
+                                    >
+                                        <span class="icon-[lucide--layers-3] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span
+                                            class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
+                                        >
+                                            Platform
+                                        </span>
+
+                                        <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                            Complete identity infrastructure
+                                        </span>
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/authentication"
+                                    class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-300"
+                                    >
+                                        <span class="icon-[lucide--fingerprint] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span
+                                            class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
+                                        >
+                                            Authentication
+                                        </span>
+
+                                        <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                            Passwords, passkeys, social login, and SSO
+                                        </span>
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/user-management"
+                                    class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-cyan-50 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-300"
+                                    >
+                                        <span class="icon-[lucide--users-round] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span
+                                            class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
+                                        >
+                                            User management
+                                        </span>
+
+                                        <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                            Profiles, sessions, invitations, and lifecycle
+                                        </span>
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/organizations"
+                                    class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300"
+                                    >
+                                        <span class="icon-[lucide--building-2] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span
+                                            class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
+                                        >
+                                            Organizations
+                                        </span>
+
+                                        <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                            Multi-tenant workspaces and teams
+                                        </span>
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/security"
+                                    class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300"
+                                    >
+                                        <span class="icon-[lucide--shield-check] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span
+                                            class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
+                                        >
+                                            Security
+                                        </span>
+
+                                        <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                            Protect identities and sensitive actions
+                                        </span>
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/integrations"
+                                    class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300"
+                                    >
+                                        <span class="icon-[lucide--plug] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span
+                                            class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
+                                        >
+                                            Integrations
+                                        </span>
+
+                                        <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                            Connect your stack and applications
+                                        </span>
+                                    </span>
+                                </a>
+                            </div>
+
+                            <a
+                                href="/product"
+                                class="mt-2 flex items-center justify-center gap-2 rounded-xl bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/15"
+                            >
+                                View all product features
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Solutions -->
+                    <div
+                        class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
+                    >
+                        <button
+                            type="button"
+                            @click="openSection = openSection === 'solutions' ? '' : 'solutions'"
+                            aria-expanded="{openSection === 'solutions'}"
+                            aria-controls="mobile-solutions-menu"
+                            class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
+                            class:bg-indigo-50="openSection === 'solutions'"
+                            class:dark:bg-indigo-500/10="openSection === 'solutions'"
+                        >
+                            <span class="flex items-center gap-3">
+                                <span
+                                    class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
+                                    class:bg-indigo-100="openSection === 'solutions'"
+                                    class:text-indigo-700="openSection === 'solutions'"
+                                    class:bg-slate-100="openSection !== 'solutions'"
+                                    class:text-slate-600="openSection !== 'solutions'"
+                                    class:dark:bg-indigo-500/15="openSection === 'solutions'"
+                                    class:dark:text-indigo-300="openSection === 'solutions'"
+                                    class:dark:bg-white/5="openSection !== 'solutions'"
+                                    class:dark:text-slate-300="openSection !== 'solutions'"
+                                >
+                                    <span class="icon-[lucide--lightbulb] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span>
+                                    <span class="block text-sm font-semibold text-slate-950 dark:text-white">
+                                        Solutions
+                                    </span>
+
+                                    <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                                        Built for your business
+                                    </span>
+                                </span>
+                            </span>
+
+                            <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'solutions'" aria-hidden="true" ></span>
+                        </button>
+
+                        <div
+                            id="mobile-solutions-menu"
+                            data-show="openSection === 'solutions'"
+                            class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
+                        >
+                            <div class="grid grid-cols-2 gap-2">
+                                <a
+                                    href="/solutions/startups"
+                                    class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span class="icon-[lucide--rocket] h-5 w-5 text-indigo-600 dark:text-indigo-400"></span>
+                                    <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
+                                        Startups
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/solutions/saas"
+                                    class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span class="icon-[lucide--cloud] h-5 w-5 text-cyan-600 dark:text-cyan-400"></span>
+                                    <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
+                                        SaaS
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/solutions/enterprise"
+                                    class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span class="icon-[lucide--building] h-5 w-5 text-violet-600 dark:text-violet-400"></span>
+                                    <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
+                                        Enterprise
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/solutions/developers"
+                                    class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span class="icon-[lucide--code-2] h-5 w-5 text-emerald-600 dark:text-emerald-400"></span>
+                                    <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
+                                        Developers
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/solutions/agencies"
+                                    class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span class="icon-[lucide--briefcase-business] h-5 w-5 text-amber-600 dark:text-amber-400"></span>
+                                    <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
+                                        Agencies
+                                    </span>
+                                </a>
+
+                                <a
+                                    href="/solutions/b2b"
+                                    class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
+                                >
+                                    <span class="icon-[lucide--handshake] h-5 w-5 text-rose-600 dark:text-rose-400"></span>
+                                    <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
+                                        B2B
+                                    </span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Developers -->
+                    <div
+                        class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
+                    >
+                        <button
+                            type="button"
+                            @click="openSection = openSection === 'developers' ? '' : 'developers'"
+                            aria-expanded="{openSection === 'developers'}"
+                            aria-controls="mobile-developers-menu"
+                            class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
+                            class:bg-indigo-50="openSection === 'developers'"
+                            class:dark:bg-indigo-500/10="openSection === 'developers'"
+                        >
+                            <span class="flex items-center gap-3">
+                                <span
+                                    class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
+                                    class:bg-indigo-100="openSection === 'developers'"
+                                    class:text-indigo-700="openSection === 'developers'"
+                                    class:bg-slate-100="openSection !== 'developers'"
+                                    class:text-slate-600="openSection !== 'developers'"
+                                    class:dark:bg-indigo-500/15="openSection === 'developers'"
+                                    class:dark:text-indigo-300="openSection === 'developers'"
+                                    class:dark:bg-white/5="openSection !== 'developers'"
+                                    class:dark:text-slate-300="openSection !== 'developers'"
+                                >
+                                    <span class="icon-[lucide--terminal-square] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span>
+                                    <span class="block text-sm font-semibold text-slate-950 dark:text-white">
+                                        Developers
+                                    </span>
+
+                                    <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                                        Build with WRNexusJS
+                                    </span>
+                                </span>
+                            </span>
+
+                            <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'developers'" aria-hidden="true" ></span>
+                        </button>
+
+                        <div
+                            id="mobile-developers-menu"
+                            data-show="openSection === 'developers'"
+                            class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
+                        >
+                            <div class="grid gap-1">
+                                <a
+                                    href="/docs"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
+                                >
+                                    <span class="icon-[lucide--book-open] h-5 w-5 text-indigo-600 dark:text-indigo-400"></span>
+                                    Documentation
+                                </a>
+
+                                <a
+                                    href="/docs/api"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
+                                >
+                                    <span class="icon-[lucide--braces] h-5 w-5 text-violet-600 dark:text-violet-400"></span>
+                                    API reference
+                                </a>
+
+                                <a
+                                    href="/sdks"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
+                                >
+                                    <span class="icon-[lucide--package] h-5 w-5 text-cyan-600 dark:text-cyan-400"></span>
+                                    SDKs
+                                </a>
+
+                                <a
+                                    href="/examples"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
+                                >
+                                    <span class="icon-[lucide--flask-conical] h-5 w-5 text-emerald-600 dark:text-emerald-400"></span>
+                                    Examples
+                                </a>
+
+                                <a
+                                    href="/changelog"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
+                                >
+                                    <span class="icon-[lucide--history] h-5 w-5 text-amber-600 dark:text-amber-400"></span>
+                                    Changelog
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Resources -->
+                    <div
+                        class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
+                    >
+                        <button
+                            type="button"
+                            @click="openSection = openSection === 'resources' ? '' : 'resources'"
+                            aria-expanded="{openSection === 'resources'}"
+                            aria-controls="mobile-resources-menu"
+                            class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
+                            class:bg-indigo-50="openSection === 'resources'"
+                            class:dark:bg-indigo-500/10="openSection === 'resources'"
+                        >
+                            <span class="flex items-center gap-3">
+                                <span
+                                    class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
+                                    class:bg-indigo-100="openSection === 'resources'"
+                                    class:text-indigo-700="openSection === 'resources'"
+                                    class:bg-slate-100="openSection !== 'resources'"
+                                    class:text-slate-600="openSection !== 'resources'"
+                                    class:dark:bg-indigo-500/15="openSection === 'resources'"
+                                    class:dark:text-indigo-300="openSection === 'resources'"
+                                    class:dark:bg-white/5="openSection !== 'resources'"
+                                    class:dark:text-slate-300="openSection !== 'resources'"
+                                >
+                                    <span class="icon-[lucide--library] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span>
+                                    <span class="block text-sm font-semibold text-slate-950 dark:text-white">
+                                        Resources
+                                    </span>
+
+                                    <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                                        Learn and get support
+                                    </span>
+                                </span>
+                            </span>
+
+                            <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'resources'" aria-hidden="true" ></span>
+                        </button>
+
+                        <div
+                            id="mobile-resources-menu"
+                            data-show="openSection === 'resources'"
+                            class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
+                        >
+                            <div class="grid grid-cols-2 gap-2">
+                                <a
+                                    href="/blog"
+                                    class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+                                >
+                                    Blog
+                                </a>
+
+                                <a
+                                    href="/customers"
+                                    class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+                                >
+                                    Customer stories
+                                </a>
+
+                                <a
+                                    href="/guides"
+                                    class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+                                >
+                                    Guides
+                                </a>
+
+                                <a
+                                    href="/help"
+                                    class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+                                >
+                                    Help center
+                                </a>
+
+                                <a
+                                    href="/security"
+                                    class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+                                >
+                                    Security
+                                </a>
+
+                                <a
+                                    href="/trust"
+                                    class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+                                >
+                                    Trust center
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Direct links -->
+                    <a
+                        href="/pricing"
+                        class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-4 text-sm font-semibold text-slate-950 transition hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-indigo-500 dark:hover:bg-indigo-500/10"
+                    >
+                        <span class="flex items-center gap-3">
+                            <span
+                                class="grid h-10 w-10 place-items-center rounded-xl bg-slate-100 text-slate-600 dark:bg-white/5 dark:text-slate-300"
+                            >
+                                <span class="icon-[lucide--badge-dollar-sign] h-5 w-5" aria-hidden="true" ></span>
+                            </span>
+
+                            Pricing
+                        </span>
+
+                        <span class="icon-[lucide--chevron-right] h-5 w-5 text-slate-400" aria-hidden="true" ></span>
+                    </a>
+                </nav>
+
+                <!-- Mobile CTAs -->
+                <div class="mt-5 grid gap-3 border-t border-slate-200 pt-5 dark:border-white/10 sm:grid-cols-2">
+                    <a
+                        href="/sign-in"
+                        class="flex h-12 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500 dark:hover:bg-white/10 dark:hover:text-indigo-300"
+                    >
+                        <span class="icon-[lucide--log-in] h-4 w-4" aria-hidden="true" ></span>
+
+                        Sign in
+                    </a>
+
+                    <a
+                        href="/sign-up"
+                        class="group flex h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
+                    >
+                        Start free
+
+                        <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                    </a>
+                </div>
+
+                <p class="mt-5 text-center text-xs leading-5 text-slate-400 dark:text-slate-500">
+                    Secure identity infrastructure for modern applications.
+                </p>
+
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/public-page-shell.wrn b/app/pages/components/public-page-shell.wrn new file mode 100644 index 00000000..6f3f77a9 --- /dev/null +++ b/app/pages/components/public-page-shell.wrn @@ -0,0 +1,31 @@ +page PublicPageShellcomponent { + seo { + title = "PublicPageShell component" + description = "Reusable public page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

PublicPageShell

Reusable public page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PublicPageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="PublicPageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PublicPageShell.wrn

component PublicPageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/public-search.wrn b/app/pages/components/public-search.wrn new file mode 100644 index 00000000..d32d47dd --- /dev/null +++ b/app/pages/components/public-search.wrn @@ -0,0 +1,146 @@ +page PublicSearchcomponent { + seo { + title = "PublicSearch component" + description = "Reusable public search component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

PublicSearch

Reusable public search component.

@wrnexus/ui 0.2.6415 props0 slots4 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PublicSearch query="query" placeholder="Search..." label="Search" action="action" method="get" />

Legacy mount name: data-component="PublicSearch".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
querystringOptional""
placeholderstringOptional"Search..."
labelstringOptional"Search"
actionstringOptional""
methodstringOptional"get"
namestringOptional"q"
buttonLabelstringOptional""
clearLabelstringOptional"Clear search"
sizestringOptional"default"
centeredbooleanOptionalfalse
fullWidthbooleanOptionalfalse
showShortcutbooleanOptionalfalse
shortcutLabelstringOptional"⌘ K"
suggestionsstringOptional[]

Slots

This component does not declare a slot.

Events

  • input
  • focus
  • blur
  • click

Source contract

Installed source: components/PublicSearch.wrn

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 {
+        <div
+            class="w-full {class}"
+            class:max-w-2xl="!fullWidth"
+            class:mx-auto="centered"
+        >
+            <form
+                action="{action}"
+                method="{method}"
+                role="search"
+                class="w-full"
+            >
+                <label
+                    for="public-search-input"
+                    class="sr-only"
+                >
+                    {label}
+                </label>
+
+                <div
+                    class=" group relative flex w-full items-center rounded-2xl border bg-white shadow-sm transition-all duration-200 dark:bg-white/5 {focused ? 'border-indigo-400 ring-4 ring-indigo-500/10 dark:border-indigo-500/50 dark:ring-indigo-500/10' : 'border-slate-200 hover:border-slate-300 dark:border-white/10 dark:hover:border-white/20' } {size === 'compact' ? 'min-h-11' : size === 'large' ? 'min-h-14' : 'min-h-12' } "
+                >
+                    <!-- Search icon -->
+                    <span class=" pointer-events-none absolute left-4 text-slate-400 transition group-focus-within:text-indigo-600 dark:text-slate-500 dark:group-focus-within:text-indigo-400 {size === 'large' ? 'h-5 w-5' : 'h-4.5 w-4.5'} icon-[lucide--search] " aria-hidden="true" ></span>
+
+                    <!-- Input -->
+                    <input
+                        id="public-search-input"
+                        type="search"
+                        name="{name}"
+                        value="{searchValue}"
+                        placeholder="{placeholder}"
+                        autocomplete="off"
+                        @input="searchValue = event.target.value"
+                        @focus="focused = true"
+                        @blur="focused = false"
+                        class=" min-w-0 flex-1 bg-transparent text-slate-950 outline-none placeholder:text-slate-400 dark:text-white dark:placeholder:text-slate-500 {size === 'compact' ? 'h-11 pl-11 pr-3 text-sm' : size === 'large' ? 'h-14 pl-12 pr-4 text-base' : 'h-12 pl-11 pr-4 text-sm' } "
+                    />
+
+                    <!-- Keyboard shortcut -->
+                    <span
+                        class="mr-3 hidden shrink-0 items-center rounded-md border border-slate-200 bg-slate-50 px-2 py-1 text-[11px] font-semibold text-slate-400 dark:border-white/10 dark:bg-white/5 dark:text-slate-500 sm:inline-flex"
+                        class:hidden="!showShortcut || searchValue !== ''"
+                    >
+                        {shortcutLabel}
+                    </span>
+
+                    <!-- Clear button -->
+                    <button
+                        type="button"
+                        @click="searchValue = ''"
+                        aria-label="{clearLabel}"
+                        class="mr-2 grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-500 dark:hover:bg-white/10 dark:hover:text-slate-200"
+                        class:hidden="searchValue === ''"
+                    >
+                        <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                    </button>
+
+                    <!-- Submit button -->
+                    <button
+                        type="submit"
+                        class=" mr-1.5 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 {size === 'compact' ? 'h-9 px-3 text-xs' : size === 'large' ? 'h-11 px-5 text-sm' : 'h-10 px-4 text-sm' } "
+                        class:hidden="buttonLabel === ''"
+                        class:inline-flex="buttonLabel !== ''"
+                    >
+                        {buttonLabel}
+
+                        <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                    </button>
+                </div>
+            </form>
+
+            <!-- Suggested searches -->
+            <div
+                class="mt-4 flex flex-wrap items-center gap-2"
+                class:hidden="suggestions.length === 0"
+                class:justify-center="centered"
+                class:justify-start="!centered"
+            >
+                <span class="mr-1 text-xs font-medium text-slate-500 dark:text-slate-400">
+                    Popular:
+                </span>
+
+                {#each suggestions.slice(0, 5) as suggestion}
+                <a
+                    href="{suggestion.href}"
+                    class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300"
+                >
+                    <span class="{suggestion.iconClass} h-3.5 w-3.5" aria-hidden="true" class:hidden="suggestion.iconClass === ''" ></span>
+
+                    {suggestion.label}
+                </a>
+                {/each}
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/publish-date-time-picker.wrn b/app/pages/components/publish-date-time-picker.wrn new file mode 100644 index 00000000..2aa84a77 --- /dev/null +++ b/app/pages/components/publish-date-time-picker.wrn @@ -0,0 +1,37 @@ +page PublishDateTimePickercomponent { + seo { + title = "PublishDateTimePicker component" + description = "Reusable publish date time picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PublishDateTimePicker

Reusable publish date time picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PublishDateTimePicker label="PublishDateTime" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PublishDateTimePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PublishDateTime"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PublishDateTimePicker.wrn

component PublishDateTimePicker {
+  props {
+    label = "PublishDateTime" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/push-composer.wrn b/app/pages/components/push-composer.wrn new file mode 100644 index 00000000..0159e528 --- /dev/null +++ b/app/pages/components/push-composer.wrn @@ -0,0 +1,34 @@ +page PushComposercomponent { + seo { + title = "PushComposer component" + description = "Reusable push composer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

PushComposer

Reusable push composer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PushComposer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="PushComposer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PushComposer.wrn

component PushComposer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/push-notification-editor.wrn b/app/pages/components/push-notification-editor.wrn new file mode 100644 index 00000000..239c5934 --- /dev/null +++ b/app/pages/components/push-notification-editor.wrn @@ -0,0 +1,37 @@ +page PushNotificationEditorcomponent { + seo { + title = "PushNotificationEditor component" + description = "Reusable push notification editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

PushNotificationEditor

Reusable push notification editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PushNotificationEditor label="PushNotification" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="PushNotificationEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"PushNotification"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PushNotificationEditor.wrn

component PushNotificationEditor {
+  props {
+    label = "PushNotification" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/qr-code.wrn b/app/pages/components/qr-code.wrn new file mode 100644 index 00000000..d20d485d --- /dev/null +++ b/app/pages/components/qr-code.wrn @@ -0,0 +1,34 @@ +page QrCodecomponent { + seo { + title = "QrCode component" + description = "Reusable qr code component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

QrCode

Reusable qr code component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<QrCode eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="QrCode".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/QrCode.wrn

component QrCode {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/quantity-input.wrn b/app/pages/components/quantity-input.wrn new file mode 100644 index 00000000..26219d44 --- /dev/null +++ b/app/pages/components/quantity-input.wrn @@ -0,0 +1,37 @@ +page QuantityInputcomponent { + seo { + title = "QuantityInput component" + description = "Reusable quantity input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

QuantityInput

Reusable quantity input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<QuantityInput label="Quantity" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="QuantityInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Quantity"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/QuantityInput.wrn

component QuantityInput {
+  props {
+    label = "Quantity" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/quantity-stepper.wrn b/app/pages/components/quantity-stepper.wrn new file mode 100644 index 00000000..77dd220c --- /dev/null +++ b/app/pages/components/quantity-stepper.wrn @@ -0,0 +1,34 @@ +page QuantitySteppercomponent { + seo { + title = "QuantityStepper component" + description = "Reusable quantity stepper component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

QuantityStepper

Reusable quantity stepper component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<QuantityStepper eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="QuantityStepper".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/QuantityStepper.wrn

component QuantityStepper {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/quiet-hours-picker.wrn b/app/pages/components/quiet-hours-picker.wrn new file mode 100644 index 00000000..b3033657 --- /dev/null +++ b/app/pages/components/quiet-hours-picker.wrn @@ -0,0 +1,36 @@ +page QuietHoursPickercomponent { + seo { + title = "QuietHoursPicker component" + description = "Reusable quiet hours picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

QuietHoursPicker

Reusable quiet hours picker component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<QuietHoursPicker label="Quiet hours" startName="quietStart" endName="quietEnd" start="22:00" end="08:00" />

Legacy mount name: data-component="QuietHoursPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Quiet hours"
startNamestringOptional"quietStart"
endNamestringOptional"quietEnd"
startstringOptional"22:00"
endstringOptional"08:00"
timezonestringOptional"UTC"
disabledbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/QuietHoursPicker.wrn

component QuietHoursPicker {
+  props {
+    label = "Quiet hours"
+    startName = "quietStart"
+    endName = "quietEnd"
+    start = "22:00"
+    end = "08:00"
+    timezone = "UTC"
+    disabled = false
+    class = ""
+  }
+  view {
+    <fieldset class="wire-fieldset {class}" disabled="{disabled}"><legend class="wire-label">{label}</legend><div class="wire-form-row"><label class="wire-field"><span class="wire-label">From</span><input type="time" name="{startName}" value="{start}" class="wire-input" /></label><label class="wire-field"><span class="wire-label">Until</span><input type="time" name="{endName}" value="{end}" class="wire-input" /></label></div><p class="wire-field-message wire-field-message--help">Timezone: {timezone}</p></fieldset>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/quote-text.wrn b/app/pages/components/quote-text.wrn new file mode 100644 index 00000000..478c6f40 --- /dev/null +++ b/app/pages/components/quote-text.wrn @@ -0,0 +1,29 @@ +page QuoteTextcomponent { + seo { + title = "QuoteText component" + description = "Reusable quote text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

QuoteText

Reusable quote text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<QuoteText text="text" align="start" />

Legacy mount name: data-component="QuoteText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/QuoteText.wrn

component QuoteText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--lead wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/radio-group.wrn b/app/pages/components/radio-group.wrn new file mode 100644 index 00000000..059ab754 --- /dev/null +++ b/app/pages/components/radio-group.wrn @@ -0,0 +1,31 @@ +page RadioGroupcomponent { + seo { + title = "RadioGroup component" + description = "Reusable radio group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RadioGroup

Reusable radio group component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RadioGroup label="Choose one" name="choice" />

Legacy mount name: data-component="RadioGroup".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Choose one"
namestringOptional"choice"

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RadioGroup.wrn

component RadioGroup {
+  props {
+    class = ""
+    label = "Choose one"
+    name = "choice"
+  }
+  view {
+    <fieldset class="space-y-3 {class}"><legend class="text-sm font-semibold text-slate-900 dark:text-white">{label}</legend><div class="space-y-2"><slot /></div></fieldset>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/radio.wrn b/app/pages/components/radio.wrn new file mode 100644 index 00000000..e281b620 --- /dev/null +++ b/app/pages/components/radio.wrn @@ -0,0 +1,36 @@ +page Radiocomponent { + seo { + title = "Radio component" + description = "Reusable radio component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Radio

Reusable radio component.

@wrnexus/ui 0.2.648 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Radio id="id" name="choice" value="value" label="Option" description="description" />

Legacy mount name: data-component="Radio".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional"choice"
valuestringOptional""
labelstringOptional"Option"
descriptionstringOptional""
checkedbooleanOptionalfalse
disabledbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Radio.wrn

component Radio {
+  props {
+    class = ""
+    id = ""
+    name = "choice"
+    value = ""
+    label = "Option"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  view {
+    <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800 {class}"><input id="{id}" name="{name}" type="radio" value="{value}" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500" /><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span></label>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/range-input.wrn b/app/pages/components/range-input.wrn new file mode 100644 index 00000000..3439e5e6 --- /dev/null +++ b/app/pages/components/range-input.wrn @@ -0,0 +1,37 @@ +page RangeInputcomponent { + seo { + title = "RangeInput component" + description = "Reusable range input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RangeInput

Reusable range input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RangeInput label="Range" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RangeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Range"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RangeInput.wrn

component RangeInput {
+  props {
+    label = "Range" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/range-slider.wrn b/app/pages/components/range-slider.wrn new file mode 100644 index 00000000..c95b33c6 --- /dev/null +++ b/app/pages/components/range-slider.wrn @@ -0,0 +1,34 @@ +page RangeSlidercomponent { + seo { + title = "RangeSlider component" + description = "Reusable range slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

RangeSlider

Reusable range slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RangeSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="RangeSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RangeSlider.wrn

component RangeSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rate-limit-input.wrn b/app/pages/components/rate-limit-input.wrn new file mode 100644 index 00000000..0cbc5097 --- /dev/null +++ b/app/pages/components/rate-limit-input.wrn @@ -0,0 +1,37 @@ +page RateLimitInputcomponent { + seo { + title = "RateLimitInput component" + description = "Reusable rate limit input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RateLimitInput

Reusable rate limit input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RateLimitInput label="RateLimit" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RateLimitInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RateLimit"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RateLimitInput.wrn

component RateLimitInput {
+  props {
+    label = "RateLimit" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rate-limit-page.wrn b/app/pages/components/rate-limit-page.wrn new file mode 100644 index 00000000..3f965b78 --- /dev/null +++ b/app/pages/components/rate-limit-page.wrn @@ -0,0 +1,34 @@ +page RateLimitPagecomponent { + seo { + title = "RateLimitPage component" + description = "Reusable rate limit page component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

RateLimitPage

Reusable rate limit page component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RateLimitPage eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="RateLimitPage".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RateLimitPage.wrn

component RateLimitPage {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rate-limited-state.wrn b/app/pages/components/rate-limited-state.wrn new file mode 100644 index 00000000..226b8cdf --- /dev/null +++ b/app/pages/components/rate-limited-state.wrn @@ -0,0 +1,32 @@ +page RateLimitedStatecomponent { + seo { + title = "RateLimitedState component" + description = "Reusable rate limited state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

RateLimitedState

Reusable rate limited state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RateLimitedState label="RateLimited" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="RateLimitedState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RateLimited"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RateLimitedState.wrn

component RateLimitedState {
+  props {
+    label = "RateLimited" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rate-table.wrn b/app/pages/components/rate-table.wrn new file mode 100644 index 00000000..2cadbae3 --- /dev/null +++ b/app/pages/components/rate-table.wrn @@ -0,0 +1,31 @@ +page RateTablecomponent { + seo { + title = "RateTable component" + description = "Reusable rate table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

RateTable

Reusable rate table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RateTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="RateTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RateTable.wrn

component RateTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rating-slider.wrn b/app/pages/components/rating-slider.wrn new file mode 100644 index 00000000..7d9e3fff --- /dev/null +++ b/app/pages/components/rating-slider.wrn @@ -0,0 +1,34 @@ +page RatingSlidercomponent { + seo { + title = "RatingSlider component" + description = "Reusable rating slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

RatingSlider

Reusable rating slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RatingSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="RatingSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RatingSlider.wrn

component RatingSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/recipient-selector.wrn b/app/pages/components/recipient-selector.wrn new file mode 100644 index 00000000..696cd3d4 --- /dev/null +++ b/app/pages/components/recipient-selector.wrn @@ -0,0 +1,37 @@ +page RecipientSelectorcomponent { + seo { + title = "RecipientSelector component" + description = "Reusable recipient selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RecipientSelector

Reusable recipient selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RecipientSelector label="Recipient" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RecipientSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Recipient"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RecipientSelector.wrn

component RecipientSelector {
+  props {
+    label = "Recipient" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/recovery-code-form.wrn b/app/pages/components/recovery-code-form.wrn new file mode 100644 index 00000000..350a1078 --- /dev/null +++ b/app/pages/components/recovery-code-form.wrn @@ -0,0 +1,34 @@ +page RecoveryCodeFormcomponent { + seo { + title = "RecoveryCodeForm component" + description = "Reusable recovery code form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

RecoveryCodeForm

Reusable recovery code form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RecoveryCodeForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="RecoveryCodeForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RecoveryCodeForm.wrn

component RecoveryCodeForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/recovery-code-input.wrn b/app/pages/components/recovery-code-input.wrn new file mode 100644 index 00000000..f342c237 --- /dev/null +++ b/app/pages/components/recovery-code-input.wrn @@ -0,0 +1,37 @@ +page RecoveryCodeInputcomponent { + seo { + title = "RecoveryCodeInput component" + description = "Reusable recovery code input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RecoveryCodeInput

Reusable recovery code input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RecoveryCodeInput label="RecoveryCode" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RecoveryCodeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RecoveryCode"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RecoveryCodeInput.wrn

component RecoveryCodeInput {
+  props {
+    label = "RecoveryCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/recurrence-rule-builder.wrn b/app/pages/components/recurrence-rule-builder.wrn new file mode 100644 index 00000000..7793c96e --- /dev/null +++ b/app/pages/components/recurrence-rule-builder.wrn @@ -0,0 +1,34 @@ +page RecurrenceRuleBuildercomponent { + seo { + title = "RecurrenceRuleBuilder component" + description = "Reusable recurrence rule builder component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

RecurrenceRuleBuilder

Reusable recurrence rule builder component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RecurrenceRuleBuilder eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="RecurrenceRuleBuilder".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RecurrenceRuleBuilder.wrn

component RecurrenceRuleBuilder {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/recurring-schedule-picker.wrn b/app/pages/components/recurring-schedule-picker.wrn new file mode 100644 index 00000000..f3d36546 --- /dev/null +++ b/app/pages/components/recurring-schedule-picker.wrn @@ -0,0 +1,34 @@ +page RecurringSchedulePickercomponent { + seo { + title = "RecurringSchedulePicker component" + description = "Reusable recurring schedule picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RecurringSchedulePicker

Reusable recurring schedule picker component.

@wrnexus/ui 0.2.646 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RecurringSchedulePicker id="recurring-schedule" name="recurrence" label="Repeat" value="none" disabled="false" />

Legacy mount name: data-component="RecurringSchedulePicker".

Props and attributes

PropTypeRequirementDefault
idstringOptional"recurring-schedule"
namestringOptional"recurrence"
labelstringOptional"Repeat"
valuestringOptional"none"
disabledbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/RecurringSchedulePicker.wrn

component RecurringSchedulePicker {
+  props {
+    id = "recurring-schedule"
+    name = "recurrence"
+    label = "Repeat"
+    value = "none"
+    disabled = false
+    class = ""
+  }
+  view {
+    <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><select id="{id}" name="{name}" disabled="{disabled}" class="wire-input"><option value="none" selected="{value === 'none'}">Does not repeat</option><option value="daily" selected="{value === 'daily'}">Daily</option><option value="weekly" selected="{value === 'weekly'}">Weekly</option><option value="monthly" selected="{value === 'monthly'}">Monthly</option><option value="yearly" selected="{value === 'yearly'}">Yearly</option></select></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/redirect-uri-input.wrn b/app/pages/components/redirect-uri-input.wrn new file mode 100644 index 00000000..1a3623a0 --- /dev/null +++ b/app/pages/components/redirect-uri-input.wrn @@ -0,0 +1,37 @@ +page RedirectUriInputcomponent { + seo { + title = "RedirectUriInput component" + description = "Reusable redirect uri input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RedirectUriInput

Reusable redirect uri input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RedirectUriInput label="RedirectUri" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RedirectUriInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RedirectUri"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RedirectUriInput.wrn

component RedirectUriInput {
+  props {
+    label = "RedirectUri" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/reference-input.wrn b/app/pages/components/reference-input.wrn new file mode 100644 index 00000000..ecf38bbf --- /dev/null +++ b/app/pages/components/reference-input.wrn @@ -0,0 +1,37 @@ +page ReferenceInputcomponent { + seo { + title = "ReferenceInput component" + description = "Reusable reference input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ReferenceInput

Reusable reference input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ReferenceInput label="Reference" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ReferenceInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Reference"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ReferenceInput.wrn

component ReferenceInput {
+  props {
+    label = "Reference" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/regex-input.wrn b/app/pages/components/regex-input.wrn new file mode 100644 index 00000000..3693957f --- /dev/null +++ b/app/pages/components/regex-input.wrn @@ -0,0 +1,37 @@ +page RegexInputcomponent { + seo { + title = "RegexInput component" + description = "Reusable regex input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RegexInput

Reusable regex input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RegexInput label="Regex" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RegexInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Regex"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RegexInput.wrn

component RegexInput {
+  props {
+    label = "Regex" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/region-availability-table.wrn b/app/pages/components/region-availability-table.wrn new file mode 100644 index 00000000..1cbe12b8 --- /dev/null +++ b/app/pages/components/region-availability-table.wrn @@ -0,0 +1,31 @@ +page RegionAvailabilityTablecomponent { + seo { + title = "RegionAvailabilityTable component" + description = "Reusable region availability table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

RegionAvailabilityTable

Reusable region availability table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RegionAvailabilityTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="RegionAvailabilityTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RegionAvailabilityTable.wrn

component RegionAvailabilityTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/region-selector.wrn b/app/pages/components/region-selector.wrn new file mode 100644 index 00000000..8f18ca9d --- /dev/null +++ b/app/pages/components/region-selector.wrn @@ -0,0 +1,37 @@ +page RegionSelectorcomponent { + seo { + title = "RegionSelector component" + description = "Reusable region selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RegionSelector

Reusable region selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RegionSelector label="Region" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RegionSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Region"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RegionSelector.wrn

component RegionSelector {
+  props {
+    label = "Region" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/region-unavailable-alert.wrn b/app/pages/components/region-unavailable-alert.wrn new file mode 100644 index 00000000..331a2f6e --- /dev/null +++ b/app/pages/components/region-unavailable-alert.wrn @@ -0,0 +1,32 @@ +page RegionUnavailableAlertcomponent { + seo { + title = "RegionUnavailableAlert component" + description = "Reusable region unavailable alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

RegionUnavailableAlert

Reusable region unavailable alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RegionUnavailableAlert label="RegionUnavailable" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="RegionUnavailableAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RegionUnavailable"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RegionUnavailableAlert.wrn

component RegionUnavailableAlert {
+  props {
+    label = "RegionUnavailable" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/region-unavailable-state.wrn b/app/pages/components/region-unavailable-state.wrn new file mode 100644 index 00000000..0a42c3c5 --- /dev/null +++ b/app/pages/components/region-unavailable-state.wrn @@ -0,0 +1,32 @@ +page RegionUnavailableStatecomponent { + seo { + title = "RegionUnavailableState component" + description = "Reusable region unavailable state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

RegionUnavailableState

Reusable region unavailable state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RegionUnavailableState label="RegionUnavailable" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="RegionUnavailableState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RegionUnavailable"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RegionUnavailableState.wrn

component RegionUnavailableState {
+  props {
+    label = "RegionUnavailable" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/regional-privacy-banner.wrn b/app/pages/components/regional-privacy-banner.wrn new file mode 100644 index 00000000..884e4993 --- /dev/null +++ b/app/pages/components/regional-privacy-banner.wrn @@ -0,0 +1,32 @@ +page RegionalPrivacyBannercomponent { + seo { + title = "RegionalPrivacyBanner component" + description = "Reusable regional privacy banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

RegionalPrivacyBanner

Reusable regional privacy banner component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RegionalPrivacyBanner label="RegionalPrivacy" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="RegionalPrivacyBanner".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RegionalPrivacy"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RegionalPrivacyBanner.wrn

component RegionalPrivacyBanner {
+  props {
+    label = "RegionalPrivacy" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/reject-optional-cookies-button.wrn b/app/pages/components/reject-optional-cookies-button.wrn new file mode 100644 index 00000000..b688bc2d --- /dev/null +++ b/app/pages/components/reject-optional-cookies-button.wrn @@ -0,0 +1,32 @@ +page RejectOptionalCookiesButtoncomponent { + seo { + title = "RejectOptionalCookiesButton component" + description = "Reusable reject optional cookies button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

RejectOptionalCookiesButton

Reusable reject optional cookies button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RejectOptionalCookiesButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="RejectOptionalCookiesButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RejectOptionalCookiesButton.wrn

component RejectOptionalCookiesButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/reopen-cookie-settings-button.wrn b/app/pages/components/reopen-cookie-settings-button.wrn new file mode 100644 index 00000000..e755ba2a --- /dev/null +++ b/app/pages/components/reopen-cookie-settings-button.wrn @@ -0,0 +1,32 @@ +page ReopenCookieSettingsButtoncomponent { + seo { + title = "ReopenCookieSettingsButton component" + description = "Reusable reopen cookie settings button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ReopenCookieSettingsButton

Reusable reopen cookie settings button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ReopenCookieSettingsButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ReopenCookieSettingsButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ReopenCookieSettingsButton.wrn

component ReopenCookieSettingsButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/report-card.wrn b/app/pages/components/report-card.wrn new file mode 100644 index 00000000..4169bdb3 --- /dev/null +++ b/app/pages/components/report-card.wrn @@ -0,0 +1,34 @@ +page ReportCardcomponent { + seo { + title = "ReportCard component" + description = "Reusable report card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ReportCard

Reusable report card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ReportCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ReportCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ReportCard.wrn

component ReportCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/request-response-viewer.wrn b/app/pages/components/request-response-viewer.wrn new file mode 100644 index 00000000..fb57c016 --- /dev/null +++ b/app/pages/components/request-response-viewer.wrn @@ -0,0 +1,34 @@ +page RequestResponseViewercomponent { + seo { + title = "RequestResponseViewer component" + description = "Reusable request response viewer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

RequestResponseViewer

Reusable request response viewer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RequestResponseViewer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="RequestResponseViewer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RequestResponseViewer.wrn

component RequestResponseViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/request-viewer.wrn b/app/pages/components/request-viewer.wrn new file mode 100644 index 00000000..c5844217 --- /dev/null +++ b/app/pages/components/request-viewer.wrn @@ -0,0 +1,34 @@ +page RequestViewercomponent { + seo { + title = "RequestViewer component" + description = "Reusable request viewer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

RequestViewer

Reusable request viewer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RequestViewer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="RequestViewer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RequestViewer.wrn

component RequestViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/required-indicator.wrn b/app/pages/components/required-indicator.wrn new file mode 100644 index 00000000..6a438847 --- /dev/null +++ b/app/pages/components/required-indicator.wrn @@ -0,0 +1,32 @@ +page RequiredIndicatorcomponent { + seo { + title = "RequiredIndicator component" + description = "Reusable required indicator component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

RequiredIndicator

Reusable required indicator component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RequiredIndicator label="Required" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="RequiredIndicator".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Required"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RequiredIndicator.wrn

component RequiredIndicator {
+  props {
+    label = "Required" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/reset-password-form.wrn b/app/pages/components/reset-password-form.wrn new file mode 100644 index 00000000..cabd98f2 --- /dev/null +++ b/app/pages/components/reset-password-form.wrn @@ -0,0 +1,34 @@ +page ResetPasswordFormcomponent { + seo { + title = "ResetPasswordForm component" + description = "Reusable reset password form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ResetPasswordForm

Reusable reset password form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResetPasswordForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ResetPasswordForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResetPasswordForm.wrn

component ResetPasswordForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/resizable-panel.wrn b/app/pages/components/resizable-panel.wrn new file mode 100644 index 00000000..337e4214 --- /dev/null +++ b/app/pages/components/resizable-panel.wrn @@ -0,0 +1,31 @@ +page ResizablePanelcomponent { + seo { + title = "ResizablePanel component" + description = "Reusable resizable panel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ResizablePanel

Reusable resizable panel component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResizablePanel eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ResizablePanel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResizablePanel.wrn

component ResizablePanel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/resource-card.wrn b/app/pages/components/resource-card.wrn new file mode 100644 index 00000000..e47634c4 --- /dev/null +++ b/app/pages/components/resource-card.wrn @@ -0,0 +1,34 @@ +page ResourceCardcomponent { + seo { + title = "ResourceCard component" + description = "Reusable resource card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ResourceCard

Reusable resource card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResourceCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ResourceCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResourceCard.wrn

component ResourceCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/resource-download-card.wrn b/app/pages/components/resource-download-card.wrn new file mode 100644 index 00000000..04b56360 --- /dev/null +++ b/app/pages/components/resource-download-card.wrn @@ -0,0 +1,34 @@ +page ResourceDownloadCardcomponent { + seo { + title = "ResourceDownloadCard component" + description = "Reusable resource download card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ResourceDownloadCard

Reusable resource download card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResourceDownloadCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ResourceDownloadCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResourceDownloadCard.wrn

component ResourceDownloadCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/resource-page-shell.wrn b/app/pages/components/resource-page-shell.wrn new file mode 100644 index 00000000..f02f0745 --- /dev/null +++ b/app/pages/components/resource-page-shell.wrn @@ -0,0 +1,31 @@ +page ResourcePageShellcomponent { + seo { + title = "ResourcePageShell component" + description = "Reusable resource page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ResourcePageShell

Reusable resource page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResourcePageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ResourcePageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResourcePageShell.wrn

component ResourcePageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/resource-search.wrn b/app/pages/components/resource-search.wrn new file mode 100644 index 00000000..470748d9 --- /dev/null +++ b/app/pages/components/resource-search.wrn @@ -0,0 +1,34 @@ +page ResourceSearchcomponent { + seo { + title = "ResourceSearch component" + description = "Reusable resource search component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ResourceSearch

Reusable resource search component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResourceSearch eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ResourceSearch".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResourceSearch.wrn

component ResourceSearch {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/resource-type-badge.wrn b/app/pages/components/resource-type-badge.wrn new file mode 100644 index 00000000..17b0a8d5 --- /dev/null +++ b/app/pages/components/resource-type-badge.wrn @@ -0,0 +1,32 @@ +page ResourceTypeBadgecomponent { + seo { + title = "ResourceTypeBadge component" + description = "Reusable resource type badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ResourceTypeBadge

Reusable resource type badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResourceTypeBadge label="ResourceType" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ResourceTypeBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ResourceType"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResourceTypeBadge.wrn

component ResourceTypeBadge {
+  props {
+    label = "ResourceType" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/resources-mega-menu.wrn b/app/pages/components/resources-mega-menu.wrn new file mode 100644 index 00000000..6ac8300d --- /dev/null +++ b/app/pages/components/resources-mega-menu.wrn @@ -0,0 +1,386 @@ +page ResourcesMegaMenucomponent { + seo { + title = "ResourcesMegaMenu component" + description = "Reusable resources mega menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

ResourcesMegaMenu

Reusable resources mega menu component.

@wrnexus/ui 0.2.641 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResourcesMegaMenu />

Legacy mount name: data-component="ResourcesMegaMenu".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResourcesMegaMenu.wrn

component ResourcesMegaMenu {
+    props {
+        class: string = ""
+    }
+    view {
+        <div
+            class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
+        >
+            <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
+                <div class="grid gap-8 lg:grid-cols-[minmax(0,1.55fr)_minmax(18rem,0.8fr)]">
+
+                    <!-- Resource links -->
+                    <section>
+                        <div class="mb-5 flex items-end justify-between gap-6">
+                            <div>
+                                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
+                                    Resources
+                                </p>
+
+                                <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
+                                    Learn, build, and get support
+                                </h2>
+
+                                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                                    Explore practical guides, customer stories, product updates,
+                                    and security resources.
+                                </p>
+                            </div>
+
+                            <a
+                                href="/resources"
+                                class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
+                            >
+                                View all resources
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+
+                        <div class="grid gap-2 md:grid-cols-2">
+
+                            <!-- Blog -->
+                            <a
+                                href="/blog"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--newspaper] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Blog
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Product updates, engineering insights, identity trends, and
+                                        company news.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Customer stories -->
+                            <a
+                                href="/customers"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--users-round] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Customer stories
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        See how teams use WRNexusJS to secure and scale their
+                                        applications.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Guides -->
+                            <a
+                                href="/guides"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--book-marked] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Guides
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Practical identity, security, SaaS, and architecture
+                                        walkthroughs.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Help center -->
+                            <a
+                                href="/help"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--circle-help] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Help center
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Find answers for account, workspace, billing, and security
+                                        questions.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Security -->
+                            <a
+                                href="/security"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--shield-check] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Security
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Learn how WRNexusJS protects accounts, sessions, and
+                                        organizations.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Trust center -->
+                            <a
+                                href="/trust"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--badge-check] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Trust center
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Review compliance, privacy, infrastructure, and operational
+                                        controls.
+                                    </span>
+                                </span>
+                            </a>
+                        </div>
+
+                        <a
+                            href="/resources"
+                            class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
+                        >
+                            View all resources
+
+                            <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                        </a>
+                    </section>
+
+                    <!-- Featured resource -->
+                    <aside
+                        class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-cyan-50 p-6 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-cyan-500/10"
+                    >
+                        <div aria-hidden="true" class="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" ></div>
+
+                        <div aria-hidden="true" class="absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-cyan-300/30 blur-3xl dark:bg-cyan-500/10" ></div>
+
+                        <div class="relative">
+                            <span
+                                class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
+                            >
+                                <span class="icon-[lucide--sparkles] h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                Featured guide
+                            </span>
+
+                            <div
+                                class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20"
+                            >
+                                <span class="icon-[lucide--book-open-check] h-6 w-6" aria-hidden="true" ></span>
+                            </div>
+
+                            <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
+                                The modern SaaS identity checklist
+                            </h3>
+
+                            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
+                                A practical checklist covering authentication, organizations,
+                                permissions, MFA, recovery, sessions, and enterprise SSO.
+                            </p>
+
+                            <div class="mt-5 space-y-3">
+                                <div class="flex items-center gap-3">
+                                    <span
+                                        class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                                    >
+                                        <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="text-sm text-slate-700 dark:text-slate-300">
+                                        Secure authentication foundations
+                                    </span>
+                                </div>
+
+                                <div class="flex items-center gap-3">
+                                    <span
+                                        class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                                    >
+                                        <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="text-sm text-slate-700 dark:text-slate-300">
+                                        Multi-tenant organization design
+                                    </span>
+                                </div>
+
+                                <div class="flex items-center gap-3">
+                                    <span
+                                        class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                                    >
+                                        <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="text-sm text-slate-700 dark:text-slate-300">
+                                        Recovery and account protection
+                                    </span>
+                                </div>
+                            </div>
+
+                            <a
+                                href="/guides/saas-identity-checklist"
+                                class="group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                            >
+                                Read the guide
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+
+                            <div class="mt-4 flex items-center justify-center gap-4 text-xs text-slate-500 dark:text-slate-400">
+                                <span class="inline-flex items-center gap-1.5">
+                                    <span class="icon-[lucide--clock-3] h-4 w-4" aria-hidden="true" ></span>
+
+                                    12 min read
+                                </span>
+
+                                <span class="inline-flex items-center gap-1.5">
+                                    <span class="icon-[lucide--download] h-4 w-4" aria-hidden="true" ></span>
+
+                                    PDF available
+                                </span>
+                            </div>
+                        </div>
+                    </aside>
+                </div>
+
+                <!-- Bottom resource links -->
+                <div
+                    class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
+                >
+                    <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
+                        <a
+                            href="/webinars"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--presentation] h-4 w-4" aria-hidden="true" ></span>
+
+                            Webinars
+                        </a>
+
+                        <a
+                            href="/events"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--calendar-days] h-4 w-4" aria-hidden="true" ></span>
+
+                            Events
+                        </a>
+
+                        <a
+                            href="/reports"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--file-chart-column] h-4 w-4" aria-hidden="true" ></span>
+
+                            Reports
+                        </a>
+
+                        <a
+                            href="/newsletter"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--mail-plus] h-4 w-4" aria-hidden="true" ></span>
+
+                            Newsletter
+                        </a>
+                    </div>
+
+                    <a
+                        href="/contact"
+                        class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                    >
+                        Contact our team
+
+                        <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/response-viewer.wrn b/app/pages/components/response-viewer.wrn new file mode 100644 index 00000000..6fa8819d --- /dev/null +++ b/app/pages/components/response-viewer.wrn @@ -0,0 +1,34 @@ +page ResponseViewercomponent { + seo { + title = "ResponseViewer component" + description = "Reusable response viewer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ResponseViewer

Reusable response viewer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResponseViewer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ResponseViewer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResponseViewer.wrn

component ResponseViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/responsible-disclosure-cta.wrn b/app/pages/components/responsible-disclosure-cta.wrn new file mode 100644 index 00000000..cdc8346d --- /dev/null +++ b/app/pages/components/responsible-disclosure-cta.wrn @@ -0,0 +1,32 @@ +page ResponsibleDisclosureCTAcomponent { + seo { + title = "ResponsibleDisclosureCTA component" + description = "Reusable responsible disclosure c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ResponsibleDisclosureCTA

Reusable responsible disclosure c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResponsibleDisclosureCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ResponsibleDisclosureCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResponsibleDisclosureCTA.wrn

component ResponsibleDisclosureCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/responsive-table.wrn b/app/pages/components/responsive-table.wrn new file mode 100644 index 00000000..7b68a5cb --- /dev/null +++ b/app/pages/components/responsive-table.wrn @@ -0,0 +1,31 @@ +page ResponsiveTablecomponent { + seo { + title = "ResponsiveTable component" + description = "Reusable responsive table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ResponsiveTable

Reusable responsive table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResponsiveTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ResponsiveTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResponsiveTable.wrn

component ResponsiveTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/results-section.wrn b/app/pages/components/results-section.wrn new file mode 100644 index 00000000..76320eb8 --- /dev/null +++ b/app/pages/components/results-section.wrn @@ -0,0 +1,31 @@ +page ResultsSectioncomponent { + seo { + title = "ResultsSection component" + description = "Reusable results section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ResultsSection

Reusable results section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ResultsSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ResultsSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ResultsSection.wrn

component ResultsSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/retention-table.wrn b/app/pages/components/retention-table.wrn new file mode 100644 index 00000000..95d3288f --- /dev/null +++ b/app/pages/components/retention-table.wrn @@ -0,0 +1,31 @@ +page RetentionTablecomponent { + seo { + title = "RetentionTable component" + description = "Reusable retention table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

RetentionTable

Reusable retention table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RetentionTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="RetentionTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RetentionTable.wrn

component RetentionTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/retry-count-input.wrn b/app/pages/components/retry-count-input.wrn new file mode 100644 index 00000000..f01a3680 --- /dev/null +++ b/app/pages/components/retry-count-input.wrn @@ -0,0 +1,37 @@ +page RetryCountInputcomponent { + seo { + title = "RetryCountInput component" + description = "Reusable retry count input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RetryCountInput

Reusable retry count input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RetryCountInput label="RetryCount" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RetryCountInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RetryCount"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RetryCountInput.wrn

component RetryCountInput {
+  props {
+    label = "RetryCount" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/revenue-chart.wrn b/app/pages/components/revenue-chart.wrn new file mode 100644 index 00000000..029f90fd --- /dev/null +++ b/app/pages/components/revenue-chart.wrn @@ -0,0 +1,32 @@ +page RevenueChartcomponent { + seo { + title = "RevenueChart component" + description = "Reusable revenue chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

RevenueChart

Reusable revenue chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RevenueChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="RevenueChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RevenueChart.wrn

component RevenueChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rgb-color-input.wrn b/app/pages/components/rgb-color-input.wrn new file mode 100644 index 00000000..f5635173 --- /dev/null +++ b/app/pages/components/rgb-color-input.wrn @@ -0,0 +1,37 @@ +page RgbColorInputcomponent { + seo { + title = "RgbColorInput component" + description = "Reusable rgb color input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RgbColorInput

Reusable rgb color input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RgbColorInput label="RgbColor" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RgbColorInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RgbColor"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RgbColorInput.wrn

component RgbColorInput {
+  props {
+    label = "RgbColor" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rich-text-editor.wrn b/app/pages/components/rich-text-editor.wrn new file mode 100644 index 00000000..51442d0c --- /dev/null +++ b/app/pages/components/rich-text-editor.wrn @@ -0,0 +1,37 @@ +page RichTextEditorcomponent { + seo { + title = "RichTextEditor component" + description = "Reusable rich text editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RichTextEditor

Reusable rich text editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RichTextEditor label="RichText" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RichTextEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RichText"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RichTextEditor.wrn

component RichTextEditor {
+  props {
+    label = "RichText" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rich-text-input.wrn b/app/pages/components/rich-text-input.wrn new file mode 100644 index 00000000..d1b002f1 --- /dev/null +++ b/app/pages/components/rich-text-input.wrn @@ -0,0 +1,37 @@ +page RichTextInputcomponent { + seo { + title = "RichTextInput component" + description = "Reusable rich text input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RichTextInput

Reusable rich text input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RichTextInput label="RichText" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RichTextInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RichText"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RichTextInput.wrn

component RichTextInput {
+  props {
+    label = "RichText" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/role-selector.wrn b/app/pages/components/role-selector.wrn new file mode 100644 index 00000000..4846b716 --- /dev/null +++ b/app/pages/components/role-selector.wrn @@ -0,0 +1,37 @@ +page RoleSelectorcomponent { + seo { + title = "RoleSelector component" + description = "Reusable role selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RoleSelector

Reusable role selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RoleSelector label="Role" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RoleSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Role"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RoleSelector.wrn

component RoleSelector {
+  props {
+    label = "Role" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/rolling-date-range-picker.wrn b/app/pages/components/rolling-date-range-picker.wrn new file mode 100644 index 00000000..380fac37 --- /dev/null +++ b/app/pages/components/rolling-date-range-picker.wrn @@ -0,0 +1,37 @@ +page RollingDateRangePickercomponent { + seo { + title = "RollingDateRangePicker component" + description = "Reusable rolling date range picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

RollingDateRangePicker

Reusable rolling date range picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<RollingDateRangePicker label="RollingDateRange" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="RollingDateRangePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"RollingDateRange"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/RollingDateRangePicker.wrn

component RollingDateRangePicker {
+  props {
+    label = "RollingDateRange" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/save-cookie-preferences-button.wrn b/app/pages/components/save-cookie-preferences-button.wrn new file mode 100644 index 00000000..00b74d97 --- /dev/null +++ b/app/pages/components/save-cookie-preferences-button.wrn @@ -0,0 +1,32 @@ +page SaveCookiePreferencesButtoncomponent { + seo { + title = "SaveCookiePreferencesButton component" + description = "Reusable save cookie preferences button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SaveCookiePreferencesButton

Reusable save cookie preferences button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SaveCookiePreferencesButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="SaveCookiePreferencesButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SaveCookiePreferencesButton.wrn

component SaveCookiePreferencesButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/saved-filter-selector.wrn b/app/pages/components/saved-filter-selector.wrn new file mode 100644 index 00000000..28a0cc62 --- /dev/null +++ b/app/pages/components/saved-filter-selector.wrn @@ -0,0 +1,37 @@ +page SavedFilterSelectorcomponent { + seo { + title = "SavedFilterSelector component" + description = "Reusable saved filter selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SavedFilterSelector

Reusable saved filter selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SavedFilterSelector label="SavedFilter" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SavedFilterSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SavedFilter"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SavedFilterSelector.wrn

component SavedFilterSelector {
+  props {
+    label = "SavedFilter" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/schedule-message-picker.wrn b/app/pages/components/schedule-message-picker.wrn new file mode 100644 index 00000000..32e8e20c --- /dev/null +++ b/app/pages/components/schedule-message-picker.wrn @@ -0,0 +1,37 @@ +page ScheduleMessagePickercomponent { + seo { + title = "ScheduleMessagePicker component" + description = "Reusable schedule message picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ScheduleMessagePicker

Reusable schedule message picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ScheduleMessagePicker label="ScheduleMessage" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ScheduleMessagePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ScheduleMessage"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ScheduleMessagePicker.wrn

component ScheduleMessagePicker {
+  props {
+    label = "ScheduleMessage" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/schedule-picker.wrn b/app/pages/components/schedule-picker.wrn new file mode 100644 index 00000000..61a004b5 --- /dev/null +++ b/app/pages/components/schedule-picker.wrn @@ -0,0 +1,30 @@ +page SchedulePickercomponent { + seo { + title = "SchedulePicker component" + description = "Reusable schedule picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SchedulePicker

Reusable schedule picker component.

@wrnexus/ui 0.2.642 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SchedulePicker label="Schedule" />

Legacy mount name: data-component="SchedulePicker".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Schedule"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/SchedulePicker.wrn

component SchedulePicker {
+  props {
+    class = ""
+    label = "Schedule"
+  }
+  view {
+    <fieldset class="space-y-4 rounded-2xl border border-slate-200 p-5 dark:border-slate-800 {class}"><legend class="px-2 font-semibold">{label}</legend><DateTimeInput id="scheduleAt" name="scheduleAt" label="Date and time" /><TimezoneSelector /></fieldset>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/scheduled-date-time-picker.wrn b/app/pages/components/scheduled-date-time-picker.wrn new file mode 100644 index 00000000..8629e3b6 --- /dev/null +++ b/app/pages/components/scheduled-date-time-picker.wrn @@ -0,0 +1,37 @@ +page ScheduledDateTimePickercomponent { + seo { + title = "ScheduledDateTimePicker component" + description = "Reusable scheduled date time picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ScheduledDateTimePicker

Reusable scheduled date time picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ScheduledDateTimePicker label="ScheduledDateTime" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ScheduledDateTimePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ScheduledDateTime"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ScheduledDateTimePicker.wrn

component ScheduledDateTimePicker {
+  props {
+    label = "ScheduledDateTime" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/screenshot-frame.wrn b/app/pages/components/screenshot-frame.wrn new file mode 100644 index 00000000..b20b0928 --- /dev/null +++ b/app/pages/components/screenshot-frame.wrn @@ -0,0 +1,31 @@ +page ScreenshotFramecomponent { + seo { + title = "ScreenshotFrame component" + description = "Reusable screenshot frame component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

ScreenshotFrame

Reusable screenshot frame component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ScreenshotFrame eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="ScreenshotFrame".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ScreenshotFrame.wrn

component ScreenshotFrame {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/scroll-area.wrn b/app/pages/components/scroll-area.wrn new file mode 100644 index 00000000..12d6525a --- /dev/null +++ b/app/pages/components/scroll-area.wrn @@ -0,0 +1,27 @@ +page ScrollAreacomponent { + seo { + title = "ScrollArea component" + description = "Reusable scroll area component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

ScrollArea

Reusable scroll area component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ScrollArea />

Legacy mount name: data-component="ScrollArea".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ScrollArea.wrn

component ScrollArea {
+  props {
+    class = ""
+  }
+  view { <div class="wire-scroll-area {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sdk-language-selector.wrn b/app/pages/components/sdk-language-selector.wrn new file mode 100644 index 00000000..06cb7fd4 --- /dev/null +++ b/app/pages/components/sdk-language-selector.wrn @@ -0,0 +1,37 @@ +page SdkLanguageSelectorcomponent { + seo { + title = "SdkLanguageSelector component" + description = "Reusable sdk language selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SdkLanguageSelector

Reusable sdk language selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SdkLanguageSelector label="SdkLanguage" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SdkLanguageSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SdkLanguage"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SdkLanguageSelector.wrn

component SdkLanguageSelector {
+  props {
+    label = "SdkLanguage" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sdkcard.wrn b/app/pages/components/sdkcard.wrn new file mode 100644 index 00000000..d123425d --- /dev/null +++ b/app/pages/components/sdkcard.wrn @@ -0,0 +1,34 @@ +page SDKCardcomponent { + seo { + title = "SDKCard component" + description = "Reusable s d k card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SDKCard

Reusable s d k card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SDKCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SDKCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SDKCard.wrn

component SDKCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sdklanguage-tabs.wrn b/app/pages/components/sdklanguage-tabs.wrn new file mode 100644 index 00000000..3df8a7d7 --- /dev/null +++ b/app/pages/components/sdklanguage-tabs.wrn @@ -0,0 +1,34 @@ +page SDKLanguageTabscomponent { + seo { + title = "SDKLanguageTabs component" + description = "Reusable s d k language tabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SDKLanguageTabs

Reusable s d k language tabs component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SDKLanguageTabs eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SDKLanguageTabs".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SDKLanguageTabs.wrn

component SDKLanguageTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sdktabs.wrn b/app/pages/components/sdktabs.wrn new file mode 100644 index 00000000..5489b78a --- /dev/null +++ b/app/pages/components/sdktabs.wrn @@ -0,0 +1,31 @@ +page SDKTabscomponent { + seo { + title = "SDKTabs component" + description = "Reusable sdktabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

SDKTabs

Reusable sdktabs component.

@wrnexus/ui 0.2.644 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SDKTabs label="SDK languages" tabs="[]" defaultIndex="0" />

Legacy mount name: data-component="SDKTabs".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SDK languages"
tabsstringOptional[]
defaultIndexnumberOptional0
classstringOptional""

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/SDKTabs.wrn

component SDKTabs {
+  props {
+    label = "SDK languages"
+    tabs = []
+    defaultIndex = 0
+    class = ""
+  }
+  state active = defaultIndex
+  view { <section class="wire-sdk-tabs {class}"><div role="tablist" aria-label="{label}" class="wire-tabs">{#each tabs as tab, index}<button type="button" role="tab" aria-selected="{active === index}" class="wire-tab" @click="active = index">{tab.label}</button>{/each}</div>{#each tabs as tab, index}<div role="tabpanel" data-show="active === index" class="wire-sdk-tabs__panel"><pre><code>{tab.code}</code></pre></div>{/each}</section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/search-button.wrn b/app/pages/components/search-button.wrn new file mode 100644 index 00000000..94b733af --- /dev/null +++ b/app/pages/components/search-button.wrn @@ -0,0 +1,32 @@ +page SearchButtoncomponent { + seo { + title = "SearchButton component" + description = "Reusable search button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SearchButton

Reusable search button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SearchButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="SearchButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SearchButton.wrn

component SearchButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/search-category-tabs.wrn b/app/pages/components/search-category-tabs.wrn new file mode 100644 index 00000000..6082db0d --- /dev/null +++ b/app/pages/components/search-category-tabs.wrn @@ -0,0 +1,34 @@ +page SearchCategoryTabscomponent { + seo { + title = "SearchCategoryTabs component" + description = "Reusable search category tabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SearchCategoryTabs

Reusable search category tabs component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SearchCategoryTabs eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SearchCategoryTabs".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SearchCategoryTabs.wrn

component SearchCategoryTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/search-dialog.wrn b/app/pages/components/search-dialog.wrn new file mode 100644 index 00000000..ac9c9618 --- /dev/null +++ b/app/pages/components/search-dialog.wrn @@ -0,0 +1,31 @@ +page SearchDialogcomponent { + seo { + title = "SearchDialog component" + description = "Reusable search dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

SearchDialog

Reusable search dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SearchDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="SearchDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SearchDialog.wrn

component SearchDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/search-empty-state.wrn b/app/pages/components/search-empty-state.wrn new file mode 100644 index 00000000..7f12c95e --- /dev/null +++ b/app/pages/components/search-empty-state.wrn @@ -0,0 +1,32 @@ +page SearchEmptyStatecomponent { + seo { + title = "SearchEmptyState component" + description = "Reusable search empty state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

SearchEmptyState

Reusable search empty state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SearchEmptyState label="SearchEmpty" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="SearchEmptyState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SearchEmpty"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SearchEmptyState.wrn

component SearchEmptyState {
+  props {
+    label = "SearchEmpty" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/search-input.wrn b/app/pages/components/search-input.wrn new file mode 100644 index 00000000..f6e17269 --- /dev/null +++ b/app/pages/components/search-input.wrn @@ -0,0 +1,45 @@ +page SearchInputcomponent { + seo { + title = "SearchInput component" + description = "Reusable search input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SearchInput

Reusable search input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SearchInput id="id" name="name" label="Search" value="value" placeholder="placeholder" />

Legacy mount name: data-component="SearchInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Search"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/SearchInput.wrn

component SearchInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Search"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="search" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/search-loading-state.wrn b/app/pages/components/search-loading-state.wrn new file mode 100644 index 00000000..ce37b77e --- /dev/null +++ b/app/pages/components/search-loading-state.wrn @@ -0,0 +1,32 @@ +page SearchLoadingStatecomponent { + seo { + title = "SearchLoadingState component" + description = "Reusable search loading state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

SearchLoadingState

Reusable search loading state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SearchLoadingState label="SearchLoading" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="SearchLoadingState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SearchLoading"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SearchLoadingState.wrn

component SearchLoadingState {
+  props {
+    label = "SearchLoading" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/search-result-item.wrn b/app/pages/components/search-result-item.wrn new file mode 100644 index 00000000..0a8a1136 --- /dev/null +++ b/app/pages/components/search-result-item.wrn @@ -0,0 +1,34 @@ +page SearchResultItemcomponent { + seo { + title = "SearchResultItem component" + description = "Reusable search result item component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SearchResultItem

Reusable search result item component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SearchResultItem eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SearchResultItem".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SearchResultItem.wrn

component SearchResultItem {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/second-picker.wrn b/app/pages/components/second-picker.wrn new file mode 100644 index 00000000..dcc550db --- /dev/null +++ b/app/pages/components/second-picker.wrn @@ -0,0 +1,37 @@ +page SecondPickercomponent { + seo { + title = "SecondPicker component" + description = "Reusable second picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SecondPicker

Reusable second picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecondPicker label="Second" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SecondPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Second"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecondPicker.wrn

component SecondPicker {
+  props {
+    label = "Second" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/secondary-button.wrn b/app/pages/components/secondary-button.wrn new file mode 100644 index 00000000..f2a425a1 --- /dev/null +++ b/app/pages/components/secondary-button.wrn @@ -0,0 +1,30 @@ +page SecondaryButtoncomponent { + seo { + title = "SecondaryButton component" + description = "Reusable secondary button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SecondaryButton

Reusable secondary button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecondaryButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="SecondaryButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecondaryButton.wrn

component SecondaryButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/secret-display.wrn b/app/pages/components/secret-display.wrn new file mode 100644 index 00000000..88c85a93 --- /dev/null +++ b/app/pages/components/secret-display.wrn @@ -0,0 +1,34 @@ +page SecretDisplaycomponent { + seo { + title = "SecretDisplay component" + description = "Reusable secret display component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SecretDisplay

Reusable secret display component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecretDisplay eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SecretDisplay".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecretDisplay.wrn

component SecretDisplay {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/secret-input.wrn b/app/pages/components/secret-input.wrn new file mode 100644 index 00000000..778a499c --- /dev/null +++ b/app/pages/components/secret-input.wrn @@ -0,0 +1,37 @@ +page SecretInputcomponent { + seo { + title = "SecretInput component" + description = "Reusable secret input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SecretInput

Reusable secret input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecretInput label="Secret" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SecretInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Secret"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecretInput.wrn

component SecretInput {
+  props {
+    label = "Secret" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/secret-reveal-dialog.wrn b/app/pages/components/secret-reveal-dialog.wrn new file mode 100644 index 00000000..6deb1044 --- /dev/null +++ b/app/pages/components/secret-reveal-dialog.wrn @@ -0,0 +1,31 @@ +page SecretRevealDialogcomponent { + seo { + title = "SecretRevealDialog component" + description = "Reusable secret reveal dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

SecretRevealDialog

Reusable secret reveal dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecretRevealDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="SecretRevealDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecretRevealDialog.wrn

component SecretRevealDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/section-actions.wrn b/app/pages/components/section-actions.wrn new file mode 100644 index 00000000..48961c9e --- /dev/null +++ b/app/pages/components/section-actions.wrn @@ -0,0 +1,32 @@ +page SectionActionscomponent { + seo { + title = "SectionActions component" + description = "Reusable section actions component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SectionActions

Reusable section actions component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SectionActions label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="SectionActions".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SectionActions.wrn

component SectionActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/section-header.wrn b/app/pages/components/section-header.wrn new file mode 100644 index 00000000..1201c3cc --- /dev/null +++ b/app/pages/components/section-header.wrn @@ -0,0 +1,33 @@ +page SectionHeadercomponent { + seo { + title = "SectionHeader component" + description = "Reusable section header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SectionHeader

Reusable section header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SectionHeader eyebrow="eyebrow" title="Section title" description="description" align="left" />

Legacy mount name: data-component="SectionHeader".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
eyebrowstringOptional""
titlestringOptional"Section title"
descriptionstringOptional""
alignstringOptional"left"

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SectionHeader.wrn

component SectionHeader {
+  props {
+    class = ""
+    eyebrow = ""
+    title = "Section title"
+    description = ""
+    align = "left"
+  }
+  view {
+    <header class="max-w-3xl {align === 'center' ? 'mx-auto text-center' : ''} {class}"><p data-show="eyebrow" class="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400">{eyebrow}</p><h2 class="text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white">{title}</h2><p data-show="description" class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{description}</p><div class="mt-6"><slot /></div></header>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/section-heading.wrn b/app/pages/components/section-heading.wrn new file mode 100644 index 00000000..0c9211bb --- /dev/null +++ b/app/pages/components/section-heading.wrn @@ -0,0 +1,29 @@ +page SectionHeadingcomponent { + seo { + title = "SectionHeading component" + description = "Reusable section heading component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

SectionHeading

Reusable section heading component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SectionHeading text="text" align="start" />

Legacy mount name: data-component="SectionHeading".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SectionHeading.wrn

component SectionHeading {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--heading wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/section.wrn b/app/pages/components/section.wrn new file mode 100644 index 00000000..87ea34dd --- /dev/null +++ b/app/pages/components/section.wrn @@ -0,0 +1,32 @@ +page Sectioncomponent { + seo { + title = "Section component" + description = "Reusable section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

Section

Reusable section component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Section id="id" size="default" surface="default" />

Legacy mount name: data-component="Section".

Props and attributes

PropTypeRequirementDefault
idstringOptional""
sizestringOptional"default"
surfacestringOptional"default"
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Section.wrn

component Section {
+  props {
+    id = ""
+    size = "default"
+    surface = "default"
+    className = ""
+  }
+  view {
+    <section id="{id}" class="{size === 'compact' ? 'py-10 sm:py-14' : size === 'spacious' ? 'py-20 sm:py-28' : 'py-14 sm:py-20'} {surface === 'muted' ? 'bg-slate-50 dark:bg-slate-900/50' : surface === 'brand' ? 'bg-violet-600 text-white' : ''} {className}"><slot /></section>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/security-alert.wrn b/app/pages/components/security-alert.wrn new file mode 100644 index 00000000..3979834b --- /dev/null +++ b/app/pages/components/security-alert.wrn @@ -0,0 +1,32 @@ +page SecurityAlertcomponent { + seo { + title = "SecurityAlert component" + description = "Reusable security alert component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

SecurityAlert

Reusable security alert component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecurityAlert label="Security" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="SecurityAlert".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Security"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecurityAlert.wrn

component SecurityAlert {
+  props {
+    label = "Security" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/security-contact-card.wrn b/app/pages/components/security-contact-card.wrn new file mode 100644 index 00000000..b58515a8 --- /dev/null +++ b/app/pages/components/security-contact-card.wrn @@ -0,0 +1,34 @@ +page SecurityContactCardcomponent { + seo { + title = "SecurityContactCard component" + description = "Reusable security contact card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SecurityContactCard

Reusable security contact card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecurityContactCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SecurityContactCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecurityContactCard.wrn

component SecurityContactCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/security-feature-card.wrn b/app/pages/components/security-feature-card.wrn new file mode 100644 index 00000000..300ac370 --- /dev/null +++ b/app/pages/components/security-feature-card.wrn @@ -0,0 +1,34 @@ +page SecurityFeatureCardcomponent { + seo { + title = "SecurityFeatureCard component" + description = "Reusable security feature card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SecurityFeatureCard

Reusable security feature card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecurityFeatureCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SecurityFeatureCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecurityFeatureCard.wrn

component SecurityFeatureCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/security-hero.wrn b/app/pages/components/security-hero.wrn new file mode 100644 index 00000000..911fe376 --- /dev/null +++ b/app/pages/components/security-hero.wrn @@ -0,0 +1,31 @@ +page SecurityHerocomponent { + seo { + title = "SecurityHero component" + description = "Reusable security hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SecurityHero

Reusable security hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecurityHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="SecurityHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecurityHero.wrn

component SecurityHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/security-pillar-grid.wrn b/app/pages/components/security-pillar-grid.wrn new file mode 100644 index 00000000..7aa5ee36 --- /dev/null +++ b/app/pages/components/security-pillar-grid.wrn @@ -0,0 +1,31 @@ +page SecurityPillarGridcomponent { + seo { + title = "SecurityPillarGrid component" + description = "Reusable security pillar grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

SecurityPillarGrid

Reusable security pillar grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecurityPillarGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="SecurityPillarGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecurityPillarGrid.wrn

component SecurityPillarGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/security-practice-list.wrn b/app/pages/components/security-practice-list.wrn new file mode 100644 index 00000000..1dfddcfd --- /dev/null +++ b/app/pages/components/security-practice-list.wrn @@ -0,0 +1,31 @@ +page SecurityPracticeListcomponent { + seo { + title = "SecurityPracticeList component" + description = "Reusable security practice list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

SecurityPracticeList

Reusable security practice list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecurityPracticeList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="SecurityPracticeList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecurityPracticeList.wrn

component SecurityPracticeList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/security-report-form.wrn b/app/pages/components/security-report-form.wrn new file mode 100644 index 00000000..08642b1c --- /dev/null +++ b/app/pages/components/security-report-form.wrn @@ -0,0 +1,34 @@ +page SecurityReportFormcomponent { + seo { + title = "SecurityReportForm component" + description = "Reusable security report form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SecurityReportForm

Reusable security report form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SecurityReportForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SecurityReportForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SecurityReportForm.wrn

component SecurityReportForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/select.wrn b/app/pages/components/select.wrn new file mode 100644 index 00000000..b5b5cc43 --- /dev/null +++ b/app/pages/components/select.wrn @@ -0,0 +1,36 @@ +page Selectcomponent { + seo { + title = "Select component" + description = "Reusable select component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Select

Reusable select component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Select id="id" name="name" label="Select" help="help" error="error" />

Legacy mount name: data-component="Select".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Select"
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Select.wrn

component Select {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Select"
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+  }
+  view {
+    <div class="space-y-2 {class}"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><select id="{id}" name="{name}" required="{required}" disabled="{disabled}" class="min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950 dark:text-white"><slot /></select><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sender-id-input.wrn b/app/pages/components/sender-id-input.wrn new file mode 100644 index 00000000..41f70110 --- /dev/null +++ b/app/pages/components/sender-id-input.wrn @@ -0,0 +1,37 @@ +page SenderIdInputcomponent { + seo { + title = "SenderIdInput component" + description = "Reusable sender id input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SenderIdInput

Reusable sender id input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SenderIdInput label="SenderId" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SenderIdInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SenderId"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SenderIdInput.wrn

component SenderIdInput {
+  props {
+    label = "SenderId" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/server-error-page.wrn b/app/pages/components/server-error-page.wrn new file mode 100644 index 00000000..bf80be6d --- /dev/null +++ b/app/pages/components/server-error-page.wrn @@ -0,0 +1,34 @@ +page ServerErrorPagecomponent { + seo { + title = "ServerErrorPage component" + description = "Reusable server error page component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ServerErrorPage

Reusable server error page component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ServerErrorPage eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ServerErrorPage".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ServerErrorPage.wrn

component ServerErrorPage {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/service-level-table.wrn b/app/pages/components/service-level-table.wrn new file mode 100644 index 00000000..ad75c741 --- /dev/null +++ b/app/pages/components/service-level-table.wrn @@ -0,0 +1,31 @@ +page ServiceLevelTablecomponent { + seo { + title = "ServiceLevelTable component" + description = "Reusable service level table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ServiceLevelTable

Reusable service level table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ServiceLevelTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ServiceLevelTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ServiceLevelTable.wrn

component ServiceLevelTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/service-status-badge.wrn b/app/pages/components/service-status-badge.wrn new file mode 100644 index 00000000..815e26b8 --- /dev/null +++ b/app/pages/components/service-status-badge.wrn @@ -0,0 +1,32 @@ +page ServiceStatusBadgecomponent { + seo { + title = "ServiceStatusBadge component" + description = "Reusable service status badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

ServiceStatusBadge

Reusable service status badge component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ServiceStatusBadge label="ServiceStatus" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="ServiceStatusBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ServiceStatus"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ServiceStatusBadge.wrn

component ServiceStatusBadge {
+  props {
+    label = "ServiceStatus" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/service-status-list.wrn b/app/pages/components/service-status-list.wrn new file mode 100644 index 00000000..b9471c44 --- /dev/null +++ b/app/pages/components/service-status-list.wrn @@ -0,0 +1,31 @@ +page ServiceStatusListcomponent { + seo { + title = "ServiceStatusList component" + description = "Reusable service status list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ServiceStatusList

Reusable service status list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ServiceStatusList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ServiceStatusList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ServiceStatusList.wrn

component ServiceStatusList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/service-status-row.wrn b/app/pages/components/service-status-row.wrn new file mode 100644 index 00000000..fce557b3 --- /dev/null +++ b/app/pages/components/service-status-row.wrn @@ -0,0 +1,31 @@ +page ServiceStatusRowcomponent { + seo { + title = "ServiceStatusRow component" + description = "Reusable service status row component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ServiceStatusRow

Reusable service status row component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ServiceStatusRow title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ServiceStatusRow".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ServiceStatusRow.wrn

component ServiceStatusRow {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/session-card.wrn b/app/pages/components/session-card.wrn new file mode 100644 index 00000000..0c6fb403 --- /dev/null +++ b/app/pages/components/session-card.wrn @@ -0,0 +1,34 @@ +page SessionCardcomponent { + seo { + title = "SessionCard component" + description = "Reusable session card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SessionCard

Reusable session card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SessionCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SessionCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SessionCard.wrn

component SessionCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/session-expired-dialog.wrn b/app/pages/components/session-expired-dialog.wrn new file mode 100644 index 00000000..2e63c1a6 --- /dev/null +++ b/app/pages/components/session-expired-dialog.wrn @@ -0,0 +1,31 @@ +page SessionExpiredDialogcomponent { + seo { + title = "SessionExpiredDialog component" + description = "Reusable session expired dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

SessionExpiredDialog

Reusable session expired dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SessionExpiredDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="SessionExpiredDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SessionExpiredDialog.wrn

component SessionExpiredDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/setup-checklist.wrn b/app/pages/components/setup-checklist.wrn new file mode 100644 index 00000000..91e9c528 --- /dev/null +++ b/app/pages/components/setup-checklist.wrn @@ -0,0 +1,34 @@ +page SetupChecklistcomponent { + seo { + title = "SetupChecklist component" + description = "Reusable setup checklist component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SetupChecklist

Reusable setup checklist component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SetupChecklist eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SetupChecklist".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SetupChecklist.wrn

component SetupChecklist {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/severity-selector.wrn b/app/pages/components/severity-selector.wrn new file mode 100644 index 00000000..fd66f023 --- /dev/null +++ b/app/pages/components/severity-selector.wrn @@ -0,0 +1,37 @@ +page SeveritySelectorcomponent { + seo { + title = "SeveritySelector component" + description = "Reusable severity selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SeveritySelector

Reusable severity selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SeveritySelector label="Severity" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SeveritySelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Severity"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SeveritySelector.wrn

component SeveritySelector {
+  props {
+    label = "Severity" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/shadow-picker.wrn b/app/pages/components/shadow-picker.wrn new file mode 100644 index 00000000..70731d7f --- /dev/null +++ b/app/pages/components/shadow-picker.wrn @@ -0,0 +1,37 @@ +page ShadowPickercomponent { + seo { + title = "ShadowPicker component" + description = "Reusable shadow picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ShadowPicker

Reusable shadow picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ShadowPicker label="Shadow" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ShadowPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Shadow"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ShadowPicker.wrn

component ShadowPicker {
+  props {
+    label = "Shadow" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/share-action.wrn b/app/pages/components/share-action.wrn new file mode 100644 index 00000000..987cd0d7 --- /dev/null +++ b/app/pages/components/share-action.wrn @@ -0,0 +1,32 @@ +page ShareActioncomponent { + seo { + title = "ShareAction component" + description = "Reusable share action component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ShareAction

Reusable share action component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ShareAction label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ShareAction".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ShareAction.wrn

component ShareAction {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/share-button.wrn b/app/pages/components/share-button.wrn new file mode 100644 index 00000000..52b755ee --- /dev/null +++ b/app/pages/components/share-button.wrn @@ -0,0 +1,30 @@ +page ShareButtoncomponent { + seo { + title = "ShareButton component" + description = "Reusable share button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ShareButton

Reusable share button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ShareButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="ShareButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ShareButton.wrn

component ShareButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/side-panel.wrn b/app/pages/components/side-panel.wrn new file mode 100644 index 00000000..c117ea85 --- /dev/null +++ b/app/pages/components/side-panel.wrn @@ -0,0 +1,31 @@ +page SidePanelcomponent { + seo { + title = "SidePanel component" + description = "Reusable side panel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SidePanel

Reusable side panel component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SidePanel eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="SidePanel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SidePanel.wrn

component SidePanel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sidebar-layout.wrn b/app/pages/components/sidebar-layout.wrn new file mode 100644 index 00000000..8c0ae0d3 --- /dev/null +++ b/app/pages/components/sidebar-layout.wrn @@ -0,0 +1,27 @@ +page SidebarLayoutcomponent { + seo { + title = "SidebarLayout component" + description = "Reusable sidebar layout component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SidebarLayout

Reusable sidebar layout component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SidebarLayout />

Legacy mount name: data-component="SidebarLayout".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SidebarLayout.wrn

component SidebarLayout {
+  props {
+    class = ""
+  }
+  view { <div class="wire-sidebar-layout {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sign-in-form.wrn b/app/pages/components/sign-in-form.wrn new file mode 100644 index 00000000..b4c301ea --- /dev/null +++ b/app/pages/components/sign-in-form.wrn @@ -0,0 +1,34 @@ +page SignInFormcomponent { + seo { + title = "SignInForm component" + description = "Reusable sign in form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SignInForm

Reusable sign in form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SignInForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SignInForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SignInForm.wrn

component SignInForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sign-in-link.wrn b/app/pages/components/sign-in-link.wrn new file mode 100644 index 00000000..178f012b --- /dev/null +++ b/app/pages/components/sign-in-link.wrn @@ -0,0 +1,32 @@ +page SignInLinkcomponent { + seo { + title = "SignInLink component" + description = "Reusable sign in link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SignInLink

Reusable sign in link component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SignInLink label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="SignInLink".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SignInLink.wrn

component SignInLink {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sign-up-form.wrn b/app/pages/components/sign-up-form.wrn new file mode 100644 index 00000000..e08ec0fc --- /dev/null +++ b/app/pages/components/sign-up-form.wrn @@ -0,0 +1,34 @@ +page SignUpFormcomponent { + seo { + title = "SignUpForm component" + description = "Reusable sign up form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SignUpForm

Reusable sign up form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SignUpForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SignUpForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SignUpForm.wrn

component SignUpForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/site-search.wrn b/app/pages/components/site-search.wrn new file mode 100644 index 00000000..e404098b --- /dev/null +++ b/app/pages/components/site-search.wrn @@ -0,0 +1,34 @@ +page SiteSearchcomponent { + seo { + title = "SiteSearch component" + description = "Reusable site search component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SiteSearch

Reusable site search component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SiteSearch eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SiteSearch".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SiteSearch.wrn

component SiteSearch {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/skeleton.wrn b/app/pages/components/skeleton.wrn new file mode 100644 index 00000000..9e8993c9 --- /dev/null +++ b/app/pages/components/skeleton.wrn @@ -0,0 +1,31 @@ +page Skeletoncomponent { + seo { + title = "Skeleton component" + description = "Reusable skeleton component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

Skeleton

Reusable skeleton component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Skeleton height="4" rounded="lg" />

Legacy mount name: data-component="Skeleton".

Props and attributes

PropTypeRequirementDefault
heightstringOptional"4"
roundedstringOptional"lg"
classNamestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Skeleton.wrn

component Skeleton {
+  props {
+    height = "4"
+    rounded = "lg"
+    className = ""
+  }
+  view {
+    <div aria-hidden="true" class="animate-pulse bg-slate-200 dark:bg-slate-800 h-{height} rounded-{rounded} {className}"></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/skip-link.wrn b/app/pages/components/skip-link.wrn new file mode 100644 index 00000000..39a7c79d --- /dev/null +++ b/app/pages/components/skip-link.wrn @@ -0,0 +1,32 @@ +page SkipLinkcomponent { + seo { + title = "SkipLink component" + description = "Reusable skip link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SkipLink

Reusable skip link component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SkipLink label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="SkipLink".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SkipLink.wrn

component SkipLink {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sla-table.wrn b/app/pages/components/sla-table.wrn new file mode 100644 index 00000000..a8f8a868 --- /dev/null +++ b/app/pages/components/sla-table.wrn @@ -0,0 +1,31 @@ +page SlaTablecomponent { + seo { + title = "SlaTable component" + description = "Reusable sla table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

SlaTable

Reusable sla table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SlaTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="SlaTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SlaTable.wrn

component SlaTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/slider.wrn b/app/pages/components/slider.wrn new file mode 100644 index 00000000..3c859b2b --- /dev/null +++ b/app/pages/components/slider.wrn @@ -0,0 +1,34 @@ +page Slidercomponent { + seo { + title = "Slider component" + description = "Reusable slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Slider

Reusable slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Slider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Slider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Slider.wrn

component Slider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/slug-input.wrn b/app/pages/components/slug-input.wrn new file mode 100644 index 00000000..9b77872d --- /dev/null +++ b/app/pages/components/slug-input.wrn @@ -0,0 +1,37 @@ +page SlugInputcomponent { + seo { + title = "SlugInput component" + description = "Reusable slug input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SlugInput

Reusable slug input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SlugInput label="Slug" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SlugInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Slug"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SlugInput.wrn

component SlugInput {
+  props {
+    label = "Slug" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/small-text.wrn b/app/pages/components/small-text.wrn new file mode 100644 index 00000000..cb3368ba --- /dev/null +++ b/app/pages/components/small-text.wrn @@ -0,0 +1,29 @@ +page SmallTextcomponent { + seo { + title = "SmallText component" + description = "Reusable small text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SmallText

Reusable small text component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SmallText text="text" align="start" />

Legacy mount name: data-component="SmallText".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SmallText.wrn

component SmallText {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--small wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/smart-route-diagram.wrn b/app/pages/components/smart-route-diagram.wrn new file mode 100644 index 00000000..9b3b2aa8 --- /dev/null +++ b/app/pages/components/smart-route-diagram.wrn @@ -0,0 +1,32 @@ +page SmartRouteDiagramcomponent { + seo { + title = "SmartRouteDiagram component" + description = "Reusable smart route diagram component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

SmartRouteDiagram

Reusable smart route diagram component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SmartRouteDiagram title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="SmartRouteDiagram".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SmartRouteDiagram.wrn

component SmartRouteDiagram {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sms-composer.wrn b/app/pages/components/sms-composer.wrn new file mode 100644 index 00000000..88cb4123 --- /dev/null +++ b/app/pages/components/sms-composer.wrn @@ -0,0 +1,34 @@ +page SmsComposercomponent { + seo { + title = "SmsComposer component" + description = "Reusable sms composer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SmsComposer

Reusable sms composer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SmsComposer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SmsComposer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SmsComposer.wrn

component SmsComposer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sms-message-editor.wrn b/app/pages/components/sms-message-editor.wrn new file mode 100644 index 00000000..0ca84122 --- /dev/null +++ b/app/pages/components/sms-message-editor.wrn @@ -0,0 +1,37 @@ +page SmsMessageEditorcomponent { + seo { + title = "SmsMessageEditor component" + description = "Reusable sms message editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SmsMessageEditor

Reusable sms message editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SmsMessageEditor label="SmsMessage" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SmsMessageEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SmsMessage"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SmsMessageEditor.wrn

component SmsMessageEditor {
+  props {
+    label = "SmsMessage" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sms-segment-counter.wrn b/app/pages/components/sms-segment-counter.wrn new file mode 100644 index 00000000..cd53770c --- /dev/null +++ b/app/pages/components/sms-segment-counter.wrn @@ -0,0 +1,32 @@ +page SmsSegmentCountercomponent { + seo { + title = "SmsSegmentCounter component" + description = "Reusable sms segment counter component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

SmsSegmentCounter

Reusable sms segment counter component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SmsSegmentCounter label="SmsSegment" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="SmsSegmentCounter".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"SmsSegment"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SmsSegmentCounter.wrn

component SmsSegmentCounter {
+  props {
+    label = "SmsSegment" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/social-share.wrn b/app/pages/components/social-share.wrn new file mode 100644 index 00000000..6cc3ad14 --- /dev/null +++ b/app/pages/components/social-share.wrn @@ -0,0 +1,164 @@ +page SocialSharecomponent { + seo { + title = "SocialShare component" + description = "Reusable social share component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

SocialShare

Reusable social share component.

@wrnexus/ui 0.2.6410 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SocialShare title="Share this page" description="description" url="url" shareText="shareText" centered="false" />

Legacy mount name: data-component="SocialShare".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Share this page"
descriptionstringOptional""
urlstringOptional""
shareTextstringOptional""
centeredbooleanOptionalfalse
compactbooleanOptionalfalse
showTitlebooleanOptionaltrue
showCopybooleanOptionaltrue
networksstringOptional[]

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/SocialShare.wrn

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 {
+        <aside
+            aria-labelledby="social-share-title"
+            class="w-full {class}"
+        >
+            <div
+                class=" relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/[0.03] "
+            >
+                <!-- Subtle background -->
+                <div
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 overflow-hidden"
+                >
+                    <div class="absolute -right-16 -top-20 h-40 w-40 rounded-full bg-indigo-200/25 blur-3xl dark:bg-indigo-500/10" ></div>
+
+                    <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-300/60 to-transparent dark:via-indigo-500/20" ></div>
+                </div>
+
+                <div
+                    class="relative"
+                    class:p-4="compact"
+                    class:sm:p-5="compact"
+                    class:p-5="!compact"
+                    class:sm:p-6="!compact"
+                >
+                    <div
+                        class="gap-4"
+                        class:flex="centered"
+                        class:flex-col="centered"
+                        class:items-center="centered"
+                        class:text-center="centered"
+                        class:flex="!centered"
+                        class:flex-col="!centered"
+                        class:sm:flex-row="!centered"
+                        class:sm:items-center="!centered"
+                        class:sm:justify-between="!centered"
+                    >
+                        <!-- Heading -->
+                        <div
+                            class="min-w-0"
+                            class:hidden="!showTitle"
+                        >
+                            <h2
+                                id="social-share-title"
+                                class="font-bold tracking-tight text-slate-950 dark:text-white"
+                                class:text-sm="compact"
+                                class:text-base="!compact"
+                            >
+                                {title}
+                            </h2>
+
+                            <p
+                                class="mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400"
+                                class:hidden="description === '' || compact"
+                            >
+                                {description}
+                            </p>
+                        </div>
+
+                        <!-- Share buttons -->
+                        <div
+                            class="flex flex-wrap items-center gap-2"
+                            class:justify-center="centered"
+                            class:justify-start="!centered"
+                        >
+                            {#each networks.slice(0, 5) as network}
+                            <a
+                                href="{network.href}"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                aria-label="Share on {network.label}"
+                                title="Share on {network.label}"
+                                class=" group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 "
+                                class:h-9="compact"
+                                class:w-9="compact"
+                                class:h-10="!compact"
+                                class:px-3="!compact"
+                            >
+                                <span class="{network.iconClass} h-4 w-4" aria-hidden="true" ></span>
+
+                                <span class:hidden="compact">
+                                    {network.label}
+                                </span>
+                            </a>
+                            {/each}
+
+                            <!-- Copy link -->
+                            <button
+                                type="button"
+                                @click=" navigator.clipboard.writeText(url); copied = true; "
+                                aria-label="{copied ? 'Link copied' : 'Copy page link'}"
+                                class=" group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 "
+                                class:hidden="!showCopy"
+                                class:h-9="compact"
+                                class:w-9="compact"
+                                class:h-10="!compact"
+                                class:px-3="!compact"
+                            >
+                                <span class="icon-[lucide--copy] h-4 w-4" class:hidden="copied" aria-hidden="true" ></span>
+
+                                <span class="icon-[lucide--check] h-4 w-4" class:hidden="!copied" aria-hidden="true" ></span>
+
+                                <span class:hidden="compact">
+                                    {copied ? 'Copied' : 'Copy link'}
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Copy feedback -->
+                    <div
+                        role="status"
+                        aria-live="polite"
+                        class="mt-3 rounded-xl bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/20"
+                        class:hidden="!copied"
+                        class:text-center="centered"
+                    >
+                        Page link copied to your clipboard.
+                    </div>
+                </div>
+            </div>
+        </aside>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/solution-hero.wrn b/app/pages/components/solution-hero.wrn new file mode 100644 index 00000000..df5adfc2 --- /dev/null +++ b/app/pages/components/solution-hero.wrn @@ -0,0 +1,31 @@ +page SolutionHerocomponent { + seo { + title = "SolutionHero component" + description = "Reusable solution hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SolutionHero

Reusable solution hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SolutionHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="SolutionHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SolutionHero.wrn

component SolutionHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/solution-page-shell.wrn b/app/pages/components/solution-page-shell.wrn new file mode 100644 index 00000000..e0252da0 --- /dev/null +++ b/app/pages/components/solution-page-shell.wrn @@ -0,0 +1,31 @@ +page SolutionPageShellcomponent { + seo { + title = "SolutionPageShell component" + description = "Reusable solution page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SolutionPageShell

Reusable solution page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SolutionPageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="SolutionPageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SolutionPageShell.wrn

component SolutionPageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/solution-section.wrn b/app/pages/components/solution-section.wrn new file mode 100644 index 00000000..c4a08fef --- /dev/null +++ b/app/pages/components/solution-section.wrn @@ -0,0 +1,31 @@ +page SolutionSectioncomponent { + seo { + title = "SolutionSection component" + description = "Reusable solution section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SolutionSection

Reusable solution section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SolutionSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="SolutionSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SolutionSection.wrn

component SolutionSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/solutions-mega-menu.wrn b/app/pages/components/solutions-mega-menu.wrn new file mode 100644 index 00000000..b4e27da6 --- /dev/null +++ b/app/pages/components/solutions-mega-menu.wrn @@ -0,0 +1,389 @@ +page SolutionsMegaMenucomponent { + seo { + title = "SolutionsMegaMenu component" + description = "Reusable solutions mega menu component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

SolutionsMegaMenu

Reusable solutions mega menu component.

@wrnexus/ui 0.2.641 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SolutionsMegaMenu />

Legacy mount name: data-component="SolutionsMegaMenu".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/SolutionsMegaMenu.wrn

component SolutionsMegaMenu {
+    props {
+        class: string = ""
+    }
+    view {
+        <div
+            class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
+        >
+            <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
+                <div class="grid gap-8 lg:grid-cols-[minmax(0,1.6fr)_minmax(18rem,0.75fr)]">
+
+                    <!-- Solution links -->
+                    <section>
+                        <div class="mb-5 flex items-end justify-between gap-6">
+                            <div>
+                                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
+                                    Solutions
+                                </p>
+
+                                <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
+                                    Identity infrastructure for every stage of growth
+                                </h2>
+
+                                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                                    Choose a solution designed around your product, team, and customers.
+                                </p>
+                            </div>
+
+                            <a
+                                href="/solutions"
+                                class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
+                            >
+                                View all solutions
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+
+                        <div class="grid gap-2 md:grid-cols-2">
+
+                            <!-- Startups -->
+                            <a
+                                href="/solutions/startups"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--rocket] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Startups
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Launch secure authentication quickly without slowing product development.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- SaaS -->
+                            <a
+                                href="/solutions/saas"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--cloud] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            SaaS platforms
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Add users, organizations, roles, SSO, and secure account recovery.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Enterprise -->
+                            <a
+                                href="/solutions/enterprise"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--building-2] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Enterprise
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Support complex organizations, governance, auditability, and scale.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Developers -->
+                            <a
+                                href="/solutions/developers"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--code-2] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Developers
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        APIs, SDKs, webhooks, templates, and developer-friendly workflows.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- Agencies -->
+                            <a
+                                href="/solutions/agencies"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--briefcase-business] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            Agencies
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Manage identities across customer projects and branded experiences.
+                                    </span>
+                                </span>
+                            </a>
+
+                            <!-- B2B -->
+                            <a
+                                href="/solutions/b2b"
+                                class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
+                            >
+                                <span
+                                    class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
+                                >
+                                    <span class="icon-[lucide--handshake] h-5 w-5" aria-hidden="true" ></span>
+                                </span>
+
+                                <span class="min-w-0">
+                                    <span class="flex items-center gap-2">
+                                        <span class="text-sm font-semibold text-slate-950 dark:text-white">
+                                            B2B products
+                                        </span>
+
+                                        <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
+                                        Secure customer organizations, team access, and enterprise connections.
+                                    </span>
+                                </span>
+                            </a>
+                        </div>
+
+                        <a
+                            href="/solutions"
+                            class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
+                        >
+                            View all solutions
+
+                            <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
+                        </a>
+                    </section>
+
+                    <!-- Featured solution -->
+                    <aside
+                        class="relative overflow-hidden rounded-3xl border border-violet-200 bg-linear-to-br from-violet-50 via-white to-indigo-50 p-6 dark:border-violet-500/20 dark:from-violet-500/10 dark:via-slate-900 dark:to-indigo-500/10"
+                    >
+                        <div aria-hidden="true" class="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" ></div>
+
+                        <div aria-hidden="true" class="absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" ></div>
+
+                        <div class="relative">
+                            <span
+                                class="inline-flex items-center gap-2 rounded-full border border-violet-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-violet-700 backdrop-blur-sm dark:border-violet-500/20 dark:bg-white/5 dark:text-violet-300"
+                            >
+                                <span class="icon-[lucide--wand-sparkles] h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                Recommended for SaaS
+                            </span>
+
+                            <div
+                                class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-violet-600 text-white shadow-lg shadow-violet-600/20"
+                            >
+                                <span class="icon-[lucide--cloud-cog] h-6 w-6" aria-hidden="true" ></span>
+                            </div>
+
+                            <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
+                                Launch enterprise-ready identity
+                            </h3>
+
+                            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
+                                Start with simple authentication and add organizations,
+                                permissions, enterprise SSO, and governance as your product grows.
+                            </p>
+
+                            <div class="mt-5 grid gap-3">
+                                <div
+                                    class="flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300"
+                                    >
+                                        <span class="icon-[lucide--timer-reset] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span class="block text-sm font-semibold text-slate-900 dark:text-white">
+                                            Faster launch
+                                        </span>
+
+                                        <span class="block text-xs text-slate-500 dark:text-slate-400">
+                                            Start with secure defaults
+                                        </span>
+                                    </span>
+                                </div>
+
+                                <div
+                                    class="flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                                    >
+                                        <span class="icon-[lucide--expand] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span class="block text-sm font-semibold text-slate-900 dark:text-white">
+                                            Built to scale
+                                        </span>
+
+                                        <span class="block text-xs text-slate-500 dark:text-slate-400">
+                                            Add advanced controls later
+                                        </span>
+                                    </span>
+                                </div>
+
+                                <div
+                                    class="flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5"
+                                >
+                                    <span
+                                        class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+                                    >
+                                        <span class="icon-[lucide--shield-check] h-4 w-4" aria-hidden="true" ></span>
+                                    </span>
+
+                                    <span>
+                                        <span class="block text-sm font-semibold text-slate-900 dark:text-white">
+                                            Secure by design
+                                        </span>
+
+                                        <span class="block text-xs text-slate-500 dark:text-slate-400">
+                                            Protect every account flow
+                                        </span>
+                                    </span>
+                                </div>
+                            </div>
+
+                            <a
+                                href="/solutions/saas"
+                                class="group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-violet-600 px-4 text-sm font-bold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
+                            >
+                                Explore the SaaS solution
+
+                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
+                            </a>
+                        </div>
+                    </aside>
+                </div>
+
+                <!-- Bottom use-case links -->
+                <div
+                    class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
+                >
+                    <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
+                        <a
+                            href="/solutions/customer-identity"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--contact-round] h-4 w-4" aria-hidden="true" ></span>
+
+                            Customer identity
+                        </a>
+
+                        <a
+                            href="/solutions/workforce-identity"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--id-card] h-4 w-4" aria-hidden="true" ></span>
+
+                            Workforce identity
+                        </a>
+
+                        <a
+                            href="/solutions/marketplaces"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--store] h-4 w-4" aria-hidden="true" ></span>
+
+                            Marketplaces
+                        </a>
+
+                        <a
+                            href="/solutions/multi-tenant"
+                            class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
+                        >
+                            <span class="icon-[lucide--network] h-4 w-4" aria-hidden="true" ></span>
+
+                            Multi-tenant apps
+                        </a>
+                    </div>
+
+                    <a
+                        href="/customers"
+                        class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                    >
+                        See customer stories
+
+                        <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sortable-table.wrn b/app/pages/components/sortable-table.wrn new file mode 100644 index 00000000..cc138fbb --- /dev/null +++ b/app/pages/components/sortable-table.wrn @@ -0,0 +1,31 @@ +page SortableTablecomponent { + seo { + title = "SortableTable component" + description = "Reusable sortable table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

SortableTable

Reusable sortable table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SortableTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="SortableTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SortableTable.wrn

component SortableTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/spacer.wrn b/app/pages/components/spacer.wrn new file mode 100644 index 00000000..6f08ebd3 --- /dev/null +++ b/app/pages/components/spacer.wrn @@ -0,0 +1,30 @@ +page spacercomponent { + seo { + title = "spacer component" + description = "Reusable spacer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

spacer

Reusable spacer component.

@wrnexus/ui 0.2.641 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<spacer />

Legacy mount name: data-component="spacer".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/spacer.wrn

// Flexible spacer: grows to push siblings apart inside a flex row/column.
+component Spacer {
+  props {
+    class = ""
+  }
+  view {
+    <div class="wire-spacer {class}"></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/spinner.wrn b/app/pages/components/spinner.wrn new file mode 100644 index 00000000..c3a599ec --- /dev/null +++ b/app/pages/components/spinner.wrn @@ -0,0 +1,31 @@ +page Spinnercomponent { + seo { + title = "Spinner component" + description = "Reusable spinner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Spinner

Reusable spinner component.

@wrnexus/ui 0.2.643 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Spinner label="Loading" size="md" />

Legacy mount name: data-component="Spinner".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Loading"
sizestringOptional"md"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Spinner.wrn

component Spinner {
+  props {
+    class = ""
+    label = "Loading"
+    size = "md"
+  }
+  view {
+    <span role="status" aria-label="{label}" class="inline-block animate-spin rounded-full border-2 border-slate-300 border-r-violet-600 {size === 'sm' ? 'size-4' : size === 'lg' ? 'size-10' : 'size-6'} {class}"></span>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/split-button.wrn b/app/pages/components/split-button.wrn new file mode 100644 index 00000000..607b6075 --- /dev/null +++ b/app/pages/components/split-button.wrn @@ -0,0 +1,32 @@ +page SplitButtoncomponent { + seo { + title = "SplitButton component" + description = "Reusable split button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SplitButton

Reusable split button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SplitButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="SplitButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SplitButton.wrn

component SplitButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/split-cta.wrn b/app/pages/components/split-cta.wrn new file mode 100644 index 00000000..a7613bb0 --- /dev/null +++ b/app/pages/components/split-cta.wrn @@ -0,0 +1,32 @@ +page SplitCTAcomponent { + seo { + title = "SplitCTA component" + description = "Reusable split c t a component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

SplitCTA

Reusable split c t a component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SplitCTA label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="SplitCTA".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SplitCTA.wrn

component SplitCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/split-hero.wrn b/app/pages/components/split-hero.wrn new file mode 100644 index 00000000..7bc48e43 --- /dev/null +++ b/app/pages/components/split-hero.wrn @@ -0,0 +1,31 @@ +page SplitHerocomponent { + seo { + title = "SplitHero component" + description = "Reusable split hero component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SplitHero

Reusable split hero component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SplitHero eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="SplitHero".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SplitHero.wrn

component SplitHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/split-layout.wrn b/app/pages/components/split-layout.wrn new file mode 100644 index 00000000..e9e56d88 --- /dev/null +++ b/app/pages/components/split-layout.wrn @@ -0,0 +1,27 @@ +page SplitLayoutcomponent { + seo { + title = "SplitLayout component" + description = "Reusable split layout component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SplitLayout

Reusable split layout component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SplitLayout />

Legacy mount name: data-component="SplitLayout".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SplitLayout.wrn

component SplitLayout {
+  props {
+    class = ""
+  }
+  view { <div class="wire-split-layout {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/split-section-header.wrn b/app/pages/components/split-section-header.wrn new file mode 100644 index 00000000..fdebae7c --- /dev/null +++ b/app/pages/components/split-section-header.wrn @@ -0,0 +1,31 @@ +page SplitSectionHeadercomponent { + seo { + title = "SplitSectionHeader component" + description = "Reusable split section header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

SplitSectionHeader

Reusable split section header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SplitSectionHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="SplitSectionHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SplitSectionHeader.wrn

component SplitSectionHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/stack.wrn b/app/pages/components/stack.wrn new file mode 100644 index 00000000..2f0c3a0d --- /dev/null +++ b/app/pages/components/stack.wrn @@ -0,0 +1,30 @@ +page Stackcomponent { + seo { + title = "Stack component" + description = "Reusable stack component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Stack

Reusable stack component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Stack gap="4" />

Legacy mount name: data-component="Stack".

Props and attributes

PropTypeRequirementDefault
gapstringOptional"4"
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Stack.wrn

component Stack {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-col gap-{gap} {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/start-free-button.wrn b/app/pages/components/start-free-button.wrn new file mode 100644 index 00000000..f7b03029 --- /dev/null +++ b/app/pages/components/start-free-button.wrn @@ -0,0 +1,32 @@ +page StartFreeButtoncomponent { + seo { + title = "StartFreeButton component" + description = "Reusable start free button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

StartFreeButton

Reusable start free button component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StartFreeButton label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="StartFreeButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StartFreeButton.wrn

component StartFreeButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/stat-card.wrn b/app/pages/components/stat-card.wrn new file mode 100644 index 00000000..d564f1c5 --- /dev/null +++ b/app/pages/components/stat-card.wrn @@ -0,0 +1,33 @@ +page StatCardcomponent { + seo { + title = "StatCard component" + description = "Reusable stat card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

StatCard

Reusable stat card component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatCard label="Metric" value="0" change="change" trend="neutral" />

Legacy mount name: data-component="StatCard".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
labelstringOptional"Metric"
valuestringOptional"0"
changestringOptional""
trendstringOptional"neutral"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatCard.wrn

component StatCard {
+  props {
+    class = ""
+    label = "Metric"
+    value = "0"
+    change = ""
+    trend = "neutral"
+  }
+  view {
+    <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 {class}"><p class="text-sm font-medium text-slate-500">{label}</p><div class="mt-2 flex items-end justify-between gap-3"><p class="text-3xl font-bold tracking-tight">{value}</p><span data-show="change" class="text-sm font-semibold {trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'}">{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}</span></div></article>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/state-selector.wrn b/app/pages/components/state-selector.wrn new file mode 100644 index 00000000..6d9705f1 --- /dev/null +++ b/app/pages/components/state-selector.wrn @@ -0,0 +1,37 @@ +page StateSelectorcomponent { + seo { + title = "StateSelector component" + description = "Reusable state selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

StateSelector

Reusable state selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StateSelector label="State" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="StateSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"State"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StateSelector.wrn

component StateSelector {
+  props {
+    label = "State" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/status-badge.wrn b/app/pages/components/status-badge.wrn new file mode 100644 index 00000000..62de3ec0 --- /dev/null +++ b/app/pages/components/status-badge.wrn @@ -0,0 +1,30 @@ +page StatusBadgecomponent { + seo { + title = "StatusBadge component" + description = "Reusable status badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

StatusBadge

Reusable status badge component.

@wrnexus/ui 0.2.642 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatusBadge status="operational" />

Legacy mount name: data-component="StatusBadge".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
statusstringOptional"operational"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatusBadge.wrn

component StatusBadge {
+  props {
+    class = ""
+    status = "operational"
+  }
+  view {
+    <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'} {class}"><span class="size-2 rounded-full bg-current"></span>{status}</span>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/status-banner.wrn b/app/pages/components/status-banner.wrn new file mode 100644 index 00000000..3451b0c9 --- /dev/null +++ b/app/pages/components/status-banner.wrn @@ -0,0 +1,143 @@ +page StatusBannercomponent { + seo { + title = "StatusBanner component" + description = "Reusable status banner component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

StatusBanner

Reusable status banner component.

@wrnexus/ui 0.2.649 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatusBanner type="info" title="title" description="description" actionLabel="actionLabel" actionHref="actionHref" />

Legacy mount name: data-component="StatusBanner".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
typestringOptional"info"
titlestringOptional""
descriptionstringOptional""
actionLabelstringOptional""
actionHrefstringOptional""
dismissiblebooleanOptionaltrue
compactbooleanOptionalfalse
detailsstringOptional[]

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/StatusBanner.wrn

component StatusBanner {
+    props {
+        class: string = ""
+        type = "info"
+
+        title = ""
+        description = ""
+
+        actionLabel = ""
+        actionHref = ""
+
+        dismissible = true
+        compact = false
+
+        details = []
+    }
+
+    state visible = true
+
+    view {
+        <aside
+            role="{type === 'error' ? 'alert' : 'status'}"
+            aria-live="{type === 'error' ? 'assertive' : 'polite'}"
+            class="relative overflow-hidden {class}"
+            class:hidden="!visible"
+        >
+            <div
+                class=" relative overflow-hidden rounded-2xl {compact ? 'px-4 py-3' : 'px-5 py-4 sm:px-6'} {type === 'success' ? 'bg-emerald-50 text-emerald-950 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-100 dark:ring-emerald-500/20' : type === 'warning' ? 'bg-amber-50 text-amber-950 ring-1 ring-inset ring-amber-200 dark:bg-amber-500/10 dark:text-amber-100 dark:ring-amber-500/20' : type === 'error' ? 'bg-rose-50 text-rose-950 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/10 dark:text-rose-100 dark:ring-rose-500/20' : 'bg-indigo-50 text-indigo-950 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-100 dark:ring-indigo-500/20' } "
+            >
+                <!-- Decorative glow -->
+                <div aria-hidden="true" class=" pointer-events-none absolute -right-16 -top-20 h-40 w-40 rounded-full blur-3xl {type === 'success' ? 'bg-emerald-300/30 dark:bg-emerald-500/10' : type === 'warning' ? 'bg-amber-300/30 dark:bg-amber-500/10' : type === 'error' ? 'bg-rose-300/30 dark:bg-rose-500/10' : 'bg-indigo-300/30 dark:bg-indigo-500/10' } " ></div>
+
+                <div
+                    class="relative flex gap-4"
+                    class:items-center="compact"
+                    class:items-start="!compact"
+                >
+                    <!-- Icon -->
+                    <span
+                        class=" grid shrink-0 place-items-center rounded-xl {compact ? 'h-9 w-9' : 'h-10 w-10'} {type === 'success' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300' : type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'error' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' } "
+                    >
+                        <span class=" h-5 w-5 {type === 'success' ? 'icon-[lucide--circle-check]' : type === 'warning' ? 'icon-[lucide--triangle-alert]' : type === 'error' ? 'icon-[lucide--circle-x]' : 'icon-[lucide--info]' } " aria-hidden="true" ></span>
+                    </span>
+
+                    <!-- Content -->
+                    <div class="min-w-0 flex-1">
+                        <div
+                            class="flex flex-col gap-3 sm:flex-row sm:justify-between"
+                            class:sm:items-center="compact"
+                            class:sm:items-start="!compact"
+                        >
+                            <div class="min-w-0">
+                                <h2
+                                    class="font-bold"
+                                    class:text-sm="compact"
+                                    class:text-base="!compact"
+                                    class:hidden="title === ''"
+                                >
+                                    {title}
+                                </h2>
+
+                                <p
+                                    class="text-sm leading-6 opacity-80"
+                                    class:mt-1="title !== ''"
+                                    class:hidden="description === ''"
+                                >
+                                    {description}
+                                </p>
+                            </div>
+
+                            <!-- Actions -->
+                            <div class="flex shrink-0 items-center gap-2">
+                                <a
+                                    href="{actionHref}"
+                                    class=" h-9 items-center justify-center gap-1.5 rounded-lg px-3 text-xs font-bold transition {type === 'success' ? 'bg-emerald-600 text-white hover:bg-emerald-500' : type === 'warning' ? 'bg-amber-600 text-white hover:bg-amber-500' : type === 'error' ? 'bg-rose-600 text-white hover:bg-rose-500' : 'bg-indigo-600 text-white hover:bg-indigo-500' } "
+                                    class:hidden="actionLabel === ''"
+                                    class:inline-flex="actionLabel !== ''"
+                                >
+                                    {actionLabel}
+
+                                    <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5" aria-hidden="true" ></span>
+                                </a>
+
+                                <button
+                                    type="button"
+                                    @click="visible = false"
+                                    aria-label="Dismiss notice"
+                                    class="grid h-9 w-9 place-items-center rounded-lg opacity-60 transition hover:bg-black/5 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current dark:hover:bg-white/10"
+                                    class:hidden="!dismissible"
+                                >
+                                    <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Dynamic details -->
+                        <div
+                            class="mt-4 flex flex-wrap gap-x-5 gap-y-2 border-t pt-4 text-xs font-medium"
+                            class:hidden="compact || details.length === 0"
+                            class:border-emerald-200="type === 'success'"
+                            class:border-amber-200="type === 'warning'"
+                            class:border-rose-200="type === 'error'"
+                            class:border-indigo-200="type === 'info'"
+                            class:dark:border-emerald-500/20="type === 'success'"
+                            class:dark:border-amber-500/20="type === 'warning'"
+                            class:dark:border-rose-500/20="type === 'error'"
+                            class:dark:border-indigo-500/20="type === 'info'"
+                        >
+                            {#each details.slice(0, 4) as detail}
+                            <span class="inline-flex items-center gap-2 opacity-80">
+                                <span class="{detail.iconClass} h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                                {detail.label}
+                            </span>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/status-page-shell.wrn b/app/pages/components/status-page-shell.wrn new file mode 100644 index 00000000..c6c27364 --- /dev/null +++ b/app/pages/components/status-page-shell.wrn @@ -0,0 +1,31 @@ +page StatusPageShellcomponent { + seo { + title = "StatusPageShell component" + description = "Reusable status page shell component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

StatusPageShell

Reusable status page shell component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatusPageShell eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="StatusPageShell".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatusPageShell.wrn

component StatusPageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/status-selector.wrn b/app/pages/components/status-selector.wrn new file mode 100644 index 00000000..13455faa --- /dev/null +++ b/app/pages/components/status-selector.wrn @@ -0,0 +1,37 @@ +page StatusSelectorcomponent { + seo { + title = "StatusSelector component" + description = "Reusable status selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

StatusSelector

Reusable status selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatusSelector label="Status" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="StatusSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Status"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatusSelector.wrn

component StatusSelector {
+  props {
+    label = "Status" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/status-subscribe-form.wrn b/app/pages/components/status-subscribe-form.wrn new file mode 100644 index 00000000..2fbb19a8 --- /dev/null +++ b/app/pages/components/status-subscribe-form.wrn @@ -0,0 +1,34 @@ +page StatusSubscribeFormcomponent { + seo { + title = "StatusSubscribeForm component" + description = "Reusable status subscribe form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

StatusSubscribeForm

Reusable status subscribe form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatusSubscribeForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="StatusSubscribeForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatusSubscribeForm.wrn

component StatusSubscribeForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/status-table.wrn b/app/pages/components/status-table.wrn new file mode 100644 index 00000000..ea1c1997 --- /dev/null +++ b/app/pages/components/status-table.wrn @@ -0,0 +1,31 @@ +page StatusTablecomponent { + seo { + title = "StatusTable component" + description = "Reusable status table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

StatusTable

Reusable status table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatusTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="StatusTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatusTable.wrn

component StatusTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/step-navigation.wrn b/app/pages/components/step-navigation.wrn new file mode 100644 index 00000000..493f463c --- /dev/null +++ b/app/pages/components/step-navigation.wrn @@ -0,0 +1,31 @@ +page StepNavigationcomponent { + seo { + title = "StepNavigation component" + description = "Reusable step navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

StepNavigation

Reusable step navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StepNavigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="StepNavigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StepNavigation.wrn

component StepNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/step-up-authentication-dialog.wrn b/app/pages/components/step-up-authentication-dialog.wrn new file mode 100644 index 00000000..7ce7b505 --- /dev/null +++ b/app/pages/components/step-up-authentication-dialog.wrn @@ -0,0 +1,31 @@ +page StepUpAuthenticationDialogcomponent { + seo { + title = "StepUpAuthenticationDialog component" + description = "Reusable step up authentication dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

StepUpAuthenticationDialog

Reusable step up authentication dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StepUpAuthenticationDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="StepUpAuthenticationDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StepUpAuthenticationDialog.wrn

component StepUpAuthenticationDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/stepper-input.wrn b/app/pages/components/stepper-input.wrn new file mode 100644 index 00000000..74150020 --- /dev/null +++ b/app/pages/components/stepper-input.wrn @@ -0,0 +1,37 @@ +page StepperInputcomponent { + seo { + title = "StepperInput component" + description = "Reusable stepper input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

StepperInput

Reusable stepper input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StepperInput label="Stepper" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="StepperInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Stepper"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StepperInput.wrn

component StepperInput {
+  props {
+    label = "Stepper" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/stepper.wrn b/app/pages/components/stepper.wrn new file mode 100644 index 00000000..0a75b46f --- /dev/null +++ b/app/pages/components/stepper.wrn @@ -0,0 +1,34 @@ +page Steppercomponent { + seo { + title = "Stepper component" + description = "Reusable stepper component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Stepper

Reusable stepper component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Stepper eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Stepper".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Stepper.wrn

component Stepper {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sticker-picker.wrn b/app/pages/components/sticker-picker.wrn new file mode 100644 index 00000000..1aad4340 --- /dev/null +++ b/app/pages/components/sticker-picker.wrn @@ -0,0 +1,37 @@ +page StickerPickercomponent { + seo { + title = "StickerPicker component" + description = "Reusable sticker picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

StickerPicker

Reusable sticker picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StickerPicker label="Sticker" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="StickerPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Sticker"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StickerPicker.wrn

component StickerPicker {
+  props {
+    label = "Sticker" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sticky-layout.wrn b/app/pages/components/sticky-layout.wrn new file mode 100644 index 00000000..466f4af4 --- /dev/null +++ b/app/pages/components/sticky-layout.wrn @@ -0,0 +1,27 @@ +page StickyLayoutcomponent { + seo { + title = "StickyLayout component" + description = "Reusable sticky layout component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

StickyLayout

Reusable sticky layout component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StickyLayout />

Legacy mount name: data-component="StickyLayout".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StickyLayout.wrn

component StickyLayout {
+  props {
+    class = ""
+  }
+  view { <div class="wire-sticky-layout {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/sticky.wrn b/app/pages/components/sticky.wrn new file mode 100644 index 00000000..e5b165be --- /dev/null +++ b/app/pages/components/sticky.wrn @@ -0,0 +1,27 @@ +page Stickycomponent { + seo { + title = "Sticky component" + description = "Reusable sticky component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Sticky

Reusable sticky component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Sticky />

Legacy mount name: data-component="Sticky".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Sticky.wrn

component Sticky {
+  props {
+    class = ""
+  }
+  view { <div class="wire-sticky {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/street-address-input.wrn b/app/pages/components/street-address-input.wrn new file mode 100644 index 00000000..ec6e8dab --- /dev/null +++ b/app/pages/components/street-address-input.wrn @@ -0,0 +1,37 @@ +page StreetAddressInputcomponent { + seo { + title = "StreetAddressInput component" + description = "Reusable street address input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

StreetAddressInput

Reusable street address input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StreetAddressInput label="StreetAddress" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="StreetAddressInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"StreetAddress"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/StreetAddressInput.wrn

component StreetAddressInput {
+  props {
+    label = "StreetAddress" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/subdomain-input.wrn b/app/pages/components/subdomain-input.wrn new file mode 100644 index 00000000..99c52c88 --- /dev/null +++ b/app/pages/components/subdomain-input.wrn @@ -0,0 +1,37 @@ +page SubdomainInputcomponent { + seo { + title = "SubdomainInput component" + description = "Reusable subdomain input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SubdomainInput

Reusable subdomain input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SubdomainInput label="Subdomain" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SubdomainInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Subdomain"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SubdomainInput.wrn

component SubdomainInput {
+  props {
+    label = "Subdomain" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/subject-input.wrn b/app/pages/components/subject-input.wrn new file mode 100644 index 00000000..b623afd8 --- /dev/null +++ b/app/pages/components/subject-input.wrn @@ -0,0 +1,37 @@ +page SubjectInputcomponent { + seo { + title = "SubjectInput component" + description = "Reusable subject input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

SubjectInput

Reusable subject input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SubjectInput label="Subject" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="SubjectInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Subject"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SubjectInput.wrn

component SubjectInput {
+  props {
+    label = "Subject" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/subprocessor-table.wrn b/app/pages/components/subprocessor-table.wrn new file mode 100644 index 00000000..6257cd46 --- /dev/null +++ b/app/pages/components/subprocessor-table.wrn @@ -0,0 +1,31 @@ +page SubprocessorTablecomponent { + seo { + title = "SubprocessorTable component" + description = "Reusable subprocessor table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

SubprocessorTable

Reusable subprocessor table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SubprocessorTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="SubprocessorTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SubprocessorTable.wrn

component SubprocessorTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/subsection-heading.wrn b/app/pages/components/subsection-heading.wrn new file mode 100644 index 00000000..91a94131 --- /dev/null +++ b/app/pages/components/subsection-heading.wrn @@ -0,0 +1,29 @@ +page SubsectionHeadingcomponent { + seo { + title = "SubsectionHeading component" + description = "Reusable subsection heading component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

SubsectionHeading

Reusable subsection heading component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SubsectionHeading text="text" align="start" />

Legacy mount name: data-component="SubsectionHeading".

Props and attributes

PropTypeRequirementDefault
textstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SubsectionHeading.wrn

component SubsectionHeading {
+  props {
+    text = ""
+    align = "start"
+    class = ""
+  }
+  view { <div class="wire-type wire-type--heading wire-text--{align}  {class}">{text}<slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/success-card.wrn b/app/pages/components/success-card.wrn new file mode 100644 index 00000000..0b6143d8 --- /dev/null +++ b/app/pages/components/success-card.wrn @@ -0,0 +1,30 @@ +page SuccessCardcomponent { + seo { + title = "SuccessCard component" + description = "Reusable success card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SuccessCard

Reusable success card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SuccessCard title="title" description="description" href="href" />

Legacy mount name: data-component="SuccessCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SuccessCard.wrn

component SuccessCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--success {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/success-state.wrn b/app/pages/components/success-state.wrn new file mode 100644 index 00000000..fa4399f7 --- /dev/null +++ b/app/pages/components/success-state.wrn @@ -0,0 +1,32 @@ +page SuccessStatecomponent { + seo { + title = "SuccessState component" + description = "Reusable success state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

SuccessState

Reusable success state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SuccessState label="Success" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="SuccessState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Success"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SuccessState.wrn

component SuccessState {
+  props {
+    label = "Success" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/support-request-form.wrn b/app/pages/components/support-request-form.wrn new file mode 100644 index 00000000..dfbed0b0 --- /dev/null +++ b/app/pages/components/support-request-form.wrn @@ -0,0 +1,34 @@ +page SupportRequestFormcomponent { + seo { + title = "SupportRequestForm component" + description = "Reusable support request form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

SupportRequestForm

Reusable support request form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SupportRequestForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="SupportRequestForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SupportRequestForm.wrn

component SupportRequestForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/surface.wrn b/app/pages/components/surface.wrn new file mode 100644 index 00000000..e735441f --- /dev/null +++ b/app/pages/components/surface.wrn @@ -0,0 +1,27 @@ +page Surfacecomponent { + seo { + title = "Surface component" + description = "Reusable surface component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Surface

Reusable surface component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Surface />

Legacy mount name: data-component="Surface".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Surface.wrn

component Surface {
+  props {
+    class = ""
+  }
+  view { <div class="wire-surface {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/switch.wrn b/app/pages/components/switch.wrn new file mode 100644 index 00000000..2d6403f5 --- /dev/null +++ b/app/pages/components/switch.wrn @@ -0,0 +1,36 @@ +page Switchcomponent { + seo { + title = "Switch component" + description = "Reusable switch component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Switch

Reusable switch component.

@wrnexus/ui 0.2.647 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Switch id="id" name="name" label="Switch" description="description" checked="false" />

Legacy mount name: data-component="Switch".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Switch"
descriptionstringOptional""
checkedbooleanOptionalfalse
disabledbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/Switch.wrn

component Switch {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Switch"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  state on = checked
+  view {
+    <button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {class}"><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span><span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}"><span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}"></span></span><input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" /></button>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/table-header.wrn b/app/pages/components/table-header.wrn new file mode 100644 index 00000000..d1c40b24 --- /dev/null +++ b/app/pages/components/table-header.wrn @@ -0,0 +1,31 @@ +page TableHeadercomponent { + seo { + title = "TableHeader component" + description = "Reusable table header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

TableHeader

Reusable table header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TableHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="TableHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TableHeader.wrn

component TableHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/table-row.wrn b/app/pages/components/table-row.wrn new file mode 100644 index 00000000..f87ae509 --- /dev/null +++ b/app/pages/components/table-row.wrn @@ -0,0 +1,31 @@ +page TableRowcomponent { + seo { + title = "TableRow component" + description = "Reusable table row component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

TableRow

Reusable table row component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TableRow title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="TableRow".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TableRow.wrn

component TableRow {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/table-skeleton.wrn b/app/pages/components/table-skeleton.wrn new file mode 100644 index 00000000..3168ff5d --- /dev/null +++ b/app/pages/components/table-skeleton.wrn @@ -0,0 +1,32 @@ +page TableSkeletoncomponent { + seo { + title = "TableSkeleton component" + description = "Reusable table skeleton component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

TableSkeleton

Reusable table skeleton component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TableSkeleton label="Table" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="TableSkeleton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Table"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TableSkeleton.wrn

component TableSkeleton {
+  props {
+    label = "Table" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/table.wrn b/app/pages/components/table.wrn new file mode 100644 index 00000000..13d46ca3 --- /dev/null +++ b/app/pages/components/table.wrn @@ -0,0 +1,31 @@ +page Tablecomponent { + seo { + title = "Table component" + description = "Reusable table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

Table

Reusable table component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Table caption="Data table" responsive="true" />

Legacy mount name: data-component="Table".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
captionstringOptional"Data table"
responsivebooleanOptionaltrue

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Table.wrn

component Table {
+  props {
+    class = ""
+    caption = "Data table"
+    responsive = true
+  }
+  view {
+    <div class="w-full overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800 {class}"><table class="w-full min-w-[640px] border-collapse text-left text-sm"><caption class="sr-only">{caption}</caption><slot /></table></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tabs.wrn b/app/pages/components/tabs.wrn new file mode 100644 index 00000000..4bf2bc52 --- /dev/null +++ b/app/pages/components/tabs.wrn @@ -0,0 +1,31 @@ +page Tabscomponent { + seo { + title = "Tabs component" + description = "Reusable tabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Tabs

Reusable tabs component.

@wrnexus/ui 0.2.642 props2 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Tabs active="first" />

Legacy mount name: data-component="Tabs".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
activestringOptional"first"

Slots

  • first
  • second

Events

  • click

Source contract

Installed source: components/Tabs.wrn

component Tabs {
+  props {
+    class = ""
+    active = "first"
+  }
+  state current = active
+  view {
+    <div class="{class}"><div role="tablist" class="flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800"><button role="tab" aria-selected="{current === 'first'}" @click="current = 'first'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">First</button><button role="tab" aria-selected="{current === 'second'}" @click="current = 'second'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">Second</button></div><div data-show="current === 'first'" role="tabpanel" class="pt-5"><slot name="first" /></div><div data-show="current === 'second'" role="tabpanel" class="pt-5"><slot name="second" /></div></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tag-input.wrn b/app/pages/components/tag-input.wrn new file mode 100644 index 00000000..a2013d47 --- /dev/null +++ b/app/pages/components/tag-input.wrn @@ -0,0 +1,37 @@ +page TagInputcomponent { + seo { + title = "TagInput component" + description = "Reusable tag input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TagInput

Reusable tag input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TagInput label="Tag" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TagInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Tag"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TagInput.wrn

component TagInput {
+  props {
+    label = "Tag" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tag.wrn b/app/pages/components/tag.wrn new file mode 100644 index 00000000..56214104 --- /dev/null +++ b/app/pages/components/tag.wrn @@ -0,0 +1,32 @@ +page tagcomponent { + seo { + title = "tag component" + description = "Reusable tag component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

tag

Reusable tag component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<tag label="label" variant="default" />

Legacy mount name: data-component="tag".

Props and attributes

PropTypeRequirementDefault
labelstringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/tag.wrn

// Small tag / chip. variant: default | primary | success | danger | warning.
+component Tag {
+  props {
+    label = ""
+    variant = "default"
+    class = ""
+  }
+  view {
+    <span class="wire-tag wire-tag--{variant} {class}"><slot>{label}</slot></span>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tax-notice.wrn b/app/pages/components/tax-notice.wrn new file mode 100644 index 00000000..d3e2e844 --- /dev/null +++ b/app/pages/components/tax-notice.wrn @@ -0,0 +1,32 @@ +page TaxNoticecomponent { + seo { + title = "TaxNotice component" + description = "Reusable tax notice component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

TaxNotice

Reusable tax notice component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TaxNotice label="Tax" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="TaxNotice".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Tax"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TaxNotice.wrn

component TaxNotice {
+  props {
+    label = "Tax" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tax-rate-input.wrn b/app/pages/components/tax-rate-input.wrn new file mode 100644 index 00000000..6e90d623 --- /dev/null +++ b/app/pages/components/tax-rate-input.wrn @@ -0,0 +1,37 @@ +page TaxRateInputcomponent { + seo { + title = "TaxRateInput component" + description = "Reusable tax rate input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TaxRateInput

Reusable tax rate input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TaxRateInput label="TaxRate" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TaxRateInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"TaxRate"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TaxRateInput.wrn

component TaxRateInput {
+  props {
+    label = "TaxRate" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/team-member-card.wrn b/app/pages/components/team-member-card.wrn new file mode 100644 index 00000000..196d3244 --- /dev/null +++ b/app/pages/components/team-member-card.wrn @@ -0,0 +1,34 @@ +page TeamMemberCardcomponent { + seo { + title = "TeamMemberCard component" + description = "Reusable team member card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TeamMemberCard

Reusable team member card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TeamMemberCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="TeamMemberCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TeamMemberCard.wrn

component TeamMemberCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/team-size-selector.wrn b/app/pages/components/team-size-selector.wrn new file mode 100644 index 00000000..c23ce1be --- /dev/null +++ b/app/pages/components/team-size-selector.wrn @@ -0,0 +1,37 @@ +page TeamSizeSelectorcomponent { + seo { + title = "TeamSizeSelector component" + description = "Reusable team size selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TeamSizeSelector

Reusable team size selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TeamSizeSelector label="TeamSize" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TeamSizeSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"TeamSize"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TeamSizeSelector.wrn

component TeamSizeSelector {
+  props {
+    label = "TeamSize" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/template-card.wrn b/app/pages/components/template-card.wrn new file mode 100644 index 00000000..6755bd1a --- /dev/null +++ b/app/pages/components/template-card.wrn @@ -0,0 +1,30 @@ +page TemplateCardcomponent { + seo { + title = "TemplateCard component" + description = "Reusable template card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TemplateCard

Reusable template card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TemplateCard title="title" description="description" href="href" />

Legacy mount name: data-component="TemplateCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TemplateCard.wrn

component TemplateCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--template {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/template-selector.wrn b/app/pages/components/template-selector.wrn new file mode 100644 index 00000000..fbafa362 --- /dev/null +++ b/app/pages/components/template-selector.wrn @@ -0,0 +1,37 @@ +page TemplateSelectorcomponent { + seo { + title = "TemplateSelector component" + description = "Reusable template selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TemplateSelector

Reusable template selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TemplateSelector label="Template" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TemplateSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Template"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TemplateSelector.wrn

component TemplateSelector {
+  props {
+    label = "Template" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/template-variable-input.wrn b/app/pages/components/template-variable-input.wrn new file mode 100644 index 00000000..028b4ce8 --- /dev/null +++ b/app/pages/components/template-variable-input.wrn @@ -0,0 +1,37 @@ +page TemplateVariableInputcomponent { + seo { + title = "TemplateVariableInput component" + description = "Reusable template variable input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TemplateVariableInput

Reusable template variable input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TemplateVariableInput label="TemplateVariable" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TemplateVariableInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"TemplateVariable"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TemplateVariableInput.wrn

component TemplateVariableInput {
+  props {
+    label = "TemplateVariable" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tenant-isolation-diagram.wrn b/app/pages/components/tenant-isolation-diagram.wrn new file mode 100644 index 00000000..ecb7bcb5 --- /dev/null +++ b/app/pages/components/tenant-isolation-diagram.wrn @@ -0,0 +1,32 @@ +page TenantIsolationDiagramcomponent { + seo { + title = "TenantIsolationDiagram component" + description = "Reusable tenant isolation diagram component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

TenantIsolationDiagram

Reusable tenant isolation diagram component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TenantIsolationDiagram title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="TenantIsolationDiagram".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TenantIsolationDiagram.wrn

component TenantIsolationDiagram {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/terminal-block.wrn b/app/pages/components/terminal-block.wrn new file mode 100644 index 00000000..0de6c1b8 --- /dev/null +++ b/app/pages/components/terminal-block.wrn @@ -0,0 +1,34 @@ +page TerminalBlockcomponent { + seo { + title = "TerminalBlock component" + description = "Reusable terminal block component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TerminalBlock

Reusable terminal block component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TerminalBlock eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="TerminalBlock".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TerminalBlock.wrn

component TerminalBlock {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tertiary-button.wrn b/app/pages/components/tertiary-button.wrn new file mode 100644 index 00000000..29c0c740 --- /dev/null +++ b/app/pages/components/tertiary-button.wrn @@ -0,0 +1,30 @@ +page TertiaryButtoncomponent { + seo { + title = "TertiaryButton component" + description = "Reusable tertiary button component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

TertiaryButton

Reusable tertiary button component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TertiaryButton label="Action" type="button" disabled="false" />

Legacy mount name: data-component="TertiaryButton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
typestringOptional"button"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TertiaryButton.wrn

component TertiaryButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/test-message-dialog.wrn b/app/pages/components/test-message-dialog.wrn new file mode 100644 index 00000000..01431077 --- /dev/null +++ b/app/pages/components/test-message-dialog.wrn @@ -0,0 +1,31 @@ +page TestMessageDialogcomponent { + seo { + title = "TestMessageDialog component" + description = "Reusable test message dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

TestMessageDialog

Reusable test message dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TestMessageDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="TestMessageDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TestMessageDialog.wrn

component TestMessageDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/testimonial-card.wrn b/app/pages/components/testimonial-card.wrn new file mode 100644 index 00000000..aa19de4f --- /dev/null +++ b/app/pages/components/testimonial-card.wrn @@ -0,0 +1,34 @@ +page TestimonialCardcomponent { + seo { + title = "TestimonialCard component" + description = "Reusable testimonial card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TestimonialCard

Reusable testimonial card component.

@wrnexus/ui 0.2.646 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TestimonialCard quote="Great product." name="Customer" role="role" company="company" avatar="avatar" />

Legacy mount name: data-component="TestimonialCard".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
quotestringOptional"Great product."
namestringOptional"Customer"
rolestringOptional""
companystringOptional""
avatarstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TestimonialCard.wrn

component TestimonialCard {
+  props {
+    class = ""
+    quote = "Great product."
+    name = "Customer"
+    role = ""
+    company = ""
+    avatar = ""
+  }
+  view {
+    <figure class="rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900 {class}"><blockquote class="text-lg leading-8 text-slate-700 dark:text-slate-200">“{quote}”</blockquote><figcaption class="mt-6 flex items-center gap-3"><Avatar src="{avatar}" initials="{name.slice(0,2)}" /><div><div class="font-semibold">{name}</div><div class="text-sm text-slate-500">{role}<span data-show="company"> · {company}</span></div></div></figcaption></figure>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/testimonial-carousel.wrn b/app/pages/components/testimonial-carousel.wrn new file mode 100644 index 00000000..f2e2cc10 --- /dev/null +++ b/app/pages/components/testimonial-carousel.wrn @@ -0,0 +1,34 @@ +page TestimonialCarouselcomponent { + seo { + title = "TestimonialCarousel component" + description = "Reusable testimonial carousel component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TestimonialCarousel

Reusable testimonial carousel component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TestimonialCarousel eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="TestimonialCarousel".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TestimonialCarousel.wrn

component TestimonialCarousel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/text-input.wrn b/app/pages/components/text-input.wrn new file mode 100644 index 00000000..b3f46f9d --- /dev/null +++ b/app/pages/components/text-input.wrn @@ -0,0 +1,45 @@ +page TextInputcomponent { + seo { + title = "TextInput component" + description = "Reusable text input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TextInput

Reusable text input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TextInput id="id" name="name" label="Text" value="value" placeholder="placeholder" />

Legacy mount name: data-component="TextInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Text"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TextInput.wrn

component TextInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Text"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="text" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/text-link.wrn b/app/pages/components/text-link.wrn new file mode 100644 index 00000000..e1300b28 --- /dev/null +++ b/app/pages/components/text-link.wrn @@ -0,0 +1,32 @@ +page TextLinkcomponent { + seo { + title = "TextLink component" + description = "Reusable text link component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

TextLink

Reusable text link component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TextLink label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="TextLink".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TextLink.wrn

component TextLink {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/text-skeleton.wrn b/app/pages/components/text-skeleton.wrn new file mode 100644 index 00000000..6e376b38 --- /dev/null +++ b/app/pages/components/text-skeleton.wrn @@ -0,0 +1,32 @@ +page TextSkeletoncomponent { + seo { + title = "TextSkeleton component" + description = "Reusable text skeleton component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

TextSkeleton

Reusable text skeleton component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TextSkeleton label="Text" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="TextSkeleton".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Text"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TextSkeleton.wrn

component TextSkeleton {
+  props {
+    label = "Text" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/textarea.wrn b/app/pages/components/textarea.wrn new file mode 100644 index 00000000..272b07e3 --- /dev/null +++ b/app/pages/components/textarea.wrn @@ -0,0 +1,39 @@ +page Textareacomponent { + seo { + title = "Textarea component" + description = "Reusable textarea component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Textarea

Reusable textarea component.

@wrnexus/ui 0.2.6411 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Textarea id="id" name="name" label="Message" value="value" placeholder="placeholder" />

Legacy mount name: data-component="Textarea".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Message"
valuestringOptional""
placeholderstringOptional""
rowsnumberOptional5
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Textarea.wrn

component Textarea {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Message"
+    value = ""
+    placeholder = ""
+    rows = 5
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+  }
+  view {
+    <div class="space-y-2 {class}"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><textarea id="{id}" name="{name}" rows="{rows}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" aria-invalid="{!!error}" class="w-full resize-y rounded-xl border bg-white px-3.5 py-3 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:bg-slate-950 dark:text-white {error ? 'border-red-500' : 'border-slate-300 dark:border-slate-700'}">{value}</textarea><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/theme-color-picker.wrn b/app/pages/components/theme-color-picker.wrn new file mode 100644 index 00000000..9b90613c --- /dev/null +++ b/app/pages/components/theme-color-picker.wrn @@ -0,0 +1,37 @@ +page ThemeColorPickercomponent { + seo { + title = "ThemeColorPicker component" + description = "Reusable theme color picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ThemeColorPicker

Reusable theme color picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ThemeColorPicker label="ThemeColor" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ThemeColorPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"ThemeColor"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ThemeColorPicker.wrn

component ThemeColorPicker {
+  props {
+    label = "ThemeColor" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/theme-switcher.wrn b/app/pages/components/theme-switcher.wrn new file mode 100644 index 00000000..912c5164 --- /dev/null +++ b/app/pages/components/theme-switcher.wrn @@ -0,0 +1,34 @@ +page ThemeSwitchercomponent { + seo { + title = "ThemeSwitcher component" + description = "Reusable theme switcher component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ThemeSwitcher

Reusable theme switcher component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ThemeSwitcher eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ThemeSwitcher".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ThemeSwitcher.wrn

component ThemeSwitcher {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/theme-toggle.wrn b/app/pages/components/theme-toggle.wrn new file mode 100644 index 00000000..d9ec60d7 --- /dev/null +++ b/app/pages/components/theme-toggle.wrn @@ -0,0 +1,32 @@ +page themetogglecomponent { + seo { + title = "theme-toggle component" + description = "Reusable theme-toggle component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

theme-toggle

Reusable theme-toggle component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<theme-toggle label="Toggle theme" />

Legacy mount name: data-component="theme-toggle".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Toggle theme"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/theme-toggle.wrn

// 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 {
+    <button type="button" class="wire-btn wire-btn--ghost {class}" data-wire-theme-toggle><slot>{label}</slot></button>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/time-input.wrn b/app/pages/components/time-input.wrn new file mode 100644 index 00000000..52761720 --- /dev/null +++ b/app/pages/components/time-input.wrn @@ -0,0 +1,45 @@ +page TimeInputcomponent { + seo { + title = "TimeInput component" + description = "Reusable time input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TimeInput

Reusable time input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimeInput id="id" name="name" label="Time" value="value" placeholder="placeholder" />

Legacy mount name: data-component="TimeInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Time"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimeInput.wrn

component TimeInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Time"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="time" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/time-picker.wrn b/app/pages/components/time-picker.wrn new file mode 100644 index 00000000..8025e361 --- /dev/null +++ b/app/pages/components/time-picker.wrn @@ -0,0 +1,36 @@ +page TimePickercomponent { + seo { + title = "TimePicker component" + description = "Reusable time picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TimePicker

Reusable time picker component.

@wrnexus/ui 0.2.6410 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimePicker id="time-picker" name="time" label="Time" value="value" min="min" />

Legacy mount name: data-component="TimePicker".

Props and attributes

PropTypeRequirementDefault
idstringOptional"time-picker"
namestringOptional"time"
labelstringOptional"Time"
valuestringOptional""
minstringOptional""
maxstringOptional""
stepnumberOptional60
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
classstringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimePicker.wrn

component TimePicker {
+  props {
+    id = "time-picker"
+    name = "time"
+    label = "Time"
+    value = ""
+    min = ""
+    max = ""
+    step = 60
+    required = false
+    disabled = false
+    class = ""
+  }
+  view { <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><input id="{id}" name="{name}" type="time" value="{value}" min="{min}" max="{max}" step="{step}" required="{required}" disabled="{disabled}" class="wire-input" /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/time-range-picker.wrn b/app/pages/components/time-range-picker.wrn new file mode 100644 index 00000000..ca02c659 --- /dev/null +++ b/app/pages/components/time-range-picker.wrn @@ -0,0 +1,37 @@ +page TimeRangePickercomponent { + seo { + title = "TimeRangePicker component" + description = "Reusable time range picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TimeRangePicker

Reusable time range picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimeRangePicker label="TimeRange" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TimeRangePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"TimeRange"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimeRangePicker.wrn

component TimeRangePicker {
+  props {
+    label = "TimeRange" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/timeline-chart.wrn b/app/pages/components/timeline-chart.wrn new file mode 100644 index 00000000..52bae10d --- /dev/null +++ b/app/pages/components/timeline-chart.wrn @@ -0,0 +1,32 @@ +page TimelineChartcomponent { + seo { + title = "TimelineChart component" + description = "Reusable timeline chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

TimelineChart

Reusable timeline chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimelineChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="TimelineChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimelineChart.wrn

component TimelineChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/timeline-item.wrn b/app/pages/components/timeline-item.wrn new file mode 100644 index 00000000..5fff1c8e --- /dev/null +++ b/app/pages/components/timeline-item.wrn @@ -0,0 +1,33 @@ +page TimelineItemcomponent { + seo { + title = "TimelineItem component" + description = "Reusable timeline item component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TimelineItem

Reusable timeline item component.

@wrnexus/ui 0.2.645 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimelineItem title="Event" date="date" description="description" status="default" />

Legacy mount name: data-component="TimelineItem".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Event"
datestringOptional""
descriptionstringOptional""
statusstringOptional"default"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimelineItem.wrn

component TimelineItem {
+  props {
+    class = ""
+    title = "Event"
+    date = ""
+    description = ""
+    status = "default"
+  }
+  view {
+    <li class="relative {class}"><span class="absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 {status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'}"></span><div class="flex flex-wrap items-baseline justify-between gap-2"><h3 class="font-semibold">{title}</h3><time class="text-xs text-slate-500">{date}</time></div><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></li>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/timeline.wrn b/app/pages/components/timeline.wrn new file mode 100644 index 00000000..e2c5b36a --- /dev/null +++ b/app/pages/components/timeline.wrn @@ -0,0 +1,30 @@ +page Timelinecomponent { + seo { + title = "Timeline component" + description = "Reusable timeline component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

Timeline

Reusable timeline component.

@wrnexus/ui 0.2.642 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Timeline title="Timeline" />

Legacy mount name: data-component="Timeline".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Timeline"

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Timeline.wrn

component Timeline {
+  props {
+    class = ""
+    title = "Timeline"
+  }
+  view {
+    <section class="{class}"><h2 class="text-lg font-bold">{title}</h2><ol class="mt-5 border-l border-slate-200 pl-6 dark:border-slate-800"><slot /></ol></section>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/timeout-input.wrn b/app/pages/components/timeout-input.wrn new file mode 100644 index 00000000..be6b4974 --- /dev/null +++ b/app/pages/components/timeout-input.wrn @@ -0,0 +1,37 @@ +page TimeoutInputcomponent { + seo { + title = "TimeoutInput component" + description = "Reusable timeout input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TimeoutInput

Reusable timeout input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimeoutInput label="Timeout" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TimeoutInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Timeout"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimeoutInput.wrn

component TimeoutInput {
+  props {
+    label = "Timeout" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/timezone-aware-time-picker.wrn b/app/pages/components/timezone-aware-time-picker.wrn new file mode 100644 index 00000000..ee7c3a5b --- /dev/null +++ b/app/pages/components/timezone-aware-time-picker.wrn @@ -0,0 +1,37 @@ +page TimezoneAwareTimePickercomponent { + seo { + title = "TimezoneAwareTimePicker component" + description = "Reusable timezone aware time picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TimezoneAwareTimePicker

Reusable timezone aware time picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimezoneAwareTimePicker label="TimezoneAwareTime" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TimezoneAwareTimePicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"TimezoneAwareTime"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimezoneAwareTimePicker.wrn

component TimezoneAwareTimePicker {
+  props {
+    label = "TimezoneAwareTime" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/timezone-selector.wrn b/app/pages/components/timezone-selector.wrn new file mode 100644 index 00000000..dd3209b1 --- /dev/null +++ b/app/pages/components/timezone-selector.wrn @@ -0,0 +1,32 @@ +page TimezoneSelectorcomponent { + seo { + title = "TimezoneSelector component" + description = "Reusable timezone selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TimezoneSelector

Reusable timezone selector component.

@wrnexus/ui 0.2.644 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TimezoneSelector id="timezone" name="timezone" label="Timezone" />

Legacy mount name: data-component="TimezoneSelector".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional"timezone"
namestringOptional"timezone"
labelstringOptional"Timezone"

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimezoneSelector.wrn

component TimezoneSelector {
+  props {
+    class = ""
+    id = "timezone"
+    name = "timezone"
+    label = "Timezone"
+  }
+  view {
+    <Select class="{class}" id="{id}" name="{name}" label="{label}"><option value="UTC">UTC</option><option value="Asia/Kolkata">Asia/Kolkata</option><option value="America/New_York">America/New_York</option><option value="Europe/London">Europe/London</option></Select>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/toast-action.wrn b/app/pages/components/toast-action.wrn new file mode 100644 index 00000000..33e7e16f --- /dev/null +++ b/app/pages/components/toast-action.wrn @@ -0,0 +1,32 @@ +page ToastActioncomponent { + seo { + title = "ToastAction component" + description = "Reusable toast action component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
actions component

ToastAction

Reusable toast action component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ToastAction label="Action" href="href" type="button" variant="primary" disabled="false" />

Legacy mount name: data-component="ToastAction".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Action"
hrefstringOptional""
typestringOptional"button"
variantstringOptional"primary"
disabledbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ToastAction.wrn

component ToastAction {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/toast-host.wrn b/app/pages/components/toast-host.wrn new file mode 100644 index 00000000..b0713edb --- /dev/null +++ b/app/pages/components/toast-host.wrn @@ -0,0 +1,233 @@ +page ToastHostcomponent { + seo { + title = "ToastHost component" + description = "Reusable toast host component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

ToastHost

Reusable toast host component.

@wrnexus/ui 0.2.641 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ToastHost />

Legacy mount name: data-component="ToastHost".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/ToastHost.wrn

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 {
+        <div
+            data-toast-host
+            aria-live="polite"
+            aria-relevant="additions text"
+            class="pointer-events-none fixed inset-x-0 top-0 z-[120] flex flex-col items-end gap-3 p-4 sm:left-auto sm:right-0 sm:w-full sm:max-w-md sm:p-6 {class}"
+        >
+            <!-- Success toast -->
+            <article
+                role="status"
+                class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-emerald-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-emerald-500/20 dark:bg-slate-900 dark:shadow-black/40"
+                class:hidden="!successOpen"
+                class:block="successOpen"
+            >
+                <div class="absolute inset-y-0 left-0 w-1 bg-emerald-500"></div>
+
+                <div class="flex items-start gap-3 p-4 pl-5">
+                    <span
+                        class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+                    >
+                        <span class="icon-[lucide--circle-check] h-5 w-5" aria-hidden="true" ></span>
+                    </span>
+
+                    <div class="min-w-0 flex-1 pt-0.5">
+                        <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                            {successTitle}
+                        </h3>
+
+                        <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
+                            {successMessage}
+                        </p>
+                    </div>
+
+                    <button
+                        type="button"
+                        @click="successOpen = false"
+                        aria-label="Dismiss notification"
+                        class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:bg-white/10 dark:hover:text-white"
+                    >
+                        <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                    </button>
+                </div>
+
+                <div class="h-1 w-full bg-emerald-100 dark:bg-emerald-500/10">
+                    <div class="h-full w-full origin-left bg-emerald-500"></div>
+                </div>
+            </article>
+
+            <!-- Error toast -->
+            <article
+                role="alert"
+                class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-rose-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-rose-500/20 dark:bg-slate-900 dark:shadow-black/40"
+                class:hidden="!errorOpen"
+                class:block="errorOpen"
+            >
+                <div class="absolute inset-y-0 left-0 w-1 bg-rose-500"></div>
+
+                <div class="flex items-start gap-3 p-4 pl-5">
+                    <span
+                        class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300"
+                    >
+                        <span class="icon-[lucide--circle-x] h-5 w-5" aria-hidden="true" ></span>
+                    </span>
+
+                    <div class="min-w-0 flex-1 pt-0.5">
+                        <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                            {errorTitle}
+                        </h3>
+
+                        <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
+                            {errorMessage}
+                        </p>
+
+                        <button
+                            type="button"
+                            class="mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-rose-700 transition hover:text-rose-900 dark:text-rose-300 dark:hover:text-rose-200"
+                        >
+                            Try again
+
+                            <span class="icon-[lucide--rotate-cw] h-3.5 w-3.5" aria-hidden="true" ></span>
+                        </button>
+                    </div>
+
+                    <button
+                        type="button"
+                        @click="errorOpen = false"
+                        aria-label="Dismiss notification"
+                        class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 dark:hover:bg-white/10 dark:hover:text-white"
+                    >
+                        <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                    </button>
+                </div>
+
+                <div class="h-1 w-full bg-rose-100 dark:bg-rose-500/10">
+                    <div class="h-full w-full origin-left bg-rose-500"></div>
+                </div>
+            </article>
+
+            <!-- Warning toast -->
+            <article
+                role="status"
+                class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-amber-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-amber-500/20 dark:bg-slate-900 dark:shadow-black/40"
+                class:hidden="!warningOpen"
+                class:block="warningOpen"
+            >
+                <div class="absolute inset-y-0 left-0 w-1 bg-amber-500"></div>
+
+                <div class="flex items-start gap-3 p-4 pl-5">
+                    <span
+                        class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
+                    >
+                        <span class="icon-[lucide--triangle-alert] h-5 w-5" aria-hidden="true" ></span>
+                    </span>
+
+                    <div class="min-w-0 flex-1 pt-0.5">
+                        <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                            {warningTitle}
+                        </h3>
+
+                        <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
+                            {warningMessage}
+                        </p>
+                    </div>
+
+                    <button
+                        type="button"
+                        @click="warningOpen = false"
+                        aria-label="Dismiss notification"
+                        class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 dark:hover:bg-white/10 dark:hover:text-white"
+                    >
+                        <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                    </button>
+                </div>
+
+                <div class="h-1 w-full bg-amber-100 dark:bg-amber-500/10">
+                    <div class="h-full w-full origin-left bg-amber-500"></div>
+                </div>
+            </article>
+
+            <!-- Information toast -->
+            <article
+                role="status"
+                class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-indigo-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-indigo-500/20 dark:bg-slate-900 dark:shadow-black/40"
+                class:hidden="!infoOpen"
+                class:block="infoOpen"
+            >
+                <div class="absolute inset-y-0 left-0 w-1 bg-indigo-500"></div>
+
+                <div class="flex items-start gap-3 p-4 pl-5">
+                    <span
+                        class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
+                    >
+                        <span class="icon-[lucide--info] h-5 w-5" aria-hidden="true" ></span>
+                    </span>
+
+                    <div class="min-w-0 flex-1 pt-0.5">
+                        <h3 class="text-sm font-bold text-slate-950 dark:text-white">
+                            {infoTitle}
+                        </h3>
+
+                        <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
+                            {infoMessage}
+                        </p>
+
+                        <a
+                            href="/changelog"
+                            class="mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200"
+                        >
+                            View update
+
+                            <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5" aria-hidden="true" ></span>
+                        </a>
+                    </div>
+
+                    <button
+                        type="button"
+                        @click="infoOpen = false"
+                        aria-label="Dismiss notification"
+                        class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:bg-white/10 dark:hover:text-white"
+                    >
+                        <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                    </button>
+                </div>
+
+                <div class="h-1 w-full bg-indigo-100 dark:bg-indigo-500/10">
+                    <div class="h-full w-full origin-left bg-indigo-500"></div>
+                </div>
+            </article>
+        </div>
+    }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/toast-icon.wrn b/app/pages/components/toast-icon.wrn new file mode 100644 index 00000000..920e1a51 --- /dev/null +++ b/app/pages/components/toast-icon.wrn @@ -0,0 +1,34 @@ +page ToastIconcomponent { + seo { + title = "ToastIcon component" + description = "Reusable toast icon component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ToastIcon

Reusable toast icon component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ToastIcon eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ToastIcon".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ToastIcon.wrn

component ToastIcon {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/toast-progress.wrn b/app/pages/components/toast-progress.wrn new file mode 100644 index 00000000..0c17b567 --- /dev/null +++ b/app/pages/components/toast-progress.wrn @@ -0,0 +1,32 @@ +page ToastProgresscomponent { + seo { + title = "ToastProgress component" + description = "Reusable toast progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

ToastProgress

Reusable toast progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ToastProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="ToastProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ToastProgress.wrn

component ToastProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/toast.wrn b/app/pages/components/toast.wrn new file mode 100644 index 00000000..acca39ad --- /dev/null +++ b/app/pages/components/toast.wrn @@ -0,0 +1,34 @@ +page Toastcomponent { + seo { + title = "Toast component" + description = "Reusable toast component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Toast

Reusable toast component.

@wrnexus/ui 0.2.645 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Toast title="Saved" description="description" variant="success" duration="5000" />

Legacy mount name: data-component="Toast".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
titlestringOptional"Saved"
descriptionstringOptional""
variantstringOptional"success"
durationnumberOptional5000

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/Toast.wrn

component Toast {
+  props {
+    class = ""
+    title = "Saved"
+    description = ""
+    variant = "success"
+    duration = 5000
+  }
+  state visible = true
+  view {
+    <div data-show="visible" role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {class}"><span class="mt-0.5 flex size-8 items-center justify-center rounded-full {variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">{variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}</span><div class="min-w-0 flex-1"><p class="font-semibold">{title}</p><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="Close" @click="visible = false" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100">×</button></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/toggle-group.wrn b/app/pages/components/toggle-group.wrn new file mode 100644 index 00000000..52951e4e --- /dev/null +++ b/app/pages/components/toggle-group.wrn @@ -0,0 +1,37 @@ +page ToggleGroupcomponent { + seo { + title = "ToggleGroup component" + description = "Reusable toggle group component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

ToggleGroup

Reusable toggle group component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ToggleGroup label="Toggle" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="ToggleGroup".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Toggle"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ToggleGroup.wrn

component ToggleGroup {
+  props {
+    label = "Toggle" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/toggle.wrn b/app/pages/components/toggle.wrn new file mode 100644 index 00000000..d841d673 --- /dev/null +++ b/app/pages/components/toggle.wrn @@ -0,0 +1,37 @@ +page Togglecomponent { + seo { + title = "Toggle component" + description = "Reusable toggle component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

Toggle

Reusable toggle component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Toggle label="label" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="Toggle".

Props and attributes

PropTypeRequirementDefault
labelstringOptional""
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Toggle.wrn

component Toggle {
+  props {
+    label = "" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/token-input.wrn b/app/pages/components/token-input.wrn new file mode 100644 index 00000000..3db7655d --- /dev/null +++ b/app/pages/components/token-input.wrn @@ -0,0 +1,37 @@ +page TokenInputcomponent { + seo { + title = "TokenInput component" + description = "Reusable token input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

TokenInput

Reusable token input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TokenInput label="Token" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="TokenInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Token"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TokenInput.wrn

component TokenInput {
+  props {
+    label = "Token" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tooltip.wrn b/app/pages/components/tooltip.wrn new file mode 100644 index 00000000..5147fb3f --- /dev/null +++ b/app/pages/components/tooltip.wrn @@ -0,0 +1,31 @@ +page Tooltipcomponent { + seo { + title = "Tooltip component" + description = "Reusable tooltip component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Tooltip

Reusable tooltip component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Tooltip text="Helpful information" position="top" />

Legacy mount name: data-component="Tooltip".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
textstringOptional"Helpful information"
positionstringOptional"top"

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Tooltip.wrn

component Tooltip {
+  props {
+    class = ""
+    text = "Helpful information"
+    position = "top"
+  }
+  view {
+    <span class="group relative inline-flex {class}"><slot /><span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span></span>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/totp-verification-form.wrn b/app/pages/components/totp-verification-form.wrn new file mode 100644 index 00000000..ac30f994 --- /dev/null +++ b/app/pages/components/totp-verification-form.wrn @@ -0,0 +1,34 @@ +page TotpVerificationFormcomponent { + seo { + title = "TotpVerificationForm component" + description = "Reusable totp verification form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TotpVerificationForm

Reusable totp verification form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TotpVerificationForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="TotpVerificationForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TotpVerificationForm.wrn

component TotpVerificationForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/translated-text.wrn b/app/pages/components/translated-text.wrn new file mode 100644 index 00000000..b611c1fc --- /dev/null +++ b/app/pages/components/translated-text.wrn @@ -0,0 +1,34 @@ +page TranslatedTextcomponent { + seo { + title = "TranslatedText component" + description = "Reusable translated text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TranslatedText

Reusable translated text component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TranslatedText eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="TranslatedText".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TranslatedText.wrn

component TranslatedText {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/tree-table.wrn b/app/pages/components/tree-table.wrn new file mode 100644 index 00000000..d53b7b92 --- /dev/null +++ b/app/pages/components/tree-table.wrn @@ -0,0 +1,31 @@ +page TreeTablecomponent { + seo { + title = "TreeTable component" + description = "Reusable tree table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

TreeTable

Reusable tree table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TreeTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="TreeTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TreeTable.wrn

component TreeTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/trend-indicator.wrn b/app/pages/components/trend-indicator.wrn new file mode 100644 index 00000000..09d2edfa --- /dev/null +++ b/app/pages/components/trend-indicator.wrn @@ -0,0 +1,32 @@ +page TrendIndicatorcomponent { + seo { + title = "TrendIndicator component" + description = "Reusable trend indicator component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

TrendIndicator

Reusable trend indicator component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TrendIndicator label="Trend" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="TrendIndicator".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Trend"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TrendIndicator.wrn

component TrendIndicator {
+  props {
+    label = "Trend" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/truncated-text.wrn b/app/pages/components/truncated-text.wrn new file mode 100644 index 00000000..98f576b4 --- /dev/null +++ b/app/pages/components/truncated-text.wrn @@ -0,0 +1,34 @@ +page TruncatedTextcomponent { + seo { + title = "TruncatedText component" + description = "Reusable truncated text component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

TruncatedText

Reusable truncated text component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TruncatedText eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="TruncatedText".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TruncatedText.wrn

component TruncatedText {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/trust-badge-list.wrn b/app/pages/components/trust-badge-list.wrn new file mode 100644 index 00000000..0a6d094e --- /dev/null +++ b/app/pages/components/trust-badge-list.wrn @@ -0,0 +1,31 @@ +page TrustBadgeListcomponent { + seo { + title = "TrustBadgeList component" + description = "Reusable trust badge list component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

TrustBadgeList

Reusable trust badge list component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TrustBadgeList title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="TrustBadgeList".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/TrustBadgeList.wrn

component TrustBadgeList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/typography.wrn b/app/pages/components/typography.wrn new file mode 100644 index 00000000..8767093a --- /dev/null +++ b/app/pages/components/typography.wrn @@ -0,0 +1,32 @@ +page Typographycomponent { + seo { + title = "Typography component" + description = "Reusable typography component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Typography

Reusable typography component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Typography as="p" variant="body" align="start" />

Legacy mount name: data-component="Typography".

Props and attributes

PropTypeRequirementDefault
asstringOptional"p"
variantstringOptional"body"
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Typography.wrn

component Typography {
+  props {
+    as = "p"
+    variant = "body"
+    align = "start"
+    class = ""
+  }
+  view {
+    <div class="wire-type wire-type--{variant} wire-text--{align} {class}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/unavailable-region-state.wrn b/app/pages/components/unavailable-region-state.wrn new file mode 100644 index 00000000..48b4e77f --- /dev/null +++ b/app/pages/components/unavailable-region-state.wrn @@ -0,0 +1,32 @@ +page UnavailableRegionStatecomponent { + seo { + title = "UnavailableRegionState component" + description = "Reusable unavailable region state component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

UnavailableRegionState

Reusable unavailable region state component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UnavailableRegionState label="UnavailableRegion" title="title" description="description" value="value" variant="default" />

Legacy mount name: data-component="UnavailableRegionState".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"UnavailableRegion"
titlestringOptional""
descriptionstringOptional""
valuestringOptional""
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UnavailableRegionState.wrn

component UnavailableRegionState {
+  props {
+    label = "UnavailableRegion" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/unified-timeline-preview.wrn b/app/pages/components/unified-timeline-preview.wrn new file mode 100644 index 00000000..dc77d020 --- /dev/null +++ b/app/pages/components/unified-timeline-preview.wrn @@ -0,0 +1,34 @@ +page UnifiedTimelinePreviewcomponent { + seo { + title = "UnifiedTimelinePreview component" + description = "Reusable unified timeline preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

UnifiedTimelinePreview

Reusable unified timeline preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UnifiedTimelinePreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="UnifiedTimelinePreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UnifiedTimelinePreview.wrn

component UnifiedTimelinePreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/unsaved-changes-dialog.wrn b/app/pages/components/unsaved-changes-dialog.wrn new file mode 100644 index 00000000..5e3c377c --- /dev/null +++ b/app/pages/components/unsaved-changes-dialog.wrn @@ -0,0 +1,31 @@ +page UnsavedChangesDialogcomponent { + seo { + title = "UnsavedChangesDialog component" + description = "Reusable unsaved changes dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

UnsavedChangesDialog

Reusable unsaved changes dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UnsavedChangesDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="UnsavedChangesDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UnsavedChangesDialog.wrn

component UnsavedChangesDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/upload-item.wrn b/app/pages/components/upload-item.wrn new file mode 100644 index 00000000..a2d74010 --- /dev/null +++ b/app/pages/components/upload-item.wrn @@ -0,0 +1,34 @@ +page UploadItemcomponent { + seo { + title = "UploadItem component" + description = "Reusable upload item component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

UploadItem

Reusable upload item component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UploadItem eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="UploadItem".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UploadItem.wrn

component UploadItem {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/upload-preview.wrn b/app/pages/components/upload-preview.wrn new file mode 100644 index 00000000..66c6797c --- /dev/null +++ b/app/pages/components/upload-preview.wrn @@ -0,0 +1,34 @@ +page UploadPreviewcomponent { + seo { + title = "UploadPreview component" + description = "Reusable upload preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

UploadPreview

Reusable upload preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UploadPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="UploadPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UploadPreview.wrn

component UploadPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/upload-progress.wrn b/app/pages/components/upload-progress.wrn new file mode 100644 index 00000000..1dbe4438 --- /dev/null +++ b/app/pages/components/upload-progress.wrn @@ -0,0 +1,32 @@ +page UploadProgresscomponent { + seo { + title = "UploadProgress component" + description = "Reusable upload progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

UploadProgress

Reusable upload progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UploadProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="UploadProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UploadProgress.wrn

component UploadProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/uptime-chart.wrn b/app/pages/components/uptime-chart.wrn new file mode 100644 index 00000000..acd9abcb --- /dev/null +++ b/app/pages/components/uptime-chart.wrn @@ -0,0 +1,32 @@ +page UptimeChartcomponent { + seo { + title = "UptimeChart component" + description = "Reusable uptime chart component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

UptimeChart

Reusable uptime chart component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UptimeChart title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="UptimeChart".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UptimeChart.wrn

component UptimeChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/uptime-metric.wrn b/app/pages/components/uptime-metric.wrn new file mode 100644 index 00000000..87cc8b8d --- /dev/null +++ b/app/pages/components/uptime-metric.wrn @@ -0,0 +1,32 @@ +page UptimeMetriccomponent { + seo { + title = "UptimeMetric component" + description = "Reusable uptime metric component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

UptimeMetric

Reusable uptime metric component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UptimeMetric title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="UptimeMetric".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UptimeMetric.wrn

component UptimeMetric {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/url-input.wrn b/app/pages/components/url-input.wrn new file mode 100644 index 00000000..358ab9cd --- /dev/null +++ b/app/pages/components/url-input.wrn @@ -0,0 +1,45 @@ +page UrlInputcomponent { + seo { + title = "UrlInput component" + description = "Reusable url input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

UrlInput

Reusable url input component.

@wrnexus/ui 0.2.6412 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UrlInput id="id" name="name" label="Url" value="value" placeholder="placeholder" />

Legacy mount name: data-component="UrlInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional""
namestringOptional""
labelstringOptional"Url"
valuestringOptional""
placeholderstringOptional""
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional""

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/UrlInput.wrn

component UrlInput {
+  props {
+    class = ""
+    id = ""
+    name = ""
+    label = "Url"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
+  view {
+    <div class="space-y-2 {class}">
+      <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
+      <input id="{id}" name="{name}" type="url" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
+      <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
+      <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
+    </div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/usage-pricing-table.wrn b/app/pages/components/usage-pricing-table.wrn new file mode 100644 index 00000000..9d526fea --- /dev/null +++ b/app/pages/components/usage-pricing-table.wrn @@ -0,0 +1,31 @@ +page UsagePricingTablecomponent { + seo { + title = "UsagePricingTable component" + description = "Reusable usage pricing table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

UsagePricingTable

Reusable usage pricing table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UsagePricingTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="UsagePricingTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UsagePricingTable.wrn

component UsagePricingTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/use-case-selector.wrn b/app/pages/components/use-case-selector.wrn new file mode 100644 index 00000000..aab75e31 --- /dev/null +++ b/app/pages/components/use-case-selector.wrn @@ -0,0 +1,37 @@ +page UseCaseSelectorcomponent { + seo { + title = "UseCaseSelector component" + description = "Reusable use case selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

UseCaseSelector

Reusable use case selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UseCaseSelector label="UseCase" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="UseCaseSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"UseCase"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UseCaseSelector.wrn

component UseCaseSelector {
+  props {
+    label = "UseCase" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/user-card.wrn b/app/pages/components/user-card.wrn new file mode 100644 index 00000000..1338e062 --- /dev/null +++ b/app/pages/components/user-card.wrn @@ -0,0 +1,30 @@ +page UserCardcomponent { + seo { + title = "UserCard component" + description = "Reusable user card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

UserCard

Reusable user card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UserCard title="title" description="description" href="href" />

Legacy mount name: data-component="UserCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UserCard.wrn

component UserCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--user {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/username-input.wrn b/app/pages/components/username-input.wrn new file mode 100644 index 00000000..4f22dcf7 --- /dev/null +++ b/app/pages/components/username-input.wrn @@ -0,0 +1,37 @@ +page UsernameInputcomponent { + seo { + title = "UsernameInput component" + description = "Reusable username input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

UsernameInput

Reusable username input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<UsernameInput label="Username" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="UsernameInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Username"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/UsernameInput.wrn

component UsernameInput {
+  props {
+    label = "Username" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/value-card.wrn b/app/pages/components/value-card.wrn new file mode 100644 index 00000000..a9db14b9 --- /dev/null +++ b/app/pages/components/value-card.wrn @@ -0,0 +1,34 @@ +page ValueCardcomponent { + seo { + title = "ValueCard component" + description = "Reusable value card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ValueCard

Reusable value card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ValueCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ValueCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ValueCard.wrn

component ValueCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/values-grid.wrn b/app/pages/components/values-grid.wrn new file mode 100644 index 00000000..a4f72e5d --- /dev/null +++ b/app/pages/components/values-grid.wrn @@ -0,0 +1,31 @@ +page ValuesGridcomponent { + seo { + title = "ValuesGrid component" + description = "Reusable values grid component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

ValuesGrid

Reusable values grid component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ValuesGrid title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="ValuesGrid".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ValuesGrid.wrn

component ValuesGrid {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/verification-code-input.wrn b/app/pages/components/verification-code-input.wrn new file mode 100644 index 00000000..48a1c582 --- /dev/null +++ b/app/pages/components/verification-code-input.wrn @@ -0,0 +1,37 @@ +page VerificationCodeInputcomponent { + seo { + title = "VerificationCodeInput component" + description = "Reusable verification code input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

VerificationCodeInput

Reusable verification code input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VerificationCodeInput label="VerificationCode" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="VerificationCodeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"VerificationCode"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VerificationCodeInput.wrn

component VerificationCodeInput {
+  props {
+    label = "VerificationCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/verified-badge.wrn b/app/pages/components/verified-badge.wrn new file mode 100644 index 00000000..3ec9fad8 --- /dev/null +++ b/app/pages/components/verified-badge.wrn @@ -0,0 +1,29 @@ +page VerifiedBadgecomponent { + seo { + title = "VerifiedBadge component" + description = "Reusable verified badge component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
feedback component

VerifiedBadge

Reusable verified badge component.

@wrnexus/ui 0.2.643 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VerifiedBadge label="Verified" variant="default" />

Legacy mount name: data-component="VerifiedBadge".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Verified"
variantstringOptional"default"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VerifiedBadge.wrn

component VerifiedBadge {
+  props {
+    label = "Verified"
+    variant = "default"
+    class = ""
+  }
+  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--verifiedbadge {class}">{label}<slot /></span> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/version-selector.wrn b/app/pages/components/version-selector.wrn new file mode 100644 index 00000000..795e019c --- /dev/null +++ b/app/pages/components/version-selector.wrn @@ -0,0 +1,37 @@ +page VersionSelectorcomponent { + seo { + title = "VersionSelector component" + description = "Reusable version selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

VersionSelector

Reusable version selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VersionSelector label="Version" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="VersionSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Version"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VersionSelector.wrn

component VersionSelector {
+  props {
+    label = "Version" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/vertical-tabs.wrn b/app/pages/components/vertical-tabs.wrn new file mode 100644 index 00000000..10b3e61d --- /dev/null +++ b/app/pages/components/vertical-tabs.wrn @@ -0,0 +1,34 @@ +page VerticalTabscomponent { + seo { + title = "VerticalTabs component" + description = "Reusable vertical tabs component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

VerticalTabs

Reusable vertical tabs component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VerticalTabs eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="VerticalTabs".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VerticalTabs.wrn

component VerticalTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/video-card.wrn b/app/pages/components/video-card.wrn new file mode 100644 index 00000000..34a110e2 --- /dev/null +++ b/app/pages/components/video-card.wrn @@ -0,0 +1,34 @@ +page VideoCardcomponent { + seo { + title = "VideoCard component" + description = "Reusable video card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

VideoCard

Reusable video card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VideoCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="VideoCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VideoCard.wrn

component VideoCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/video-preview-dialog.wrn b/app/pages/components/video-preview-dialog.wrn new file mode 100644 index 00000000..9ee2cb72 --- /dev/null +++ b/app/pages/components/video-preview-dialog.wrn @@ -0,0 +1,31 @@ +page VideoPreviewDialogcomponent { + seo { + title = "VideoPreviewDialog component" + description = "Reusable video preview dialog component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
overlays component

VideoPreviewDialog

Reusable video preview dialog component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VideoPreviewDialog title="title" description="description" open="false" closeLabel="Close" />

Legacy mount name: data-component="VideoPreviewDialog".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
openbooleanOptionalfalse
closeLabelstringOptional"Close"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VideoPreviewDialog.wrn

component VideoPreviewDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/video-upload.wrn b/app/pages/components/video-upload.wrn new file mode 100644 index 00000000..24dfbd56 --- /dev/null +++ b/app/pages/components/video-upload.wrn @@ -0,0 +1,34 @@ +page VideoUploadcomponent { + seo { + title = "VideoUpload component" + description = "Reusable video upload component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

VideoUpload

Reusable video upload component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VideoUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="VideoUpload".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VideoUpload.wrn

component VideoUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/virtualized-table.wrn b/app/pages/components/virtualized-table.wrn new file mode 100644 index 00000000..6ba1184d --- /dev/null +++ b/app/pages/components/virtualized-table.wrn @@ -0,0 +1,31 @@ +page VirtualizedTablecomponent { + seo { + title = "VirtualizedTable component" + description = "Reusable virtualized table component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
data component

VirtualizedTable

Reusable virtualized table component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VirtualizedTable title="title" description="description" empty="false" emptyText="No items available." />

Legacy mount name: data-component="VirtualizedTable".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
emptybooleanOptionalfalse
emptyTextstringOptional"No items available."
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VirtualizedTable.wrn

component VirtualizedTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/vision-section.wrn b/app/pages/components/vision-section.wrn new file mode 100644 index 00000000..1b5a5fec --- /dev/null +++ b/app/pages/components/vision-section.wrn @@ -0,0 +1,31 @@ +page VisionSectioncomponent { + seo { + title = "VisionSection component" + description = "Reusable vision section component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

VisionSection

Reusable vision section component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VisionSection eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="VisionSection".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VisionSection.wrn

component VisionSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/visually-hidden.wrn b/app/pages/components/visually-hidden.wrn new file mode 100644 index 00000000..57a6c8ef --- /dev/null +++ b/app/pages/components/visually-hidden.wrn @@ -0,0 +1,29 @@ +page VisuallyHiddencomponent { + seo { + title = "VisuallyHidden component" + description = "Reusable visually hidden component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

VisuallyHidden

Reusable visually hidden component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VisuallyHidden />

Legacy mount name: data-component="VisuallyHidden".

Props and attributes

PropTypeRequirementDefault
classNamestringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VisuallyHidden.wrn

component VisuallyHidden {
+  props {
+    className = ""
+  }
+  view {
+    <div class="sr-only {className}"><slot /></div>
+  }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/voice-script-composer.wrn b/app/pages/components/voice-script-composer.wrn new file mode 100644 index 00000000..886c35bc --- /dev/null +++ b/app/pages/components/voice-script-composer.wrn @@ -0,0 +1,34 @@ +page VoiceScriptComposercomponent { + seo { + title = "VoiceScriptComposer component" + description = "Reusable voice script composer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

VoiceScriptComposer

Reusable voice script composer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VoiceScriptComposer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="VoiceScriptComposer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VoiceScriptComposer.wrn

component VoiceScriptComposer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/voice-script-editor.wrn b/app/pages/components/voice-script-editor.wrn new file mode 100644 index 00000000..61645b24 --- /dev/null +++ b/app/pages/components/voice-script-editor.wrn @@ -0,0 +1,37 @@ +page VoiceScriptEditorcomponent { + seo { + title = "VoiceScriptEditor component" + description = "Reusable voice script editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

VoiceScriptEditor

Reusable voice script editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VoiceScriptEditor label="VoiceScript" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="VoiceScriptEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"VoiceScript"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VoiceScriptEditor.wrn

component VoiceScriptEditor {
+  props {
+    label = "VoiceScript" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/volume-input.wrn b/app/pages/components/volume-input.wrn new file mode 100644 index 00000000..a1b550e2 --- /dev/null +++ b/app/pages/components/volume-input.wrn @@ -0,0 +1,37 @@ +page VolumeInputcomponent { + seo { + title = "VolumeInput component" + description = "Reusable volume input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

VolumeInput

Reusable volume input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VolumeInput label="Volume" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="VolumeInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Volume"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VolumeInput.wrn

component VolumeInput {
+  props {
+    label = "Volume" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/volume-slider.wrn b/app/pages/components/volume-slider.wrn new file mode 100644 index 00000000..72abf2d1 --- /dev/null +++ b/app/pages/components/volume-slider.wrn @@ -0,0 +1,34 @@ +page VolumeSlidercomponent { + seo { + title = "VolumeSlider component" + description = "Reusable volume slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

VolumeSlider

Reusable volume slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<VolumeSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="VolumeSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/VolumeSlider.wrn

component VolumeSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/warning-card.wrn b/app/pages/components/warning-card.wrn new file mode 100644 index 00000000..9055dcf0 --- /dev/null +++ b/app/pages/components/warning-card.wrn @@ -0,0 +1,30 @@ +page WarningCardcomponent { + seo { + title = "WarningCard component" + description = "Reusable warning card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WarningCard

Reusable warning card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WarningCard title="title" description="description" href="href" />

Legacy mount name: data-component="WarningCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WarningCard.wrn

component WarningCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--warning {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/webhook-event-card.wrn b/app/pages/components/webhook-event-card.wrn new file mode 100644 index 00000000..02c55e6a --- /dev/null +++ b/app/pages/components/webhook-event-card.wrn @@ -0,0 +1,34 @@ +page WebhookEventCardcomponent { + seo { + title = "WebhookEventCard component" + description = "Reusable webhook event card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WebhookEventCard

Reusable webhook event card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WebhookEventCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="WebhookEventCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WebhookEventCard.wrn

component WebhookEventCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/webhook-flow-diagram.wrn b/app/pages/components/webhook-flow-diagram.wrn new file mode 100644 index 00000000..a0b7866c --- /dev/null +++ b/app/pages/components/webhook-flow-diagram.wrn @@ -0,0 +1,32 @@ +page WebhookFlowDiagramcomponent { + seo { + title = "WebhookFlowDiagram component" + description = "Reusable webhook flow diagram component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

WebhookFlowDiagram

Reusable webhook flow diagram component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WebhookFlowDiagram title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="WebhookFlowDiagram".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WebhookFlowDiagram.wrn

component WebhookFlowDiagram {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/webhook-payload-viewer.wrn b/app/pages/components/webhook-payload-viewer.wrn new file mode 100644 index 00000000..e236e00e --- /dev/null +++ b/app/pages/components/webhook-payload-viewer.wrn @@ -0,0 +1,34 @@ +page WebhookPayloadViewercomponent { + seo { + title = "WebhookPayloadViewer component" + description = "Reusable webhook payload viewer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WebhookPayloadViewer

Reusable webhook payload viewer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WebhookPayloadViewer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="WebhookPayloadViewer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WebhookPayloadViewer.wrn

component WebhookPayloadViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/webhook-url-input.wrn b/app/pages/components/webhook-url-input.wrn new file mode 100644 index 00000000..79186e06 --- /dev/null +++ b/app/pages/components/webhook-url-input.wrn @@ -0,0 +1,37 @@ +page WebhookUrlInputcomponent { + seo { + title = "WebhookUrlInput component" + description = "Reusable webhook url input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

WebhookUrlInput

Reusable webhook url input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WebhookUrlInput label="WebhookUrl" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="WebhookUrlInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"WebhookUrl"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WebhookUrlInput.wrn

component WebhookUrlInput {
+  props {
+    label = "WebhookUrl" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/webinar-card.wrn b/app/pages/components/webinar-card.wrn new file mode 100644 index 00000000..7dea125c --- /dev/null +++ b/app/pages/components/webinar-card.wrn @@ -0,0 +1,34 @@ +page WebinarCardcomponent { + seo { + title = "WebinarCard component" + description = "Reusable webinar card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WebinarCard

Reusable webinar card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WebinarCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="WebinarCard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WebinarCard.wrn

component WebinarCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/webinar-registration-form.wrn b/app/pages/components/webinar-registration-form.wrn new file mode 100644 index 00000000..a14adb68 --- /dev/null +++ b/app/pages/components/webinar-registration-form.wrn @@ -0,0 +1,34 @@ +page WebinarRegistrationFormcomponent { + seo { + title = "WebinarRegistrationForm component" + description = "Reusable webinar registration form component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WebinarRegistrationForm

Reusable webinar registration form component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WebinarRegistrationForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="WebinarRegistrationForm".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WebinarRegistrationForm.wrn

component WebinarRegistrationForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/well.wrn b/app/pages/components/well.wrn new file mode 100644 index 00000000..bb5f3530 --- /dev/null +++ b/app/pages/components/well.wrn @@ -0,0 +1,27 @@ +page Wellcomponent { + seo { + title = "Well component" + description = "Reusable well component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

Well

Reusable well component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Well />

Legacy mount name: data-component="Well".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Well.wrn

component Well {
+  props {
+    class = ""
+  }
+  view { <div class="wire-well {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/whats-app-composer.wrn b/app/pages/components/whats-app-composer.wrn new file mode 100644 index 00000000..66fba54b --- /dev/null +++ b/app/pages/components/whats-app-composer.wrn @@ -0,0 +1,34 @@ +page WhatsAppComposercomponent { + seo { + title = "WhatsAppComposer component" + description = "Reusable whats app composer component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WhatsAppComposer

Reusable whats app composer component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WhatsAppComposer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="WhatsAppComposer".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WhatsAppComposer.wrn

component WhatsAppComposer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/whats-app-number-input.wrn b/app/pages/components/whats-app-number-input.wrn new file mode 100644 index 00000000..d407d939 --- /dev/null +++ b/app/pages/components/whats-app-number-input.wrn @@ -0,0 +1,37 @@ +page WhatsAppNumberInputcomponent { + seo { + title = "WhatsAppNumberInput component" + description = "Reusable whats app number input component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

WhatsAppNumberInput

Reusable whats app number input component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WhatsAppNumberInput label="WhatsAppNumber" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="WhatsAppNumberInput".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"WhatsAppNumber"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WhatsAppNumberInput.wrn

component WhatsAppNumberInput {
+  props {
+    label = "WhatsAppNumber" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/whats-app-template-editor.wrn b/app/pages/components/whats-app-template-editor.wrn new file mode 100644 index 00000000..c7996f34 --- /dev/null +++ b/app/pages/components/whats-app-template-editor.wrn @@ -0,0 +1,37 @@ +page WhatsAppTemplateEditorcomponent { + seo { + title = "WhatsAppTemplateEditor component" + description = "Reusable whats app template editor component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

WhatsAppTemplateEditor

Reusable whats app template editor component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WhatsAppTemplateEditor label="WhatsAppTemplate" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="WhatsAppTemplateEditor".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"WhatsAppTemplate"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WhatsAppTemplateEditor.wrn

component WhatsAppTemplateEditor {
+  props {
+    label = "WhatsAppTemplate" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/wide-container.wrn b/app/pages/components/wide-container.wrn new file mode 100644 index 00000000..66a257d1 --- /dev/null +++ b/app/pages/components/wide-container.wrn @@ -0,0 +1,27 @@ +page WideContainercomponent { + seo { + title = "WideContainer component" + description = "Reusable wide container component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
core component

WideContainer

Reusable wide container component.

@wrnexus/ui 0.2.641 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WideContainer />

Legacy mount name: data-component="WideContainer".

Props and attributes

PropTypeRequirementDefault
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WideContainer.wrn

component WideContainer {
+  props {
+    class = ""
+  }
+  view { <div class="wire-container wire-container--wide {class}"><slot /></div> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/wizard-header.wrn b/app/pages/components/wizard-header.wrn new file mode 100644 index 00000000..2b7693d3 --- /dev/null +++ b/app/pages/components/wizard-header.wrn @@ -0,0 +1,31 @@ +page WizardHeadercomponent { + seo { + title = "WizardHeader component" + description = "Reusable wizard header component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

WizardHeader

Reusable wizard header component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WizardHeader eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="WizardHeader".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WizardHeader.wrn

component WizardHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/wizard-navigation.wrn b/app/pages/components/wizard-navigation.wrn new file mode 100644 index 00000000..d50e745c --- /dev/null +++ b/app/pages/components/wizard-navigation.wrn @@ -0,0 +1,31 @@ +page WizardNavigationcomponent { + seo { + title = "WizardNavigation component" + description = "Reusable wizard navigation component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
layout component

WizardNavigation

Reusable wizard navigation component.

@wrnexus/ui 0.2.645 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WizardNavigation eyebrow="eyebrow" title="title" description="description" align="start" />

Legacy mount name: data-component="WizardNavigation".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
alignstringOptional"start"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WizardNavigation.wrn

component WizardNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/wizard.wrn b/app/pages/components/wizard.wrn new file mode 100644 index 00000000..be5aab9d --- /dev/null +++ b/app/pages/components/wizard.wrn @@ -0,0 +1,34 @@ +page Wizardcomponent { + seo { + title = "Wizard component" + description = "Reusable wizard component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

Wizard

Reusable wizard component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Wizard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="Wizard".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Wizard.wrn

component Wizard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/workflow-canvas-preview.wrn b/app/pages/components/workflow-canvas-preview.wrn new file mode 100644 index 00000000..351ab2a6 --- /dev/null +++ b/app/pages/components/workflow-canvas-preview.wrn @@ -0,0 +1,34 @@ +page WorkflowCanvasPreviewcomponent { + seo { + title = "WorkflowCanvasPreview component" + description = "Reusable workflow canvas preview component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WorkflowCanvasPreview

Reusable workflow canvas preview component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WorkflowCanvasPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="WorkflowCanvasPreview".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WorkflowCanvasPreview.wrn

component WorkflowCanvasPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/workflow-progress.wrn b/app/pages/components/workflow-progress.wrn new file mode 100644 index 00000000..1558aacb --- /dev/null +++ b/app/pages/components/workflow-progress.wrn @@ -0,0 +1,32 @@ +page WorkflowProgresscomponent { + seo { + title = "WorkflowProgress component" + description = "Reusable workflow progress component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
visualization component

WorkflowProgress

Reusable workflow progress component.

@wrnexus/ui 0.2.646 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WorkflowProgress title="title" value="value" description="description" summary="summary" loading="false" />

Legacy mount name: data-component="WorkflowProgress".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
valuestringOptional""
descriptionstringOptional""
summarystringOptional""
loadingbooleanOptionalfalse
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WorkflowProgress.wrn

component WorkflowProgress {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/workspace-card.wrn b/app/pages/components/workspace-card.wrn new file mode 100644 index 00000000..8838a440 --- /dev/null +++ b/app/pages/components/workspace-card.wrn @@ -0,0 +1,30 @@ +page WorkspaceCardcomponent { + seo { + title = "WorkspaceCard component" + description = "Reusable workspace card component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WorkspaceCard

Reusable workspace card component.

@wrnexus/ui 0.2.644 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WorkspaceCard title="title" description="description" href="href" />

Legacy mount name: data-component="WorkspaceCard".

Props and attributes

PropTypeRequirementDefault
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WorkspaceCard.wrn

component WorkspaceCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--workspace {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/workspace-selector.wrn b/app/pages/components/workspace-selector.wrn new file mode 100644 index 00000000..e9660963 --- /dev/null +++ b/app/pages/components/workspace-selector.wrn @@ -0,0 +1,37 @@ +page WorkspaceSelectorcomponent { + seo { + title = "WorkspaceSelector component" + description = "Reusable workspace selector component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

WorkspaceSelector

Reusable workspace selector component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WorkspaceSelector label="Workspace" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="WorkspaceSelector".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Workspace"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WorkspaceSelector.wrn

component WorkspaceSelector {
+  props {
+    label = "Workspace" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/workspace-switcher.wrn b/app/pages/components/workspace-switcher.wrn new file mode 100644 index 00000000..93c6854b --- /dev/null +++ b/app/pages/components/workspace-switcher.wrn @@ -0,0 +1,34 @@ +page WorkspaceSwitchercomponent { + seo { + title = "WorkspaceSwitcher component" + description = "Reusable workspace switcher component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

WorkspaceSwitcher

Reusable workspace switcher component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<WorkspaceSwitcher eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="WorkspaceSwitcher".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WorkspaceSwitcher.wrn

component WorkspaceSwitcher {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/year-picker.wrn b/app/pages/components/year-picker.wrn new file mode 100644 index 00000000..e47fe4d5 --- /dev/null +++ b/app/pages/components/year-picker.wrn @@ -0,0 +1,37 @@ +page YearPickercomponent { + seo { + title = "YearPicker component" + description = "Reusable year picker component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
forms component

YearPicker

Reusable year picker component.

@wrnexus/ui 0.2.6411 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<YearPicker label="Year" name="name" value="value" placeholder="placeholder" type="text" />

Legacy mount name: data-component="YearPicker".

Props and attributes

PropTypeRequirementDefault
labelstringOptional"Year"
namestringOptional""
valuestringOptional""
placeholderstringOptional""
typestringOptional"text"
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
helpstringOptional""
errorstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/YearPicker.wrn

component YearPicker {
+  props {
+    label = "Year" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}
+
+ + +
+ } +} diff --git a/app/pages/components/zoom-slider.wrn b/app/pages/components/zoom-slider.wrn new file mode 100644 index 00000000..70eda1b9 --- /dev/null +++ b/app/pages/components/zoom-slider.wrn @@ -0,0 +1,34 @@ +page ZoomSlidercomponent { + seo { + title = "ZoomSlider component" + description = "Reusable zoom slider component." + } + + view { +
+ +
+ W WRNexusJS + +
Private preview · v0.2.64
+
+
Browse documentation
+
content component

ZoomSlider

Reusable zoom slider component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ZoomSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" />

Legacy mount name: data-component="ZoomSlider".

Props and attributes

PropTypeRequirementDefault
eyebrowstringOptional""
titlestringOptional""
descriptionstringOptional""
hrefstringOptional""
actionLabelstringOptional"Learn more"
imagestringOptional""
altstringOptional""
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ZoomSlider.wrn

component ZoomSlider {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}
+
+ + +
+ } +} diff --git a/app/pages/examples.wrn b/app/pages/examples.wrn index e0d2d931..87017b58 100644 --- a/app/pages/examples.wrn +++ b/app/pages/examples.wrn @@ -7,8 +7,8 @@ page Examples { view {
-
W WRNexusJS
Preview · v0.2.64
-
Browse documentation
+
W WRNexusJS
Preview · v0.2.64
+
Browse documentation

Examples

Examples are tied to installed 0.2.64 package documentation. The focused snippets in guides are source-verified; standalone runnable projects and CI compilation are tracked as remaining work.

Minimal .wrn page

Documented

Database CRUD

Planned fixture

Authentication and protected route

Planned fixture

Permissions

Planned fixture

Forms and validation

Documented

Realtime dashboard

Planned fixture

File upload

Planned fixture

Background queue

Planned fixture

Redis pub/sub

Planned fixture

Workspace gateway

Planned fixture

Deployment

Planned fixture

Experimental mobile mode

Planned fixture
diff --git a/app/pages/getting-started.wrn b/app/pages/getting-started.wrn index 5311a64d..ee7871b2 100644 --- a/app/pages/getting-started.wrn +++ b/app/pages/getting-started.wrn @@ -7,8 +7,8 @@ page Gettingstarted { view {
-
W WRNexusJS
Preview · v0.2.64
-
Browse documentation
+
W WRNexusJS
Preview · v0.2.64
+
Browse documentation
Preview guide · v0.2.64

Build a contact inbox

This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.

1. Create the project

bunx @wrnexus/cli@0.2.64 create my-app
 cd my-app
 bun install
diff --git a/app/pages/guides/api-routes.wrn b/app/pages/guides/api-routes.wrn
index 128a9797..c3cdd757 100644
--- a/app/pages/guides/api-routes.wrn
+++ b/app/pages/guides/api-routes.wrn
@@ -7,8 +7,8 @@ page APIroutes {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
API routes
Export GET, POST, PUT, PATCH, or DELETE from app/api files. Validate request bodies, enforce authentication and authorization, cap request sizes, and return Web Responses.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/authentication.wrn b/app/pages/guides/authentication.wrn
index ed609aa0..846f94ff 100644
--- a/app/pages/guides/authentication.wrn
+++ b/app/pages/guides/authentication.wrn
@@ -7,8 +7,8 @@ page Authentication {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Authentication
Configure session authentication, log users in through supported auth helpers, and read identity from context. Cookie flags, rotation, expiry, and secret storage remain deployment responsibilities.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/authorization.wrn b/app/pages/guides/authorization.wrn
index 8b7a8aae..4e932ea0 100644
--- a/app/pages/guides/authorization.wrn
+++ b/app/pages/guides/authorization.wrn
@@ -7,8 +7,8 @@ page Authorization {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Authorization
Authentication identifies; authorization decides. Enforce permissions in server routes and policies, including object ownership. UI hiding is never an authorization boundary.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/configuration-and-profiles.wrn b/app/pages/guides/configuration-and-profiles.wrn
index 929b9cb4..2fc6dc99 100644
--- a/app/pages/guides/configuration-and-profiles.wrn
+++ b/app/pages/guides/configuration-and-profiles.wrn
@@ -7,8 +7,8 @@ page Configurationandprofiles {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Configuration and profiles
wrnexus.config.ts owns styles, SEO, security, data, mobile, fonts, and profiles. Keep secrets in validated environment variables and review merged production configuration.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/database.wrn b/app/pages/guides/database.wrn
index fe5e4fcf..98686476 100644
--- a/app/pages/guides/database.wrn
+++ b/app/pages/guides/database.wrn
@@ -7,8 +7,8 @@ page Database {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Database
Configure SQLite or the installed supported driver, keep queries in named SQL blocks, generate typed functions, and apply migrations before traffic. Back up data and test rollback independently.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/deployment.wrn b/app/pages/guides/deployment.wrn
index 6c6eab96..eeec4257 100644
--- a/app/pages/guides/deployment.wrn
+++ b/app/pages/guides/deployment.wrn
@@ -7,8 +7,8 @@ page Deployment {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Deployment
Run bun run build, apply migrations, and start dist/server.js with Bun. Configure TLS, proxy trust, environment validation, health checks, graceful restarts, logs, backups, and restrictive security headers.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/forms-and-validation.wrn b/app/pages/guides/forms-and-validation.wrn
index f81301ac..172373f9 100644
--- a/app/pages/guides/forms-and-validation.wrn
+++ b/app/pages/guides/forms-and-validation.wrn
@@ -7,8 +7,8 @@ page Formsandvalidation {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Forms and validation
Define a v.object schema, use data-schema on the form, show field errors with data-error, and always call parseBody on the server. refine is server-only.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/i18n-and-themes.wrn b/app/pages/guides/i18n-and-themes.wrn
index f6a21443..93e8902f 100644
--- a/app/pages/guides/i18n-and-themes.wrn
+++ b/app/pages/guides/i18n-and-themes.wrn
@@ -7,8 +7,8 @@ page Internationalizationandthemes {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Internationalization and themes
Store locale JSON under app/locales and use translation directives. Themes resolve CSS tokens; ensure contrast, system preference behavior, persistence, and non-color cues.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/middleware.wrn b/app/pages/guides/middleware.wrn
index c8e8a059..42810cd1 100644
--- a/app/pages/guides/middleware.wrn
+++ b/app/pages/guides/middleware.wrn
@@ -7,8 +7,8 @@ page Middleware {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Middleware
Middleware receives context and next. Return next() to continue or return a Response to stop. Put request limits and trust-boundary controls before business logic.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/mobile.wrn b/app/pages/guides/mobile.wrn
index 9e868652..d2065327 100644
--- a/app/pages/guides/mobile.wrn
+++ b/app/pages/guides/mobile.wrn
@@ -7,8 +7,8 @@ page Mobile {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Mobile
Mobile capabilities are experimental in this preview. Test Capacitor permissions and lifecycle on each platform; do not assume every .wrn or browser API converts to native.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/observability.wrn b/app/pages/guides/observability.wrn
index 310227b1..4fd84f58 100644
--- a/app/pages/guides/observability.wrn
+++ b/app/pages/guides/observability.wrn
@@ -7,8 +7,8 @@ page Observability {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Observability
Use tracking middleware and sinks with redaction, sampling, stable request identifiers, alert ownership, and retention limits. Never capture registry tokens or session secrets.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/pages-and-components.wrn b/app/pages/guides/pages-and-components.wrn
index 1a128ed2..1d14fec8 100644
--- a/app/pages/guides/pages-and-components.wrn
+++ b/app/pages/guides/pages-and-components.wrn
@@ -7,8 +7,8 @@ page Pagesandcomponents {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Pages and components
Pages are routable, components are reusable, and layouts provide shared slots. Mount a component with data-component and keep browser state scoped and minimal.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/project-structure.wrn b/app/pages/guides/project-structure.wrn
index 7aa5f9ae..ecb9a851 100644
--- a/app/pages/guides/project-structure.wrn
+++ b/app/pages/guides/project-structure.wrn
@@ -7,8 +7,8 @@ page Projectstructure {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Project structure
Pages, components, layouts, APIs, middleware, schemas, database files, locales, realtime rooms, and styles live under app. Never edit app/routes.gen.ts, .wrnexus, or dist by hand.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/pubsub.wrn b/app/pages/guides/pubsub.wrn
index a09d1edf..c1f03f9f 100644
--- a/app/pages/guides/pubsub.wrn
+++ b/app/pages/guides/pubsub.wrn
@@ -7,8 +7,8 @@ page Pubsub {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Pub/sub
The in-process driver cannot cross processes. Use Redis where instances must share events, define channel ownership, and design for reconnects and duplicate delivery.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/queues.wrn b/app/pages/guides/queues.wrn
index 0e0ad504..c9a24ac9 100644
--- a/app/pages/guides/queues.wrn
+++ b/app/pages/guides/queues.wrn
@@ -7,8 +7,8 @@ page Queues {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Queues
Queue behavior is preview-level. Treat in-process work as non-durable, make handlers idempotent, cap retries, record failures, and choose a production persistence strategy.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/realtime.wrn b/app/pages/guides/realtime.wrn
index c59de7a7..d4b14ab7 100644
--- a/app/pages/guides/realtime.wrn
+++ b/app/pages/guides/realtime.wrn
@@ -7,8 +7,8 @@ page Realtime {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Realtime
defineRoom handles connection and messages. Validate message shapes, authorize subscriptions, restrict origins, bound payloads, and use pub/sub to scale across processes.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/routing.wrn b/app/pages/guides/routing.wrn
index 598ae6a0..ae515c0a 100644
--- a/app/pages/guides/routing.wrn
+++ b/app/pages/guides/routing.wrn
@@ -7,8 +7,8 @@ page Routing {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Routing
A page filename defines its URL; index maps to the directory root and bracket segments are dynamic parameters. API files under app/api expose HTTP method functions and receive a Context.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/security.wrn b/app/pages/guides/security.wrn
index a32c42d5..bc9d1cec 100644
--- a/app/pages/guides/security.wrn
+++ b/app/pages/guides/security.wrn
@@ -7,8 +7,8 @@ page Applicationsecurity {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Application security
Use CSP, CSRF, Trusted Types, session hardening, validation, origin checks, upload restrictions, encryption, request limits, and explicit CORS. See the security policy for reporting.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/server-data.wrn b/app/pages/guides/server-data.wrn
index cb6fbe7d..be1e5859 100644
--- a/app/pages/guides/server-data.wrn
+++ b/app/pages/guides/server-data.wrn
@@ -7,8 +7,8 @@ page Serverdata {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Server data
Use an ssr API binding, return the desired response field, and render it with a server #each block. Values are escaped. Avoid fetching private data through a route that lacks authorization.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/testing.wrn b/app/pages/guides/testing.wrn
index e90dab21..922a36c7 100644
--- a/app/pages/guides/testing.wrn
+++ b/app/pages/guides/testing.wrn
@@ -7,8 +7,8 @@ page Testing {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Testing
Use Bun tests and @wrnexus/test helpers. Cover server HTML, API status and validation, authorization failures, reactive behavior, and a production startup smoke test.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/troubleshooting.wrn b/app/pages/guides/troubleshooting.wrn
index 7690475a..7f3e7ecc 100644
--- a/app/pages/guides/troubleshooting.wrn
+++ b/app/pages/guides/troubleshooting.wrn
@@ -7,8 +7,8 @@ page Troubleshooting {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Troubleshooting
Confirm Bun and package versions, regenerate docs/routes through supported commands, read the first compiler diagnostic, check file naming, validate config, and reproduce under a production build.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/upgrading.wrn b/app/pages/guides/upgrading.wrn
index e94bdcb3..a62d5a74 100644
--- a/app/pages/guides/upgrading.wrn
+++ b/app/pages/guides/upgrading.wrn
@@ -7,8 +7,8 @@ page Upgrading {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Upgrading
Back up and commit first, then use wrnexus update --latest as documented by the installed CLI. Review migrations and keep every @wrnexus package aligned. Current release: 0.2.64.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/uploads.wrn b/app/pages/guides/uploads.wrn
index db52b4c3..8ee68897 100644
--- a/app/pages/guides/uploads.wrn
+++ b/app/pages/guides/uploads.wrn
@@ -7,8 +7,8 @@ page Uploads {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Uploads
Configure named stores, accepted MIME/extensions, and maxBytes. Random keys avoid path traversal. Private files require an authenticated serving route; v1 buffers each file in memory.
Release scope
This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Browse package APIs · Troubleshooting · Support

       
       
diff --git a/app/pages/guides/workspaces-and-gateway.wrn b/app/pages/guides/workspaces-and-gateway.wrn
index 8e6e37e0..10222440 100644
--- a/app/pages/guides/workspaces-and-gateway.wrn
+++ b/app/pages/guides/workspaces-and-gateway.wrn
@@ -7,8 +7,8 @@ page Workspacesandgateway {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Preview guide · 0.2.64
Workspaces and gateway
A workspace runs isolated applications behind one domain-routing gateway. Add an application from the workspace root; the CLI scaffolds apps/reports and registers it in wrnexus.workspace.ts:
wrnexus workspace add reports --domain=reports.localhost
 bun install
 bun run dev
Forward authentication
Point protected applications at a dedicated verifier endpoint. The verifier must return 2xx for an authenticated session, 401/403 to deny access, or an HTTP redirect to begin browser login.
// wrnexus.workspace.ts
diff --git a/app/pages/index.wrn b/app/pages/index.wrn
index be1c24c9..b11a6a1c 100644
--- a/app/pages/index.wrn
+++ b/app/pages/index.wrn
@@ -7,8 +7,8 @@ page Home {
   view {
     
     

-      
W WRNexusJS
Private preview · v0.2.64

-      
Menu

+      
W WRNexusJS
Private preview · v0.2.64

+      
Menu

       
WRNexusJS v0.2.64
Build from the server.
Ship only what matters.
WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the .wrn component language.
Request preview accessRead the preview docs
Private developer preview. Request access to the package registry.
app/pages/dashboard.wrn
page Dashboard {
   ssr { api tasks GET /api/tasks { return tasks } }
   view {
diff --git a/app/pages/language.wrn b/app/pages/language.wrn
index fb45a46d..f32e703e 100644
--- a/app/pages/language.wrn
+++ b/app/pages/language.wrn
@@ -7,8 +7,8 @@ page Thewrnlanguage {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
Language reference · 0.2.64
The .wrn language
File anatomy
page Account {
   layout = "public"
   seo { title = "Account" description = "Manage your account." }
diff --git a/app/pages/license.wrn b/app/pages/license.wrn
index 4a32085f..e2d1f3f8 100644
--- a/app/pages/license.wrn
+++ b/app/pages/license.wrn
@@ -7,8 +7,8 @@ page License {
   view {
     
     

-      
W WRNexusJS
Preview · v0.2.64

-      
Browse documentation

+      
W WRNexusJS
Preview · v0.2.64

+      
Browse documentation

       
License
Owner decision required
This documentation repository contains no public license file, and the packages are unavailable from the public npm registry. No open-source license or redistribution right should be inferred.
Approved preview users must follow the private/commercial terms supplied by WorkRoot. Contact WorkRoot before copying, redistributing, or using WRNexusJS in production.

       
       
diff --git a/app/pages/packages.wrn b/app/pages/packages.wrn
index 936ca419..c6ee1e1b 100644
--- a/app/pages/packages.wrn
+++ b/app/pages/packages.wrn
@@ -11,10 +11,10 @@ page Packages {
       
       

         W WRNexusJS
-        
+        
         
Private preview · v0.2.64

       

-      
Browse documentation

+      
Browse documentation

       
26 focused packages
Package reference
Everything in the framework, organized by responsibility and documented from the published 0.2.64 APIs.
Showing {category} packages

           AI
@wrnexus/ai
Server-side Anthropic client with generation and streaming.
Open documentation →
         
diff --git a/app/pages/packages/ai.wrn b/app/pages/packages/ai.wrn
index c71e17db..43a2833b 100644
--- a/app/pages/packages/ai.wrn
+++ b/app/pages/packages/ai.wrn
@@ -9,13 +9,12 @@ page wrnexusai {
       
       

         W WRNexusJS
-        
+        
         
Private preview · v0.2.64

       

-      
Browse documentation

-      

-      
-      
AI · Preview
@wrnexus/ai
Server-side Anthropic client with generation and streaming.
Private registry access required
This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
bun add @wrnexus/ai@0.2.64
Request preview access. Never put registry tokens in source control.
A tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps — generate and stream text with Claude from any server-side code.

+      
Browse documentation

+      

+      
AI · Package reference
@wrnexus/ai
Server-side Anthropic client with generation and streaming.
v0.2.64Private registryAI
Install the package
After WorkRoot approves private registry access, install the release-aligned package:
bun add @wrnexus/ai@0.2.64
Request preview access. Never put registry tokens in source control.
A tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps — generate and stream text with Claude from any server-side code.

 
Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.

 
Overview

 
@wrnexus/ai is a thin, dependency-free wrapper over the Anthropic Messages API, built on fetch (Bun-native, no SDK). Use it in API routes, jobs, or middleware to call Claude. It defaults to the most capable model, claude-opus-4-8, reads your key from ANTHROPIC_API_KEY, and supports both one-shot generation and streaming.

@@ -110,7 +109,7 @@ export const POST = async (ctx) => {
 
  • Zero dependencies — no @anthropic-ai/sdk; talks to the Messages API directly.
    • 
 
  • Defaults to claude-opus-4-8. Pass { model } for a different model (e.g.
    • 
 
    "claude-sonnet-5" for speed/cost, "claude-haiku-4-5" for the fastest).
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * @wrnexus/ai — a tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps.
  *
  * Use it in API routes, jobs, or anywhere server-side to generate text with Claude.
@@ -177,7 +176,7 @@ interface AI {
 declare function createAI(config?: AIConfig): AI;
 
 export { type AI, type AIConfig, AIError, type Effort, type GenerateOptions, type Message, type Role, createAI };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Return generated JSON from an API route
    // app/api/summarize.ts — summarize posted text
+
    Examples
    Copy-ready examples from the installed package documentation.
    Return generated JSON from an API route
    // app/api/summarize.ts — summarize posted text
 import { createAI } from "@wrnexus/ai";
 const ai = createAI();
 
diff --git a/app/pages/packages/authz.wrn b/app/pages/packages/authz.wrn
index e1b965bf..b7937fa6 100644
--- a/app/pages/packages/authz.wrn
+++ b/app/pages/packages/authz.wrn
@@ -9,13 +9,12 @@ page wrnexusauthz {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Security · Preview
    @wrnexus/authz
    Role, permission, policy, and authorization guards.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/authz@0.2.64
    Request preview access. Never put registry tokens in source control.
    Composable authorization for WRNexusJS — role-based (RBAC), policy-based (PBAC), and attribute-based (ABAC) access control that reduces to a boolean check plus an authorize() guard.
    
+      
    Browse documentation
    
+      
    
+      
    Security · Package reference
    @wrnexus/authz
    Role, permission, policy, and authorization guards.
    v0.2.64Private registrySecurity
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/authz@0.2.64
    Request preview access. Never put registry tokens in source control.
    Composable authorization for WRNexusJS — role-based (RBAC), policy-based (PBAC), and attribute-based (ABAC) access control that reduces to a boolean check plus an authorize() guard.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/authz is a small, server-side authorization toolkit. It gives you three interchangeable models — RBAC (roles → permissions), PBAC (policy predicates), and ABAC (attribute matchers) — that all collapse to a boolean | Promise<boolean> decision. Wrap any decision in a Middleware guard (authorize, requireRole, requirePermission) to protect WRNexusJS routes. Reach for it whenever a route or action needs to be gated on who the user is, what roles they hold, or attributes of the user and the resource. It plugs into @wrnexus/core by reading ctx.user as the authorization subject.
    
@@ -123,7 +122,7 @@ app.put(
 
  • Bun-only — like the rest of WRNexusJS, this package targets the Bun runtime; Node is not supported.
    • 
 
  • Works with [@wrnexus/core](../core) — the guards return Middleware and read the subject from ctx.user on the request Context. Both types are imported from @wrnexus/core.
    • 
 
  • Policy combinators (any, all) and authorize are async-aware, so policies may return a Promise<boolean> (e.g. for a database ownership check).
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { Context, Middleware } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { Context, Middleware } from '@wrnexus/core';
 
 /**
  * @wrnexus/authz — authorization: role-based (RBAC), policy-based (PBAC), and
@@ -169,7 +168,7 @@ declare function requireRole(...roles: string[]): Middleware;
 declare function requirePermission(rbac: Rbac, permission: string): Middleware;
 
 export { type Policy, type Rbac, type Subject, all, any, attr, authorize, defineRbac, hasRole, requirePermission, requireRole };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    RBAC
    import { defineRbac, hasRole } from "@wrnexus/authz";
+
    Examples
    Copy-ready examples from the installed package documentation.
    RBAC
    import { defineRbac, hasRole } from "@wrnexus/authz";
 
 const rbac = defineRbac({
   admin: ["*"],
diff --git a/app/pages/packages/cli.wrn b/app/pages/packages/cli.wrn
index 24e74d8b..19fe6905 100644
--- a/app/pages/packages/cli.wrn
+++ b/app/pages/packages/cli.wrn
@@ -9,13 +9,12 @@ page wrnexuscli {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Tooling · Preview
    @wrnexus/cli
    Create, develop, build, generate, test, and maintain WRNexusJS apps.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/cli@0.2.64
    Request preview access. Never put registry tokens in source control.
    The wrnexus command-line tool that scaffolds, runs, builds, tests, and manages WRNexusJS apps.
    
+      
    Browse documentation
    
+      
    
+      
    Tooling · Package reference
    @wrnexus/cli
    Create, develop, build, generate, test, and maintain WRNexusJS apps.
    v0.2.64Private registryTooling
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/cli@0.2.64
    Request preview access. Never put registry tokens in source control.
    The wrnexus command-line tool that scaffolds, runs, builds, tests, and manages WRNexusJS apps.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/cli provides the wrnexus executable — the single entry point for developing a WRNexusJS app. It runs the HMR dev server, produces a self-contained production build, scaffolds apps/pages/components, drives database migrations, regenerates typed routes and queries, runs tests, and manages configuration profiles. It also scaffolds multi-app monorepos and serves them behind a domain-routing gateway. This is a CLI/build-time package (it shells out to the Bun binary for the dev child and tests) and it also exports the workspace config types via a subpath.
    
@@ -138,8 +137,8 @@ export default config;
    
 
  • Bun-only. The CLI runs on Bun, spawns the Bun binary for the dev child and bun test, and the production build uses Bun.build. Node is not supported.
    • 
 
  • Orchestrates the rest of the framework: @wrnexus/dev-server (dev/prod server + gateway), @wrnexus/router (route + typed-routes codegen), @wrnexus/compiler (.wrn → .ts), @wrnexus/db (migrations, typed queries), @wrnexus/styles (config, profiles, .env, themes, styles), @wrnexus/ui (ejectable Wire UI components), @wrnexus/validation, @wrnexus/csr, and @wrnexus/i18n.
    • 
 
  • Reads wrnexus.config.ts for db / databases, theme, styles, seo, security, i18n, and profiles, and wrnexus.workspace.ts for the gateway.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    #!/usr/bin/env bun
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Create and run a single application
    bunx @wrnexus/cli create customer-portal
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    #!/usr/bin/env bun
+
    Examples
    Copy-ready examples from the installed package documentation.
    Create and run a single application
    bunx @wrnexus/cli create customer-portal
 cd customer-portal
 bun install
 bun run dev
    Add routes and shared UI to an existing app
    wrnexus generate page reports/monthly
diff --git a/app/pages/packages/compiler.wrn b/app/pages/packages/compiler.wrn
index 4d2db103..a87e46be 100644
--- a/app/pages/packages/compiler.wrn
+++ b/app/pages/packages/compiler.wrn
@@ -9,13 +9,12 @@ page wrnexuscompiler {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Core · Preview
    @wrnexus/compiler
    Parser and code generators for the .wrn language.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/compiler@0.2.64
    Request preview access. Never put registry tokens in source control.
    Compiler for the .wrn language — tokenizes, parses, and lowers .wrn page and component files to TypeScript.
    
+      
    Browse documentation
    
+      
    
+      
    Core · Package reference
    @wrnexus/compiler
    Parser and code generators for the .wrn language.
    v0.2.64Private registryCore
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/compiler@0.2.64
    Request preview access. Never put registry tokens in source control.
    Compiler for the .wrn language — tokenizes, parses, and lowers .wrn page and component files to TypeScript.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/compiler turns .wrn source into TypeScript that targets the framework's runtime primitives. A .wrn file declares either a page (a route) or a component (a reusable, prop-driven fragment) with blocks for state, view (plain HTML), seo, style, functions, api, ssr/client data bindings, and realtime websocket handlers. The pipeline is source → Lexer → parse() → PageAst → generate() → TypeScript. It is a build/server-side library — the WRNexusJS dev loader calls it to compile .wrn files on the fly, surfacing ParseError as a readable error page.
    
@@ -115,7 +114,7 @@ lx.next(); // { type: "lbrace", value: "{", pos: 1
 
      
 
    • Pure TypeScript with no runtime dependencies; runs under Bun as part of the WRNexusJS toolchain (Node is not supported).
      • 
 
    • Generated modules target WRNexusJS runtime primitives (data-scope, data-text, data-on-*, data-for, data-component, __wrnexus*/__wire* helpers) — consume the output within a WRNexusJS app, e.g. via @wrnexus/core's dev loader.
      • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * Recursive-descent parser for `.wrn`, producing a small AST.
  *
  * Grammar (subset of the vision, but real):
@@ -374,7 +373,7 @@ declare function compileWireFile(source: string, filePath?: string): string;
 declare function compile(source: string): CompileResult;
 
 export { type ApiBlock, type Attr, type CompileResult, type DataApiBlock, type DataMode, LexError, Lexer, type ModeFunctionsBlock, NativeCompileError, type PageAst, ParseError, type PropDecl, type RealtimeBlock, type SeoBlock, type StateDecl, type ViewNode, compile, compileNativeWireFile, compileWireFile, eraseFunctionTypes, generate, generateNative, inferredRuntimeType, parse, runtimeTypeOf };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Compile a page
    import { compileWireFile } from "@wrnexus/compiler";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Compile a page
    import { compileWireFile } from "@wrnexus/compiler";
 
 const ts = compileWireFile(`
 page Home {
diff --git a/app/pages/packages/core.wrn b/app/pages/packages/core.wrn
index 2a45e7fe..b8da13b3 100644
--- a/app/pages/packages/core.wrn
+++ b/app/pages/packages/core.wrn
@@ -9,13 +9,12 @@ page wrnexuscore {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Core · Preview
    @wrnexus/core
    Contexts, middleware, security, sessions, caching, JSX, and realtime.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/core@0.2.64
    Request preview access. Never put registry tokens in source control.
    The framework core: the request Context, middleware contract, and the security, session, caching, streaming, realtime, and JSX primitives every other WRNexusJS package builds on.
    
+      
    Browse documentation
    
+      
    
+      
    Core · Package reference
    @wrnexus/core
    Contexts, middleware, security, sessions, caching, JSX, and realtime.
    v0.2.64Private registryCore
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/core@0.2.64
    Request preview access. Never put registry tokens in source control.
    The framework core: the request Context, middleware contract, and the security, session, caching, streaming, realtime, and JSX primitives every other WRNexusJS package builds on.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/core is the shared foundation of WRNexusJS. It defines the Context object that flows through every middleware, page, and API route, plus the Middleware/Next contract they implement. On top of that it ships the building blocks a real app needs: cookie-backed sessions, password auth, CSRF protection, rate limiting, request logging, HTTP + in-memory caching, file uploads, streaming/SSE responses, WebSocket "rooms", security headers/CORS, and a server-side JSX runtime that renders to HTML strings. Everything here is server-side and Bun-native (it uses Bun.password, Bun.write, the web-standard Request/Response, and crypto). You depend on it directly and transitively through the rest of the framework.
    
@@ -210,7 +209,7 @@ return new Response(html.toString(), { headers: { "content-type&q
 
    compatible with [@wrnexus/pubsub](../pubsub); the security, auth, and JSX primitives here are consumed by the WRNexusJS server/router packages.
    
 
  • Subpath exports: @wrnexus/core/jsx-runtime and @wrnexus/core/jsx-dev-runtime
    • 
 
    for TypeScript's automatic JSX transform.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    export { Fragment, Html, Component as JSXComponent, Props as JSXProps, Renderable, jsx, jsxs, mustache } from './jsx-runtime.js';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    export { Fragment, Html, Component as JSXComponent, Props as JSXProps, Renderable, jsx, jsxs, mustache } from './jsx-runtime.js';
 
 interface CookieOptions {
     path?: string;
@@ -927,7 +926,7 @@ declare function resolveRequestUrl(req: Request, trustProxy?: boolean): URL;
 declare function withSecurityHeaders(req: Request, res: Response, mode: Mode, security?: SecurityConfig, nonce?: string): Response;
 
 export { type AsyncSessionBackend, type Bucket, CSRF_COOKIE, CSRF_HEADER, type CacheControlOptions, type ContentSecurityPolicyConfig, type Context, type CookieOptions, type CookieStore, type CorsConfig, type CorsOrigin, type CspDirectiveValue, type HstsConfig, type LocalStorageSnapshot, type Middleware, type Mode, type Next, type PageComponent, type PageMeta, type PermissionsPolicyConfig, type RateLimitOptions, type RateLimitStore, type RawSocket, type RealtimeBridge, type RealtimeBus, type RealtimeConnectMeta, type RealtimeEnvelope, type RealtimeHandler, type RealtimeRegistry, type RealtimeSocket, type RequestLoggerOptions, type RequestRecord, type RequireAuthOptions, type Room, type RoomAuthInfo, type RoomClient, type RoomDefinition, type RoomHandlers, SESSION_USER_KEY, type SaveUploadOptions, type SavedUpload, type SecurityConfig, type SeoConfig, type ServerSentEvent, type SessionBackend, type SessionEntry, type SessionStore, type StreamResponseInit, type TFunction, TTLCache, type Target, type TrustedTypesConfig, UploadError, bridgeRealtime, cacheControl, collectUploads, createContext, createCorsPreflightResponse, createRealtimeRegistry, csrfProtection, csrfToken, defaultKey, defineRoom, escapeHtml, etag, getUser, hashPassword, isRoomDefinition, isSafeIslandName, isSafeRequestPath, isWebSocketOriginAllowed, loadSession, logIn, logOut, notModified, peerKey, proxyKey, rateLimit, renderDevError, renderError, renderNotFound, renderProdError, renderStatusPage, requestLogger, requireAuth, resolveRequestUrl, sanitizeFilename, saveUpload, sessionAuth, setSessionBackend, sse, streamResponse, verifyCsrf, verifyPassword, withCacheControl, withContextHeaders, withSecurityHeaders };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    A minimal middleware chain
    import {
+
    Examples
    Copy-ready examples from the installed package documentation.
    A minimal middleware chain
    import {
   createContext,
   withContextHeaders,
   sessionAuth,
diff --git a/app/pages/packages/csr.wrn b/app/pages/packages/csr.wrn
index 0036be46..9d7696b9 100644
--- a/app/pages/packages/csr.wrn
+++ b/app/pages/packages/csr.wrn
@@ -9,13 +9,12 @@ page wrnexuscsr {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Frontend · Preview
    @wrnexus/csr
    Reactive, navigation, and realtime browser runtimes.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/csr@0.2.64
    Request preview access. Never put registry tokens in source control.
    The browser-side client runtime for WRNexusJS — generic, self-contained JS that hydrates server-rendered pages with reactivity, client-side navigation, and realtime rooms.
    
+      
    Browse documentation
    
+      
    
+      
    Frontend · Package reference
    @wrnexus/csr
    Reactive, navigation, and realtime browser runtimes.
    v0.2.64Private registryFrontend
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/csr@0.2.64
    Request preview access. Never put registry tokens in source control.
    The browser-side client runtime for WRNexusJS — generic, self-contained JS that hydrates server-rendered pages with reactivity, client-side navigation, and realtime rooms.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/csr holds the three client runtimes that WRNexusJS serves to the browser. Components are authored as .wrn files and rendered on the server; this package provides the single, generic runtime that hydrates that HTML in the browser — there are no per-component browser bundles. Each runtime is exported as a plain-JS string (no build step, no imports) intended to be served verbatim from a well-known URL:
    
@@ -131,7 +130,7 @@ room.send({ type: "chat", user: "ada", text: "hi&q
 
  • Browser runtimes are self-contained (no imports, no build step) and idempotent, so re-hydration after navigation or HMR is safe.
    • 
 
  • Designed for a strict CSP: the reactive expression evaluator avoids eval/new Function (no unsafe-eval), and DOM swaps use importNode/attribute writes rather than innerHTML (Trusted-Types friendly).
    • 
 
  • Peer packages: rendered .wrn components and the serving layer come from @wrnexus/core (the sole dependency); pages are rendered by the WRNexusJS dev/prod server.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * Browser reactive runtime (Point 2: reactive directives).
  *
  * Served verbatim at `/__wrnexus/reactive.js` for any page that contains a
@@ -207,7 +206,7 @@ declare function getNavRuntime(): string;
 declare function getRealtimeRuntime(): string;
 
 export { NAV_RUNTIME, REACTIVE_RUNTIME, REALTIME_RUNTIME, getNavRuntime, getReactiveRuntime, getRealtimeRuntime };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Server side — serve the runtime strings from your router (example with Bun.serve)
    import { getReactiveRuntime, getNavRuntime, getRealtimeRuntime } from "@wrnexus/csr";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Server side — serve the runtime strings from your router (example with Bun.serve)
    import { getReactiveRuntime, getNavRuntime, getRealtimeRuntime } from "@wrnexus/csr";
 
 const routes: Record<string, string> = {
   "/__wrnexus/reactive.js": getReactiveRuntime(),
diff --git a/app/pages/packages/db.wrn b/app/pages/packages/db.wrn
index bd81ec8d..c90ab2b5 100644
--- a/app/pages/packages/db.wrn
+++ b/app/pages/packages/db.wrn
@@ -9,13 +9,12 @@ page wrnexusdb {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Data · Preview
    @wrnexus/db
    Database adapters, typed queries, models, migrations, and sessions.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/db@0.2.64
    Request preview access. Never put registry tokens in source control.
    The database layer for WRNexusJS: TS models as the single source of truth for DDL, validation, and result typing, plus a driver-based Db client, migrations, and a sqlc-style query generator.
    
+      
    Browse documentation
    
+      
    
+      
    Data · Package reference
    @wrnexus/db
    Database adapters, typed queries, models, migrations, and sessions.
    v0.2.64Private registryData
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/db@0.2.64
    Request preview access. Never put registry tokens in source control.
    The database layer for WRNexusJS: TS models as the single source of truth for DDL, validation, and result typing, plus a driver-based Db client, migrations, and a sqlc-style query generator.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/db is the server-side data layer. You describe tables as TypeScript models (the v column builder + table()); those models drive migrations, coerce raw DB rows into typed objects, and feed the query generator. A thin Driver interface is implemented by adapters for SQLite (bun:sqlite), Postgres/MySQL (Bun.SQL), and MongoDB. The Db client adds ergonomics — model-mapped all/one, transactions, createTable, pagination, and batched relation loading. A process-wide registry (getDb/setDb) exposes configured connections to pages and API routes. Reach for it whenever a WRNexusJS app needs persistence.
    
@@ -150,7 +149,7 @@ const active = await repo.find({ active: true });
    
 
    SessionBackend; getDb/setDb are wired by the WRNexusJS runtime from wrnexus.config.ts.
    
 
  • The mongodb npm package is an optional, lazily-imported peer — install it
    • 
 
    only if you use @wrnexus/db/mongo. The core package stays dependency-free.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { M as Model } from './schema-tVurYsbL.js';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { M as Model } from './schema-tVurYsbL.js';
 export { B as BaseType, C as Column, a as ColumnDef, b as Columns, t as table, v } from './schema-tVurYsbL.js';
 import { a as Db, b as Dialect, R as Row } from './driver-DA53QHkO.js';
 export { D as Driver, E as ExecResult, T as TxHandle, c as createDb, d as createTableSql } from './driver-DA53QHkO.js';
@@ -303,7 +302,7 @@ interface RelationOptions<C> {
 declare function loadRelated<P extends Row, C extends Row = Row>(db: Db, parents: P[], opts: RelationOptions<C>): Promise<(P & Record<string, C | C[] | null>)[]>;
 
 export { Db, Dialect, type Migration, Model, type ModelRef, type PageOptions, type Paginated, type QueryDef, type QueryKind, type RelationOptions, Row, appliedMigrations, closeDatabases, databaseNames, generateQueriesFile, getDb, hasDb, loadMigrations, loadRelated, migrate, paginate, parseMigration, parseQueries, registerDb, rollback, scaffoldMigration, setDb, status };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Define models, connect, create tables, and query with typed results
    import { v, table, createDb } from "@wrnexus/db";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Define models, connect, create tables, and query with typed results
    import { v, table, createDb } from "@wrnexus/db";
 import { sqlite } from "@wrnexus/db/sqlite";
 
 const users = table<{ id: number; email: string; name: string | null }>("users", {
diff --git a/app/pages/packages/dev-server.wrn b/app/pages/packages/dev-server.wrn
index a78d2400..498ec918 100644
--- a/app/pages/packages/dev-server.wrn
+++ b/app/pages/packages/dev-server.wrn
@@ -9,13 +9,12 @@ page wrnexusdevserver {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Runtime · Preview
    @wrnexus/dev-server
    Development and production servers, HMR, assets, and gateways.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/dev-server@0.2.64
    Request preview access. Never put registry tokens in source control.
    The WRNexusJS HTTP + WebSocket server runtime — request dispatch, SSR document assembly, live-reload (HMR), and the portable production handler.
    
+      
    Browse documentation
    
+      
    
+      
    Runtime · Package reference
    @wrnexus/dev-server
    Development and production servers, HMR, assets, and gateways.
    v0.2.64Private registryRuntime
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/dev-server@0.2.64
    Request preview access. Never put registry tokens in source control.
    The WRNexusJS HTTP + WebSocket server runtime — request dispatch, SSR document assembly, live-reload (HMR), and the portable production handler.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    This package is the server runtime that powers a WRNexusJS app in both development and production. A single request runtime (createHandlers) owns HTTP/WebSocket dispatch and SSR document assembly; it knows nothing about _how_ modules and assets are produced, so the dev and prod entry points wire in different backends: dev uses dynamic module loading plus on-the-fly bundling and injects a live-reload client; prod uses a static, pre-built manifest with cache-immutable assets. The package also ships a multi-app gateway (route several apps by Host header behind one port) and a portable node:http adapter for WinterCG hosts. It is entirely server-side and Bun-native (Bun.serve, Bun.file, Bun.gzipSync).
    
@@ -227,7 +226,7 @@ await startGateway({
 
  • Responses are gzipped when the client accepts it and the body is a buffered, compressible payload ≥ 1 KB; streaming/SSE responses opt out via Cache-Control: no-transform.
    • 
 
    </content>
    
 
-
    </invoke>
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { Mode, Middleware, SeoConfig, SecurityConfig, RealtimeBus, RealtimeConnectMeta } from '@wrnexus/core';
+
    </invoke>
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { Mode, Middleware, SeoConfig, SecurityConfig, RealtimeBus, RealtimeConnectMeta } from '@wrnexus/core';
 import { Router } from '@wrnexus/router';
 import { ResolvedTheme, MobileConfig, PwaConfig, StylesConfig, ThemeConfig } from '@wrnexus/styles';
 import { ResolvedI18n, I18nConfig } from '@wrnexus/i18n';
@@ -655,7 +654,7 @@ interface RunningServer {
 declare function startServer(opts: ServeOptions): Promise<RunningServer>;
 
 export { type AssetServer, type FetchHandler, type GatewayApp, type GatewayAuth, type GatewayOptions, type GatewaySecurity, RESTART_EXIT_CODE, type RunningGateway, type RunningServer, type RuntimeDeps, type ServeOptions, type WsData, createHandlers, createProductionHandlers, createProductionServer, nodeListener, serveNode, startGateway, startServer, toRequest, writeResponse };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Programmatic dev server
    import { startServer } from "@wrnexus/dev-server";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Programmatic dev server
    import { startServer } from "@wrnexus/dev-server";
 
 const server = await startServer({
   appDir: "./app",
diff --git a/app/pages/packages/encryption.wrn b/app/pages/packages/encryption.wrn
index 33c610b1..9ed37cca 100644
--- a/app/pages/packages/encryption.wrn
+++ b/app/pages/packages/encryption.wrn
@@ -9,13 +9,12 @@ page wrnexusencryption {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Security · Preview
    @wrnexus/encryption
    Hashing, HMAC, authenticated encryption, and key derivation.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/encryption@0.2.64
    Request preview access. Never put registry tokens in source control.
    Dependency-free crypto helpers for WRNexusJS: authenticated symmetric encryption (AES-256-GCM), hashing, and HMAC signing.
    
+      
    Browse documentation
    
+      
    
+      
    Security · Package reference
    @wrnexus/encryption
    Hashing, HMAC, authenticated encryption, and key derivation.
    v0.2.64Private registrySecurity
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/encryption@0.2.64
    Request preview access. Never put registry tokens in source control.
    Dependency-free crypto helpers for WRNexusJS: authenticated symmetric encryption (AES-256-GCM), hashing, and HMAC signing.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    This package provides small, focused cryptographic primitives for server-side use: encrypting secrets/tokens/database fields at rest with AES-256-GCM, deriving keys from passwords via PBKDF2, computing SHA-256 digests, and signing/verifying payloads with HMAC-SHA256. It is built entirely on the standard Web Crypto API (crypto.subtle) plus btoa/atob and TextEncoder/TextDecoder — no third-party dependencies. Reach for it whenever you need to protect sensitive values or verify webhook signatures. All functions are async (Web Crypto is promise-based).
    
@@ -61,7 +60,7 @@ if (!ok) throw new Error("Invalid webhook signature");
    
 
  • No dependencies. The package has an empty dependency set; nothing is bundled beyond standard runtime APIs.
    • 
 
  • Algorithms: AES-256-GCM (encryption), PBKDF2 with 100k SHA-256 iterations (key derivation), SHA-256 (digest), HMAC-SHA256 (signing).
    • 
 
  • Keep generated/derived keys and HMAC secrets out of source control; treat them as first-class secrets.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * @wrnexus/encryption — authenticated symmetric encryption (AES-256-GCM) via
  * WebCrypto, dependency-free. Use it to encrypt secrets, tokens, or database
  * fields at rest.
@@ -91,7 +90,7 @@ declare function decrypt(payload: string, key: string): Promise<string>;
 declare function deriveKey(password: string, salt: string): Promise<string>;
 
 export { decrypt, deriveKey, encrypt, generateKey, hmacSign, hmacVerify, sha256 };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Symmetric encryption of a secret at rest
    import { generateKey, encrypt, decrypt } from "@wrnexus/encryption";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Symmetric encryption of a secret at rest
    import { generateKey, encrypt, decrypt } from "@wrnexus/encryption";
 
 const key = await generateKey(); // store this safely (env/secret manager)
 
diff --git a/app/pages/packages/helpers.wrn b/app/pages/packages/helpers.wrn
index 001b50ed..52a9c644 100644
--- a/app/pages/packages/helpers.wrn
+++ b/app/pages/packages/helpers.wrn
@@ -9,13 +9,12 @@ page wrnexushelpers {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Tooling · Preview
    @wrnexus/helpers
    Safe Context URL helpers and forward-auth login redirects.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/helpers@0.2.64
    Request preview access. Never put registry tokens in source control.
    Safe convenience helpers for common WRNexusJS application flows. The package uses standard Context, URL, and Response values and has no runtime dependency beyond @wrnexus/core.
    
+      
    Browse documentation
    
+      
    
+      
    Tooling · Package reference
    @wrnexus/helpers
    Safe Context URL helpers and forward-auth login redirects.
    v0.2.64Private registryTooling
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/helpers@0.2.64
    Request preview access. Never put registry tokens in source control.
    Safe convenience helpers for common WRNexusJS application flows. The package uses standard Context, URL, and Response values and has no runtime dependency beyond @wrnexus/core.
    
 
    bun add @wrnexus/helpers
    
 
    The package is private, so the machine must be authenticated to the wrnexus npm organization.
    
 
    Usage
    
@@ -60,7 +59,7 @@ export const GET = async (ctx: Context) => {
 
  • redirectToLogin(ctx, loginUrl, options): Response — create a login redirect with an
    • 
 
    encoded returnTo parameter.
    
 
-
    For direct requests without gateway headers, URL helpers use ctx.url.
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { Context } from '@wrnexus/core';
+
    For direct requests without gateway headers, URL helpers use ctx.url.
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { Context } from '@wrnexus/core';
 
 declare function appOrigin(appName: string): string;
 declare function appUrl(appName: string, path?: string): string;
@@ -110,7 +109,7 @@ declare function getOriginalRequestOrigin(ctx: RequestContext, options?: Origina
 declare function redirectToLogin(ctx: RequestContext, loginUrl: string | URL, options?: LoginRedirectOptions): Response;
 
 export { type AllowedHosts, type LoginRedirectOptions, type OriginalRequestOptions, type RequestContext, appOrigin, appUrl, currentAppName, currentAppOrigin, getOriginalRequestMethod, getOriginalRequestOrigin, getOriginalRequestPath, getOriginalRequestUrl, redirectToLogin, workspaceAppOrigins };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Redirect an unauthenticated forward-auth request
    import type { Context } from "@wrnexus/core";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Redirect an unauthenticated forward-auth request
    import type { Context } from "@wrnexus/core";
 import { redirectToLogin } from "@wrnexus/helpers";
 
 export const GET = async (ctx: Context) => {
diff --git a/app/pages/packages/i18n.wrn b/app/pages/packages/i18n.wrn
index cd029ccf..9b9710d3 100644
--- a/app/pages/packages/i18n.wrn
+++ b/app/pages/packages/i18n.wrn
@@ -9,13 +9,12 @@ page wrnexusi18n {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Frontend · Preview
    @wrnexus/i18n
    Translation loading, locale resolution, and Intl formatting.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/i18n@0.2.64
    Request preview access. Never put registry tokens in source control.
    Per-request translations plus locale-aware number, date, and currency formatting for WRNexusJS apps.
    
+      
    Browse documentation
    
+      
    
+      
    Frontend · Package reference
    @wrnexus/i18n
    Translation loading, locale resolution, and Intl formatting.
    v0.2.64Private registryFrontend
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/i18n@0.2.64
    Request preview access. Never put registry tokens in source control.
    Per-request translations plus locale-aware number, date, and currency formatting for WRNexusJS apps.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/i18n loads locale files from app/locales/<lang>.json, resolves the active language for each request (cookie → Accept-Language → default), and builds a t(key, params) translator used both in server code and in .wrn views. It also ships Intl-based formatting helpers and a tiny client runtime that wires up a language switcher. Translation lookup, language resolution, and HTML marker rewriting run server-side; only the small I18N_RUNTIME snippet runs in the browser.
    
@@ -114,7 +113,7 @@ plural(2, { one: "# item", other: "# items" }, lan
 
    comes from core, and the resolved translator is exposed as ctx.t / ctx.lang in request handling.
    
 
  • Nested message objects are supported: keys are looked up whole first, then split
    • 
 
    on . to walk the object tree.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { TFunction } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { TFunction } from '@wrnexus/core';
 
 /**
  * Locale-aware formatting helpers (Intl-based) + pluralization. Pair with the
@@ -182,7 +181,7 @@ declare function renderI18nData(i18n: ResolvedI18n, lang: string): string;
 declare const I18N_RUNTIME: string;
 
 export { I18N_JS_HREF, I18N_RUNTIME, type I18nConfig, LANG_COOKIE, type Messages, type ResolvedI18n, formatCurrency, formatDate, formatNumber, formatRelativeTime, loadLocales, makeT, plural, renderI18nData, resolveI18n, resolveLang, translateHtml };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Server: load, resolve, translate
    import {
+
    Examples
    Copy-ready examples from the installed package documentation.
    Server: load, resolve, translate
    import {
   loadLocales,
   resolveI18n,
   resolveLang,
diff --git a/app/pages/packages/jwt.wrn b/app/pages/packages/jwt.wrn
index a5e05252..dcb9ca38 100644
--- a/app/pages/packages/jwt.wrn
+++ b/app/pages/packages/jwt.wrn
@@ -9,13 +9,12 @@ page wrnexusjwt {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Security · Preview
    @wrnexus/jwt
    HS256 JWT signing, verification, and bearer authentication.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/jwt@0.2.64
    Request preview access. Never put registry tokens in source control.
    Dependency-free JSON Web Tokens (HS256) via Web Crypto, plus a bearer-token auth middleware for WRNexusJS.
    
+      
    Browse documentation
    
+      
    
+      
    Security · Package reference
    @wrnexus/jwt
    HS256 JWT signing, verification, and bearer authentication.
    v0.2.64Private registrySecurity
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/jwt@0.2.64
    Request preview access. Never put registry tokens in source control.
    Dependency-free JSON Web Tokens (HS256) via Web Crypto, plus a bearer-token auth middleware for WRNexusJS.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/jwt signs and verifies stateless JSON Web Tokens using the HS256 (HMAC-SHA-256) algorithm. It has no runtime dependencies — signing and verification are implemented directly on the standard Web Crypto API (crypto.subtle), which Bun provides natively. It runs server-side and pairs with the session-based auth in @wrnexus/core, giving you a stateless option for API and mobile clients. Reach for it when you need bearer-token auth rather than cookie sessions.
    
@@ -88,7 +87,7 @@ app.use(jwtAuth({ secret: process.env.JWT_SECRET!, required: false }))
 
    are not supported.
    
 
  • Integrates with [@wrnexus/core](../core) for Context, Middleware, and
    • 
 
    ctx.user; it complements the framework's cookie/session auth with a stateless bearer-token flow for API and mobile clients.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { Context, Middleware } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { Context, Middleware } from '@wrnexus/core';
 
 /**
  * @wrnexus/jwt — dependency-free JSON Web Tokens (HS256) via WebCrypto, plus a
@@ -139,7 +138,7 @@ interface JwtAuthOptions {
 declare function jwtAuth(options: JwtAuthOptions): Middleware;
 
 export { type JwtAuthOptions, type JwtClaims, JwtError, type SignOptions, jwtAuth, signJwt, verifyJwt };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Typical usage
    import { signJwt, verifyJwt, jwtAuth, JwtError } from "@wrnexus/jwt";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Typical usage
    import { signJwt, verifyJwt, jwtAuth, JwtError } from "@wrnexus/jwt";
 
 const secret = process.env.JWT_SECRET!;
 
diff --git a/app/pages/packages/mobile.wrn b/app/pages/packages/mobile.wrn
index 07b205e3..c4f66aa2 100644
--- a/app/pages/packages/mobile.wrn
+++ b/app/pages/packages/mobile.wrn
@@ -9,13 +9,12 @@ page wrnexusmobile {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Native · Preview
    @wrnexus/mobile
    SSR-safe compatibility access to Capacitor plugins.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/mobile@0.2.64
    Request preview access. Never put registry tokens in source control.
    SSR-safe access to Capacitor plugins from WRNexusJS browser code.
    
+      
    Browse documentation
    
+      
    
+      
    Native · Package reference
    @wrnexus/mobile
    SSR-safe compatibility access to Capacitor plugins.
    v0.2.64Private registryNative
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/mobile@0.2.64
    Request preview access. Never put registry tokens in source control.
    SSR-safe access to Capacitor plugins from WRNexusJS browser code.
    
 
    Overview
    
 
    @wrnexus/mobile keeps optional native imports out of server rendering while giving browser-owned modules one consistent registry for Capacitor plugins. During SSR, mobile.isNative() is false and mobile.platform() is "web".
    
 
    Install a plugin through the WRNexusJS CLI so the web and native projects stay aligned:
    
@@ -67,7 +66,7 @@ const status = network ? await network.getStatus() : { connected: true, con
 
  • Capacitor plugin imports must remain in browser-owned modules.
    • 
 
  • @wrnexus/mobile re-exports native from @wrnexus/native for applications that
    • 
 
    prefer the higher-level cross-platform capability API.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    export { native } from '@wrnexus/native';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    export { native } from '@wrnexus/native';
 
 /** @wrnexus/mobile — SSR-safe access to Capacitor's native bridge. */
 
@@ -105,7 +104,7 @@ declare const mobile: {
 };
 
 export { type CapacitorBridge, type MobilePlatform, MobileUnavailableError, invoke, isNative, mobile, platform, plugin, registerPlugin, requirePlugin, whenNative };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Register and invoke a Capacitor plugin
    import { Camera, CameraResultType } from "@capacitor/camera";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Register and invoke a Capacitor plugin
    import { Camera, CameraResultType } from "@capacitor/camera";
 import { mobile } from "@wrnexus/mobile";
 
 mobile.registerPlugin("Camera", Camera);
diff --git a/app/pages/packages/native.wrn b/app/pages/packages/native.wrn
index a9d8816b..6938baca 100644
--- a/app/pages/packages/native.wrn
+++ b/app/pages/packages/native.wrn
@@ -9,13 +9,12 @@ page wrnexusnative {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Native · Preview
    @wrnexus/native
    Cross-platform browser and Capacitor capability registry.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/native@0.2.64
    Request preview access. Never put registry tokens in source control.
    Cross-platform capabilities for browsers, Capacitor WebViews, and compiled native apps.
    
+      
    Browse documentation
    
+      
    
+      
    Native · Package reference
    @wrnexus/native
    Cross-platform browser and Capacitor capability registry.
    v0.2.64Private registryNative
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/native@0.2.64
    Request preview access. Never put registry tokens in source control.
    Cross-platform capabilities for browsers, Capacitor WebViews, and compiled native apps.
    
 
    Overview
    
 
    @wrnexus/native exposes capabilities by name so application code can ask what the current platform supports before presenting an action. Browser capabilities use Web APIs; mobile capabilities use installed Capacitor plugins. platform() returns "server" during SSR, "browser" on the web, and the Capacitor platform in a native WebView.
    
 
    bun add @wrnexus/native
    
@@ -66,7 +65,7 @@ const position = await native.run(
 
 
    Built-ins include camera, clipboard.write, share, geolocation, network, haptics, storage, filesystem, notifications, and device information.
    
 
    Requirements / Notes
    
-
    Use supports() before showing optional controls. Mobile capabilities require their matching Capacitor plugins to be installed and registered by the application.
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { N as NativePlatform, a as NativeCapability, b as NativeRunOptions, c as NativeTarget } from './types-CDShWg0i.js';
+
    Use supports() before showing optional controls. Mobile capabilities require their matching Capacitor plugins to be installed and registered by the application.
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { N as NativePlatform, a as NativeCapability, b as NativeRunOptions, c as NativeTarget } from './types-CDShWg0i.js';
 export { d as NativeAdapter, e as NativeBrowserRuntime } from './types-CDShWg0i.js';
 export { browserCapabilities } from './browser.js';
 export { mobileCapabilities } from './mobile.js';
@@ -92,7 +91,7 @@ declare const native: {
 };
 
 export { NativeCapability, NativePlatform, NativeRunOptions, NativeTarget, NativeUnavailableError, clearRegistry, isMobile, native, platform, register, registered, run, supports };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Share a page when the platform supports it
    import { native } from "@wrnexus/native";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Share a page when the platform supports it
    import { native } from "@wrnexus/native";
 
 export async function shareCurrentPage() {
   if (!native.supports("share")) return false;
diff --git a/app/pages/packages/oauth.wrn b/app/pages/packages/oauth.wrn
index 819d8cf0..8834ebd7 100644
--- a/app/pages/packages/oauth.wrn
+++ b/app/pages/packages/oauth.wrn
@@ -9,13 +9,12 @@ page wrnexusoauth {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Security · Preview
    @wrnexus/oauth
    OAuth 2.0, PKCE, provider presets, and profile mapping.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/oauth@0.2.64
    Request preview access. Never put registry tokens in source control.
    Dependency-free OAuth 2.0 sign-in for any provider, with PKCE and presets for Google, GitHub, and Discord.
    
+      
    Browse documentation
    
+      
    
+      
    Security · Package reference
    @wrnexus/oauth
    OAuth 2.0, PKCE, provider presets, and profile mapping.
    v0.2.64Private registrySecurity
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/oauth@0.2.64
    Request preview access. Never put registry tokens in source control.
    Dependency-free OAuth 2.0 sign-in for any provider, with PKCE and presets for Google, GitHub, and Discord.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/oauth implements the OAuth 2.0 Authorization Code flow (with PKCE) for server-side sign-in. It ships ready-made provider presets and a defineProvider helper for custom providers, then gives you two flow functions — startAuth (build the redirect) and completeAuth (exchange the code and fetch the user's profile). It has no runtime dependencies: it uses the platform fetch and WebCrypto only. Pairs naturally with @wrnexus/core's logIn to establish a session once you have a normalized profile.
    
@@ -147,7 +146,7 @@ const gitlab = defineProvider({
 
    verifier between startAuth and completeAuth (session or signed cookie).
    
 
  • Pairs with [@wrnexus/core](../core) — feed the normalized OAuthProfile into
    • 
 
    logIn to establish a session.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * @wrnexus/oauth — OAuth 2.0 sign-in with any provider. Ships presets for Google,
  * GitHub, and Discord, and `defineProvider` for a custom one. Dependency-free
  * (uses `fetch` + WebCrypto for PKCE). Pairs with @wrnexus/core's `logIn`.
@@ -237,7 +236,7 @@ declare function exchangeCode(provider: OAuthProvider, options: CompleteAuthOpti
 declare function fetchProfile(provider: OAuthProvider, tokens: OAuthTokens, fetchImpl?: FetchLike): Promise<OAuthProfile>;
 
 export { type CompleteAuthOptions, type OAuthProfile, type OAuthProvider, type OAuthTokens, type ProviderCredentials, type StartAuthOptions, type StartAuthResult, completeAuth, defineProvider, discord, exchangeCode, fetchProfile, github, google, randomToken, startAuth };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Typical usage
    import { google, startAuth, completeAuth } from "@wrnexus/oauth";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Typical usage
    import { google, startAuth, completeAuth } from "@wrnexus/oauth";
 import { logIn } from "@wrnexus/core";
 
 const provider = google({
diff --git a/app/pages/packages/pubsub.wrn b/app/pages/packages/pubsub.wrn
index c083caea..05019f77 100644
--- a/app/pages/packages/pubsub.wrn
+++ b/app/pages/packages/pubsub.wrn
@@ -9,13 +9,12 @@ page wrnexuspubsub {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Realtime · Preview
    @wrnexus/pubsub
    In-process and Redis-backed publish/subscribe.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/pubsub@0.2.64
    Request preview access. Never put registry tokens in source control.
    Topic-based publish/subscribe with a pluggable driver — in-process by default, Redis for cross-process messaging.
    
+      
    Browse documentation
    
+      
    
+      
    Realtime · Package reference
    @wrnexus/pubsub
    In-process and Redis-backed publish/subscribe.
    v0.2.64Private registryRealtime
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/pubsub@0.2.64
    Request preview access. Never put registry tokens in source control.
    Topic-based publish/subscribe with a pluggable driver — in-process by default, Redis for cross-process messaging.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/pubsub is a small server-side pub/sub bus. You publish messages to a topic and subscribe with topic patterns; handlers fire for matching topics. The default driver keeps everything in-process, and you can swap in the Redis driver (@wrnexus/pubsub/redis) to fan messages out across processes or hosts. It also backs @wrnexus/core's realtime bridge for horizontal scaling.
    
@@ -95,7 +94,7 @@ driver.close();
    
 
  • The Redis driver reads REDIS_URL from the environment when no url is passed.
    • 
 
  • Backs [@wrnexus/core](../core)'s realtime bridge for horizontal scaling.
    • 
 
  • No external npm dependencies — the Redis client is a self-contained RESP codec.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * @wrnexus/pubsub — topic-based publish/subscribe with a pluggable driver.
  * The default is in-process; swap in a Redis/NATS driver for cross-instance
  * messaging (it also backs @wrnexus/core's realtime bridge).
@@ -121,7 +120,7 @@ declare function memoryDriver(): PubSubDriver;
 declare function createPubSub(driver?: PubSubDriver): PubSub;
 
 export { type Handler, type PubSub, type PubSubDriver, createPubSub, memoryDriver };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    In-process (default)
    import { createPubSub } from "@wrnexus/pubsub";
+
    Examples
    Copy-ready examples from the installed package documentation.
    In-process (default)
    import { createPubSub } from "@wrnexus/pubsub";
 
 const bus = createPubSub();
 
diff --git a/app/pages/packages/queue.wrn b/app/pages/packages/queue.wrn
index 53c3ce62..e8fd2fc2 100644
--- a/app/pages/packages/queue.wrn
+++ b/app/pages/packages/queue.wrn
@@ -9,13 +9,12 @@ page wrnexusqueue {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Data · Preview
    @wrnexus/queue
    Background jobs with delay, concurrency, retry, and repetition.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/queue@0.2.64
    Request preview access. Never put registry tokens in source control.
    A background job queue with delays, retries + exponential backoff, recurring jobs, and concurrent workers.
    
+      
    Browse documentation
    
+      
    
+      
    Data · Package reference
    @wrnexus/queue
    Background jobs with delay, concurrency, retry, and repetition.
    v0.2.64Private registryData
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/queue@0.2.64
    Request preview access. Never put registry tokens in source control.
    A background job queue with delays, retries + exponential backoff, recurring jobs, and concurrent workers.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/queue is a server-side in-process job queue. You register named workers, enqueue jobs (optionally delayed or recurring), and let the queue poll and run them on a timer — with per-job retry limits and doubling backoff between attempts. The default store lives in memory; the design allows a pluggable driver to back it with Redis/SQL for durability across restarts. Reach for it when you need to defer work (emails, webhooks, cleanup) off the request path without a heavyweight external broker. Tests can drive it deterministically via drain().
    
@@ -106,7 +105,7 @@ const ran = await queue.drain(); // => 1
    
 
  • The default store is in-process, so queued jobs do not survive a restart; a
    • 
 
    pluggable driver is intended for backing it with Redis/SQL for durability.
    
 
  • Works alongside @wrnexus/core for offloading work from the request path.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * @wrnexus/queue — a background job queue with delays, retries + backoff, and
  * concurrent workers. The default store is in-process; a pluggable driver lets
  * you back it with Redis/SQL for durability across restarts.
@@ -161,7 +160,7 @@ interface Queue {
 declare function createQueue(options?: QueueOptions): Queue;
 
 export { type AddOptions, type Job, type JobHandler, type Queue, type QueueOptions, createQueue };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Register workers, enqueue jobs, then start the poller
    import { createQueue } from "@wrnexus/queue";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Register workers, enqueue jobs, then start the poller
    import { createQueue } from "@wrnexus/queue";
 
 const queue = createQueue({ maxAttempts: 3, backoffMs: 1000 });
 
diff --git a/app/pages/packages/reactive.wrn b/app/pages/packages/reactive.wrn
index 322b473e..e6da851c 100644
--- a/app/pages/packages/reactive.wrn
+++ b/app/pages/packages/reactive.wrn
@@ -9,13 +9,12 @@ page wrnexusreactive {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Frontend · Preview
    @wrnexus/reactive
    Small type-safe reactive signal primitives.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/reactive@0.2.64
    Request preview access. Never put registry tokens in source control.
    Tiny, type-safe reactive primitives (signals) with zero dependencies.
    
+      
    Browse documentation
    
+      
    
+      
    Frontend · Package reference
    @wrnexus/reactive
    Small type-safe reactive signal primitives.
    v0.2.64Private registryFrontend
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/reactive@0.2.64
    Request preview access. Never put registry tokens in source control.
    Tiny, type-safe reactive primitives (signals) with zero dependencies.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/reactive is the seed of WRNexusJS's reactivity layer: a minimal signal primitive that holds a value, notifies subscribers when it changes, and hands back an unsubscribe function. It is deliberately small and framework-agnostic — it powers nothing on its own, but is shaped so client islands (and later the .wrn compiler's state blocks) can build reactive bindings on top of it. Reach for it when you need observable state without pulling in a full reactivity library.
    
@@ -76,7 +75,7 @@ user.set({ name: "Ada" });
    
 
  • Zero dependencies. The only runtime API used is the standard Object.is.
    • 
 
  • Foundational primitive for WRNexusJS client islands and the forthcoming .wrn
    • 
 
    compiler state blocks.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * A minimal, type-safe reactive signal with zero dependencies.
  *
  * This is the seed of the framework's reactivity. Today it powers nothing on
@@ -104,7 +103,7 @@ interface Signal<T> {
 declare function signal<T>(initial: T): Signal<T>;
 
 export { type Signal, type Subscriber, type Unsubscribe, signal };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Typical usage
    import { signal } from "@wrnexus/reactive";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Typical usage
    import { signal } from "@wrnexus/reactive";
 
 const count = signal(0);
 
diff --git a/app/pages/packages/router.wrn b/app/pages/packages/router.wrn
index 70437914..830b87ba 100644
--- a/app/pages/packages/router.wrn
+++ b/app/pages/packages/router.wrn
@@ -9,13 +9,12 @@ page wrnexusrouter {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Core · Preview
    @wrnexus/router
    Filesystem discovery, route matching, and typed route generation.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/router@0.2.64
    Request preview access. Never put registry tokens in source control.
    File-based router that maps an app/ directory onto route tables and matches request paths against them.
    
+      
    Browse documentation
    
+      
    
+      
    Core · Package reference
    @wrnexus/router
    Filesystem discovery, route matching, and typed route generation.
    v0.2.64Private registryCore
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/router@0.2.64
    Request preview access. Never put registry tokens in source control.
    File-based router that maps an app/ directory onto route tables and matches request paths against them.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/router scans an application's app/ directory once at startup and builds route tables for pages, API endpoints, realtime channels, middleware, server-rendered .wrn components, layouts, and validation schemas. It also compiles URL patterns (/users/[id]) into RegExps and matches request paths against them. Request input is never turned into a file path, which makes the router immune to path traversal. This is a server-side package used by the WRNexusJS runtime to resolve incoming requests, plus a codegen helper for compile-time typed links.
    
@@ -131,7 +130,7 @@ const m = matchRoute(routes, "/posts/hello"); // { route, params:
 
  • Depends on [@wrnexus/compiler](../compiler) to parse .wrn pages and extract embedded api / realtime blocks.
    • 
 
  • Depends on [@wrnexus/core](../core) for isSafeIslandName (name validation) and the Middleware type.
    • 
 
  • Missing route directories are tolerated — a route kind you don't use simply yields an empty table.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    export { Middleware } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    export { Middleware } from '@wrnexus/core';
 
 /**
  * Route compilation + matching.
@@ -220,7 +219,7 @@ interface RouterOptions {
 declare function buildRouter(appDir: string, opts?: RouterOptions): Router;
 
 export { type ComponentRef, type Route, type RouteMatch, type Router, type RouterOptions, buildRouter, compileRoutePattern, generateRoutesFile, matchRoute, sortRoutes };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Typical usage
    import { buildRouter } from "@wrnexus/router";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Typical usage
    import { buildRouter } from "@wrnexus/router";
 
 const router = buildRouter("./app", {
   componentDirs: ["./node_modules/@wrnexus/ui/components"],
diff --git a/app/pages/packages/ssr.wrn b/app/pages/packages/ssr.wrn
index f0f59302..a8e65415 100644
--- a/app/pages/packages/ssr.wrn
+++ b/app/pages/packages/ssr.wrn
@@ -9,13 +9,12 @@ page wrnexusssr {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Runtime · Preview
    @wrnexus/ssr
    Secure HTML document rendering and SEO metadata.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/ssr@0.2.64
    Request preview access. Never put registry tokens in source control.
    Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <head>.
    
+      
    Browse documentation
    
+      
    
+      
    Runtime · Package reference
    @wrnexus/ssr
    Secure HTML document rendering and SEO metadata.
    v0.2.64Private registryRuntime
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/ssr@0.2.64
    Request preview access. Never put registry tokens in source control.
    Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <head>.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    Pages in WRNexusJS return an HTML string for the body. @wrnexus/ssr takes that body and produces a full HTML document — building the <head> from page metadata and global SEO defaults, resolving canonical/Open Graph/Twitter tags, and injecting module preloads and <script type="module"> tags. It is deliberately server-only: nothing in this package touches the DOM or ships to the browser, keeping server code genuinely server-only. Reach for it on the server when turning a rendered page body into a response document.
    
@@ -96,7 +95,7 @@ return new Response(html, { headers: { "content-type": "
 
  • Server-only. This module never imports or touches the DOM and is safe to keep out of client bundles.
    • 
 
  • Depends on [@wrnexus/core](../core) for escapeHtml and the PageMeta / SeoConfig types.
    • 
 
  • Bun-only — like the rest of WRNexusJS, this package targets the Bun runtime (Node is not supported).
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { PageMeta, SeoConfig } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { PageMeta, SeoConfig } from '@wrnexus/core';
 
 /**
  * @wrnexus/ssr — server-side rendering.
@@ -139,7 +138,7 @@ interface RenderOptions {
 declare function renderDocument(opts: RenderOptions): string;
 
 export { type RenderOptions, renderDocument };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Render an SEO-ready application page
    import { renderDocument } from "@wrnexus/ssr";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Render an SEO-ready application page
    import { renderDocument } from "@wrnexus/ssr";
 
 const html = renderDocument({
   meta: {
diff --git a/app/pages/packages/styles.wrn b/app/pages/packages/styles.wrn
index 84fe141f..1fb4e7f2 100644
--- a/app/pages/packages/styles.wrn
+++ b/app/pages/packages/styles.wrn
@@ -9,13 +9,12 @@ page wrnexusstyles {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Frontend · Preview
    @wrnexus/styles
    CSS pipeline, themes, fonts, profiles, and application config.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/styles@0.2.64
    Request preview access. Never put registry tokens in source control.
    Global CSS bundling, the --wire-* design-token theme system, and the wrnexus.config.ts app-config loader for WRNexusJS apps.
    
+      
    Browse documentation
    
+      
    
+      
    Frontend · Package reference
    @wrnexus/styles
    CSS pipeline, themes, fonts, profiles, and application config.
    v0.2.64Private registryFrontend
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/styles@0.2.64
    Request preview access. Never put registry tokens in source control.
    Global CSS bundling, the --wire-* design-token theme system, and the wrnexus.config.ts app-config loader for WRNexusJS apps.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    This package owns three server-side concerns that shape every page a WRNexusJS app renders:
    
@@ -176,7 +175,7 @@ const themeJs = renderThemeRuntime(theme); // served at THEME_JS_HREF    Config and env loading use node:fs / node:path / node:url and read from process.env.
 
  • Peer package: @wrnexus/core supplies the SeoConfig and SecurityConfig types referenced by AppConfig.
    • 
 
  • The bundled global stylesheet, the theme stylesheet (THEME_CSS_HREF), and the theme runtime (THEME_JS_HREF) are wired into pages by the framework's server; this package only produces their contents.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { SeoConfig, SecurityConfig } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { SeoConfig, SecurityConfig } from '@wrnexus/core';
 import { StorageConfig } from '@wrnexus/uploader';
 
 /**
@@ -544,7 +543,7 @@ declare function bundleCss(entryPath: string, mode: Mode): Promise<string>
 declare function renderStyles(ctx: StyleProcessContext, styles?: StylesConfig): Promise<string>;
 
 export { type AppConfig, type CustomThemePalette, DEFAULT_THEMES, type FontConfig, type FontDisplay, type GoogleFont, type LocalFontFace, type MobileConfig, type Mode, type PwaConfig, type ResolvedTheme, type StyleProcessContext, type StylesConfig, type Mode as StylesMode, THEME_COOKIE, THEME_CSS_HREF, THEME_JS_HREF, THEME_PALETTES, THEME_PALETTE_NAMES, type ThemeConfig, type ThemePaletteName, type ThemeTokens, bundleCss, findStyleEntry, fontCspSources, headToString, loadAppConfig, loadEnv, loadRawConfig, renderFontHead, renderProductionFontHead, renderStyles, renderThemeCss, renderThemeRuntime, resolveProfile, resolveThemeConfig, resolveThemeName };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    wrnexus.config.ts
    import type { AppConfig } from "@wrnexus/styles";
+
    Examples
    Copy-ready examples from the installed package documentation.
    wrnexus.config.ts
    import type { AppConfig } from "@wrnexus/styles";
 
 export default {
   head: [
diff --git a/app/pages/packages/test.wrn b/app/pages/packages/test.wrn
index 1d758a78..91ea10ac 100644
--- a/app/pages/packages/test.wrn
+++ b/app/pages/packages/test.wrn
@@ -9,13 +9,12 @@ page wrnexustest {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Tooling · Preview
    @wrnexus/test
    WRNexusJS-aware component, route, and browser testing utilities.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/test@0.2.64
    Request preview access. Never put registry tokens in source control.
    Testing utilities for WRNexusJS apps — component rendering, reactive-DOM mounting, route handler calls, and a full in-process app harness, plus a one-import re-export of bun:test.
    
+      
    Browse documentation
    
+      
    
+      
    Tooling · Package reference
    @wrnexus/test
    WRNexusJS-aware component, route, and browser testing utilities.
    v0.2.64Private registryTooling
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/test@0.2.64
    Request preview access. Never put registry tokens in source control.
    Testing utilities for WRNexusJS apps — component rendering, reactive-DOM mounting, route handler calls, and a full in-process app harness, plus a one-import re-export of bun:test.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/test is the server-side test toolkit you reach for when writing tests for a WRNexusJS app. It runs under bun test (invoked via wrnexus test) and gives you a single import surface: the bun:test primitives (test, expect, mock, …) re-exported alongside WRNexusJS-aware helpers that compile .wrn components, hydrate server HTML in a DOM, invoke API route handlers, and boot the real app on an ephemeral port for integration tests.
    
@@ -100,7 +99,7 @@ test("health endpoint", async () => {
 
    lazily; it's a dev dependency, not a runtime dependency of this package).
    
 
  • Works with the rest of the WRNexusJS toolchain:
    • 
 
    [@wrnexus/compiler](../compiler) (compiles .wrn sources), [@wrnexus/core](../core) (Context / createContext), [@wrnexus/csr](../csr) (reactive runtime for mountHtml), [@wrnexus/dev-server](../dev-server) (startServer behind createHarness), and [@wrnexus/styles](../styles) (config/env/profile loading for the harness).
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { Context } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { Context } from '@wrnexus/core';
 export { createContext } from '@wrnexus/core';
 export { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, mock, spyOn, test } from 'bun:test';
 
@@ -160,7 +159,7 @@ interface HarnessOptions {
 declare function createHarness(projectRoot: string, options?: HarnessOptions): Promise<Harness>;
 
 export { type Harness, type HarnessOptions, callRoute, createHarness, mountHtml, renderComponent };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Typical usage
    import { test, expect, renderComponent, mountHtml, createHarness } from "@wrnexus/test";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Typical usage
    import { test, expect, renderComponent, mountHtml, createHarness } from "@wrnexus/test";
 
 test("counter renders its label", async () => {
   const html = await renderComponent(SRC, { start: 3, label: "Hits" });
diff --git a/app/pages/packages/tracking.wrn b/app/pages/packages/tracking.wrn
index 4752f284..7c311fee 100644
--- a/app/pages/packages/tracking.wrn
+++ b/app/pages/packages/tracking.wrn
@@ -9,13 +9,12 @@ page wrnexustracking {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Runtime · Preview
    @wrnexus/tracking
    Error/event capture, middleware, filtering, and sinks.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/tracking@0.2.64
    Request preview access. Never put registry tokens in source control.
    Error tracking for WRNexusJS apps: capture exceptions manually or via middleware and fan them out to pluggable sinks.
    
+      
    Browse documentation
    
+      
    
+      
    Runtime · Package reference
    @wrnexus/tracking
    Error/event capture, middleware, filtering, and sinks.
    v0.2.64Private registryRuntime
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/tracking@0.2.64
    Request preview access. Never put registry tokens in source control.
    Error tracking for WRNexusJS apps: capture exceptions manually or via middleware and fan them out to pluggable sinks.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/tracking is a small, server-side error-capture layer. You create a tracker with one or more sinks, then feed it errors — either manually with tracker.capture(err, context) or automatically by mounting tracker.middleware() in your request pipeline. A consoleSink is included; forwarding to Sentry, Datadog, or any other backend is just a matter of writing a tiny sink. Reach for it when you want a single, sink-agnostic place to route application errors. Sinks run best-effort — a throwing sink never breaks the request.
    
@@ -91,7 +90,7 @@ tracker.addSink(anotherSink); // add more sinks later
    
 
    used by tracker.middleware() come from there.
    
 
  • Sink dispatch is fire-and-forget-safe: all sinks run via Promise.all, and a
    • 
 
    sink that throws is swallowed so it can never break the app.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { Middleware } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { Middleware } from '@wrnexus/core';
 
 /**
  * @wrnexus/tracking — error tracking with pluggable sinks. Capture exceptions
@@ -131,7 +130,7 @@ declare const consoleSink: ErrorSink;
 declare function createTracker(options?: TrackerOptions): Tracker;
 
 export { type ErrorEvent, type ErrorSink, type Tracker, type TrackerOptions, consoleSink, createTracker };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Manual capture
    import { createTracker, consoleSink } from "@wrnexus/tracking";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Manual capture
    import { createTracker, consoleSink } from "@wrnexus/tracking";
 
 const tracker = createTracker({ sinks: [consoleSink] });
 
diff --git a/app/pages/packages/ui.wrn b/app/pages/packages/ui.wrn
index e2685748..73f1600a 100644
--- a/app/pages/packages/ui.wrn
+++ b/app/pages/packages/ui.wrn
@@ -9,13 +9,12 @@ page wrnexusui {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Frontend · Preview
    @wrnexus/ui
    Themeable server-rendered UI components and CSS.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/ui@0.2.64
    Request preview access. Never put registry tokens in source control.
    First-party Wire UI component library — a set of themeable .wrn components plus a single tokenized stylesheet.
    
+      
    Browse documentation
    
+      
    
+      
    Frontend · Package reference
    @wrnexus/ui
    Themeable server-rendered UI components and CSS.
    v0.2.64Private registryFrontend
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/ui@0.2.64
    Request preview access. Never put registry tokens in source control.
    First-party Wire UI component library — a set of themeable .wrn components plus a single tokenized stylesheet.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    @wrnexus/ui ships a library of server-rendered .wrn components (layout, form controls, and feedback UI) together with one themeable stylesheet, ui.css. The components are auto-discovered by the framework router — you don't import them in code. Once the package's component directory is on the router's scan path, you mount any component in a page with data-component="<name>". Every visual is driven by var(--wire-*) theme tokens, so components restyle instantly when the theme changes. The tiny JS surface (src/index.ts) exists only so the toolchain (CLI build + dev server) can locate the component directory and stylesheet.
    
@@ -97,7 +96,7 @@ const router = buildRouter(appDir, { componentDirs: [uiComponentsDir()] 
 
  • Depends on [@wrnexus/core](../core) (dependencies).
    • 
 
  • theme-toggle relies on the framework's theme runtime, which binds the
    • 
 
    data-wire-theme-toggle attribute — no per-component JS is required.
    
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * @wrnexus/ui — the Wire UI component library.
  *
  * Components are `.wrn` files under `components/`, auto-discovered by the
@@ -122,15 +121,15 @@ declare function uiCss(): string;
 declare function uiComponentNames(): string[];
 
 export { uiComponentNames, uiComponentsDir, uiCss, uiCssPath };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Auto-discovery
    import { buildRouter } from "@wrnexus/router";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Auto-discovery
    import { buildRouter } from "@wrnexus/router";
 import { uiComponentsDir } from "@wrnexus/ui";
 
 const router = buildRouter(appDir, { componentDirs: [uiComponentsDir()] });
    Mounting components in a page
    <div data-component="card">
   <div data-component="badge" label="New"></div>
   <button data-component="button" label="Save" variant="primary" size="lg"></button>
   <div data-component="alert" variant="success" title="Done" message="Saved."></div>
-</div>
    All 901 UI components and props
    This reference is generated from the exact installed .wrn sources. Required props have no default; optional props show their default value.
    Actions
    ComponentPropsSlotsEvents
    AcceptAllCookiesButton
    data-component="AcceptAllCookiesButton"
    Reusable accept all cookies button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ArticleNewsletterCTA
    data-component="ArticleNewsletterCTA"
    Reusable article newsletter c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ArticleShareActions
    data-component="ArticleShareActions"
    Reusable article share actions component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    BackButton
    data-component="BackButton"
    Reusable back button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    Button
    data-component="Button"
    Reusable button component.    		label: string = "Button"
    type: string = "button"
    variant: string = "primary"
    size: string = "md"
    disabled: boolean = false
    loading: boolean = false
    icon: string = ""
    className: string = ""    		NoneNone
    CenteredCTA
    data-component="CenteredCTA"
    Reusable centered c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ClearFiltersButton
    data-component="ClearFiltersButton"
    Reusable clear filters button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    CloseButton
    data-component="CloseButton"
    Reusable close button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    CodeCopyButton
    data-component="CodeCopyButton"
    Reusable code copy button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ContactCTA
    data-component="ContactCTA"
    Reusable contact c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ContactSalesButton
    data-component="ContactSalesButton"
    Reusable contact sales button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    CopyButton
    data-component="CopyButton"
    Reusable copy button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    CopyCodeButton
    data-component="CopyCodeButton"
    Reusable copy code button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    DangerButton
    data-component="DangerButton"
    Reusable danger button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    DeveloperCTA
    data-component="DeveloperCTA"
    Reusable developer c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    DoNotSellLink
    data-component="DoNotSellLink"
    Reusable do not sell link component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    DownloadAction
    data-component="DownloadAction"
    Reusable download action component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    DownloadButton
    data-component="DownloadButton"
    Reusable download button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    DownloadPolicyButton
    data-component="DownloadPolicyButton"
    Reusable download policy button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    EnterpriseCTA
    data-component="EnterpriseCTA"
    Reusable enterprise c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ErrorActions
    data-component="ErrorActions"
    Reusable error actions component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ErrorSupportLink
    data-component="ErrorSupportLink"
    Reusable error support link component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ExternalLink
    data-component="ExternalLink"
    Reusable external link component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    FieldActions
    data-component="FieldActions"
    Reusable field actions component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    FinalCTA
    data-component="FinalCTA"
    Reusable final c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    FormActions
    data-component="FormActions"
    Reusable form actions component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    GhostButton
    data-component="GhostButton"
    Reusable ghost button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    GradientCTA
    data-component="GradientCTA"
    Reusable gradient c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    HeaderActions
    data-component="HeaderActions"
    Reusable header actions component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    HeroActions
    data-component="HeroActions"
    Reusable hero actions component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    HeroPrimaryAction
    data-component="HeroPrimaryAction"
    Reusable hero primary action component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    HeroSecondaryAction
    data-component="HeroSecondaryAction"
    Reusable hero secondary action component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    IconButton
    data-component="IconButton"
    Reusable icon button component.    		class: string = ""
    label: string = "Action"
    icon: string = "•"
    variant: string = "ghost"
    disabled: boolean = false    		NoneNone
    LegalPrintButton
    data-component="LegalPrintButton"
    Reusable legal print button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    LinkButton
    data-component="LinkButton"
    Reusable link button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    LoadingButton
    data-component="LoadingButton"
    Reusable loading button component.    		label: string = "Continue"
    loadingLabel: string = "Loading…"
    loading: boolean = false
    disabled: boolean = false
    type: string = "button"
    variant: string = "primary"
    class: string = ""    		NoneNone
    LocalizedRouteLink
    data-component="LocalizedRouteLink"
    Reusable localized route link component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    MobileMenuButton
    data-component="MobileMenuButton"
    Reusable mobile menu button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    NewsletterCTA
    data-component="NewsletterCTA"
    Reusable newsletter c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    OpenAPICTA
    data-component="OpenAPICTA"
    Reusable open a p i c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    PasskeyButton
    data-component="PasskeyButton"
    Reusable passkey button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    PlanCTA
    data-component="PlanCTA"
    Reusable plan c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    PostmanCTA
    data-component="PostmanCTA"
    Reusable postman c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    PrimaryButton
    data-component="PrimaryButton"
    Reusable primary button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    PrintAction
    data-component="PrintAction"
    Reusable print action component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    PrintPolicyButton
    data-component="PrintPolicyButton"
    Reusable print policy button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ProductCTA
    data-component="ProductCTA"
    Reusable product c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    RejectOptionalCookiesButton
    data-component="RejectOptionalCookiesButton"
    Reusable reject optional cookies button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ReopenCookieSettingsButton
    data-component="ReopenCookieSettingsButton"
    Reusable reopen cookie settings button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ResponsibleDisclosureCTA
    data-component="ResponsibleDisclosureCTA"
    Reusable responsible disclosure c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SaveCookiePreferencesButton
    data-component="SaveCookiePreferencesButton"
    Reusable save cookie preferences button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SearchButton
    data-component="SearchButton"
    Reusable search button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SecondaryButton
    data-component="SecondaryButton"
    Reusable secondary button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SectionActions
    data-component="SectionActions"
    Reusable section actions component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ShareAction
    data-component="ShareAction"
    Reusable share action component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ShareButton
    data-component="ShareButton"
    Reusable share button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SignInLink
    data-component="SignInLink"
    Reusable sign in link component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SkipLink
    data-component="SkipLink"
    Reusable skip link component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SplitButton
    data-component="SplitButton"
    Reusable split button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    SplitCTA
    data-component="SplitCTA"
    Reusable split c t a component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    StartFreeButton
    data-component="StartFreeButton"
    Reusable start free button component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    TertiaryButton
    data-component="TertiaryButton"
    Reusable tertiary button component.    		label: string = "Action"
    type: string = "button"
    disabled: boolean = false
    class: string = ""    		defaultNone
    TextLink
    data-component="TextLink"
    Reusable text link component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    ToastAction
    data-component="ToastAction"
    Reusable toast action component.    		label: string = "Action"
    href: string = ""
    type: string = "button"
    variant: string = "primary"
    disabled: boolean = false
    class: string = ""    		defaultNone
    Content
    ComponentPropsSlotsEvents
    AccessibleAccordion
    data-component="AccessibleAccordion"
    Reusable accessible accordion component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AccessibleCarousel
    data-component="AccessibleCarousel"
    Reusable accessible carousel component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AccessibleChartSummary
    data-component="AccessibleChartSummary"
    Reusable accessible chart summary component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AccessibleErrorSummary
    data-component="AccessibleErrorSummary"
    Reusable accessible error summary component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AccessibleIcon
    data-component="AccessibleIcon"
    Reusable accessible icon component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AccessibleTabs
    data-component="AccessibleTabs"
    Reusable accessible tabs component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AccessibleTooltip
    data-component="AccessibleTooltip"
    Reusable accessible tooltip component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Accordion
    data-component="Accordion"
    Reusable accordion component.    		class: string = ""
    title: string = "Question"
    open: boolean = false    		defaultclick
    AddOnCard
    data-component="AddOnCard"
    Reusable add on card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AddressPreview
    data-component="AddressPreview"
    Reusable address preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AdvancedFilterBuilder
    data-component="AdvancedFilterBuilder"
    Reusable advanced filter builder component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AnalyticsDashboardPreview
    data-component="AnalyticsDashboardPreview"
    Reusable analytics dashboard preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ApiEndpointCard
    data-component="ApiEndpointCard"
    Reusable api endpoint card component.    		class: string = ""
    method: string = "GET"
    path: string = "/api/example"
    description: string = ""    		defaultNone
    ApiErrorExample
    data-component="ApiErrorExample"
    Reusable api error example component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ApiKeyDisplay
    data-component="ApiKeyDisplay"
    Reusable api key display component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ApiRequestExample
    data-component="ApiRequestExample"
    Reusable api request example component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ApiResponseExample
    data-component="ApiResponseExample"
    Reusable api response example component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ApiSchemaViewer
    data-component="ApiSchemaViewer"
    Reusable api schema viewer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AssetCard
    data-component="AssetCard"
    Reusable asset card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    AttachmentUpload
    data-component="AttachmentUpload"
    Reusable attachment upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AudioUpload
    data-component="AudioUpload"
    Reusable audio upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AuditLogPreview
    data-component="AuditLogPreview"
    Reusable audit log preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AuthorAvatar
    data-component="AuthorAvatar"
    Reusable author avatar component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AuthorCard
    data-component="AuthorCard"
    Reusable author card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AuthorizedApplicationCard
    data-component="AuthorizedApplicationCard"
    Reusable authorized application card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AutomationExampleCard
    data-component="AutomationExampleCard"
    Reusable automation example card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    AvailabilityCalendar
    data-component="AvailabilityCalendar"
    Reusable availability calendar component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Avatar
    data-component="Avatar"
    Reusable avatar component.    		class: string = ""
    src: string = ""
    alt: string = ""
    initials: string = "WR"
    size: string = "md"    		NoneNone
    AvatarUpload
    data-component="AvatarUpload"
    Reusable avatar upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    BankTransferDetails
    data-component="BankTransferDetails"
    Reusable bank transfer details component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    BillingAddressForm
    data-component="BillingAddressForm"
    Reusable billing address form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    BillingExample
    data-component="BillingExample"
    Reusable billing example component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    BlogCard
    data-component="BlogCard"
    Reusable blog card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    BlogSearch
    data-component="BlogSearch"
    Reusable blog search component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    BodyText
    data-component="BodyText"
    Reusable body text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    BudgetRangeSlider
    data-component="BudgetRangeSlider"
    Reusable budget range slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Calendar
    data-component="Calendar"
    Reusable calendar component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CampaignCard
    data-component="CampaignCard"
    Reusable campaign card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    CampaignPerformancePreview
    data-component="CampaignPerformancePreview"
    Reusable campaign performance preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Card
    data-component="Card"
    Reusable card component.    		variant: string = "default"
    padding: string = "md"
    interactive: boolean = false
    className: string = ""    		defaultNone
    CardPaymentForm
    data-component="CardPaymentForm"
    Reusable card payment form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CareerApplicationForm
    data-component="CareerApplicationForm"
    Reusable career application form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Carousel
    data-component="Carousel"
    Reusable carousel component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CaseStudyCard
    data-component="CaseStudyCard"
    Reusable case study card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CaseStudyPreview
    data-component="CaseStudyPreview"
    Reusable case study preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CertificateUpload
    data-component="CertificateUpload"
    Reusable certificate upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ChannelCard
    data-component="ChannelCard"
    Reusable channel card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    ChannelIcon
    data-component="ChannelIcon"
    Reusable channel icon component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ChartTooltip
    data-component="ChartTooltip"
    Reusable chart tooltip component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Checklist
    data-component="Checklist"
    Reusable checklist component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ClickableCard
    data-component="ClickableCard"
    Reusable clickable card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    Code
    data-component="Code"
    Reusable code component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CodeBlock
    data-component="CodeBlock"
    Reusable code block component.    		class: string = ""
    language: string = "text"
    filename: string = ""
    code: string = ""    		Noneclick
    CodeTabs
    data-component="CodeTabs"
    Reusable code tabs component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CodeText
    data-component="CodeText"
    Reusable code text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ColorSwatch
    data-component="ColorSwatch"
    Reusable color swatch component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CommandBlock
    data-component="CommandBlock"
    Reusable command block component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ComplianceProgramCard
    data-component="ComplianceProgramCard"
    Reusable compliance program card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ConnectedAccountCard
    data-component="ConnectedAccountCard"
    Reusable connected account card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ConnectionCard
    data-component="ConnectionCard"
    Reusable connection card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    ConsentTimelinePreview
    data-component="ConsentTimelinePreview"
    Reusable consent timeline preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ContactCard
    data-component="ContactCard"
    Reusable contact card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    ContactForm
    data-component="ContactForm"
    Reusable contact form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ContactSalesForm
    data-component="ContactSalesForm"
    Reusable contact sales form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ContextSwitcher
    data-component="ContextSwitcher"
    Reusable context switcher component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ConversationPreview
    data-component="ConversationPreview"
    Reusable conversation preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CostSummary
    data-component="CostSummary"
    Reusable cost summary component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CronBuilder
    data-component="CronBuilder"
    Reusable cron builder component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CsvUpload
    data-component="CsvUpload"
    Reusable csv upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CustomerLogo
    data-component="CustomerLogo"
    Reusable customer logo component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    CustomerStoryCard
    data-component="CustomerStoryCard"
    Reusable customer story card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DataProtectionCard
    data-component="DataProtectionCard"
    Reusable data protection card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DateRangeCalendar
    data-component="DateRangeCalendar"
    Reusable date range calendar component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DateRangeSlider
    data-component="DateRangeSlider"
    Reusable date range slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DeliveryPreview
    data-component="DeliveryPreview"
    Reusable delivery preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DemoRequestForm
    data-component="DemoRequestForm"
    Reusable demo request form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DeveloperSearch
    data-component="DeveloperSearch"
    Reusable developer search component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DeviceCard
    data-component="DeviceCard"
    Reusable device card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DocumentPreview
    data-component="DocumentPreview"
    Reusable document preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DocumentUpload
    data-component="DocumentUpload"
    Reusable document upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DownloadGateForm
    data-component="DownloadGateForm"
    Reusable download gate form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DownloadResourceForm
    data-component="DownloadResourceForm"
    Reusable download resource form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    DurationSlider
    data-component="DurationSlider"
    Reusable duration slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ElevatedCard
    data-component="ElevatedCard"
    Reusable elevated card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    EmailComposer
    data-component="EmailComposer"
    Reusable email composer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    EnterprisePricingCard
    data-component="EnterprisePricingCard"
    Reusable enterprise pricing card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    EnvironmentSwitcher
    data-component="EnvironmentSwitcher"
    Reusable environment switcher component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ErrorCard
    data-component="ErrorCard"
    Reusable error card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    ErrorCode
    data-component="ErrorCode"
    Reusable error code component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ErrorIllustration
    data-component="ErrorIllustration"
    Reusable error illustration component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ErrorPage
    data-component="ErrorPage"
    Reusable error page component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    EstimatedCostSummary
    data-component="EstimatedCostSummary"
    Reusable estimated cost summary component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ExpandableText
    data-component="ExpandableText"
    Reusable expandable text component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    EyebrowText
    data-component="EyebrowText"
    Reusable eyebrow text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    FactorCard
    data-component="FactorCard"
    Reusable factor card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FallbackRouteBuilder
    data-component="FallbackRouteBuilder"
    Reusable fallback route builder component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FaviconUpload
    data-component="FaviconUpload"
    Reusable favicon upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FeatureCard
    data-component="FeatureCard"
    Reusable feature card component.    		class: string = ""
    icon: string = "✦"
    title: string = "Feature"
    description: string = ""
    href: string = ""    		NoneNone
    FeatureChecklist
    data-component="FeatureChecklist"
    Reusable feature checklist component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FeaturedBlogCard
    data-component="FeaturedBlogCard"
    Reusable featured blog card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FeatureIconCard
    data-component="FeatureIconCard"
    Reusable feature icon card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FeatureTabs
    data-component="FeatureTabs"
    Reusable feature tabs component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FileSizeLabel
    data-component="FileSizeLabel"
    Reusable file size label component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    FileUpload
    data-component="FileUpload"
    Reusable file upload component.    		class: string = ""
    id: string = "file"
    name: string = "file"
    label: string = "Upload file"
    accept: string = ""
    multiple: boolean = false
    help: string = "Drag and drop or browse"    		NoneNone
    FooterLanguageSwitcher
    data-component="FooterLanguageSwitcher"
    Reusable footer language switcher component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ForbiddenPage
    data-component="ForbiddenPage"
    Reusable forbidden page component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ForgotPasswordForm
    data-component="ForgotPasswordForm"
    Reusable forgot password form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Form
    data-component="Form"
    Reusable form component.    		action: string = ""
    method: string = "post"
    name: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    FormErrorSummary
    data-component="FormErrorSummary"
    Reusable form error summary component.    		class: string = ""
    title: string = "Please fix the following"
    visible: boolean = true    		defaultNone
    FormHelpText
    data-component="FormHelpText"
    Reusable form help text component.    		id: string = ""
    text: string = ""
    class: string = ""    		defaultNone
    FormLabel
    data-component="FormLabel"
    Reusable form label component.    		for: string = ""
    label: string = "Label"
    required: boolean = false
    optional: boolean = false
    class: string = ""    		NoneNone
    GlassCard
    data-component="GlassCard"
    Reusable glass card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    GlobalSearch
    data-component="GlobalSearch"
    Reusable global search component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    GuideCard
    data-component="GuideCard"
    Reusable guide card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    GuideChecklist
    data-component="GuideChecklist"
    Reusable guide checklist component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    GuideStep
    data-component="GuideStep"
    Reusable guide step component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    HeroGradientText
    data-component="HeroGradientText"
    Reusable hero gradient text component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    HeroProductPreview
    data-component="HeroProductPreview"
    Reusable hero product preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    HeroTrustText
    data-component="HeroTrustText"
    Reusable hero trust text component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    HighlightText
    data-component="HighlightText"
    Reusable highlight text component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    HolidayCalendar
    data-component="HolidayCalendar"
    Reusable holiday calendar component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    HumanApprovalStep
    data-component="HumanApprovalStep"
    Reusable human approval step component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Icon
    data-component="Icon"
    Reusable icon component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Illustration
    data-component="Illustration"
    Reusable illustration component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ImageCompressionPreview
    data-component="ImageCompressionPreview"
    Reusable image compression preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ImageUpload
    data-component="ImageUpload"
    Reusable image upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    IncidentCard
    data-component="IncidentCard"
    Reusable incident card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    InfoCard
    data-component="InfoCard"
    Reusable info card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    InlineCode
    data-component="InlineCode"
    Reusable inline code component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    IntegrationCard
    data-component="IntegrationCard"
    Reusable integration card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    InvoiceLineItem
    data-component="InvoiceLineItem"
    Reusable invoice line item component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    InvoiceSummary
    data-component="InvoiceSummary"
    Reusable invoice summary component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    JobCard
    data-component="JobCard"
    Reusable job card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    JsonViewer
    data-component="JsonViewer"
    Reusable json viewer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    KycDocumentUpload
    data-component="KycDocumentUpload"
    Reusable kyc document upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    LanguageSwitcher
    data-component="LanguageSwitcher"
    Reusable language switcher component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    LeadText
    data-component="LeadText"
    Reusable lead text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    LegalContactBlock
    data-component="LegalContactBlock"
    Reusable legal contact block component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    LegalSummary
    data-component="LegalSummary"
    Reusable legal summary component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Logo
    data-component="Logo"
    Reusable logo component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    LogoUpload
    data-component="LogoUpload"
    Reusable logo upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MaintenanceCard
    data-component="MaintenanceCard"
    Reusable maintenance card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MaintenancePage
    data-component="MaintenancePage"
    Reusable maintenance page component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MessageComposer
    data-component="MessageComposer"
    Reusable message composer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MessageComposerPreview
    data-component="MessageComposerPreview"
    Reusable message composer preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MessagePreview
    data-component="MessagePreview"
    Reusable message preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MessageVolumeSlider
    data-component="MessageVolumeSlider"
    Reusable message volume slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MetricCard
    data-component="MetricCard"
    Reusable metric card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MetricText
    data-component="MetricText"
    Reusable metric text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    MobileTableCard
    data-component="MobileTableCard"
    Reusable mobile table card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MultiFileUpload
    data-component="MultiFileUpload"
    Reusable multi file upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    MutedText
    data-component="MutedText"
    Reusable muted text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    NavigationItem
    data-component="NavigationItem"
    Reusable navigation item component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    NewsletterForm
    data-component="NewsletterForm"
    Reusable newsletter form component.    		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    		Nonesubmit
    input
    NotFoundPage
    data-component="NotFoundPage"
    Reusable not found page component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    NotificationCard
    data-component="NotificationCard"
    Reusable notification card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    OfficeCard
    data-component="OfficeCard"
    Reusable office card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    OfflinePage
    data-component="OfflinePage"
    Reusable offline page component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    OneTimeSecretDisplay
    data-component="OneTimeSecretDisplay"
    Reusable one time secret display component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    OpacitySlider
    data-component="OpacitySlider"
    Reusable opacity slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    OtpVerificationForm
    data-component="OtpVerificationForm"
    Reusable otp verification form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    OutlinedCard
    data-component="OutlinedCard"
    Reusable outlined card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    PartnerApplicationForm
    data-component="PartnerApplicationForm"
    Reusable partner application form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PartnerProgramCard
    data-component="PartnerProgramCard"
    Reusable partner program card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PaymentMethodCard
    data-component="PaymentMethodCard"
    Reusable payment method card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PdfPreview
    data-component="PdfPreview"
    Reusable pdf preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PlatformPillarCard
    data-component="PlatformPillarCard"
    Reusable platform pillar card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PressReleaseCard
    data-component="PressReleaseCard"
    Reusable press release card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PriceRangeSlider
    data-component="PriceRangeSlider"
    Reusable price range slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PriceText
    data-component="PriceText"
    Reusable price text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    PricingCard
    data-component="PricingCard"
    Reusable pricing card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PricingContactForm
    data-component="PricingContactForm"
    Reusable pricing contact form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PricingPlanCard
    data-component="PricingPlanCard"
    Reusable pricing plan card component.    		class: string = ""
    name: string = "Starter"
    description: string = ""
    price: string = "₹0"
    period: string = "/month"
    featured: boolean = false
    ctaLabel: string = "Choose plan"
    ctaHref: string = "#"    		defaultNone
    ProductCard
    data-component="ProductCard"
    Reusable product card component.    		eyebrow: string = "Product"
    title: string = "Product name"
    description: string = ""
    href: string = "#"
    actionLabel: string = "Learn more"
    status: string = ""
    class: string = ""    		NoneNone
    ProductIcon
    data-component="ProductIcon"
    Reusable product icon component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ProductLogo
    data-component="ProductLogo"
    Reusable product logo component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ProductMiniCard
    data-component="ProductMiniCard"
    Reusable product mini card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ProductNavigationCard
    data-component="ProductNavigationCard"
    Reusable product navigation card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ProgressSlider
    data-component="ProgressSlider"
    Reusable progress slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ProjectCard
    data-component="ProjectCard"
    Reusable project card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    ProjectSwitcher
    data-component="ProjectSwitcher"
    Reusable project switcher component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PublicHeaderLogo
    data-component="PublicHeaderLogo"
    Reusable public header logo component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    PushComposer
    data-component="PushComposer"
    Reusable push composer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    QrCode
    data-component="QrCode"
    Reusable qr code component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    QuantityStepper
    data-component="QuantityStepper"
    Reusable quantity stepper component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    QuoteText
    data-component="QuoteText"
    Reusable quote text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    RangeSlider
    data-component="RangeSlider"
    Reusable range slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    RateLimitPage
    data-component="RateLimitPage"
    Reusable rate limit page component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    RatingSlider
    data-component="RatingSlider"
    Reusable rating slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    RecoveryCodeForm
    data-component="RecoveryCodeForm"
    Reusable recovery code form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    RecurrenceRuleBuilder
    data-component="RecurrenceRuleBuilder"
    Reusable recurrence rule builder component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ReportCard
    data-component="ReportCard"
    Reusable report card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    RequestResponseViewer
    data-component="RequestResponseViewer"
    Reusable request response viewer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    RequestViewer
    data-component="RequestViewer"
    Reusable request viewer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ResetPasswordForm
    data-component="ResetPasswordForm"
    Reusable reset password form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ResourceCard
    data-component="ResourceCard"
    Reusable resource card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ResourceDownloadCard
    data-component="ResourceDownloadCard"
    Reusable resource download card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ResourceSearch
    data-component="ResourceSearch"
    Reusable resource search component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ResponseViewer
    data-component="ResponseViewer"
    Reusable response viewer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SDKCard
    data-component="SDKCard"
    Reusable s d k card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SDKLanguageTabs
    data-component="SDKLanguageTabs"
    Reusable s d k language tabs component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SearchCategoryTabs
    data-component="SearchCategoryTabs"
    Reusable search category tabs component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SearchResultItem
    data-component="SearchResultItem"
    Reusable search result item component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SecretDisplay
    data-component="SecretDisplay"
    Reusable secret display component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SecurityContactCard
    data-component="SecurityContactCard"
    Reusable security contact card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SecurityFeatureCard
    data-component="SecurityFeatureCard"
    Reusable security feature card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SecurityReportForm
    data-component="SecurityReportForm"
    Reusable security report form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ServerErrorPage
    data-component="ServerErrorPage"
    Reusable server error page component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SessionCard
    data-component="SessionCard"
    Reusable session card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SetupChecklist
    data-component="SetupChecklist"
    Reusable setup checklist component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SignInForm
    data-component="SignInForm"
    Reusable sign in form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SignUpForm
    data-component="SignUpForm"
    Reusable sign up form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SiteSearch
    data-component="SiteSearch"
    Reusable site search component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Slider
    data-component="Slider"
    Reusable slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SmallText
    data-component="SmallText"
    Reusable small text component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    SmsComposer
    data-component="SmsComposer"
    Reusable sms composer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    StatCard
    data-component="StatCard"
    Reusable stat card component.    		class: string = ""
    label: string = "Metric"
    value: string = "0"
    change: string = ""
    trend: string = "neutral"    		NoneNone
    StatusSubscribeForm
    data-component="StatusSubscribeForm"
    Reusable status subscribe form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Stepper
    data-component="Stepper"
    Reusable stepper component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    SuccessCard
    data-component="SuccessCard"
    Reusable success card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    SupportRequestForm
    data-component="SupportRequestForm"
    Reusable support request form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Tabs
    data-component="Tabs"
    Reusable tabs component.    		class: string = ""
    active: string = "first"    		first
    second    		click
    TeamMemberCard
    data-component="TeamMemberCard"
    Reusable team member card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    TemplateCard
    data-component="TemplateCard"
    Reusable template card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    TerminalBlock
    data-component="TerminalBlock"
    Reusable terminal block component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    TestimonialCard
    data-component="TestimonialCard"
    Reusable testimonial card component.    		class: string = ""
    quote: string = "Great product."
    name: string = "Customer"
    role: string = ""
    company: string = ""
    avatar: string = ""    		NoneNone
    TestimonialCarousel
    data-component="TestimonialCarousel"
    Reusable testimonial carousel component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ThemeSwitcher
    data-component="ThemeSwitcher"
    Reusable theme switcher component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    TimelineItem
    data-component="TimelineItem"
    Reusable timeline item component.    		class: string = ""
    title: string = "Event"
    date: string = ""
    description: string = ""
    status: string = "default"    		NoneNone
    ToastIcon
    data-component="ToastIcon"
    Reusable toast icon component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Tooltip
    data-component="Tooltip"
    Reusable tooltip component.    		class: string = ""
    text: string = "Helpful information"
    position: string = "top"    		defaultNone
    TotpVerificationForm
    data-component="TotpVerificationForm"
    Reusable totp verification form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    TranslatedText
    data-component="TranslatedText"
    Reusable translated text component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    TruncatedText
    data-component="TruncatedText"
    Reusable truncated text component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    UnifiedTimelinePreview
    data-component="UnifiedTimelinePreview"
    Reusable unified timeline preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    UploadItem
    data-component="UploadItem"
    Reusable upload item component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    UploadPreview
    data-component="UploadPreview"
    Reusable upload preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    UserCard
    data-component="UserCard"
    Reusable user card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    ValueCard
    data-component="ValueCard"
    Reusable value card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    VerticalTabs
    data-component="VerticalTabs"
    Reusable vertical tabs component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    VideoCard
    data-component="VideoCard"
    Reusable video card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    VideoUpload
    data-component="VideoUpload"
    Reusable video upload component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    VoiceScriptComposer
    data-component="VoiceScriptComposer"
    Reusable voice script composer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    VolumeSlider
    data-component="VolumeSlider"
    Reusable volume slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    WarningCard
    data-component="WarningCard"
    Reusable warning card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    WebhookEventCard
    data-component="WebhookEventCard"
    Reusable webhook event card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    WebhookPayloadViewer
    data-component="WebhookPayloadViewer"
    Reusable webhook payload viewer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    WebinarCard
    data-component="WebinarCard"
    Reusable webinar card component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    WebinarRegistrationForm
    data-component="WebinarRegistrationForm"
    Reusable webinar registration form component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    WhatsAppComposer
    data-component="WhatsAppComposer"
    Reusable whats app composer component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Wizard
    data-component="Wizard"
    Reusable wizard component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    WorkflowCanvasPreview
    data-component="WorkflowCanvasPreview"
    Reusable workflow canvas preview component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    WorkspaceCard
    data-component="WorkspaceCard"
    Reusable workspace card component.    		title: string = ""
    description: string = ""
    href: string = ""
    class: string = ""    		defaultNone
    WorkspaceSwitcher
    data-component="WorkspaceSwitcher"
    Reusable workspace switcher component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    ZoomSlider
    data-component="ZoomSlider"
    Reusable zoom slider component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    href: string = ""
    actionLabel: string = "Learn more"
    image: string = ""
    alt: string = ""
    class: string = ""    		defaultNone
    Core
    ComponentPropsSlotsEvents
    AnnouncementBar
    data-component="AnnouncementBar"
    Reusable announcement bar component.    		class: string = ""
    badge: string = "New"
    message: string = "WRNexusJS 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"    		Noneclick
    AspectRatio
    data-component="AspectRatio"
    Reusable aspect ratio component.    		class: string = ""defaultNone
    BackToTop
    data-component="BackToTop"
    Reusable back to top component.    		class: string = ""
    label: string = "Back to top"
    assistiveLabel: string = "Return to the top of the page"
    threshold: number = 500    		Noneclick
    Breadcrumbs
    data-component="Breadcrumbs"
    Reusable breadcrumbs component.    		class: string = ""
    items: string = []
    centered: boolean = false
    compact: boolean = false
    showHome: boolean = true
    homeLabel: string = "Home"
    homeHref: string = "/"    		NoneNone
    Checkbox
    data-component="Checkbox"
    Reusable checkbox component.    		class: string = ""
    id: string = ""
    name: string = ""
    label: string = "Checkbox"
    description: string = ""
    checked: boolean = false
    disabled: boolean = false    		NoneNone
    Chip
    data-component="Chip"
    Reusable chip component.    		label: string = "Chip"
    variant: string = "default"
    class: string = ""    		defaultNone
    Cluster
    data-component="Cluster"
    Reusable cluster component.    		gap: string = "4"
    className: string = ""    		defaultNone
    Combobox
    data-component="Combobox"
    Reusable combobox component.    		id: string = "combobox"
    name: string = ""
    label: string = "Choose an option"
    placeholder: string = "Search options"
    options: string = []
    required: boolean = false
    disabled: boolean = false
    class: string = ""    		NoneNone
    ContactSalesBanner
    data-component="ContactSalesBanner"
    Reusable contact sales banner component.    		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 = []    		NoneNone
    Container
    data-component="Container"
    Reusable container component.    		size: string = "default"
    className: string = ""    		defaultNone
    CookieConsent
    data-component="CookieConsent"
    Reusable cookie consent component.    		class: string = ""Noneclick
    change
    DevelopersMegaMenu
    data-component="DevelopersMegaMenu"
    Reusable developers mega menu component.    		class: string = ""NoneNone
    disclosure
    data-component="disclosure"
    Reusable disclosure component.    		summary: string = "Details"
    class: string = ""    		defaultNone
    DisplayHeading
    data-component="DisplayHeading"
    Reusable display heading component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Divider
    data-component="Divider"
    Reusable divider component.    		className: string = ""defaultNone
    Drawer
    data-component="Drawer"
    Reusable drawer component.    		class: string = ""
    title: string = "Panel"
    open: boolean = false
    side: string = "right"    		defaultclick
    FAQ
    data-component="FAQ"
    Reusable faq component.    		class: string = ""
    eyebrow: string = ""
    title: string = "Frequently asked questions"
    description: string = ""
    items: string = []
    centered: boolean = true
    allowMultiple: boolean = false
    defaultOpenIndex: number = 0    		NoneNone
    FAQAccordion
    data-component="FAQAccordion"
    Reusable faqaccordion component.    		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"    		Noneclick
    file-upload
    data-component="file-upload"
    Reusable file-upload component.    		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 = ""    		NoneNone
    FilterBar
    data-component="FilterBar"
    Reusable filter bar component.    		label: string = "Filters"
    clearLabel: string = "Clear filters"
    showClear: boolean = true
    class: string = ""    		defaultNone
    Flex
    data-component="Flex"
    Reusable flex component.    		class: string = ""defaultNone
    FormError
    data-component="FormError"
    Reusable form error component.    		id: string = ""
    message: string = ""
    class: string = ""    		defaultNone
    FullBleed
    data-component="FullBleed"
    Reusable full bleed component.    		class: string = ""defaultNone
    hstack
    data-component="hstack"
    Reusable hstack component.    		gap: string = "4"
    align: string = "center"
    class: string = ""    		defaultNone
    Inline
    data-component="Inline"
    Reusable inline component.    		gap: string = "4"
    className: string = ""    		defaultNone
    input
    data-component="input"
    Reusable input component.    		type: string = "text"
    name: string = ""
    value: string = ""
    placeholder: string = ""
    class: string = ""    		NoneNone
    LegalTableOfContents
    data-component="LegalTableOfContents"
    Reusable legal table of contents component.    		title: string = "On this page"
    items: string = []
    class: string = ""    		NoneNone
    Link
    data-component="Link"
    Reusable link component.    		href: string = "#"
    label: string = "Link"
    external: boolean = false
    className: string = ""    		NoneNone
    LogoCloud
    data-component="LogoCloud"
    Reusable logo cloud component.    		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    		NoneNone
    Modal
    data-component="Modal"
    Reusable modal component.    		class: string = ""
    title: string = "Dialog"
    description: string = ""
    open: boolean = false
    size: string = "md"
    closeLabel: string = "Close"    		defaultclick
    MultiSelect
    data-component="MultiSelect"
    Reusable multi select component.    		id: string = "multi-select"
    name: string = ""
    label: string = "Choose options"
    options: string = []
    required: boolean = false
    disabled: boolean = false
    size: number = 5
    class: string = ""    		NoneNone
    NarrowContainer
    data-component="NarrowContainer"
    Reusable narrow container component.    		class: string = ""defaultNone
    NotificationDot
    data-component="NotificationDot"
    Reusable notification dot component.    		label: string = "Notification"
    variant: string = "default"
    class: string = ""    		defaultNone
    PageHeader
    data-component="PageHeader"
    Reusable page header component.    		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 = []    		NoneNone
    PageHeading
    data-component="PageHeading"
    Reusable page heading component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    PageShell
    data-component="PageShell"
    Reusable page shell component.    		className: string = ""defaultNone
    Pagination
    data-component="Pagination"
    Reusable pagination component.    		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    		NoneNone
    Pill
    data-component="Pill"
    Reusable pill component.    		label: string = "Pill"
    variant: string = "default"
    class: string = ""    		defaultNone
    ProductMegaMenu
    data-component="ProductMegaMenu"
    Reusable product mega menu component.    		class: string = ""NoneNone
    progress
    data-component="progress"
    Reusable progress component.    		value: number = 0
    max: number = 100
    class: string = ""    		NoneNone
    ProgressBar
    data-component="ProgressBar"
    Reusable progress bar component.    		class: string = ""
    value: number = 0
    max: number = 100
    label: string = "Progress"
    showValue: boolean = true    		NoneNone
    PublicFooter
    data-component="PublicFooter"
    Reusable public footer component.    		class: string = ""Nonesubmit
    PublicMobileNavigation
    data-component="PublicMobileNavigation"
    Reusable public mobile navigation component.    		class: string = ""Noneclick
    PublicSearch
    data-component="PublicSearch"
    Reusable public search component.    		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 = []    		Noneinput
    focus
    blur
    click
    Radio
    data-component="Radio"
    Reusable radio component.    		class: string = ""
    id: string = ""
    name: string = "choice"
    value: string = ""
    label: string = "Option"
    description: string = ""
    checked: boolean = false
    disabled: boolean = false    		NoneNone
    ScrollArea
    data-component="ScrollArea"
    Reusable scroll area component.    		class: string = ""defaultNone
    SDKTabs
    data-component="SDKTabs"
    Reusable sdktabs component.    		label: string = "SDK languages"
    tabs: string = []
    defaultIndex: number = 0
    class: string = ""    		Noneclick
    SectionHeading
    data-component="SectionHeading"
    Reusable section heading component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Select
    data-component="Select"
    Reusable select component.    		class: string = ""
    id: string = ""
    name: string = ""
    label: string = "Select"
    help: string = ""
    error: string = ""
    required: boolean = false
    disabled: boolean = false    		defaultNone
    SocialShare
    data-component="SocialShare"
    Reusable social share component.    		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 = []    		Noneclick
    spacer
    data-component="spacer"
    Reusable spacer component.    		class: string = ""NoneNone
    Spinner
    data-component="Spinner"
    Reusable spinner component.    		class: string = ""
    label: string = "Loading"
    size: string = "md"    		NoneNone
    Stack
    data-component="Stack"
    Reusable stack component.    		gap: string = "4"
    className: string = ""    		defaultNone
    StatusBanner
    data-component="StatusBanner"
    Reusable status banner component.    		class: string = ""
    type: string = "info"
    title: string = ""
    description: string = ""
    actionLabel: string = ""
    actionHref: string = ""
    dismissible: boolean = true
    compact: boolean = false
    details: string = []    		Noneclick
    Sticky
    data-component="Sticky"
    Reusable sticky component.    		class: string = ""defaultNone
    SubsectionHeading
    data-component="SubsectionHeading"
    Reusable subsection heading component.    		text: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Surface
    data-component="Surface"
    Reusable surface component.    		class: string = ""defaultNone
    Switch
    data-component="Switch"
    Reusable switch component.    		class: string = ""
    id: string = ""
    name: string = ""
    label: string = "Switch"
    description: string = ""
    checked: boolean = false
    disabled: boolean = false    		Noneclick
    tag
    data-component="tag"
    Reusable tag component.    		label: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    Textarea
    data-component="Textarea"
    Reusable textarea component.    		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    		NoneNone
    theme-toggle
    data-component="theme-toggle"
    Reusable theme-toggle component.    		label: string = "Toggle theme"
    class: string = ""    		defaultNone
    Toast
    data-component="Toast"
    Reusable toast component.    		class: string = ""
    title: string = "Saved"
    description: string = ""
    variant: string = "success"
    duration: number = 5000    		Noneclick
    ToastHost
    data-component="ToastHost"
    Reusable toast host component.    		class: string = ""Noneclick
    Typography
    data-component="Typography"
    Reusable typography component.    		as: string = "p"
    variant: string = "body"
    align: string = "start"
    class: string = ""    		defaultNone
    VisuallyHidden
    data-component="VisuallyHidden"
    Reusable visually hidden component.    		className: string = ""defaultNone
    Well
    data-component="Well"
    Reusable well component.    		class: string = ""defaultNone
    WideContainer
    data-component="WideContainer"
    Reusable wide container component.    		class: string = ""defaultNone
    Data
    ComponentPropsSlotsEvents
    ActiveFilterList
    data-component="ActiveFilterList"
    Reusable active filter list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ActivityList
    data-component="ActivityList"
    Reusable activity list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ApiHeaderTable
    data-component="ApiHeaderTable"
    Reusable api header table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ApiParameterTable
    data-component="ApiParameterTable"
    Reusable api parameter table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ApiSchemaTable
    data-component="ApiSchemaTable"
    Reusable api schema table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    AuditTable
    data-component="AuditTable"
    Reusable audit table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    AutoGrid
    data-component="AutoGrid"
    Reusable auto grid component.    		class: string = ""defaultNone
    BlogGrid
    data-component="BlogGrid"
    Reusable blog grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    BlogList
    data-component="BlogList"
    Reusable blog list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    CalendarGrid
    data-component="CalendarGrid"
    Reusable calendar grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    CapabilityGrid
    data-component="CapabilityGrid"
    Reusable capability grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    CareerBenefitsGrid
    data-component="CareerBenefitsGrid"
    Reusable career benefits grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ChannelComparisonTable
    data-component="ChannelComparisonTable"
    Reusable channel comparison table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ChannelRateTable
    data-component="ChannelRateTable"
    Reusable channel rate table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ColorGrid
    data-component="ColorGrid"
    Reusable color grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ComparisonTable
    data-component="ComparisonTable"
    Reusable comparison table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ComplianceBadgeList
    data-component="ComplianceBadgeList"
    Reusable compliance badge list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ConversationList
    data-component="ConversationList"
    Reusable conversation list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    CookieCategoryList
    data-component="CookieCategoryList"
    Reusable cookie category list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    CookieDetailsTable
    data-component="CookieDetailsTable"
    Reusable cookie details table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    CookieTable
    data-component="CookieTable"
    Reusable cookie table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    DataRetentionTable
    data-component="DataRetentionTable"
    Reusable data retention table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    DataTable
    data-component="DataTable"
    Reusable data table component.    		caption: string = "Data table"
    columns: string = []
    rows: string = []
    emptyMessage: string = "No data available."
    striped: boolean = false
    class: string = ""    		NoneNone
    DefinitionList
    data-component="DefinitionList"
    Reusable definition list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    DescriptionList
    data-component="DescriptionList"
    Reusable description list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    EventTable
    data-component="EventTable"
    Reusable event table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    FeatureComparisonTable
    data-component="FeatureComparisonTable"
    Reusable feature comparison table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    FeatureGrid
    data-component="FeatureGrid"
    Reusable feature grid component.    		columns: number = 3
    className: string = ""    		defaultNone
    FeatureList
    data-component="FeatureList"
    Reusable feature list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    FileList
    data-component="FileList"
    Reusable file list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    FilterableTable
    data-component="FilterableTable"
    Reusable filterable table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    FormGrid
    data-component="FormGrid"
    Reusable form grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    FormRow
    data-component="FormRow"
    Reusable form row component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    Grid
    data-component="Grid"
    Reusable grid component.    		gap: string = "4"
    className: string = ""    		defaultNone
    GuideGrid
    data-component="GuideGrid"
    Reusable guide grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    IncidentList
    data-component="IncidentList"
    Reusable incident list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    KeyValueTable
    data-component="KeyValueTable"
    Reusable key value table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    LeadershipGrid
    data-component="LeadershipGrid"
    Reusable leadership grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    LegalBulletList
    data-component="LegalBulletList"
    Reusable legal bullet list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    LegalDefinitionList
    data-component="LegalDefinitionList"
    Reusable legal definition list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    LegalTable
    data-component="LegalTable"
    Reusable legal table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    List
    data-component="List"
    Reusable list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    LogTable
    data-component="LogTable"
    Reusable log table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    MemberList
    data-component="MemberList"
    Reusable member list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    MetricGrid
    data-component="MetricGrid"
    Reusable metric grid component.    		label: string = "Key metrics"
    metrics: string = []
    class: string = ""    		NoneNone
    NotificationList
    data-component="NotificationList"
    Reusable notification list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    PartnerLogoGrid
    data-component="PartnerLogoGrid"
    Reusable partner logo grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    PasswordRequirementList
    data-component="PasswordRequirementList"
    Reusable password requirement list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    PlanFeatureList
    data-component="PlanFeatureList"
    Reusable plan feature list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    PlanLimitList
    data-component="PlanLimitList"
    Reusable plan limit list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    PolicyVersionTable
    data-component="PolicyVersionTable"
    Reusable policy version table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    PricingComparisonTable
    data-component="PricingComparisonTable"
    Reusable pricing comparison table component.    		caption: string = "Plan comparison"
    plans: string = []
    features: string = []
    class: string = ""    		NoneNone
    PricingGrid
    data-component="PricingGrid"
    Reusable pricing grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    PricingTable
    data-component="PricingTable"
    Reusable pricing table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ProductFeatureList
    data-component="ProductFeatureList"
    Reusable product feature list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ProductGrid
    data-component="ProductGrid"
    Reusable product grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ProductIntegrationList
    data-component="ProductIntegrationList"
    Reusable product integration list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ProductList
    data-component="ProductList"
    Reusable product list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ProductUseCaseList
    data-component="ProductUseCaseList"
    Reusable product use case list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    RateTable
    data-component="RateTable"
    Reusable rate table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    RegionAvailabilityTable
    data-component="RegionAvailabilityTable"
    Reusable region availability table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ResponsiveTable
    data-component="ResponsiveTable"
    Reusable responsive table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    RetentionTable
    data-component="RetentionTable"
    Reusable retention table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    SecurityPillarGrid
    data-component="SecurityPillarGrid"
    Reusable security pillar grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    SecurityPracticeList
    data-component="SecurityPracticeList"
    Reusable security practice list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ServiceLevelTable
    data-component="ServiceLevelTable"
    Reusable service level table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ServiceStatusList
    data-component="ServiceStatusList"
    Reusable service status list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ServiceStatusRow
    data-component="ServiceStatusRow"
    Reusable service status row component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    SlaTable
    data-component="SlaTable"
    Reusable sla table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    SortableTable
    data-component="SortableTable"
    Reusable sortable table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    StatusTable
    data-component="StatusTable"
    Reusable status table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    SubprocessorTable
    data-component="SubprocessorTable"
    Reusable subprocessor table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    Table
    data-component="Table"
    Reusable table component.    		class: string = ""
    caption: string = "Data table"
    responsive: boolean = true    		defaultNone
    TableRow
    data-component="TableRow"
    Reusable table row component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    TreeTable
    data-component="TreeTable"
    Reusable tree table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    TrustBadgeList
    data-component="TrustBadgeList"
    Reusable trust badge list component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    UsagePricingTable
    data-component="UsagePricingTable"
    Reusable usage pricing table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    ValuesGrid
    data-component="ValuesGrid"
    Reusable values grid component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    VirtualizedTable
    data-component="VirtualizedTable"
    Reusable virtualized table component.    		title: string = ""
    description: string = ""
    empty: boolean = false
    emptyText: string = "No items available."
    class: string = ""    		defaultNone
    Feedback
    ComponentPropsSlotsEvents
    AccountStatusBanner
    data-component="AccountStatusBanner"
    Reusable account status banner component.    		label: string = "AccountStatus"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    Alert
    data-component="Alert"
    Reusable alert component.    		class: string = ""
    title: string = "Notice"
    description: string = ""
    variant: string = "info"
    dismissible: boolean = false    		defaultclick
    ApiAuthenticationNotice
    data-component="ApiAuthenticationNotice"
    Reusable api authentication notice component.    		label: string = "ApiAuthentication"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ApiMethodBadge
    data-component="ApiMethodBadge"
    Reusable api method badge component.    		label: string = "ApiMethod"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ApiRateLimitNotice
    data-component="ApiRateLimitNotice"
    Reusable api rate limit notice component.    		label: string = "ApiRateLimit"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ApiVersionBadge
    data-component="ApiVersionBadge"
    Reusable api version badge component.    		label: string = "ApiVersion"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    Badge
    data-component="Badge"
    Reusable badge component.    		class: string = ""
    label: string = "Badge"
    variant: string = "neutral"    		NoneNone
    Banner
    data-component="Banner"
    Reusable banner component.    		class: string = ""
    text: string = "Announcement"
    href: string = ""
    actionLabel: string = "Learn more"
    variant: string = "brand"    		NoneNone
    BetaBadge
    data-component="BetaBadge"
    Reusable beta badge component.    		label: string = "Beta"
    variant: string = "default"
    class: string = ""    		defaultNone
    CardSkeleton
    data-component="CardSkeleton"
    Reusable card skeleton component.    		label: string = "Card"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    CertificationBadge
    data-component="CertificationBadge"
    Reusable certification badge component.    		label: string = "Certification"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ChannelBadge
    data-component="ChannelBadge"
    Reusable channel badge component.    		label: string = "Channel"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    CharacterCounter
    data-component="CharacterCounter"
    Reusable character counter component.    		label: string = "Character"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ChartEmptyState
    data-component="ChartEmptyState"
    Reusable chart empty state component.    		label: string = "ChartEmpty"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    CodeLanguageBadge
    data-component="CodeLanguageBadge"
    Reusable code language badge component.    		label: string = "CodeLanguage"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ComingSoonBadge
    data-component="ComingSoonBadge"
    Reusable coming soon badge component.    		label: string = "ComingSoon"
    variant: string = "default"
    class: string = ""    		defaultNone
    ComingSoonState
    data-component="ComingSoonState"
    Reusable coming soon state component.    		label: string = "ComingSoon"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    CookieBanner
    data-component="CookieBanner"
    Reusable cookie banner component.    		class: string = ""
    title: string = "We use cookies"
    description: string = "We use essential cookies and optional analytics to improve your experience."
    privacyHref: string = "/privacy"    		Noneclick
    Counter
    data-component="Counter"
    Reusable counter component.    		label: string = "Status"
    variant: string = "default"
    class: string = ""    		defaultNone
    DeprecatedFeatureAlert
    data-component="DeprecatedFeatureAlert"
    Reusable deprecated feature alert component.    		label: string = "DeprecatedFeature"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    EmptyState
    data-component="EmptyState"
    Reusable empty state component.    		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 = []    		NoneNone
    ErrorState
    data-component="ErrorState"
    Reusable error state component.    		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 = []    		Noneclick
    FeatureUnavailableState
    data-component="FeatureUnavailableState"
    Reusable feature unavailable state component.    		label: string = "FeatureUnavailable"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    FileTypeBadge
    data-component="FileTypeBadge"
    Reusable file type badge component.    		label: string = "FileType"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    FooterStatusIndicator
    data-component="FooterStatusIndicator"
    Reusable footer status indicator component.    		label: string = "FooterStatus"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ForbiddenState
    data-component="ForbiddenState"
    Reusable forbidden state component.    		label: string = "Forbidden"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    FormAlert
    data-component="FormAlert"
    Reusable form alert component.    		label: string = "Form"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    GuideDifficultyBadge
    data-component="GuideDifficultyBadge"
    Reusable guide difficulty badge component.    		label: string = "GuideDifficulty"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    HealthIndicator
    data-component="HealthIndicator"
    Reusable health indicator component.    		label: string = "Health"
    variant: string = "default"
    class: string = ""    		defaultNone
    IncidentAlert
    data-component="IncidentAlert"
    Reusable incident alert component.    		label: string = "Incident"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    IncidentBanner
    data-component="IncidentBanner"
    Reusable incident banner component.    		label: string = "Incident"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    IncidentSeverityBadge
    data-component="IncidentSeverityBadge"
    Reusable incident severity badge component.    		label: string = "IncidentSeverity"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    IndustryBadge
    data-component="IndustryBadge"
    Reusable industry badge component.    		label: string = "Industry"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    InlineAlert
    data-component="InlineAlert"
    Reusable inline alert component.    		label: string = "Inline"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    LegalAcceptanceNotice
    data-component="LegalAcceptanceNotice"
    Reusable legal acceptance notice component.    		label: string = "LegalAcceptance"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    LegalNotice
    data-component="LegalNotice"
    Reusable legal notice component.    		label: string = "Legal"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    LegalVersionBadge
    data-component="LegalVersionBadge"
    Reusable legal version badge component.    		label: string = "LegalVersion"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    MaintenanceAlert
    data-component="MaintenanceAlert"
    Reusable maintenance alert component.    		label: string = "Maintenance"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    MaintenanceBanner
    data-component="MaintenanceBanner"
    Reusable maintenance banner component.    		label: string = "Maintenance"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    MaintenanceState
    data-component="MaintenanceState"
    Reusable maintenance state component.    		label: string = "Maintenance"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    MessageCharacterCounter
    data-component="MessageCharacterCounter"
    Reusable message character counter component.    		label: string = "MessageCharacter"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    NewBadge
    data-component="NewBadge"
    Reusable new badge component.    		label: string = "New"
    variant: string = "default"
    class: string = ""    		defaultNone
    NoResultsState
    data-component="NoResultsState"
    Reusable no results state component.    		label: string = "NoResults"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    NotFoundState
    data-component="NotFoundState"
    Reusable not found state component.    		label: string = "NotFound"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    OfflineState
    data-component="OfflineState"
    Reusable offline state component.    		label: string = "Offline"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    OnlineIndicator
    data-component="OnlineIndicator"
    Reusable online indicator component.    		label: string = "Online"
    variant: string = "default"
    class: string = ""    		defaultNone
    OptionalIndicator
    data-component="OptionalIndicator"
    Reusable optional indicator component.    		label: string = "Optional"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    PageAlert
    data-component="PageAlert"
    Reusable page alert component.    		label: string = "Page"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    PageSkeleton
    data-component="PageSkeleton"
    Reusable page skeleton component.    		label: string = "Page"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    PreviewBadge
    data-component="PreviewBadge"
    Reusable preview badge component.    		label: string = "Preview"
    variant: string = "default"
    class: string = ""    		defaultNone
    PrivacyNotice
    data-component="PrivacyNotice"
    Reusable privacy notice component.    		label: string = "Privacy"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ProductStatusBadge
    data-component="ProductStatusBadge"
    Reusable product status badge component.    		label: string = "ProductStatus"
    variant: string = "default"
    class: string = ""    		defaultNone
    RateLimitedState
    data-component="RateLimitedState"
    Reusable rate limited state component.    		label: string = "RateLimited"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    RegionalPrivacyBanner
    data-component="RegionalPrivacyBanner"
    Reusable regional privacy banner component.    		label: string = "RegionalPrivacy"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    RegionUnavailableAlert
    data-component="RegionUnavailableAlert"
    Reusable region unavailable alert component.    		label: string = "RegionUnavailable"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    RegionUnavailableState
    data-component="RegionUnavailableState"
    Reusable region unavailable state component.    		label: string = "RegionUnavailable"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    RequiredIndicator
    data-component="RequiredIndicator"
    Reusable required indicator component.    		label: string = "Required"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ResourceTypeBadge
    data-component="ResourceTypeBadge"
    Reusable resource type badge component.    		label: string = "ResourceType"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    SearchEmptyState
    data-component="SearchEmptyState"
    Reusable search empty state component.    		label: string = "SearchEmpty"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    SearchLoadingState
    data-component="SearchLoadingState"
    Reusable search loading state component.    		label: string = "SearchLoading"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    SecurityAlert
    data-component="SecurityAlert"
    Reusable security alert component.    		label: string = "Security"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    ServiceStatusBadge
    data-component="ServiceStatusBadge"
    Reusable service status badge component.    		label: string = "ServiceStatus"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    Skeleton
    data-component="Skeleton"
    Reusable skeleton component.    		height: string = "4"
    rounded: string = "lg"
    className: string = ""    		NoneNone
    SmsSegmentCounter
    data-component="SmsSegmentCounter"
    Reusable sms segment counter component.    		label: string = "SmsSegment"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    StatusBadge
    data-component="StatusBadge"
    Reusable status badge component.    		class: string = ""
    status: string = "operational"    		NoneNone
    SuccessState
    data-component="SuccessState"
    Reusable success state component.    		label: string = "Success"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    TableSkeleton
    data-component="TableSkeleton"
    Reusable table skeleton component.    		label: string = "Table"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    TaxNotice
    data-component="TaxNotice"
    Reusable tax notice component.    		label: string = "Tax"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    TextSkeleton
    data-component="TextSkeleton"
    Reusable text skeleton component.    		label: string = "Text"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    TrendIndicator
    data-component="TrendIndicator"
    Reusable trend indicator component.    		label: string = "Trend"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    UnavailableRegionState
    data-component="UnavailableRegionState"
    Reusable unavailable region state component.    		label: string = "UnavailableRegion"
    title: string = ""
    description: string = ""
    value: string = ""
    variant: string = "default"
    class: string = ""    		defaultNone
    VerifiedBadge
    data-component="VerifiedBadge"
    Reusable verified badge component.    		label: string = "Verified"
    variant: string = "default"
    class: string = ""    		defaultNone
    Forms
    ComponentPropsSlotsEvents
    AddressInput
    data-component="AddressInput"
    Reusable address input component.    		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 = ""    		defaultNone
    AmountInput
    data-component="AmountInput"
    Reusable amount input component.    		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 = ""    		defaultNone
    ApartmentInput
    data-component="ApartmentInput"
    Reusable apartment input component.    		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 = ""    		defaultNone
    ApiKeyInput
    data-component="ApiKeyInput"
    Reusable api key input component.    		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 = ""    		defaultNone
    AttachmentPicker
    data-component="AttachmentPicker"
    Reusable attachment picker component.    		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 = ""    		defaultNone
    AuthenticatorCodeInput
    data-component="AuthenticatorCodeInput"
    Reusable authenticator code input component.    		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 = ""    		defaultNone
    AvatarGroup
    data-component="AvatarGroup"
    Reusable avatar group component.    		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 = ""    		defaultNone
    BillingPeriodToggle
    data-component="BillingPeriodToggle"
    Reusable billing period toggle component.    		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 = ""    		defaultNone
    BlackoutDatePicker
    data-component="BlackoutDatePicker"
    Reusable blackout date picker component.    		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 = ""    		defaultNone
    BorderRadiusPicker
    data-component="BorderRadiusPicker"
    Reusable border radius picker component.    		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 = ""    		defaultNone
    BrandColorPicker
    data-component="BrandColorPicker"
    Reusable brand color picker component.    		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 = ""    		defaultNone
    BrandSelector
    data-component="BrandSelector"
    Reusable brand selector component.    		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 = ""    		defaultNone
    BudgetSelector
    data-component="BudgetSelector"
    Reusable budget selector component.    		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 = ""    		defaultNone
    BusinessHoursPicker
    data-component="BusinessHoursPicker"
    Reusable business hours picker component.    		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 = ""    		defaultNone
    ButtonGroup
    data-component="ButtonGroup"
    Reusable button group component.    		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 = ""    		defaultNone
    ButtonSelector
    data-component="ButtonSelector"
    Reusable button selector component.    		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 = ""    		defaultNone
    CallbackUrlInput
    data-component="CallbackUrlInput"
    Reusable callback url input component.    		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 = ""    		defaultNone
    CaptchaField
    data-component="CaptchaField"
    Reusable captcha field component.    		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 = ""    		defaultNone
    CardSelector
    data-component="CardSelector"
    Reusable card selector component.    		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 = ""    		defaultNone
    ChannelSelector
    data-component="ChannelSelector"
    Reusable channel selector component.    		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 = ""    		defaultNone
    CheckboxGroup
    data-component="CheckboxGroup"
    Reusable checkbox group component.    		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 = ""    		defaultNone
    ChipInput
    data-component="ChipInput"
    Reusable chip input component.    		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 = ""    		defaultNone
    CitySelector
    data-component="CitySelector"
    Reusable city selector component.    		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 = ""    		defaultNone
    CodeInput
    data-component="CodeInput"
    Reusable code input component.    		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 = ""    		defaultNone
    ColorHexInput
    data-component="ColorHexInput"
    Reusable color hex input component.    		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 = ""    		defaultNone
    ColorPicker
    data-component="ColorPicker"
    Reusable color picker component.    		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 = ""    		defaultNone
    ColorSelector
    data-component="ColorSelector"
    Reusable color selector component.    		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 = ""    		defaultNone
    CommandSearchInput
    data-component="CommandSearchInput"
    Reusable command search input component.    		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 = ""    		defaultNone
    CompanyNameInput
    data-component="CompanyNameInput"
    Reusable company name input component.    		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 = ""    		defaultNone
    CompanySizeSelector
    data-component="CompanySizeSelector"
    Reusable company size selector component.    		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 = ""    		defaultNone
    ComparisonDateRangePicker
    data-component="ComparisonDateRangePicker"
    Reusable comparison date range picker component.    		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 = ""    		defaultNone
    ConfirmPasswordInput
    data-component="ConfirmPasswordInput"
    Reusable confirm password input component.    		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 = ""    		defaultNone
    CookieCategoryToggle
    data-component="CookieCategoryToggle"
    Reusable cookie category toggle component.    		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 = ""    		defaultNone
    CoordinatesInput
    data-component="CoordinatesInput"
    Reusable coordinates input component.    		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 = ""    		defaultNone
    CoordinatesPicker
    data-component="CoordinatesPicker"
    Reusable coordinates picker component.    		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 = ""    		defaultNone
    CopySecretField
    data-component="CopySecretField"
    Reusable copy secret field component.    		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 = ""    		defaultNone
    CountryCallingCodeInput
    data-component="CountryCallingCodeInput"
    Reusable country calling code input component.    		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 = ""    		defaultNone
    CountryCallingCodeSelector
    data-component="CountryCallingCodeSelector"
    Reusable country calling code selector component.    		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 = ""    		defaultNone
    CountrySelector
    data-component="CountrySelector"
    Reusable country selector component.    		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 = ""    		defaultNone
    CouponInput
    data-component="CouponInput"
    Reusable coupon input component.    		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 = ""    		defaultNone
    CreditAmountInput
    data-component="CreditAmountInput"
    Reusable credit amount input component.    		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 = ""    		defaultNone
    CronInput
    data-component="CronInput"
    Reusable cron input component.    		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 = ""    		defaultNone
    CurrencyInput
    data-component="CurrencyInput"
    Reusable currency input component.    		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 = ""    		defaultNone
    CurrencySelector
    data-component="CurrencySelector"
    Reusable currency selector component.    		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 = ""    		defaultNone
    CurrentPasswordInput
    data-component="CurrentPasswordInput"
    Reusable current password input component.    		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 = ""    		defaultNone
    DateInput
    data-component="DateInput"
    Reusable date input component.    		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 = ""    		NoneNone
    DatePicker
    data-component="DatePicker"
    Reusable date picker component.    		class: string = ""
    id: string = "date"
    name: string = "date"
    label: string = "Date"
    value: string = ""
    min: string = ""
    max: string = ""
    required: boolean = false    		NoneNone
    DateRangePicker
    data-component="DateRangePicker"
    Reusable date range picker component.    		class: string = ""
    label: string = "Date range"
    startName: string = "startDate"
    endName: string = "endDate"    		NoneNone
    DateTimeInput
    data-component="DateTimeInput"
    Reusable date time input component.    		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 = ""    		NoneNone
    DateTimePicker
    data-component="DateTimePicker"
    Reusable date time picker component.    		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 = ""    		NoneNone
    DateTimeRangePicker
    data-component="DateTimeRangePicker"
    Reusable date time range picker component.    		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 = ""    		defaultNone
    DecimalInput
    data-component="DecimalInput"
    Reusable decimal input component.    		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 = ""    		defaultNone
    DepartmentInput
    data-component="DepartmentInput"
    Reusable department input component.    		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 = ""    		defaultNone
    DiscountInput
    data-component="DiscountInput"
    Reusable discount input component.    		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 = ""    		defaultNone
    DisplayNameInput
    data-component="DisplayNameInput"
    Reusable display name input component.    		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 = ""    		defaultNone
    DomainInput
    data-component="DomainInput"
    Reusable domain input component.    		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 = ""    		defaultNone
    DurationInput
    data-component="DurationInput"
    Reusable duration input component.    		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 = ""    		defaultNone
    DurationPicker
    data-component="DurationPicker"
    Reusable duration picker component.    		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 = ""    		defaultNone
    EmailBodyEditor
    data-component="EmailBodyEditor"
    Reusable email body editor component.    		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 = ""    		defaultNone
    EmailInput
    data-component="EmailInput"
    Reusable email input component.    		class: string = ""
    id: string = ""
    name: string = ""
    label: string = "Email"
    value: string = ""
    placeholder: string = ""
    help: string = ""
    error: string = ""
    required: boolean = false
    disabled: boolean = false
    readonly: boolean = false
    autocomplete: string = ""    		NoneNone
    EmojiPicker
    data-component="EmojiPicker"
    Reusable emoji picker component.    		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 = ""    		defaultNone
    EnvironmentSelector
    data-component="EnvironmentSelector"
    Reusable environment selector component.    		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 = ""    		defaultNone
    ExpiryDateTimePicker
    data-component="ExpiryDateTimePicker"
    Reusable expiry date time picker component.    		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 = ""    		defaultNone
    FaxInput
    data-component="FaxInput"
    Reusable fax input component.    		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 = ""    		defaultNone
    FileInput
    data-component="FileInput"
    Reusable file input component.    		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 = ""    		defaultNone
    FileSizeInput
    data-component="FileSizeInput"
    Reusable file size input component.    		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 = ""    		defaultNone
    FilterSearchInput
    data-component="FilterSearchInput"
    Reusable filter search input component.    		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 = ""    		defaultNone
    FirstNameInput
    data-component="FirstNameInput"
    Reusable first name input component.    		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 = ""    		defaultNone
    FontPicker
    data-component="FontPicker"
    Reusable font picker component.    		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 = ""    		defaultNone
    FontSizePicker
    data-component="FontSizePicker"
    Reusable font size picker component.    		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 = ""    		defaultNone
    FontWeightPicker
    data-component="FontWeightPicker"
    Reusable font weight picker component.    		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 = ""    		defaultNone
    FormField
    data-component="FormField"
    Reusable form field component.    		class: string = ""
    label: string = "Field"
    help: string = ""
    error: string = ""
    required: boolean = false    		defaultNone
    FormGroup
    data-component="FormGroup"
    Reusable form group component.    		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 = ""    		defaultNone
    GeofenceEditor
    data-component="GeofenceEditor"
    Reusable geofence editor component.    		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 = ""    		defaultNone
    GradientPicker
    data-component="GradientPicker"
    Reusable gradient picker component.    		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 = ""    		defaultNone
    GradientStopEditor
    data-component="GradientStopEditor"
    Reusable gradient stop editor component.    		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 = ""    		defaultNone
    HexColorInput
    data-component="HexColorInput"
    Reusable hex color input component.    		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 = ""    		defaultNone
    HiddenField
    data-component="HiddenField"
    Reusable hidden field component.    		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 = ""    		defaultNone
    HostnameInput
    data-component="HostnameInput"
    Reusable hostname input component.    		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 = ""    		defaultNone
    HourPicker
    data-component="HourPicker"
    Reusable hour picker component.    		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 = ""    		defaultNone
    HslColorInput
    data-component="HslColorInput"
    Reusable hsl color input component.    		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 = ""    		defaultNone
    HtmlEditor
    data-component="HtmlEditor"
    Reusable html editor component.    		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 = ""    		defaultNone
    IconPicker
    data-component="IconPicker"
    Reusable icon picker component.    		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 = ""    		defaultNone
    IconSelector
    data-component="IconSelector"
    Reusable icon selector component.    		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 = ""    		defaultNone
    IdentifierInput
    data-component="IdentifierInput"
    Reusable identifier input component.    		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 = ""    		defaultNone
    ImageEditor
    data-component="ImageEditor"
    Reusable image editor component.    		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 = ""    		defaultNone
    ImageSelector
    data-component="ImageSelector"
    Reusable image selector component.    		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 = ""    		defaultNone
    IndustrySelector
    data-component="IndustrySelector"
    Reusable industry selector component.    		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 = ""    		defaultNone
    InputGroup
    data-component="InputGroup"
    Reusable input group component.    		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 = ""    		defaultNone
    IntegerInput
    data-component="IntegerInput"
    Reusable integer input component.    		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 = ""    		defaultNone
    IpAddressInput
    data-component="IpAddressInput"
    Reusable ip address input component.    		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 = ""    		defaultNone
    JobTitleInput
    data-component="JobTitleInput"
    Reusable job title input component.    		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 = ""    		defaultNone
    JsonInput
    data-component="JsonInput"
    Reusable json input component.    		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 = ""    		defaultNone
    LanguageSelector
    data-component="LanguageSelector"
    Reusable language selector component.    		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 = ""    		defaultNone
    LastNameInput
    data-component="LastNameInput"
    Reusable last name input component.    		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 = ""    		defaultNone
    LatitudeInput
    data-component="LatitudeInput"
    Reusable latitude input component.    		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 = ""    		defaultNone
    LegalLanguageSelector
    data-component="LegalLanguageSelector"
    Reusable legal language selector component.    		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 = ""    		defaultNone
    LegalRegionSelector
    data-component="LegalRegionSelector"
    Reusable legal region selector component.    		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 = ""    		defaultNone
    LetterSpacingPicker
    data-component="LetterSpacingPicker"
    Reusable letter spacing picker component.    		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 = ""    		defaultNone
    LicenseKeyInput
    data-component="LicenseKeyInput"
    Reusable license key input component.    		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 = ""    		defaultNone
    LineHeightPicker
    data-component="LineHeightPicker"
    Reusable line height picker component.    		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 = ""    		defaultNone
    LocaleSelector
    data-component="LocaleSelector"
    Reusable locale selector component.    		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 = ""    		defaultNone
    LocationPicker
    data-component="LocationPicker"
    Reusable location picker component.    		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 = ""    		defaultNone
    LongitudeInput
    data-component="LongitudeInput"
    Reusable longitude input component.    		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 = ""    		defaultNone
    MaintenanceWindowPicker
    data-component="MaintenanceWindowPicker"
    Reusable maintenance window picker component.    		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 = ""    		defaultNone
    MapPicker
    data-component="MapPicker"
    Reusable map picker component.    		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 = ""    		defaultNone
    MarkdownEditor
    data-component="MarkdownEditor"
    Reusable markdown editor component.    		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 = ""    		defaultNone
    MaskedSecretField
    data-component="MaskedSecretField"
    Reusable masked secret field component.    		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 = ""    		defaultNone
    MentionInput
    data-component="MentionInput"
    Reusable mention input component.    		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 = ""    		defaultNone
    MessageLimitInput
    data-component="MessageLimitInput"
    Reusable message limit input component.    		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 = ""    		defaultNone
    MinutePicker
    data-component="MinutePicker"
    Reusable minute picker component.    		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 = ""    		defaultNone
    MobileInput
    data-component="MobileInput"
    Reusable mobile input component.    		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 = ""    		defaultNone
    MonthlyVolumeSelector
    data-component="MonthlyVolumeSelector"
    Reusable monthly volume selector component.    		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 = ""    		defaultNone
    MonthPicker
    data-component="MonthPicker"
    Reusable month picker component.    		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 = ""    		defaultNone
    MonthYearPicker
    data-component="MonthYearPicker"
    Reusable month year picker component.    		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 = ""    		defaultNone
    MultipleEmailInput
    data-component="MultipleEmailInput"
    Reusable multiple email input component.    		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 = ""    		defaultNone
    NameInput
    data-component="NameInput"
    Reusable name input component.    		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 = ""    		defaultNone
    NewPasswordInput
    data-component="NewPasswordInput"
    Reusable new password input component.    		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 = ""    		defaultNone
    NumberInput
    data-component="NumberInput"
    Reusable number input component.    		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 = ""    		NoneNone
    OrganizationSelector
    data-component="OrganizationSelector"
    Reusable organization selector component.    		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 = ""    		defaultNone
    OtpInput
    data-component="OtpInput"
    Reusable otp input component.    		class: string = ""
    name: string = "otp"
    length: number = 6
    label: string = "Verification code"    		NoneNone
    PasswordInput
    data-component="PasswordInput"
    Reusable password input component.    		class: string = ""
    id: string = ""
    name: string = ""
    label: string = "Password"
    value: string = ""
    placeholder: string = ""
    help: string = ""
    error: string = ""
    required: boolean = false
    disabled: boolean = false
    readonly: boolean = false
    autocomplete: string = ""    		NoneNone
    PasswordVisibilityToggle
    data-component="PasswordVisibilityToggle"
    Reusable password visibility toggle component.    		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 = ""    		defaultNone
    PathInput
    data-component="PathInput"
    Reusable path input component.    		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 = ""    		defaultNone
    PercentageInput
    data-component="PercentageInput"
    Reusable percentage input component.    		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 = ""    		defaultNone
    PermissionSelector
    data-component="PermissionSelector"
    Reusable permission selector component.    		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 = ""    		defaultNone
    PhoneInput
    data-component="PhoneInput"
    Reusable phone input component.    		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 = ""    		NoneNone
    PinInput
    data-component="PinInput"
    Reusable pin input component.    		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 = ""    		defaultNone
    PlainTextEditor
    data-component="PlainTextEditor"
    Reusable plain text editor component.    		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 = ""    		defaultNone
    PlanSelector
    data-component="PlanSelector"
    Reusable plan selector component.    		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 = ""    		defaultNone
    PortInput
    data-component="PortInput"
    Reusable port input component.    		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 = ""    		defaultNone
    PortNumberInput
    data-component="PortNumberInput"
    Reusable port number input component.    		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 = ""    		defaultNone
    PositiveNumberInput
    data-component="PositiveNumberInput"
    Reusable positive number input component.    		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 = ""    		defaultNone
    PostalCodeInput
    data-component="PostalCodeInput"
    Reusable postal code input component.    		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 = ""    		defaultNone
    PresetDateRangePicker
    data-component="PresetDateRangePicker"
    Reusable preset date range picker component.    		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 = ""    		defaultNone
    PriceInput
    data-component="PriceInput"
    Reusable price input component.    		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 = ""    		defaultNone
    PricingFeatureGroup
    data-component="PricingFeatureGroup"
    Reusable pricing feature group component.    		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 = ""    		defaultNone
    PricingToggle
    data-component="PricingToggle"
    Reusable pricing toggle component.    		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 = ""    		defaultNone
    PrioritySelector
    data-component="PrioritySelector"
    Reusable priority selector component.    		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 = ""    		defaultNone
    ProductSelector
    data-component="ProductSelector"
    Reusable product selector component.    		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 = ""    		defaultNone
    ProjectSelector
    data-component="ProjectSelector"
    Reusable project selector component.    		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 = ""    		defaultNone
    PromoCodeInput
    data-component="PromoCodeInput"
    Reusable promo code input component.    		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 = ""    		defaultNone
    ProviderSelector
    data-component="ProviderSelector"
    Reusable provider selector component.    		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 = ""    		defaultNone
    PublishDateTimePicker
    data-component="PublishDateTimePicker"
    Reusable publish date time picker component.    		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 = ""    		defaultNone
    PushNotificationEditor
    data-component="PushNotificationEditor"
    Reusable push notification editor component.    		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 = ""    		defaultNone
    QuantityInput
    data-component="QuantityInput"
    Reusable quantity input component.    		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 = ""    		defaultNone
    QuietHoursPicker
    data-component="QuietHoursPicker"
    Reusable quiet hours picker component.    		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 = ""    		NoneNone
    RadioGroup
    data-component="RadioGroup"
    Reusable radio group component.    		class: string = ""
    label: string = "Choose one"
    name: string = "choice"    		defaultNone
    RangeInput
    data-component="RangeInput"
    Reusable range input component.    		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 = ""    		defaultNone
    RateLimitInput
    data-component="RateLimitInput"
    Reusable rate limit input component.    		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 = ""    		defaultNone
    RecipientSelector
    data-component="RecipientSelector"
    Reusable recipient selector component.    		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 = ""    		defaultNone
    RecoveryCodeInput
    data-component="RecoveryCodeInput"
    Reusable recovery code input component.    		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 = ""    		defaultNone
    RecurringSchedulePicker
    data-component="RecurringSchedulePicker"
    Reusable recurring schedule picker component.    		id: string = "recurring-schedule"
    name: string = "recurrence"
    label: string = "Repeat"
    value: string = "none"
    disabled: boolean = false
    class: string = ""    		NoneNone
    RedirectUriInput
    data-component="RedirectUriInput"
    Reusable redirect uri input component.    		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 = ""    		defaultNone
    ReferenceInput
    data-component="ReferenceInput"
    Reusable reference input component.    		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 = ""    		defaultNone
    RegexInput
    data-component="RegexInput"
    Reusable regex input component.    		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 = ""    		defaultNone
    RegionSelector
    data-component="RegionSelector"
    Reusable region selector component.    		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 = ""    		defaultNone
    RetryCountInput
    data-component="RetryCountInput"
    Reusable retry count input component.    		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 = ""    		defaultNone
    RgbColorInput
    data-component="RgbColorInput"
    Reusable rgb color input component.    		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 = ""    		defaultNone
    RichTextEditor
    data-component="RichTextEditor"
    Reusable rich text editor component.    		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 = ""    		defaultNone
    RichTextInput
    data-component="RichTextInput"
    Reusable rich text input component.    		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 = ""    		defaultNone
    RoleSelector
    data-component="RoleSelector"
    Reusable role selector component.    		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 = ""    		defaultNone
    RollingDateRangePicker
    data-component="RollingDateRangePicker"
    Reusable rolling date range picker component.    		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 = ""    		defaultNone
    SavedFilterSelector
    data-component="SavedFilterSelector"
    Reusable saved filter selector component.    		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 = ""    		defaultNone
    ScheduledDateTimePicker
    data-component="ScheduledDateTimePicker"
    Reusable scheduled date time picker component.    		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 = ""    		defaultNone
    ScheduleMessagePicker
    data-component="ScheduleMessagePicker"
    Reusable schedule message picker component.    		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 = ""    		defaultNone
    SchedulePicker
    data-component="SchedulePicker"
    Reusable schedule picker component.    		class: string = ""
    label: string = "Schedule"    		NoneNone
    SdkLanguageSelector
    data-component="SdkLanguageSelector"
    Reusable sdk language selector component.    		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 = ""    		defaultNone
    SearchInput
    data-component="SearchInput"
    Reusable search input component.    		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 = ""    		NoneNone
    SecondPicker
    data-component="SecondPicker"
    Reusable second picker component.    		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 = ""    		defaultNone
    SecretInput
    data-component="SecretInput"
    Reusable secret input component.    		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 = ""    		defaultNone
    SenderIdInput
    data-component="SenderIdInput"
    Reusable sender id input component.    		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 = ""    		defaultNone
    SeveritySelector
    data-component="SeveritySelector"
    Reusable severity selector component.    		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 = ""    		defaultNone
    ShadowPicker
    data-component="ShadowPicker"
    Reusable shadow picker component.    		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 = ""    		defaultNone
    SlugInput
    data-component="SlugInput"
    Reusable slug input component.    		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 = ""    		defaultNone
    SmsMessageEditor
    data-component="SmsMessageEditor"
    Reusable sms message editor component.    		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 = ""    		defaultNone
    StateSelector
    data-component="StateSelector"
    Reusable state selector component.    		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 = ""    		defaultNone
    StatusSelector
    data-component="StatusSelector"
    Reusable status selector component.    		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 = ""    		defaultNone
    StepperInput
    data-component="StepperInput"
    Reusable stepper input component.    		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 = ""    		defaultNone
    StickerPicker
    data-component="StickerPicker"
    Reusable sticker picker component.    		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 = ""    		defaultNone
    StreetAddressInput
    data-component="StreetAddressInput"
    Reusable street address input component.    		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 = ""    		defaultNone
    SubdomainInput
    data-component="SubdomainInput"
    Reusable subdomain input component.    		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 = ""    		defaultNone
    SubjectInput
    data-component="SubjectInput"
    Reusable subject input component.    		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 = ""    		defaultNone
    TagInput
    data-component="TagInput"
    Reusable tag input component.    		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 = ""    		defaultNone
    TaxRateInput
    data-component="TaxRateInput"
    Reusable tax rate input component.    		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 = ""    		defaultNone
    TeamSizeSelector
    data-component="TeamSizeSelector"
    Reusable team size selector component.    		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 = ""    		defaultNone
    TemplateSelector
    data-component="TemplateSelector"
    Reusable template selector component.    		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 = ""    		defaultNone
    TemplateVariableInput
    data-component="TemplateVariableInput"
    Reusable template variable input component.    		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 = ""    		defaultNone
    TextInput
    data-component="TextInput"
    Reusable text input component.    		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 = ""    		NoneNone
    ThemeColorPicker
    data-component="ThemeColorPicker"
    Reusable theme color picker component.    		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 = ""    		defaultNone
    TimeInput
    data-component="TimeInput"
    Reusable time input component.    		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 = ""    		NoneNone
    TimeoutInput
    data-component="TimeoutInput"
    Reusable timeout input component.    		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 = ""    		defaultNone
    TimePicker
    data-component="TimePicker"
    Reusable time picker component.    		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 = ""    		NoneNone
    TimeRangePicker
    data-component="TimeRangePicker"
    Reusable time range picker component.    		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 = ""    		defaultNone
    TimezoneAwareTimePicker
    data-component="TimezoneAwareTimePicker"
    Reusable timezone aware time picker component.    		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 = ""    		defaultNone
    TimezoneSelector
    data-component="TimezoneSelector"
    Reusable timezone selector component.    		class: string = ""
    id: string = "timezone"
    name: string = "timezone"
    label: string = "Timezone"    		NoneNone
    Toggle
    data-component="Toggle"
    Reusable toggle component.    		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 = ""    		defaultNone
    ToggleGroup
    data-component="ToggleGroup"
    Reusable toggle group component.    		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 = ""    		defaultNone
    TokenInput
    data-component="TokenInput"
    Reusable token input component.    		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 = ""    		defaultNone
    UrlInput
    data-component="UrlInput"
    Reusable url input component.    		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 = ""    		NoneNone
    UseCaseSelector
    data-component="UseCaseSelector"
    Reusable use case selector component.    		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 = ""    		defaultNone
    UsernameInput
    data-component="UsernameInput"
    Reusable username input component.    		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 = ""    		defaultNone
    VerificationCodeInput
    data-component="VerificationCodeInput"
    Reusable verification code input component.    		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 = ""    		defaultNone
    VersionSelector
    data-component="VersionSelector"
    Reusable version selector component.    		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 = ""    		defaultNone
    VoiceScriptEditor
    data-component="VoiceScriptEditor"
    Reusable voice script editor component.    		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 = ""    		defaultNone
    VolumeInput
    data-component="VolumeInput"
    Reusable volume input component.    		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 = ""    		defaultNone
    WebhookUrlInput
    data-component="WebhookUrlInput"
    Reusable webhook url input component.    		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 = ""    		defaultNone
    WhatsAppNumberInput
    data-component="WhatsAppNumberInput"
    Reusable whats app number input component.    		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 = ""    		defaultNone
    WhatsAppTemplateEditor
    data-component="WhatsAppTemplateEditor"
    Reusable whats app template editor component.    		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 = ""    		defaultNone
    WorkspaceSelector
    data-component="WorkspaceSelector"
    Reusable workspace selector component.    		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 = ""    		defaultNone
    YearPicker
    data-component="YearPicker"
    Reusable year picker component.    		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 = ""    		defaultNone
    Layout
    ComponentPropsSlotsEvents
    AnchorNavigation
    data-component="AnchorNavigation"
    Reusable anchor navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    AppHeader
    data-component="AppHeader"
    Reusable app header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ArchitectureSection
    data-component="ArchitectureSection"
    Reusable architecture section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ArticleHero
    data-component="ArticleHero"
    Reusable article hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ArticleLayout
    data-component="ArticleLayout"
    Reusable article layout component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ArticlePageShell
    data-component="ArticlePageShell"
    Reusable article page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    BottomNavigation
    data-component="BottomNavigation"
    Reusable bottom navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    BrowserFrame
    data-component="BrowserFrame"
    Reusable browser frame component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CalendarHeader
    data-component="CalendarHeader"
    Reusable calendar header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CalendarNavigation
    data-component="CalendarNavigation"
    Reusable calendar navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CaseStudyHero
    data-component="CaseStudyHero"
    Reusable case study hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CenteredHero
    data-component="CenteredHero"
    Reusable centered hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CenteredSectionHeader
    data-component="CenteredSectionHeader"
    Reusable centered section header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ChallengeSection
    data-component="ChallengeSection"
    Reusable challenge section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CodeHeader
    data-component="CodeHeader"
    Reusable code header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CompanyHero
    data-component="CompanyHero"
    Reusable company hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CompanyPageShell
    data-component="CompanyPageShell"
    Reusable company page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ContactHero
    data-component="ContactHero"
    Reusable contact hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ContactPageShell
    data-component="ContactPageShell"
    Reusable contact page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    CTASection
    data-component="CTASection"
    Reusable c t a section component.    		class: string = ""
    eyebrow: string = "Ready?"
    title: string = "Start building today"
    description: string = ""
    primaryLabel: string = "Get started"
    primaryHref: string = "#"
    secondaryLabel: string = "Contact sales"
    secondaryHref: string = "#"    		NoneNone
    DesktopNavigation
    data-component="DesktopNavigation"
    Reusable desktop navigation component.    		label: string = "Primary navigation"
    items: string = []
    class: string = ""    		NoneNone
    DeveloperHero
    data-component="DeveloperHero"
    Reusable developer hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    DeveloperPageShell
    data-component="DeveloperPageShell"
    Reusable developer page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    DropdownNavigation
    data-component="DropdownNavigation"
    Reusable dropdown navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    EnterpriseHero
    data-component="EnterpriseHero"
    Reusable enterprise hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ErrorHero
    data-component="ErrorHero"
    Reusable error hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ErrorPageShell
    data-component="ErrorPageShell"
    Reusable error page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    FeatureDetailsPanel
    data-component="FeatureDetailsPanel"
    Reusable feature details panel component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    FormSection
    data-component="FormSection"
    Reusable form section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Header
    data-component="Header"
    Reusable header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Hero
    data-component="Hero"
    Reusable hero component.    		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"    		defaultNone
    HeroCodePanel
    data-component="HeroCodePanel"
    Reusable hero code panel component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    InsetPanel
    data-component="InsetPanel"
    Reusable inset panel component.    		class: string = ""defaultNone
    LegalDocumentHeader
    data-component="LegalDocumentHeader"
    Reusable legal document header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    LegalDocumentLayout
    data-component="LegalDocumentLayout"
    Reusable legal document layout component.    		class: string = ""
    title: string = "Legal document"
    effectiveDate: string = ""
    updatedDate: string = ""    		toc
    default    		None
    LegalHero
    data-component="LegalHero"
    Reusable legal hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    LegalPageShell
    data-component="LegalPageShell"
    Reusable legal page shell component.    		class: string = ""navigation
    default    		None
    LegalSection
    data-component="LegalSection"
    Reusable legal section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    MarketingPageShell
    data-component="MarketingPageShell"
    Reusable marketing page shell component.    		class: string = ""defaultNone
    MarketingSectionHeader
    data-component="MarketingSectionHeader"
    Reusable marketing section header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    MissionSection
    data-component="MissionSection"
    Reusable mission section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    MobileDeviceFrame
    data-component="MobileDeviceFrame"
    Reusable mobile device frame component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    MobileNavigation
    data-component="MobileNavigation"
    Reusable mobile navigation component.    		label: string = "Menu"
    closeLabel: string = "Close menu"
    items: string = []
    class: string = ""    		Noneclick
    Navigation
    data-component="Navigation"
    Reusable navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Panel
    data-component="Panel"
    Reusable panel component.    		class: string = ""defaultNone
    PreviousNextNavigation
    data-component="PreviousNextNavigation"
    Reusable previous next navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    PricingHero
    data-component="PricingHero"
    Reusable pricing hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ProductCategorySection
    data-component="ProductCategorySection"
    Reusable product category section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ProductHero
    data-component="ProductHero"
    Reusable product hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ProductPageShell
    data-component="ProductPageShell"
    Reusable product page shell component.    		class: string = ""defaultNone
    PublicHeader
    data-component="PublicHeader"
    Reusable public header component.    		class: string = ""Noneclick
    PublicPageShell
    data-component="PublicPageShell"
    Reusable public page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ResizablePanel
    data-component="ResizablePanel"
    Reusable resizable panel component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ResourcePageShell
    data-component="ResourcePageShell"
    Reusable resource page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ResultsSection
    data-component="ResultsSection"
    Reusable results section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    ScreenshotFrame
    data-component="ScreenshotFrame"
    Reusable screenshot frame component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Section
    data-component="Section"
    Reusable section component.    		id: string = ""
    size: string = "default"
    surface: string = "default"
    className: string = ""    		defaultNone
    SectionHeader
    data-component="SectionHeader"
    Reusable section header component.    		class: string = ""
    eyebrow: string = ""
    title: string = "Section title"
    description: string = ""
    align: string = "left"    		defaultNone
    SecurityHero
    data-component="SecurityHero"
    Reusable security hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    SidebarLayout
    data-component="SidebarLayout"
    Reusable sidebar layout component.    		class: string = ""defaultNone
    SidePanel
    data-component="SidePanel"
    Reusable side panel component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    SolutionHero
    data-component="SolutionHero"
    Reusable solution hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    SolutionPageShell
    data-component="SolutionPageShell"
    Reusable solution page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    SolutionSection
    data-component="SolutionSection"
    Reusable solution section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    SplitHero
    data-component="SplitHero"
    Reusable split hero component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    SplitLayout
    data-component="SplitLayout"
    Reusable split layout component.    		class: string = ""defaultNone
    SplitSectionHeader
    data-component="SplitSectionHeader"
    Reusable split section header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    StatusPageShell
    data-component="StatusPageShell"
    Reusable status page shell component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    StepNavigation
    data-component="StepNavigation"
    Reusable step navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    StickyLayout
    data-component="StickyLayout"
    Reusable sticky layout component.    		class: string = ""defaultNone
    TableHeader
    data-component="TableHeader"
    Reusable table header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    VisionSection
    data-component="VisionSection"
    Reusable vision section component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    WizardHeader
    data-component="WizardHeader"
    Reusable wizard header component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    WizardNavigation
    data-component="WizardNavigation"
    Reusable wizard navigation component.    		eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "start"
    class: string = ""    		defaultNone
    Overlays
    ComponentPropsSlotsEvents
    AccessibleDialog
    data-component="AccessibleDialog"
    Reusable accessible dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    AccessibleMenu
    data-component="AccessibleMenu"
    Reusable accessible menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    AccountMenu
    data-component="AccountMenu"
    Reusable account menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    ActionMenu
    data-component="ActionMenu"
    Reusable action menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    AlertDialog
    data-component="AlertDialog"
    Reusable alert dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    ApiKeyCreateDialog
    data-component="ApiKeyCreateDialog"
    Reusable api key create dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    CommandMenu
    data-component="CommandMenu"
    Reusable command menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    ConfirmationDialog
    data-component="ConfirmationDialog"
    Reusable confirmation dialog component.    		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 = ""    		confirmclick
    ContextMenu
    data-component="ContextMenu"
    Reusable context menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    CookiePreferencesDialog
    data-component="CookiePreferencesDialog"
    Reusable cookie preferences dialog component.    		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 = ""    		Nonechange
    click
    DeleteConfirmationDialog
    data-component="DeleteConfirmationDialog"
    Reusable delete confirmation dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    DevelopersMenu
    data-component="DevelopersMenu"
    Reusable developers menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    DropdownMenu
    data-component="DropdownMenu"
    Reusable dropdown menu component.    		class: string = ""
    label: string = "Menu"    		defaultclick
    FilterMenu
    data-component="FilterMenu"
    Reusable filter menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    FormDialog
    data-component="FormDialog"
    Reusable form dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    FullscreenDialog
    data-component="FullscreenDialog"
    Reusable fullscreen dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    ImagePreviewDialog
    data-component="ImagePreviewDialog"
    Reusable image preview dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    Lightbox
    data-component="Lightbox"
    Reusable lightbox component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    LogoutDialog
    data-component="LogoutDialog"
    Reusable logout dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    MegaMenu
    data-component="MegaMenu"
    Reusable mega menu component.    		label: string = "Explore"
    sections: string = []
    class: string = ""    		Noneclick
    NavigationMegaMenu
    data-component="NavigationMegaMenu"
    Reusable navigation mega menu component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    Popover
    data-component="Popover"
    Reusable popover component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    ProductsMegaMenu
    data-component="ProductsMegaMenu"
    Reusable products mega menu component.    		label: string = "Products"
    sections: string = []
    class: string = ""    		NoneNone
    PromptDialog
    data-component="PromptDialog"
    Reusable prompt dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    ResourcesMegaMenu
    data-component="ResourcesMegaMenu"
    Reusable resources mega menu component.    		class: string = ""NoneNone
    SearchDialog
    data-component="SearchDialog"
    Reusable search dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    SecretRevealDialog
    data-component="SecretRevealDialog"
    Reusable secret reveal dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    SessionExpiredDialog
    data-component="SessionExpiredDialog"
    Reusable session expired dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    SolutionsMegaMenu
    data-component="SolutionsMegaMenu"
    Reusable solutions mega menu component.    		class: string = ""NoneNone
    StepUpAuthenticationDialog
    data-component="StepUpAuthenticationDialog"
    Reusable step up authentication dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    TestMessageDialog
    data-component="TestMessageDialog"
    Reusable test message dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    UnsavedChangesDialog
    data-component="UnsavedChangesDialog"
    Reusable unsaved changes dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    VideoPreviewDialog
    data-component="VideoPreviewDialog"
    Reusable video preview dialog component.    		title: string = ""
    description: string = ""
    open: boolean = false
    closeLabel: string = "Close"
    class: string = ""    		defaultNone
    Visualization
    ComponentPropsSlotsEvents
    AreaChart
    data-component="AreaChart"
    Reusable area chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    BarChart
    data-component="BarChart"
    Reusable bar chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    CampaignProgress
    data-component="CampaignProgress"
    Reusable campaign progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ChannelComparisonChart
    data-component="ChannelComparisonChart"
    Reusable channel comparison chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ChannelFallbackDiagram
    data-component="ChannelFallbackDiagram"
    Reusable channel fallback diagram component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ChannelFlow
    data-component="ChannelFlow"
    Reusable channel flow component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ChecklistProgress
    data-component="ChecklistProgress"
    Reusable checklist progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    CircularProgress
    data-component="CircularProgress"
    Reusable circular progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    CohortChart
    data-component="CohortChart"
    Reusable cohort chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    CompletionMeter
    data-component="CompletionMeter"
    Reusable completion meter component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ConversionChart
    data-component="ConversionChart"
    Reusable conversion chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    CostBreakdownChart
    data-component="CostBreakdownChart"
    Reusable cost breakdown chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    DeliveryStatusChart
    data-component="DeliveryStatusChart"
    Reusable delivery status chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    DeliveryStatusTimeline
    data-component="DeliveryStatusTimeline"
    Reusable delivery status timeline component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    DonutChart
    data-component="DonutChart"
    Reusable donut chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    EncryptionDiagram
    data-component="EncryptionDiagram"
    Reusable encryption diagram component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ExportProgress
    data-component="ExportProgress"
    Reusable export progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    FallbackRouteDiagram
    data-component="FallbackRouteDiagram"
    Reusable fallback route diagram component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    FeatureTimeline
    data-component="FeatureTimeline"
    Reusable feature timeline component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    FormProgress
    data-component="FormProgress"
    Reusable form progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    FunnelChart
    data-component="FunnelChart"
    Reusable funnel chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    GeoChart
    data-component="GeoChart"
    Reusable geo chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ImportProgress
    data-component="ImportProgress"
    Reusable import progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    IncidentResponseFlow
    data-component="IncidentResponseFlow"
    Reusable incident response flow component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    IncidentTimeline
    data-component="IncidentTimeline"
    Reusable incident timeline component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    JobProgress
    data-component="JobProgress"
    Reusable job progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    LatencyMetric
    data-component="LatencyMetric"
    Reusable latency metric component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    LineChart
    data-component="LineChart"
    Reusable line chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    Metric
    data-component="Metric"
    Reusable metric component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    OnboardingProgress
    data-component="OnboardingProgress"
    Reusable onboarding progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    PasswordStrengthMeter
    data-component="PasswordStrengthMeter"
    Reusable password strength meter component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    PieChart
    data-component="PieChart"
    Reusable pie chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ProductArchitectureDiagram
    data-component="ProductArchitectureDiagram"
    Reusable product architecture diagram component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ProgressChart
    data-component="ProgressChart"
    Reusable progress chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ProgressRing
    data-component="ProgressRing"
    Reusable progress ring component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    RevenueChart
    data-component="RevenueChart"
    Reusable revenue chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    SmartRouteDiagram
    data-component="SmartRouteDiagram"
    Reusable smart route diagram component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    TenantIsolationDiagram
    data-component="TenantIsolationDiagram"
    Reusable tenant isolation diagram component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    Timeline
    data-component="Timeline"
    Reusable timeline component.    		class: string = ""
    title: string = "Timeline"    		defaultNone
    TimelineChart
    data-component="TimelineChart"
    Reusable timeline chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    ToastProgress
    data-component="ToastProgress"
    Reusable toast progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    UploadProgress
    data-component="UploadProgress"
    Reusable upload progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    UptimeChart
    data-component="UptimeChart"
    Reusable uptime chart component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    UptimeMetric
    data-component="UptimeMetric"
    Reusable uptime metric component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    WebhookFlowDiagram
    data-component="WebhookFlowDiagram"
    Reusable webhook flow diagram component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    WorkflowProgress
    data-component="WorkflowProgress"
    Reusable workflow progress component.    		title: string = ""
    value: string = ""
    description: string = ""
    summary: string = ""
    loading: boolean = false
    class: string = ""    		defaultNone
    
-      
+</div>
    Explore the component library
    The component reference now has a dedicated catalog with searchable cards and one complete page per component.
    Browse all 901 components →
    
+      
     
    
       
       
diff --git a/app/pages/packages/uploader.wrn b/app/pages/packages/uploader.wrn
index a11f4264..e9595ccd 100644
--- a/app/pages/packages/uploader.wrn
+++ b/app/pages/packages/uploader.wrn
@@ -9,13 +9,12 @@ page wrnexusuploader {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Data · Preview
    @wrnexus/uploader
    Validated local/S3 uploads and secure file serving.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/uploader@0.2.64
    Request preview access. Never put registry tokens in source control.
    Config-driven file uploads + serving for WRNexusJS. Declare named storage stores (local disk or any S3-compatible backend) in wrnexus.config.ts, upload with one function call, drop a drag-and-drop widget on a page, and serve files back — public or private. Zero external dependencies (S3 is signed with a built-in AWS SigV4 implementation, like the rest of the framework).
    
+      
    Browse documentation
    
+      
    
+      
    Data · Package reference
    @wrnexus/uploader
    Validated local/S3 uploads and secure file serving.
    v0.2.64Private registryData
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/uploader@0.2.64
    Request preview access. Never put registry tokens in source control.
    Config-driven file uploads + serving for WRNexusJS. Declare named storage stores (local disk or any S3-compatible backend) in wrnexus.config.ts, upload with one function call, drop a drag-and-drop widget on a page, and serve files back — public or private. Zero external dependencies (S3 is signed with a built-in AWS SigV4 implementation, like the rest of the framework).
    
 
    Usage
    
 
    Configure local and S3 stores
    
 
    // wrnexus.config.ts
@@ -98,7 +97,7 @@ export const GET = serveFromStore("docs"); // your middleware decides
 
  • SigV4 signing is implemented from scratch (no @aws-sdk); tested against local S3 semantics.
    • 
 
    Live AWS/R2 connectivity depends on your credentials + bucket policy.
    
 
  • v1 buffers each file in memory up to its size cap (fine for images/docs up to tens of MB).
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    import { Context } from '@wrnexus/core';
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    import { Context } from '@wrnexus/core';
 
 /**
  * Storage driver contract + config types.
@@ -373,7 +372,7 @@ declare function accepts(accept: string[] | undefined, file: {
 }): boolean;
 
 export { type LocalStoreConfig, type PutMeta, type S3StoreConfig, type StorageConfig, type StorageDriver, type Store, type StoreAccess, type StoreConfig, type StoredObject, UPLOADS_PREFIX, UPLOAD_JS_HREF, UPLOAD_RUNTIME, UploadError, type UploadOptions, type UploadedFile, accepts, configureStorage, contentTypeOf, encodeKey, extForType, extOf, getStore, handleUpload, hasStorage, localDriver, s3Driver, serveFromStore, serveStoredFile, sha256Hex, signS3, storeNames, storedUrl, upload };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Configure local and S3 stores
    // wrnexus.config.ts
+
    Examples
    Copy-ready examples from the installed package documentation.
    Configure local and S3 stores
    // wrnexus.config.ts
 import type { AppConfig } from "@wrnexus/styles";
 
 const config: AppConfig = {
diff --git a/app/pages/packages/validation.wrn b/app/pages/packages/validation.wrn
index 43a97ec4..6d7dfd05 100644
--- a/app/pages/packages/validation.wrn
+++ b/app/pages/packages/validation.wrn
@@ -9,13 +9,12 @@ page wrnexusvalidation {
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v0.2.64
    
       
    
-      
    Browse documentation
    
-      
    
-      
-      
    Security · Preview
    @wrnexus/validation
    Typed schemas, coercion, validation, and browser descriptors.
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/validation@0.2.64
    Request preview access. Never put registry tokens in source control.
    One fluent schema, validated on the server (API bodies, env vars) and mirrored to an eval-free browser validator for forms.
    
+      
    Browse documentation
    
+      
    
+      
    Security · Package reference
    @wrnexus/validation
    Typed schemas, coercion, validation, and browser descriptors.
    v0.2.64Private registrySecurity
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/validation@0.2.64
    Request preview access. Never put registry tokens in source control.
    One fluent schema, validated on the server (API bodies, env vars) and mirrored to an eval-free browser validator for forms.
    
 
    Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.
    
 
    Overview
    
 
    Define a schema once with the fluent v builder, then reuse it in three places: .parse() runs server-side and returns coerced values plus per-field errors; .describe() emits a plain-JSON SchemaDescriptor that the browser runtime interprets (no eval, no bundled validator); and helpers like parseBody and parseEnv wire schemas straight into API routes and startup config. The server rule logic (applyRule/checkField) and the client runtime (VALIDATE_RUNTIME) mirror each other exactly, so a form validates identically in both places. Schemas are conventionally kept in app/schemas/.
    
@@ -129,7 +128,7 @@ const head = `<script>${renderSchemasScript({ signup: signupSche
 
  • Refinements (refine) run only server-side and are never serialized — client and server agree on every other rule because both interpret the same RuleDescriptor list.
    • 
 
  • No runtime dependencies. Ships as TypeScript source (src/index.ts) executed directly by Bun.
    • 
 
  • Pairs with the WRNexusJS server (@wrnexus/core) for route handlers and the SSR layer that injects renderSchemasScript / VALIDATE_RUNTIME.
    • 
-
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    /**
+
    Complete TypeScript API
    Generated from the exact installed package declarations.
    /**
  * Client-side validation. `renderSchemasScript` bakes the discovered schema
  * descriptors into `window.__wireSchemas`; `VALIDATE_RUNTIME` is a generic,
  * eval-free validator that reads them and validates every `form[data-schema]`
@@ -309,7 +308,7 @@ declare function parseBody<T = Record<string, unknown>>(schema: Obje
 }>;
 
 export { type FieldDescriptor, ObjectSchema, type ParseResult, type RuleDescriptor, type SchemaDescriptor, VALIDATE_RUNTIME, applyRule, checkField, invalid, parseBody, parseEnv, renderSchemasScript, v };
-
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    Define a schema and validate an API body
    import { v, parseBody } from "@wrnexus/validation";
+
    Examples
    Copy-ready examples from the installed package documentation.
    Define a schema and validate an API body
    import { v, parseBody } from "@wrnexus/validation";
 
 export const signupSchema = v.object({
   email: v.string().required("Enter your email address").trim().email(),
diff --git a/app/pages/releases/0.2.64.wrn b/app/pages/releases/0.2.64.wrn
index 8638c700..03e00d35 100644
--- a/app/pages/releases/0.2.64.wrn
+++ b/app/pages/releases/0.2.64.wrn
@@ -7,8 +7,8 @@ page Release0264 {
   view {
     
     
    
-      
    W WRNexusJS
    Preview · v0.2.64
    
-      
    Browse documentation
    
+      
    W WRNexusJS
    Preview · v0.2.64
    
+      
    Browse documentation
    
       
    WRNexusJS 0.2.64
    Released 2026-07-13. All 26 installed packages are aligned to this version. Highlights include the new helpers package, reliable workspace app addition, and browser SSO redirects through forward authentication. See the changelog, upgrade guide, and package references.
    
       
       
diff --git a/app/pages/roadmap.wrn b/app/pages/roadmap.wrn
index 9fc4937a..f6cd2ea7 100644
--- a/app/pages/roadmap.wrn
+++ b/app/pages/roadmap.wrn
@@ -7,8 +7,8 @@ page Roadmap {
   view {
     
     
    
-      
    W WRNexusJS
    Preview · v0.2.64
    
-      
    Browse documentation
    
+      
    W WRNexusJS
    Preview · v0.2.64
    
+      
    Browse documentation
    
       
    Roadmap
    Roadmap items are direction, not delivery commitments. Dates require explicit owner approval.
    Now
    • Private preview onboarding and accurate package references
    • Runnable documentation fixtures and link/accessibility checks
    • License, support, and disclosure owner decisions
    Next
    • Durable queue driver guidance
    • Expanded database/auth/realtime examples
    • Versioned release notes and migration fixtures
    Later / exploration
    • Historical documentation selector
    • Maintained reproducible benchmarks
    • Broader mobile/native coverage
    
       
       
diff --git a/app/pages/search.wrn b/app/pages/search.wrn
index 5fcb759f..59e1b321 100644
--- a/app/pages/search.wrn
+++ b/app/pages/search.wrn
@@ -7,9 +7,9 @@ page Search {
   view {
     
     
    
-      
    W WRNexusJS
    Preview · v0.2.64
    
-      
    Browse documentation
    
-      
    Search documentation
    This build-time index is local and sends no query to a third party. Use your browser’s find command to filter this compact index.
    Core documentation
    Get started · Packages · Language · Architecture
    Guides
    Project structure · Routing · Pages and components · Server data · API routes · Middleware · Forms and validation · Authentication · Authorization · Application security · Database · Uploads · Realtime · Pub/sub · Queues · Testing · Workspaces and gateway · Deployment · Configuration and profiles · Internationalization and themes · Mobile · Observability · Upgrading · Troubleshooting
    Package APIs
    @wrnexus/ai · @wrnexus/authz · @wrnexus/compiler · @wrnexus/core · @wrnexus/csr · @wrnexus/db · @wrnexus/dev-server · @wrnexus/encryption · @wrnexus/helpers · @wrnexus/i18n · @wrnexus/jwt · @wrnexus/mobile · @wrnexus/native · @wrnexus/oauth · @wrnexus/pubsub · @wrnexus/queue · @wrnexus/reactive · @wrnexus/router · @wrnexus/ssr · @wrnexus/styles · @wrnexus/test · @wrnexus/tracking · @wrnexus/ui · @wrnexus/uploader · @wrnexus/validation · @wrnexus/cli
    
+      
    W WRNexusJS
    Preview · v0.2.64
    
+      
    Browse documentation
    
+      
    Search documentation
    This build-time index is local and sends no query to a third party. Use your browser’s find command to filter this compact index.
    Core documentation
    Get started · Packages · Components · Language · Architecture
    Guides
    Project structure · Routing · Pages and components · Server data · API routes · Middleware · Forms and validation · Authentication · Authorization · Application security · Database · Uploads · Realtime · Pub/sub · Queues · Testing · Workspaces and gateway · Deployment · Configuration and profiles · Internationalization and themes · Mobile · Observability · Upgrading · Troubleshooting
    Package APIs
    @wrnexus/ai · @wrnexus/authz · @wrnexus/compiler · @wrnexus/core · @wrnexus/csr · @wrnexus/db · @wrnexus/dev-server · @wrnexus/encryption · @wrnexus/helpers · @wrnexus/i18n · @wrnexus/jwt · @wrnexus/mobile · @wrnexus/native · @wrnexus/oauth · @wrnexus/pubsub · @wrnexus/queue · @wrnexus/reactive · @wrnexus/router · @wrnexus/ssr · @wrnexus/styles · @wrnexus/test · @wrnexus/tracking · @wrnexus/ui · @wrnexus/uploader · @wrnexus/validation · @wrnexus/cli
    
       
       
     
    
diff --git a/app/pages/security.wrn b/app/pages/security.wrn
index 7efe5760..2ae3cc6b 100644
--- a/app/pages/security.wrn
+++ b/app/pages/security.wrn
@@ -7,8 +7,8 @@ page Security {
   view {
     
     
    
-      
    W WRNexusJS
    Preview · v0.2.64
    
-      
    Browse documentation
    
+      
    W WRNexusJS
    Preview · v0.2.64
    
+      
    Browse documentation
    
       
    Security
    WRNexusJS provides primitives for CSP, CSRF, Trusted Types, sessions, validation, authorization, encryption, upload restrictions, request limits, and WebSocket-origin checks. Applications remain responsible for correct configuration, business authorization, secrets, dependencies, data protection, and operations.
    Supported releases
    Only the current private-preview release 0.2.64 is documented here. A formal old-release support window is not yet published.
    Report a vulnerability
    Use WorkRoot’s approved private contact path at workroot.in. Do not publish exploit details or secrets. Include affected version, impact, reproduction, and a safe contact method. Response targets, encryption key, bounty, audit, and certification are not currently claimed.
    Deployment controls
    Use restrictive CSP and permissions policies, HSTS only on HTTPS production origins, MIME sniffing protection, restrictive referrers, explicit CORS, secure cookies, CSRF validation, request limits, and origin checks. See application security.
    
       
       
diff --git a/app/pages/showcase.wrn b/app/pages/showcase.wrn
index 3c448f05..3245c7d8 100644
--- a/app/pages/showcase.wrn
+++ b/app/pages/showcase.wrn
@@ -7,8 +7,8 @@ page Showcase {
   view {
     
     
    
-      
    W WRNexusJS
    Preview · v0.2.64
    
-      
    Browse documentation
    
+      
    W WRNexusJS
    Preview · v0.2.64
    
+      
    Browse documentation
    
       
    Showcase
    Only confirmed public properties are listed; no customer or traffic claims are made.
    WorkRoot
    Creator/company site demonstrating a public WRNexusJS deployment. Exact deployed version and infrastructure notes await owner confirmation.
    WRNexusJS docs
    This documentation portal, built and verified against WRNexusJS 0.2.64 on Bun.
    Screenshots are intentionally deferred until approved assets and alt text are available.
    
       
       
diff --git a/app/pages/support.wrn b/app/pages/support.wrn
index 1efadb40..cf8b49a9 100644
--- a/app/pages/support.wrn
+++ b/app/pages/support.wrn
@@ -7,8 +7,8 @@ page Support {
   view {
     
     
    
-      
    W WRNexusJS
    Preview · v0.2.64
    
-      
    Browse documentation
    
+      
    W WRNexusJS
    Preview · v0.2.64
    
+      
    Browse documentation
    
       
    Support
    WRNexusJS has no public Discord, public issue tracker, or guaranteed community support channel listed by this repository. Preview access and support begin through WorkRoot’s public contact path.
    Include WRNexusJS version, Bun version, OS, a minimal reproduction, expected and actual behavior, and sanitized logs. Never include registry tokens, credentials, session cookies, or private data.
    Support scope, service levels, and commercial terms require owner confirmation.
    
       
       
diff --git a/app/pages/tutorial.wrn b/app/pages/tutorial.wrn
index 176cf548..2942c34a 100644
--- a/app/pages/tutorial.wrn
+++ b/app/pages/tutorial.wrn
@@ -7,8 +7,8 @@ page Tutorial {
   view {
     
     
    
-      
    W WRNexusJS
    Preview · v0.2.64
    
-      
    Browse documentation
    
+      
    W WRNexusJS
    Preview · v0.2.64
    
+      
    Browse documentation
    
       
    Preview · runnable-project extraction pending
    Secure task board
    This tutorial connects the installed 0.2.64 APIs into one design. Snippets are limited to declarations and README patterns verified in the installed packages; a CI-compiled standalone fixture remains on the roadmap.
    Application shape
    A .wrn page renders tasks from an SSR API binding. A shared validation schema protects mutations. Session middleware identifies users, authorization policies gate updates, and a realtime room broadcasts changes.
    Schema and create route
    import { v, parseBody } from "@wrnexus/validation";
 const task = v.object({ title: v.string().trim().min(3).max(120) });
 export const POST = async (ctx) => {
diff --git a/app/styles/global.css b/app/styles/global.css
index 62719c80..85a7ce7a 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,5 +1,151 @@
 @import "tailwindcss";
 @source "../**/*.{wrn,ts,tsx}";
+@source "../../node_modules/@wrnexus/ui/components/*.wrn";
+
+/* Documentation v2: one consistent reading surface for guides, packages,
+   and component references. */
+.docs-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 15rem;
+  gap: clamp(2rem, 5vw, 5rem);
+  align-items: start;
+  padding-top: clamp(1.5rem, 4vw, 3rem);
+}
+.package-document,
+.component-detail-page .documentation {
+  width: 100%;
+  max-width: 840px;
+  margin: 0;
+}
+.doc-intro {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 2.5rem;
+  padding: clamp(1.5rem, 4vw, 3rem);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: linear-gradient(
+    145deg,
+    var(--surface),
+    color-mix(in srgb, var(--brand) 7%, var(--surface))
+  );
+  box-shadow: var(--shadow);
+}
+.doc-intro::after {
+  position: absolute;
+  top: -7rem;
+  right: -5rem;
+  width: 16rem;
+  height: 16rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--brand) 18%, transparent);
+  filter: blur(45px);
+  content: "";
+  pointer-events: none;
+}
+.doc-meta,
+.component-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1.25rem;
+}
+.doc-meta span,
+.component-card-meta span {
+  padding: 0.35rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--muted);
+  background: var(--surface-soft);
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+.component-catalog-page {
+  padding-bottom: 6rem;
+}
+.component-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  padding-top: 1.5rem;
+}
+.component-card {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 250px;
+  flex-direction: column;
+  padding: 1.35rem;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  color: inherit;
+  background: var(--surface);
+  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
+  text-decoration: none;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.component-card:hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
+  box-shadow: var(--shadow);
+}
+.component-card h2 {
+  margin: 0.85rem 0 0.5rem;
+  overflow-wrap: anywhere;
+  font-size: 1.08rem;
+}
+.component-card p {
+  flex: 1;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+  line-height: 1.6;
+}
+.component-card .card-link {
+  margin-top: 1.2rem;
+  color: var(--brand-strong);
+  font-size: 0.84rem;
+  font-weight: 800;
+}
+.required {
+  color: #dc2626;
+  font-weight: 800;
+}
+.component-detail-page pre {
+  max-height: 38rem;
+}
+.component-catalog-callout {
+  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
+  border-radius: 20px;
+  padding: 1.5rem;
+  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
+}
+
+@media (max-width: 1080px) {
+  .component-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .docs-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .docs-layout .on-this-page {
+    display: none;
+  }
+}
+@media (max-width: 640px) {
+  .component-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .component-card {
+    min-height: 0;
+  }
+  .doc-intro {
+    border-radius: 18px;
+  }
+}
 
 :root {
   color-scheme: light;
diff --git a/public/llms.txt b/public/llms.txt
index 939f494f..c1cbd38d 100644
--- a/public/llms.txt
+++ b/public/llms.txt
@@ -31834,6 +31834,12628 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
 Slots: default
 Events: none
 
+# UI component catalog
+
+The installed @wrnexus/ui release contains 901 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
+
+### AcceptAllCookiesButton
+Mount: data-component="AcceptAllCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AccessibleAccordion
+Mount: data-component="AccessibleAccordion"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleCarousel
+Mount: data-component="AccessibleCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleChartSummary
+Mount: data-component="AccessibleChartSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleDialog
+Mount: data-component="AccessibleDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleErrorSummary
+Mount: data-component="AccessibleErrorSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleIcon
+Mount: data-component="AccessibleIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleMenu
+Mount: data-component="AccessibleMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTabs
+Mount: data-component="AccessibleTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTooltip
+Mount: data-component="AccessibleTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Accordion
+Mount: data-component="Accordion"
+Category: content
+Props: class: string = "", title: string = "Question", open: boolean = false
+Slots: default
+Events: click
+
+### AccountMenu
+Mount: data-component="AccountMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccountStatusBanner
+Mount: data-component="AccountStatusBanner"
+Category: feedback
+Props: label: string = "AccountStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ActionMenu
+Mount: data-component="ActionMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ActiveFilterList
+Mount: data-component="ActiveFilterList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ActivityList
+Mount: data-component="ActivityList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AddOnCard
+Mount: data-component="AddOnCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AddressInput
+Mount: data-component="AddressInput"
+Category: forms
+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
+
+### AddressPreview
+Mount: data-component="AddressPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AdvancedFilterBuilder
+Mount: data-component="AdvancedFilterBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Alert
+Mount: data-component="Alert"
+Category: feedback
+Props: class: string = "", title: string = "Notice", description: string = "", variant: string = "info", dismissible: boolean = false
+Slots: default
+Events: click
+
+### AlertDialog
+Mount: data-component="AlertDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AmountInput
+Mount: data-component="AmountInput"
+Category: forms
+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
+
+### AnalyticsDashboardPreview
+Mount: data-component="AnalyticsDashboardPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AnchorNavigation
+Mount: data-component="AnchorNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AnnouncementBar
+Mount: data-component="AnnouncementBar"
+Category: core
+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"
+Slots: none
+Events: click
+
+### ApartmentInput
+Mount: data-component="ApartmentInput"
+Category: forms
+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
+
+### ApiAuthenticationNotice
+Mount: data-component="ApiAuthenticationNotice"
+Category: feedback
+Props: label: string = "ApiAuthentication", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiEndpointCard
+Mount: data-component="ApiEndpointCard"
+Category: content
+Props: class: string = "", method: string = "GET", path: string = "/api/example", description: string = ""
+Slots: default
+Events: none
+
+### ApiErrorExample
+Mount: data-component="ApiErrorExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiHeaderTable
+Mount: data-component="ApiHeaderTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyCreateDialog
+Mount: data-component="ApiKeyCreateDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyDisplay
+Mount: data-component="ApiKeyDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyInput
+Mount: data-component="ApiKeyInput"
+Category: forms
+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
+
+### ApiMethodBadge
+Mount: data-component="ApiMethodBadge"
+Category: feedback
+Props: label: string = "ApiMethod", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiParameterTable
+Mount: data-component="ApiParameterTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiRateLimitNotice
+Mount: data-component="ApiRateLimitNotice"
+Category: feedback
+Props: label: string = "ApiRateLimit", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiRequestExample
+Mount: data-component="ApiRequestExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiResponseExample
+Mount: data-component="ApiResponseExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaTable
+Mount: data-component="ApiSchemaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaViewer
+Mount: data-component="ApiSchemaViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiVersionBadge
+Mount: data-component="ApiVersionBadge"
+Category: feedback
+Props: label: string = "ApiVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### AppHeader
+Mount: data-component="AppHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArchitectureSection
+Mount: data-component="ArchitectureSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AreaChart
+Mount: data-component="AreaChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticleHero
+Mount: data-component="ArticleHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleLayout
+Mount: data-component="ArticleLayout"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleNewsletterCTA
+Mount: data-component="ArticleNewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticlePageShell
+Mount: data-component="ArticlePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleShareActions
+Mount: data-component="ArticleShareActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AspectRatio
+Mount: data-component="AspectRatio"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AssetCard
+Mount: data-component="AssetCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AttachmentPicker
+Mount: data-component="AttachmentPicker"
+Category: forms
+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
+
+### AttachmentUpload
+Mount: data-component="AttachmentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AudioUpload
+Mount: data-component="AudioUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditLogPreview
+Mount: data-component="AuditLogPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditTable
+Mount: data-component="AuditTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AuthenticatorCodeInput
+Mount: data-component="AuthenticatorCodeInput"
+Category: forms
+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
+
+### AuthorAvatar
+Mount: data-component="AuthorAvatar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorCard
+Mount: data-component="AuthorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorizedApplicationCard
+Mount: data-component="AuthorizedApplicationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AutoGrid
+Mount: data-component="AutoGrid"
+Category: data
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AutomationExampleCard
+Mount: data-component="AutomationExampleCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AvailabilityCalendar
+Mount: data-component="AvailabilityCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Avatar
+Mount: data-component="Avatar"
+Category: content
+Props: class: string = "", src: string = "", alt: string = "", initials: string = "WR", size: string = "md"
+Slots: none
+Events: none
+
+### AvatarGroup
+Mount: data-component="AvatarGroup"
+Category: forms
+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
+
+### AvatarUpload
+Mount: data-component="AvatarUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BackButton
+Mount: data-component="BackButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BackToTop
+Mount: data-component="BackToTop"
+Category: core
+Props: class: string = "", label: string = "Back to top", assistiveLabel: string = "Return to the top of the page", threshold: number = 500
+Slots: none
+Events: click
+
+### Badge
+Mount: data-component="Badge"
+Category: feedback
+Props: class: string = "", label: string = "Badge", variant: string = "neutral"
+Slots: none
+Events: none
+
+### BankTransferDetails
+Mount: data-component="BankTransferDetails"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Banner
+Mount: data-component="Banner"
+Category: feedback
+Props: class: string = "", text: string = "Announcement", href: string = "", actionLabel: string = "Learn more", variant: string = "brand"
+Slots: none
+Events: none
+
+### BarChart
+Mount: data-component="BarChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BetaBadge
+Mount: data-component="BetaBadge"
+Category: feedback
+Props: label: string = "Beta", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### BillingAddressForm
+Mount: data-component="BillingAddressForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingExample
+Mount: data-component="BillingExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingPeriodToggle
+Mount: data-component="BillingPeriodToggle"
+Category: forms
+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
+Mount: data-component="BlackoutDatePicker"
+Category: forms
+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
+
+### BlogCard
+Mount: data-component="BlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlogGrid
+Mount: data-component="BlogGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogList
+Mount: data-component="BlogList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogSearch
+Mount: data-component="BlogSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BodyText
+Mount: data-component="BodyText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BorderRadiusPicker
+Mount: data-component="BorderRadiusPicker"
+Category: forms
+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
+
+### BottomNavigation
+Mount: data-component="BottomNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BrandColorPicker
+Mount: data-component="BrandColorPicker"
+Category: forms
+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
+Mount: data-component="BrandSelector"
+Category: forms
+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
+
+### Breadcrumbs
+Mount: data-component="Breadcrumbs"
+Category: core
+Props: class: string = "", items: string = [], centered: boolean = false, compact: boolean = false, showHome: boolean = true, homeLabel: string = "Home", homeHref: string = "/"
+Slots: none
+Events: none
+
+### BrowserFrame
+Mount: data-component="BrowserFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BudgetRangeSlider
+Mount: data-component="BudgetRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BudgetSelector
+Mount: data-component="BudgetSelector"
+Category: forms
+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
+Mount: data-component="BusinessHoursPicker"
+Category: forms
+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
+
+### Button
+Mount: data-component="Button"
+Category: actions
+Props: label: string = "Button", type: string = "button", variant: string = "primary", size: string = "md", disabled: boolean = false, loading: boolean = false, icon: string = "", className: string = ""
+Slots: none
+Events: none
+
+### ButtonGroup
+Mount: data-component="ButtonGroup"
+Category: forms
+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
+Mount: data-component="ButtonSelector"
+Category: forms
+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
+
+### Calendar
+Mount: data-component="Calendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CalendarGrid
+Mount: data-component="CalendarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CalendarHeader
+Mount: data-component="CalendarHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CalendarNavigation
+Mount: data-component="CalendarNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CallbackUrlInput
+Mount: data-component="CallbackUrlInput"
+Category: forms
+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
+
+### CampaignCard
+Mount: data-component="CampaignCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignPerformancePreview
+Mount: data-component="CampaignPerformancePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignProgress
+Mount: data-component="CampaignProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CapabilityGrid
+Mount: data-component="CapabilityGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CaptchaField
+Mount: data-component="CaptchaField"
+Category: forms
+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
+
+### Card
+Mount: data-component="Card"
+Category: content
+Props: variant: string = "default", padding: string = "md", interactive: boolean = false, className: string = ""
+Slots: default
+Events: none
+
+### CardPaymentForm
+Mount: data-component="CardPaymentForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CardSelector
+Mount: data-component="CardSelector"
+Category: forms
+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
+
+### CardSkeleton
+Mount: data-component="CardSkeleton"
+Category: feedback
+Props: label: string = "Card", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CareerApplicationForm
+Mount: data-component="CareerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CareerBenefitsGrid
+Mount: data-component="CareerBenefitsGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Carousel
+Mount: data-component="Carousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyCard
+Mount: data-component="CaseStudyCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyHero
+Mount: data-component="CaseStudyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyPreview
+Mount: data-component="CaseStudyPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CenteredCTA
+Mount: data-component="CenteredCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CenteredHero
+Mount: data-component="CenteredHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CenteredSectionHeader
+Mount: data-component="CenteredSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CertificateUpload
+Mount: data-component="CertificateUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CertificationBadge
+Mount: data-component="CertificationBadge"
+Category: feedback
+Props: label: string = "Certification", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChallengeSection
+Mount: data-component="ChallengeSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ChannelBadge
+Mount: data-component="ChannelBadge"
+Category: feedback
+Props: label: string = "Channel", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChannelCard
+Mount: data-component="ChannelCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonChart
+Mount: data-component="ChannelComparisonChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonTable
+Mount: data-component="ChannelComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelFallbackDiagram
+Mount: data-component="ChannelFallbackDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelFlow
+Mount: data-component="ChannelFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelIcon
+Mount: data-component="ChannelIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelRateTable
+Mount: data-component="ChannelRateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelSelector
+Mount: data-component="ChannelSelector"
+Category: forms
+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
+
+### CharacterCounter
+Mount: data-component="CharacterCounter"
+Category: feedback
+Props: label: string = "Character", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartEmptyState
+Mount: data-component="ChartEmptyState"
+Category: feedback
+Props: label: string = "ChartEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartTooltip
+Mount: data-component="ChartTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Checkbox
+Mount: data-component="Checkbox"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Checkbox", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### CheckboxGroup
+Mount: data-component="CheckboxGroup"
+Category: forms
+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
+
+### Checklist
+Mount: data-component="Checklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChecklistProgress
+Mount: data-component="ChecklistProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Chip
+Mount: data-component="Chip"
+Category: core
+Props: label: string = "Chip", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChipInput
+Mount: data-component="ChipInput"
+Category: forms
+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
+
+### CircularProgress
+Mount: data-component="CircularProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CitySelector
+Mount: data-component="CitySelector"
+Category: forms
+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
+
+### ClearFiltersButton
+Mount: data-component="ClearFiltersButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ClickableCard
+Mount: data-component="ClickableCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CloseButton
+Mount: data-component="CloseButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Cluster
+Mount: data-component="Cluster"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### Code
+Mount: data-component="Code"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeBlock
+Mount: data-component="CodeBlock"
+Category: content
+Props: class: string = "", language: string = "text", filename: string = "", code: string = ""
+Slots: none
+Events: click
+
+### CodeCopyButton
+Mount: data-component="CodeCopyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CodeHeader
+Mount: data-component="CodeHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CodeInput
+Mount: data-component="CodeInput"
+Category: forms
+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
+
+### CodeLanguageBadge
+Mount: data-component="CodeLanguageBadge"
+Category: feedback
+Props: label: string = "CodeLanguage", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CodeTabs
+Mount: data-component="CodeTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeText
+Mount: data-component="CodeText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CohortChart
+Mount: data-component="CohortChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ColorGrid
+Mount: data-component="ColorGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ColorHexInput
+Mount: data-component="ColorHexInput"
+Category: forms
+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
+Mount: data-component="ColorPicker"
+Category: forms
+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
+Mount: data-component="ColorSelector"
+Category: forms
+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
+
+### ColorSwatch
+Mount: data-component="ColorSwatch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Combobox
+Mount: data-component="Combobox"
+Category: core
+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
+
+### ComingSoonBadge
+Mount: data-component="ComingSoonBadge"
+Category: feedback
+Props: label: string = "ComingSoon", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ComingSoonState
+Mount: data-component="ComingSoonState"
+Category: feedback
+Props: label: string = "ComingSoon", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CommandBlock
+Mount: data-component="CommandBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CommandMenu
+Mount: data-component="CommandMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### CommandSearchInput
+Mount: data-component="CommandSearchInput"
+Category: forms
+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
+
+### CompanyHero
+Mount: data-component="CompanyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanyNameInput
+Mount: data-component="CompanyNameInput"
+Category: forms
+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
+
+### CompanyPageShell
+Mount: data-component="CompanyPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanySizeSelector
+Mount: data-component="CompanySizeSelector"
+Category: forms
+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
+Mount: data-component="ComparisonDateRangePicker"
+Category: forms
+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
+
+### ComparisonTable
+Mount: data-component="ComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CompletionMeter
+Mount: data-component="CompletionMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ComplianceBadgeList
+Mount: data-component="ComplianceBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ComplianceProgramCard
+Mount: data-component="ComplianceProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConfirmationDialog
+Mount: data-component="ConfirmationDialog"
+Category: overlays
+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
+
+### ConfirmPasswordInput
+Mount: data-component="ConfirmPasswordInput"
+Category: forms
+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
+
+### ConnectedAccountCard
+Mount: data-component="ConnectedAccountCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConnectionCard
+Mount: data-component="ConnectionCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConsentTimelinePreview
+Mount: data-component="ConsentTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCard
+Mount: data-component="ContactCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCTA
+Mount: data-component="ContactCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactForm
+Mount: data-component="ContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactHero
+Mount: data-component="ContactHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactPageShell
+Mount: data-component="ContactPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesBanner
+Mount: data-component="ContactSalesBanner"
+Category: core
+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
+
+### ContactSalesButton
+Mount: data-component="ContactSalesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesForm
+Mount: data-component="ContactSalesForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Container
+Mount: data-component="Container"
+Category: core
+Props: size: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### ContextMenu
+Mount: data-component="ContextMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ContextSwitcher
+Mount: data-component="ContextSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversationList
+Mount: data-component="ConversationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ConversationPreview
+Mount: data-component="ConversationPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversionChart
+Mount: data-component="ConversionChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CookieBanner
+Mount: data-component="CookieBanner"
+Category: feedback
+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
+
+### CookieCategoryList
+Mount: data-component="CookieCategoryList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookieCategoryToggle
+Mount: data-component="CookieCategoryToggle"
+Category: forms
+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
+
+### CookieConsent
+Mount: data-component="CookieConsent"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click, change
+
+### CookieDetailsTable
+Mount: data-component="CookieDetailsTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookiePreferencesDialog
+Mount: data-component="CookiePreferencesDialog"
+Category: overlays
+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
+
+### CookieTable
+Mount: data-component="CookieTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CoordinatesInput
+Mount: data-component="CoordinatesInput"
+Category: forms
+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
+Mount: data-component="CoordinatesPicker"
+Category: forms
+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
+
+### CopyButton
+Mount: data-component="CopyButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopyCodeButton
+Mount: data-component="CopyCodeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopySecretField
+Mount: data-component="CopySecretField"
+Category: forms
+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
+
+### CostBreakdownChart
+Mount: data-component="CostBreakdownChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CostSummary
+Mount: data-component="CostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Counter
+Mount: data-component="Counter"
+Category: feedback
+Props: label: string = "Status", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CountryCallingCodeInput
+Mount: data-component="CountryCallingCodeInput"
+Category: forms
+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
+Mount: data-component="CountryCallingCodeSelector"
+Category: forms
+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
+Mount: data-component="CountrySelector"
+Category: forms
+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
+Mount: data-component="CouponInput"
+Category: forms
+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
+Mount: data-component="CreditAmountInput"
+Category: forms
+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
+
+### CronBuilder
+Mount: data-component="CronBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CronInput
+Mount: data-component="CronInput"
+Category: forms
+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
+
+### CsvUpload
+Mount: data-component="CsvUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CTASection
+Mount: data-component="CTASection"
+Category: layout
+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
+
+### CurrencyInput
+Mount: data-component="CurrencyInput"
+Category: forms
+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
+Mount: data-component="CurrencySelector"
+Category: forms
+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
+Mount: data-component="CurrentPasswordInput"
+Category: forms
+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
+
+### CustomerLogo
+Mount: data-component="CustomerLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CustomerStoryCard
+Mount: data-component="CustomerStoryCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DangerButton
+Mount: data-component="DangerButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DataProtectionCard
+Mount: data-component="DataProtectionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DataRetentionTable
+Mount: data-component="DataRetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DataTable
+Mount: data-component="DataTable"
+Category: data
+Props: caption: string = "Data table", columns: string = [], rows: string = [], emptyMessage: string = "No data available.", striped: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### DateInput
+Mount: data-component="DateInput"
+Category: forms
+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
+Mount: data-component="DatePicker"
+Category: forms
+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
+
+### DateRangeCalendar
+Mount: data-component="DateRangeCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateRangePicker
+Mount: data-component="DateRangePicker"
+Category: forms
+Props: class: string = "", label: string = "Date range", startName: string = "startDate", endName: string = "endDate"
+Slots: none
+Events: none
+
+### DateRangeSlider
+Mount: data-component="DateRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateTimeInput
+Mount: data-component="DateTimeInput"
+Category: forms
+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
+Mount: data-component="DateTimePicker"
+Category: forms
+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
+Mount: data-component="DateTimeRangePicker"
+Category: forms
+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
+Mount: data-component="DecimalInput"
+Category: forms
+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
+
+### DefinitionList
+Mount: data-component="DefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DeleteConfirmationDialog
+Mount: data-component="DeleteConfirmationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryPreview
+Mount: data-component="DeliveryPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusChart
+Mount: data-component="DeliveryStatusChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusTimeline
+Mount: data-component="DeliveryStatusTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DemoRequestForm
+Mount: data-component="DemoRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DepartmentInput
+Mount: data-component="DepartmentInput"
+Category: forms
+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
+
+### DeprecatedFeatureAlert
+Mount: data-component="DeprecatedFeatureAlert"
+Category: feedback
+Props: label: string = "DeprecatedFeature", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### DescriptionList
+Mount: data-component="DescriptionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DesktopNavigation
+Mount: data-component="DesktopNavigation"
+Category: layout
+Props: label: string = "Primary navigation", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### DeveloperCTA
+Mount: data-component="DeveloperCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeveloperHero
+Mount: data-component="DeveloperHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperPageShell
+Mount: data-component="DeveloperPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperSearch
+Mount: data-component="DeveloperSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DevelopersMegaMenu
+Mount: data-component="DevelopersMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### DevelopersMenu
+Mount: data-component="DevelopersMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeviceCard
+Mount: data-component="DeviceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### disclosure
+Mount: data-component="disclosure"
+Category: core
+Props: summary: string = "Details", class: string = ""
+Slots: default
+Events: none
+
+### DiscountInput
+Mount: data-component="DiscountInput"
+Category: forms
+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
+
+### DisplayHeading
+Mount: data-component="DisplayHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DisplayNameInput
+Mount: data-component="DisplayNameInput"
+Category: forms
+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
+
+### Divider
+Mount: data-component="Divider"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### DocumentPreview
+Mount: data-component="DocumentPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DocumentUpload
+Mount: data-component="DocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DomainInput
+Mount: data-component="DomainInput"
+Category: forms
+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
+
+### DoNotSellLink
+Mount: data-component="DoNotSellLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DonutChart
+Mount: data-component="DonutChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadAction
+Mount: data-component="DownloadAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadButton
+Mount: data-component="DownloadButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadGateForm
+Mount: data-component="DownloadGateForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DownloadPolicyButton
+Mount: data-component="DownloadPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadResourceForm
+Mount: data-component="DownloadResourceForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Drawer
+Mount: data-component="Drawer"
+Category: core
+Props: class: string = "", title: string = "Panel", open: boolean = false, side: string = "right"
+Slots: default
+Events: click
+
+### DropdownMenu
+Mount: data-component="DropdownMenu"
+Category: overlays
+Props: class: string = "", label: string = "Menu"
+Slots: default
+Events: click
+
+### DropdownNavigation
+Mount: data-component="DropdownNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DurationInput
+Mount: data-component="DurationInput"
+Category: forms
+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
+Mount: data-component="DurationPicker"
+Category: forms
+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
+
+### DurationSlider
+Mount: data-component="DurationSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ElevatedCard
+Mount: data-component="ElevatedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailBodyEditor
+Mount: data-component="EmailBodyEditor"
+Category: forms
+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
+
+### EmailComposer
+Mount: data-component="EmailComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailInput
+Mount: data-component="EmailInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Email", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### EmojiPicker
+Mount: data-component="EmojiPicker"
+Category: forms
+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
+
+### EmptyState
+Mount: data-component="EmptyState"
+Category: feedback
+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
+
+### EncryptionDiagram
+Mount: data-component="EncryptionDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseCTA
+Mount: data-component="EnterpriseCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseHero
+Mount: data-component="EnterpriseHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### EnterprisePricingCard
+Mount: data-component="EnterprisePricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EnvironmentSelector
+Mount: data-component="EnvironmentSelector"
+Category: forms
+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
+
+### EnvironmentSwitcher
+Mount: data-component="EnvironmentSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorActions
+Mount: data-component="ErrorActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ErrorCard
+Mount: data-component="ErrorCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorCode
+Mount: data-component="ErrorCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorHero
+Mount: data-component="ErrorHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorIllustration
+Mount: data-component="ErrorIllustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPage
+Mount: data-component="ErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPageShell
+Mount: data-component="ErrorPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorState
+Mount: data-component="ErrorState"
+Category: feedback
+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
+
+### ErrorSupportLink
+Mount: data-component="ErrorSupportLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EstimatedCostSummary
+Mount: data-component="EstimatedCostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EventTable
+Mount: data-component="EventTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ExpandableText
+Mount: data-component="ExpandableText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ExpiryDateTimePicker
+Mount: data-component="ExpiryDateTimePicker"
+Category: forms
+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
+
+### ExportProgress
+Mount: data-component="ExportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ExternalLink
+Mount: data-component="ExternalLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EyebrowText
+Mount: data-component="EyebrowText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FactorCard
+Mount: data-component="FactorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteBuilder
+Mount: data-component="FallbackRouteBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteDiagram
+Mount: data-component="FallbackRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FAQ
+Mount: data-component="FAQ"
+Category: core
+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
+Mount: data-component="FAQAccordion"
+Category: core
+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
+
+### FaviconUpload
+Mount: data-component="FaviconUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FaxInput
+Mount: data-component="FaxInput"
+Category: forms
+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
+
+### FeatureCard
+Mount: data-component="FeatureCard"
+Category: content
+Props: class: string = "", icon: string = "✦", title: string = "Feature", description: string = "", href: string = ""
+Slots: none
+Events: none
+
+### FeatureChecklist
+Mount: data-component="FeatureChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureComparisonTable
+Mount: data-component="FeatureComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeaturedBlogCard
+Mount: data-component="FeaturedBlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureDetailsPanel
+Mount: data-component="FeatureDetailsPanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FeatureGrid
+Mount: data-component="FeatureGrid"
+Category: data
+Props: columns: number = 3, className: string = ""
+Slots: default
+Events: none
+
+### FeatureIconCard
+Mount: data-component="FeatureIconCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureList
+Mount: data-component="FeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTabs
+Mount: data-component="FeatureTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTimeline
+Mount: data-component="FeatureTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FeatureUnavailableState
+Mount: data-component="FeatureUnavailableState"
+Category: feedback
+Props: label: string = "FeatureUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FieldActions
+Mount: data-component="FieldActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### file-upload
+Mount: data-component="file-upload"
+Category: core
+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
+
+### FileInput
+Mount: data-component="FileInput"
+Category: forms
+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
+
+### FileList
+Mount: data-component="FileList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FileSizeInput
+Mount: data-component="FileSizeInput"
+Category: forms
+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
+
+### FileSizeLabel
+Mount: data-component="FileSizeLabel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileTypeBadge
+Mount: data-component="FileTypeBadge"
+Category: feedback
+Props: label: string = "FileType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FileUpload
+Mount: data-component="FileUpload"
+Category: content
+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
+
+### FilterableTable
+Mount: data-component="FilterableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FilterBar
+Mount: data-component="FilterBar"
+Category: core
+Props: label: string = "Filters", clearLabel: string = "Clear filters", showClear: boolean = true, class: string = ""
+Slots: default
+Events: none
+
+### FilterMenu
+Mount: data-component="FilterMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FilterSearchInput
+Mount: data-component="FilterSearchInput"
+Category: forms
+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
+
+### FinalCTA
+Mount: data-component="FinalCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FirstNameInput
+Mount: data-component="FirstNameInput"
+Category: forms
+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
+
+### Flex
+Mount: data-component="Flex"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FontPicker
+Mount: data-component="FontPicker"
+Category: forms
+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
+Mount: data-component="FontSizePicker"
+Category: forms
+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
+Mount: data-component="FontWeightPicker"
+Category: forms
+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
+
+### FooterLanguageSwitcher
+Mount: data-component="FooterLanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FooterStatusIndicator
+Mount: data-component="FooterStatusIndicator"
+Category: feedback
+Props: label: string = "FooterStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenPage
+Mount: data-component="ForbiddenPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenState
+Mount: data-component="ForbiddenState"
+Category: feedback
+Props: label: string = "Forbidden", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForgotPasswordForm
+Mount: data-component="ForgotPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Form
+Mount: data-component="Form"
+Category: content
+Props: action: string = "", method: string = "post", name: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormActions
+Mount: data-component="FormActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormAlert
+Mount: data-component="FormAlert"
+Category: feedback
+Props: label: string = "Form", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FormDialog
+Mount: data-component="FormDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FormError
+Mount: data-component="FormError"
+Category: core
+Props: id: string = "", message: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormErrorSummary
+Mount: data-component="FormErrorSummary"
+Category: content
+Props: class: string = "", title: string = "Please fix the following", visible: boolean = true
+Slots: default
+Events: none
+
+### FormField
+Mount: data-component="FormField"
+Category: forms
+Props: class: string = "", label: string = "Field", help: string = "", error: string = "", required: boolean = false
+Slots: default
+Events: none
+
+### FormGrid
+Mount: data-component="FormGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormGroup
+Mount: data-component="FormGroup"
+Category: forms
+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
+
+### FormHelpText
+Mount: data-component="FormHelpText"
+Category: content
+Props: id: string = "", text: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormLabel
+Mount: data-component="FormLabel"
+Category: content
+Props: for: string = "", label: string = "Label", required: boolean = false, optional: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### FormProgress
+Mount: data-component="FormProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormRow
+Mount: data-component="FormRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormSection
+Mount: data-component="FormSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FullBleed
+Mount: data-component="FullBleed"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FullscreenDialog
+Mount: data-component="FullscreenDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FunnelChart
+Mount: data-component="FunnelChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeoChart
+Mount: data-component="GeoChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeofenceEditor
+Mount: data-component="GeofenceEditor"
+Category: forms
+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
+
+### GhostButton
+Mount: data-component="GhostButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GlassCard
+Mount: data-component="GlassCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GlobalSearch
+Mount: data-component="GlobalSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GradientCTA
+Mount: data-component="GradientCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GradientPicker
+Mount: data-component="GradientPicker"
+Category: forms
+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
+Mount: data-component="GradientStopEditor"
+Category: forms
+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
+
+### Grid
+Mount: data-component="Grid"
+Category: data
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### GuideCard
+Mount: data-component="GuideCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideChecklist
+Mount: data-component="GuideChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideDifficultyBadge
+Mount: data-component="GuideDifficultyBadge"
+Category: feedback
+Props: label: string = "GuideDifficulty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### GuideGrid
+Mount: data-component="GuideGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### GuideStep
+Mount: data-component="GuideStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Header
+Mount: data-component="Header"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeaderActions
+Mount: data-component="HeaderActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HealthIndicator
+Mount: data-component="HealthIndicator"
+Category: feedback
+Props: label: string = "Health", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Hero
+Mount: data-component="Hero"
+Category: layout
+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
+
+### HeroActions
+Mount: data-component="HeroActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroCodePanel
+Mount: data-component="HeroCodePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeroGradientText
+Mount: data-component="HeroGradientText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroPrimaryAction
+Mount: data-component="HeroPrimaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroProductPreview
+Mount: data-component="HeroProductPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroSecondaryAction
+Mount: data-component="HeroSecondaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroTrustText
+Mount: data-component="HeroTrustText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HexColorInput
+Mount: data-component="HexColorInput"
+Category: forms
+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
+Mount: data-component="HiddenField"
+Category: forms
+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
+
+### HighlightText
+Mount: data-component="HighlightText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HolidayCalendar
+Mount: data-component="HolidayCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HostnameInput
+Mount: data-component="HostnameInput"
+Category: forms
+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
+Mount: data-component="HourPicker"
+Category: forms
+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
+Mount: data-component="HslColorInput"
+Category: forms
+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
+
+### hstack
+Mount: data-component="hstack"
+Category: core
+Props: gap: string = "4", align: string = "center", class: string = ""
+Slots: default
+Events: none
+
+### HtmlEditor
+Mount: data-component="HtmlEditor"
+Category: forms
+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
+
+### HumanApprovalStep
+Mount: data-component="HumanApprovalStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Icon
+Mount: data-component="Icon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IconButton
+Mount: data-component="IconButton"
+Category: actions
+Props: class: string = "", label: string = "Action", icon: string = "•", variant: string = "ghost", disabled: boolean = false
+Slots: none
+Events: none
+
+### IconPicker
+Mount: data-component="IconPicker"
+Category: forms
+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
+Mount: data-component="IconSelector"
+Category: forms
+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
+Mount: data-component="IdentifierInput"
+Category: forms
+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
+
+### Illustration
+Mount: data-component="Illustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageCompressionPreview
+Mount: data-component="ImageCompressionPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageEditor
+Mount: data-component="ImageEditor"
+Category: forms
+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
+
+### ImagePreviewDialog
+Mount: data-component="ImagePreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ImageSelector
+Mount: data-component="ImageSelector"
+Category: forms
+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
+
+### ImageUpload
+Mount: data-component="ImageUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImportProgress
+Mount: data-component="ImportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentAlert
+Mount: data-component="IncidentAlert"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentBanner
+Mount: data-component="IncidentBanner"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentCard
+Mount: data-component="IncidentCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IncidentList
+Mount: data-component="IncidentList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### IncidentResponseFlow
+Mount: data-component="IncidentResponseFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentSeverityBadge
+Mount: data-component="IncidentSeverityBadge"
+Category: feedback
+Props: label: string = "IncidentSeverity", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentTimeline
+Mount: data-component="IncidentTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IndustryBadge
+Mount: data-component="IndustryBadge"
+Category: feedback
+Props: label: string = "Industry", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IndustrySelector
+Mount: data-component="IndustrySelector"
+Category: forms
+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
+
+### InfoCard
+Mount: data-component="InfoCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Inline
+Mount: data-component="Inline"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### InlineAlert
+Mount: data-component="InlineAlert"
+Category: feedback
+Props: label: string = "Inline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### InlineCode
+Mount: data-component="InlineCode"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### input
+Mount: data-component="input"
+Category: core
+Props: type: string = "text", name: string = "", value: string = "", placeholder: string = "", class: string = ""
+Slots: none
+Events: none
+
+### InputGroup
+Mount: data-component="InputGroup"
+Category: forms
+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
+
+### InsetPanel
+Mount: data-component="InsetPanel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### IntegerInput
+Mount: data-component="IntegerInput"
+Category: forms
+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
+
+### IntegrationCard
+Mount: data-component="IntegrationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceLineItem
+Mount: data-component="InvoiceLineItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceSummary
+Mount: data-component="InvoiceSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IpAddressInput
+Mount: data-component="IpAddressInput"
+Category: forms
+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
+
+### JobCard
+Mount: data-component="JobCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JobProgress
+Mount: data-component="JobProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### JobTitleInput
+Mount: data-component="JobTitleInput"
+Category: forms
+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
+Mount: data-component="JsonInput"
+Category: forms
+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
+
+### JsonViewer
+Mount: data-component="JsonViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### KeyValueTable
+Mount: data-component="KeyValueTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### KycDocumentUpload
+Mount: data-component="KycDocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LanguageSelector
+Mount: data-component="LanguageSelector"
+Category: forms
+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
+
+### LanguageSwitcher
+Mount: data-component="LanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LastNameInput
+Mount: data-component="LastNameInput"
+Category: forms
+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
+
+### LatencyMetric
+Mount: data-component="LatencyMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LatitudeInput
+Mount: data-component="LatitudeInput"
+Category: forms
+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
+
+### LeadershipGrid
+Mount: data-component="LeadershipGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LeadText
+Mount: data-component="LeadText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalAcceptanceNotice
+Mount: data-component="LegalAcceptanceNotice"
+Category: feedback
+Props: label: string = "LegalAcceptance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalBulletList
+Mount: data-component="LegalBulletList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalContactBlock
+Mount: data-component="LegalContactBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalDefinitionList
+Mount: data-component="LegalDefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentHeader
+Mount: data-component="LegalDocumentHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentLayout
+Mount: data-component="LegalDocumentLayout"
+Category: layout
+Props: class: string = "", title: string = "Legal document", effectiveDate: string = "", updatedDate: string = ""
+Slots: toc, default
+Events: none
+
+### LegalHero
+Mount: data-component="LegalHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalLanguageSelector
+Mount: data-component="LegalLanguageSelector"
+Category: forms
+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
+
+### LegalNotice
+Mount: data-component="LegalNotice"
+Category: feedback
+Props: label: string = "Legal", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalPageShell
+Mount: data-component="LegalPageShell"
+Category: layout
+Props: class: string = ""
+Slots: navigation, default
+Events: none
+
+### LegalPrintButton
+Mount: data-component="LegalPrintButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LegalRegionSelector
+Mount: data-component="LegalRegionSelector"
+Category: forms
+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
+
+### LegalSection
+Mount: data-component="LegalSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalSummary
+Mount: data-component="LegalSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalTable
+Mount: data-component="LegalTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalTableOfContents
+Mount: data-component="LegalTableOfContents"
+Category: core
+Props: title: string = "On this page", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### LegalVersionBadge
+Mount: data-component="LegalVersionBadge"
+Category: feedback
+Props: label: string = "LegalVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LetterSpacingPicker
+Mount: data-component="LetterSpacingPicker"
+Category: forms
+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
+Mount: data-component="LicenseKeyInput"
+Category: forms
+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
+
+### Lightbox
+Mount: data-component="Lightbox"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LineChart
+Mount: data-component="LineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LineHeightPicker
+Mount: data-component="LineHeightPicker"
+Category: forms
+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
+
+### Link
+Mount: data-component="Link"
+Category: core
+Props: href: string = "#", label: string = "Link", external: boolean = false, className: string = ""
+Slots: none
+Events: none
+
+### LinkButton
+Mount: data-component="LinkButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### List
+Mount: data-component="List"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LoadingButton
+Mount: data-component="LoadingButton"
+Category: actions
+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
+
+### LocaleSelector
+Mount: data-component="LocaleSelector"
+Category: forms
+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
+
+### LocalizedRouteLink
+Mount: data-component="LocalizedRouteLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LocationPicker
+Mount: data-component="LocationPicker"
+Category: forms
+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
+
+### Logo
+Mount: data-component="Logo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoCloud
+Mount: data-component="LogoCloud"
+Category: core
+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
+
+### LogoUpload
+Mount: data-component="LogoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoutDialog
+Mount: data-component="LogoutDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LogTable
+Mount: data-component="LogTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LongitudeInput
+Mount: data-component="LongitudeInput"
+Category: forms
+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
+
+### MaintenanceAlert
+Mount: data-component="MaintenanceAlert"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceBanner
+Mount: data-component="MaintenanceBanner"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceCard
+Mount: data-component="MaintenanceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenancePage
+Mount: data-component="MaintenancePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceState
+Mount: data-component="MaintenanceState"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceWindowPicker
+Mount: data-component="MaintenanceWindowPicker"
+Category: forms
+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
+Mount: data-component="MapPicker"
+Category: forms
+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
+Mount: data-component="MarkdownEditor"
+Category: forms
+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
+
+### MarketingPageShell
+Mount: data-component="MarketingPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### MarketingSectionHeader
+Mount: data-component="MarketingSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MaskedSecretField
+Mount: data-component="MaskedSecretField"
+Category: forms
+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
+
+### MegaMenu
+Mount: data-component="MegaMenu"
+Category: overlays
+Props: label: string = "Explore", sections: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MemberList
+Mount: data-component="MemberList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### MentionInput
+Mount: data-component="MentionInput"
+Category: forms
+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
+
+### MessageCharacterCounter
+Mount: data-component="MessageCharacterCounter"
+Category: feedback
+Props: label: string = "MessageCharacter", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposer
+Mount: data-component="MessageComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposerPreview
+Mount: data-component="MessageComposerPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageLimitInput
+Mount: data-component="MessageLimitInput"
+Category: forms
+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
+
+### MessagePreview
+Mount: data-component="MessagePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageVolumeSlider
+Mount: data-component="MessageVolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Metric
+Mount: data-component="Metric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MetricCard
+Mount: data-component="MetricCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MetricGrid
+Mount: data-component="MetricGrid"
+Category: data
+Props: label: string = "Key metrics", metrics: string = [], class: string = ""
+Slots: none
+Events: none
+
+### MetricText
+Mount: data-component="MetricText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MinutePicker
+Mount: data-component="MinutePicker"
+Category: forms
+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
+
+### MissionSection
+Mount: data-component="MissionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileDeviceFrame
+Mount: data-component="MobileDeviceFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileInput
+Mount: data-component="MobileInput"
+Category: forms
+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
+
+### MobileMenuButton
+Mount: data-component="MobileMenuButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MobileNavigation
+Mount: data-component="MobileNavigation"
+Category: layout
+Props: label: string = "Menu", closeLabel: string = "Close menu", items: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MobileTableCard
+Mount: data-component="MobileTableCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Modal
+Mount: data-component="Modal"
+Category: core
+Props: class: string = "", title: string = "Dialog", description: string = "", open: boolean = false, size: string = "md", closeLabel: string = "Close"
+Slots: default
+Events: click
+
+### MonthlyVolumeSelector
+Mount: data-component="MonthlyVolumeSelector"
+Category: forms
+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
+Mount: data-component="MonthPicker"
+Category: forms
+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
+Mount: data-component="MonthYearPicker"
+Category: forms
+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
+
+### MultiFileUpload
+Mount: data-component="MultiFileUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultipleEmailInput
+Mount: data-component="MultipleEmailInput"
+Category: forms
+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
+
+### MultiSelect
+Mount: data-component="MultiSelect"
+Category: core
+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
+
+### MutedText
+Mount: data-component="MutedText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NameInput
+Mount: data-component="NameInput"
+Category: forms
+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
+
+### NarrowContainer
+Mount: data-component="NarrowContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Navigation
+Mount: data-component="Navigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NavigationItem
+Mount: data-component="NavigationItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NavigationMegaMenu
+Mount: data-component="NavigationMegaMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### NewBadge
+Mount: data-component="NewBadge"
+Category: feedback
+Props: label: string = "New", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NewPasswordInput
+Mount: data-component="NewPasswordInput"
+Category: forms
+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
+
+### NewsletterCTA
+Mount: data-component="NewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### NewsletterForm
+Mount: data-component="NewsletterForm"
+Category: content
+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
+
+### NoResultsState
+Mount: data-component="NoResultsState"
+Category: feedback
+Props: label: string = "NoResults", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundPage
+Mount: data-component="NotFoundPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundState
+Mount: data-component="NotFoundState"
+Category: feedback
+Props: label: string = "NotFound", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationCard
+Mount: data-component="NotificationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotificationDot
+Mount: data-component="NotificationDot"
+Category: core
+Props: label: string = "Notification", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationList
+Mount: data-component="NotificationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### NumberInput
+Mount: data-component="NumberInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### OfficeCard
+Mount: data-component="OfficeCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflinePage
+Mount: data-component="OfflinePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflineState
+Mount: data-component="OfflineState"
+Category: feedback
+Props: label: string = "Offline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OnboardingProgress
+Mount: data-component="OnboardingProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OneTimeSecretDisplay
+Mount: data-component="OneTimeSecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OnlineIndicator
+Mount: data-component="OnlineIndicator"
+Category: feedback
+Props: label: string = "Online", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OpacitySlider
+Mount: data-component="OpacitySlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OpenAPICTA
+Mount: data-component="OpenAPICTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OptionalIndicator
+Mount: data-component="OptionalIndicator"
+Category: feedback
+Props: label: string = "Optional", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OrganizationSelector
+Mount: data-component="OrganizationSelector"
+Category: forms
+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
+
+### OtpInput
+Mount: data-component="OtpInput"
+Category: forms
+Props: class: string = "", name: string = "otp", length: number = 6, label: string = "Verification code"
+Slots: none
+Events: none
+
+### OtpVerificationForm
+Mount: data-component="OtpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OutlinedCard
+Mount: data-component="OutlinedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PageAlert
+Mount: data-component="PageAlert"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PageHeader
+Mount: data-component="PageHeader"
+Category: core
+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
+Mount: data-component="PageHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PageShell
+Mount: data-component="PageShell"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### PageSkeleton
+Mount: data-component="PageSkeleton"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Pagination
+Mount: data-component="Pagination"
+Category: core
+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
+
+### Panel
+Mount: data-component="Panel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### PartnerApplicationForm
+Mount: data-component="PartnerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PartnerLogoGrid
+Mount: data-component="PartnerLogoGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PartnerProgramCard
+Mount: data-component="PartnerProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PasskeyButton
+Mount: data-component="PasskeyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordInput
+Mount: data-component="PasswordInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Password", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### PasswordRequirementList
+Mount: data-component="PasswordRequirementList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PasswordStrengthMeter
+Mount: data-component="PasswordStrengthMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordVisibilityToggle
+Mount: data-component="PasswordVisibilityToggle"
+Category: forms
+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
+Mount: data-component="PathInput"
+Category: forms
+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
+
+### PaymentMethodCard
+Mount: data-component="PaymentMethodCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PdfPreview
+Mount: data-component="PdfPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PercentageInput
+Mount: data-component="PercentageInput"
+Category: forms
+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
+Mount: data-component="PermissionSelector"
+Category: forms
+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
+Mount: data-component="PhoneInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### PieChart
+Mount: data-component="PieChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Pill
+Mount: data-component="Pill"
+Category: core
+Props: label: string = "Pill", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PinInput
+Mount: data-component="PinInput"
+Category: forms
+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
+
+### PlainTextEditor
+Mount: data-component="PlainTextEditor"
+Category: forms
+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
+
+### PlanCTA
+Mount: data-component="PlanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PlanFeatureList
+Mount: data-component="PlanFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanLimitList
+Mount: data-component="PlanLimitList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanSelector
+Mount: data-component="PlanSelector"
+Category: forms
+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
+
+### PlatformPillarCard
+Mount: data-component="PlatformPillarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PolicyVersionTable
+Mount: data-component="PolicyVersionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Popover
+Mount: data-component="Popover"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### PortInput
+Mount: data-component="PortInput"
+Category: forms
+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
+Mount: data-component="PortNumberInput"
+Category: forms
+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
+Mount: data-component="PositiveNumberInput"
+Category: forms
+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
+Mount: data-component="PostalCodeInput"
+Category: forms
+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
+
+### PostmanCTA
+Mount: data-component="PostmanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PresetDateRangePicker
+Mount: data-component="PresetDateRangePicker"
+Category: forms
+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
+
+### PressReleaseCard
+Mount: data-component="PressReleaseCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PreviewBadge
+Mount: data-component="PreviewBadge"
+Category: feedback
+Props: label: string = "Preview", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PreviousNextNavigation
+Mount: data-component="PreviousNextNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PriceInput
+Mount: data-component="PriceInput"
+Category: forms
+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
+
+### PriceRangeSlider
+Mount: data-component="PriceRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PriceText
+Mount: data-component="PriceText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingCard
+Mount: data-component="PricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingComparisonTable
+Mount: data-component="PricingComparisonTable"
+Category: data
+Props: caption: string = "Plan comparison", plans: string = [], features: string = [], class: string = ""
+Slots: none
+Events: none
+
+### PricingContactForm
+Mount: data-component="PricingContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingFeatureGroup
+Mount: data-component="PricingFeatureGroup"
+Category: forms
+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
+
+### PricingGrid
+Mount: data-component="PricingGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingHero
+Mount: data-component="PricingHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingPlanCard
+Mount: data-component="PricingPlanCard"
+Category: content
+Props: class: string = "", name: string = "Starter", description: string = "", price: string = "₹0", period: string = "/month", featured: boolean = false, ctaLabel: string = "Choose plan", ctaHref: string = "#"
+Slots: default
+Events: none
+
+### PricingTable
+Mount: data-component="PricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingToggle
+Mount: data-component="PricingToggle"
+Category: forms
+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
+
+### PrimaryButton
+Mount: data-component="PrimaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintAction
+Mount: data-component="PrintAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintPolicyButton
+Mount: data-component="PrintPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrioritySelector
+Mount: data-component="PrioritySelector"
+Category: forms
+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
+
+### PrivacyNotice
+Mount: data-component="PrivacyNotice"
+Category: feedback
+Props: label: string = "Privacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductArchitectureDiagram
+Mount: data-component="ProductArchitectureDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductCard
+Mount: data-component="ProductCard"
+Category: content
+Props: eyebrow: string = "Product", title: string = "Product name", description: string = "", href: string = "#", actionLabel: string = "Learn more", status: string = "", class: string = ""
+Slots: none
+Events: none
+
+### ProductCategorySection
+Mount: data-component="ProductCategorySection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductCTA
+Mount: data-component="ProductCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductFeatureList
+Mount: data-component="ProductFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductGrid
+Mount: data-component="ProductGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductHero
+Mount: data-component="ProductHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductIcon
+Mount: data-component="ProductIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductIntegrationList
+Mount: data-component="ProductIntegrationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductList
+Mount: data-component="ProductList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductLogo
+Mount: data-component="ProductLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductMegaMenu
+Mount: data-component="ProductMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ProductMiniCard
+Mount: data-component="ProductMiniCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductNavigationCard
+Mount: data-component="ProductNavigationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductPageShell
+Mount: data-component="ProductPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### ProductSelector
+Mount: data-component="ProductSelector"
+Category: forms
+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
+
+### ProductsMegaMenu
+Mount: data-component="ProductsMegaMenu"
+Category: overlays
+Props: label: string = "Products", sections: string = [], class: string = ""
+Slots: none
+Events: none
+
+### ProductStatusBadge
+Mount: data-component="ProductStatusBadge"
+Category: feedback
+Props: label: string = "ProductStatus", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductUseCaseList
+Mount: data-component="ProductUseCaseList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### progress
+Mount: data-component="progress"
+Category: core
+Props: value: number = 0, max: number = 100, class: string = ""
+Slots: none
+Events: none
+
+### ProgressBar
+Mount: data-component="ProgressBar"
+Category: core
+Props: class: string = "", value: number = 0, max: number = 100, label: string = "Progress", showValue: boolean = true
+Slots: none
+Events: none
+
+### ProgressChart
+Mount: data-component="ProgressChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressRing
+Mount: data-component="ProgressRing"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressSlider
+Mount: data-component="ProgressSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectCard
+Mount: data-component="ProjectCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectSelector
+Mount: data-component="ProjectSelector"
+Category: forms
+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
+
+### ProjectSwitcher
+Mount: data-component="ProjectSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PromoCodeInput
+Mount: data-component="PromoCodeInput"
+Category: forms
+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
+
+### PromptDialog
+Mount: data-component="PromptDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ProviderSelector
+Mount: data-component="ProviderSelector"
+Category: forms
+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
+
+### PublicFooter
+Mount: data-component="PublicFooter"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: submit
+
+### PublicHeader
+Mount: data-component="PublicHeader"
+Category: layout
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicHeaderLogo
+Mount: data-component="PublicHeaderLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PublicMobileNavigation
+Mount: data-component="PublicMobileNavigation"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicPageShell
+Mount: data-component="PublicPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PublicSearch
+Mount: data-component="PublicSearch"
+Category: core
+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
+
+### PublishDateTimePicker
+Mount: data-component="PublishDateTimePicker"
+Category: forms
+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
+
+### PushComposer
+Mount: data-component="PushComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PushNotificationEditor
+Mount: data-component="PushNotificationEditor"
+Category: forms
+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
+
+### QrCode
+Mount: data-component="QrCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuantityInput
+Mount: data-component="QuantityInput"
+Category: forms
+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
+
+### QuantityStepper
+Mount: data-component="QuantityStepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuietHoursPicker
+Mount: data-component="QuietHoursPicker"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### QuoteText
+Mount: data-component="QuoteText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Radio
+Mount: data-component="Radio"
+Category: core
+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
+
+### RadioGroup
+Mount: data-component="RadioGroup"
+Category: forms
+Props: class: string = "", label: string = "Choose one", name: string = "choice"
+Slots: default
+Events: none
+
+### RangeInput
+Mount: data-component="RangeInput"
+Category: forms
+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
+
+### RangeSlider
+Mount: data-component="RangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitedState
+Mount: data-component="RateLimitedState"
+Category: feedback
+Props: label: string = "RateLimited", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitInput
+Mount: data-component="RateLimitInput"
+Category: forms
+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
+
+### RateLimitPage
+Mount: data-component="RateLimitPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateTable
+Mount: data-component="RateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RatingSlider
+Mount: data-component="RatingSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecipientSelector
+Mount: data-component="RecipientSelector"
+Category: forms
+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
+
+### RecoveryCodeForm
+Mount: data-component="RecoveryCodeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecoveryCodeInput
+Mount: data-component="RecoveryCodeInput"
+Category: forms
+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
+
+### RecurrenceRuleBuilder
+Mount: data-component="RecurrenceRuleBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecurringSchedulePicker
+Mount: data-component="RecurringSchedulePicker"
+Category: forms
+Props: id: string = "recurring-schedule", name: string = "recurrence", label: string = "Repeat", value: string = "none", disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### RedirectUriInput
+Mount: data-component="RedirectUriInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ReferenceInput
+Mount: data-component="ReferenceInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RegexInput
+Mount: data-component="RegexInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RegionalPrivacyBanner
+Mount: data-component="RegionalPrivacyBanner"
+Category: feedback
+Props: label: string = "RegionalPrivacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionAvailabilityTable
+Mount: data-component="RegionAvailabilityTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RegionSelector
+Mount: data-component="RegionSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RegionUnavailableAlert
+Mount: data-component="RegionUnavailableAlert"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionUnavailableState
+Mount: data-component="RegionUnavailableState"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RejectOptionalCookiesButton
+Mount: data-component="RejectOptionalCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReopenCookieSettingsButton
+Mount: data-component="ReopenCookieSettingsButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReportCard
+Mount: data-component="ReportCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestResponseViewer
+Mount: data-component="RequestResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestViewer
+Mount: data-component="RequestViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequiredIndicator
+Mount: data-component="RequiredIndicator"
+Category: feedback
+Props: label: string = "Required", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResetPasswordForm
+Mount: data-component="ResetPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResizablePanel
+Mount: data-component="ResizablePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceCard
+Mount: data-component="ResourceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourceDownloadCard
+Mount: data-component="ResourceDownloadCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcePageShell
+Mount: data-component="ResourcePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceSearch
+Mount: data-component="ResourceSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcesMegaMenu
+Mount: data-component="ResourcesMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ResourceTypeBadge
+Mount: data-component="ResourceTypeBadge"
+Category: feedback
+Props: label: string = "ResourceType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResponseViewer
+Mount: data-component="ResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResponsibleDisclosureCTA
+Mount: data-component="ResponsibleDisclosureCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ResponsiveTable
+Mount: data-component="ResponsiveTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ResultsSection
+Mount: data-component="ResultsSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### RetentionTable
+Mount: data-component="RetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RetryCountInput
+Mount: data-component="RetryCountInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RevenueChart
+Mount: data-component="RevenueChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### RgbColorInput
+Mount: data-component="RgbColorInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RichTextEditor
+Mount: data-component="RichTextEditor"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RichTextInput
+Mount: data-component="RichTextInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RoleSelector
+Mount: data-component="RoleSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RollingDateRangePicker
+Mount: data-component="RollingDateRangePicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SaveCookiePreferencesButton
+Mount: data-component="SaveCookiePreferencesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SavedFilterSelector
+Mount: data-component="SavedFilterSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ScheduledDateTimePicker
+Mount: data-component="ScheduledDateTimePicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ScheduleMessagePicker
+Mount: data-component="ScheduleMessagePicker"
+Category: forms
+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
+Mount: data-component="SchedulePicker"
+Category: forms
+Props: class: string = "", label: string = "Schedule"
+Slots: none
+Events: none
+
+### ScreenshotFrame
+Mount: data-component="ScreenshotFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ScrollArea
+Mount: data-component="ScrollArea"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SDKCard
+Mount: data-component="SDKCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SdkLanguageSelector
+Mount: data-component="SdkLanguageSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SDKLanguageTabs
+Mount: data-component="SDKLanguageTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SDKTabs
+Mount: data-component="SDKTabs"
+Category: core
+Props: label: string = "SDK languages", tabs: string = [], defaultIndex: number = 0, class: string = ""
+Slots: none
+Events: click
+
+### SearchButton
+Mount: data-component="SearchButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SearchCategoryTabs
+Mount: data-component="SearchCategoryTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SearchDialog
+Mount: data-component="SearchDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SearchEmptyState
+Mount: data-component="SearchEmptyState"
+Category: feedback
+Props: label: string = "SearchEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchInput
+Mount: data-component="SearchInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### SearchLoadingState
+Mount: data-component="SearchLoadingState"
+Category: feedback
+Props: label: string = "SearchLoading", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchResultItem
+Mount: data-component="SearchResultItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecondaryButton
+Mount: data-component="SecondaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SecondPicker
+Mount: data-component="SecondPicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SecretDisplay
+Mount: data-component="SecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretInput
+Mount: data-component="SecretInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SecretRevealDialog
+Mount: data-component="SecretRevealDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Section
+Mount: data-component="Section"
+Category: layout
+Props: id: string = "", size: string = "default", surface: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### SectionActions
+Mount: data-component="SectionActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SectionHeader
+Mount: data-component="SectionHeader"
+Category: layout
+Props: class: string = "", eyebrow: string = "", title: string = "Section title", description: string = "", align: string = "left"
+Slots: default
+Events: none
+
+### SectionHeading
+Mount: data-component="SectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityAlert
+Mount: data-component="SecurityAlert"
+Category: feedback
+Props: label: string = "Security", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SecurityContactCard
+Mount: data-component="SecurityContactCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityFeatureCard
+Mount: data-component="SecurityFeatureCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityHero
+Mount: data-component="SecurityHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPillarGrid
+Mount: data-component="SecurityPillarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPracticeList
+Mount: data-component="SecurityPracticeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityReportForm
+Mount: data-component="SecurityReportForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Select
+Mount: data-component="Select"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Select", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
+Slots: default
+Events: none
+
+### SenderIdInput
+Mount: data-component="SenderIdInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ServerErrorPage
+Mount: data-component="ServerErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ServiceLevelTable
+Mount: data-component="ServiceLevelTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusBadge
+Mount: data-component="ServiceStatusBadge"
+Category: feedback
+Props: label: string = "ServiceStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusList
+Mount: data-component="ServiceStatusList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusRow
+Mount: data-component="ServiceStatusRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SessionCard
+Mount: data-component="SessionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SessionExpiredDialog
+Mount: data-component="SessionExpiredDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SetupChecklist
+Mount: data-component="SetupChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SeveritySelector
+Mount: data-component="SeveritySelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ShadowPicker
+Mount: data-component="ShadowPicker"
+Category: forms
+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
+
+### ShareAction
+Mount: data-component="ShareAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ShareButton
+Mount: data-component="ShareButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SidebarLayout
+Mount: data-component="SidebarLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SidePanel
+Mount: data-component="SidePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SignInForm
+Mount: data-component="SignInForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SignInLink
+Mount: data-component="SignInLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SignUpForm
+Mount: data-component="SignUpForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SiteSearch
+Mount: data-component="SiteSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Skeleton
+Mount: data-component="Skeleton"
+Category: feedback
+Props: height: string = "4", rounded: string = "lg", className: string = ""
+Slots: none
+Events: none
+
+### SkipLink
+Mount: data-component="SkipLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SlaTable
+Mount: data-component="SlaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Slider
+Mount: data-component="Slider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SlugInput
+Mount: data-component="SlugInput"
+Category: forms
+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
+
+### SmallText
+Mount: data-component="SmallText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SmartRouteDiagram
+Mount: data-component="SmartRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SmsComposer
+Mount: data-component="SmsComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmsMessageEditor
+Mount: data-component="SmsMessageEditor"
+Category: forms
+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
+
+### SmsSegmentCounter
+Mount: data-component="SmsSegmentCounter"
+Category: feedback
+Props: label: string = "SmsSegment", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SocialShare
+Mount: data-component="SocialShare"
+Category: core
+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
+
+### SolutionHero
+Mount: data-component="SolutionHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionPageShell
+Mount: data-component="SolutionPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionSection
+Mount: data-component="SolutionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionsMegaMenu
+Mount: data-component="SolutionsMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### SortableTable
+Mount: data-component="SortableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### spacer
+Mount: data-component="spacer"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### Spinner
+Mount: data-component="Spinner"
+Category: core
+Props: class: string = "", label: string = "Loading", size: string = "md"
+Slots: none
+Events: none
+
+### SplitButton
+Mount: data-component="SplitButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitCTA
+Mount: data-component="SplitCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitHero
+Mount: data-component="SplitHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SplitLayout
+Mount: data-component="SplitLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SplitSectionHeader
+Mount: data-component="SplitSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stack
+Mount: data-component="Stack"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### StartFreeButton
+Mount: data-component="StartFreeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### StatCard
+Mount: data-component="StatCard"
+Category: content
+Props: class: string = "", label: string = "Metric", value: string = "0", change: string = "", trend: string = "neutral"
+Slots: none
+Events: none
+
+### StateSelector
+Mount: data-component="StateSelector"
+Category: forms
+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
+
+### StatusBadge
+Mount: data-component="StatusBadge"
+Category: feedback
+Props: class: string = "", status: string = "operational"
+Slots: none
+Events: none
+
+### StatusBanner
+Mount: data-component="StatusBanner"
+Category: core
+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
+
+### StatusPageShell
+Mount: data-component="StatusPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### StatusSelector
+Mount: data-component="StatusSelector"
+Category: forms
+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
+
+### StatusSubscribeForm
+Mount: data-component="StatusSubscribeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusTable
+Mount: data-component="StatusTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### StepNavigation
+Mount: data-component="StepNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stepper
+Mount: data-component="Stepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StepperInput
+Mount: data-component="StepperInput"
+Category: forms
+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
+
+### StepUpAuthenticationDialog
+Mount: data-component="StepUpAuthenticationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### StickerPicker
+Mount: data-component="StickerPicker"
+Category: forms
+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
+
+### Sticky
+Mount: data-component="Sticky"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StickyLayout
+Mount: data-component="StickyLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StreetAddressInput
+Mount: data-component="StreetAddressInput"
+Category: forms
+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
+Mount: data-component="SubdomainInput"
+Category: forms
+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
+Mount: data-component="SubjectInput"
+Category: forms
+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
+
+### SubprocessorTable
+Mount: data-component="SubprocessorTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SubsectionHeading
+Mount: data-component="SubsectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SuccessCard
+Mount: data-component="SuccessCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SuccessState
+Mount: data-component="SuccessState"
+Category: feedback
+Props: label: string = "Success", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SupportRequestForm
+Mount: data-component="SupportRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Surface
+Mount: data-component="Surface"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Switch
+Mount: data-component="Switch"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Switch", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: click
+
+### Table
+Mount: data-component="Table"
+Category: data
+Props: class: string = "", caption: string = "Data table", responsive: boolean = true
+Slots: default
+Events: none
+
+### TableHeader
+Mount: data-component="TableHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### TableRow
+Mount: data-component="TableRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TableSkeleton
+Mount: data-component="TableSkeleton"
+Category: feedback
+Props: label: string = "Table", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Tabs
+Mount: data-component="Tabs"
+Category: content
+Props: class: string = "", active: string = "first"
+Slots: first, second
+Events: click
+
+### tag
+Mount: data-component="tag"
+Category: core
+Props: label: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TagInput
+Mount: data-component="TagInput"
+Category: forms
+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
+
+### TaxNotice
+Mount: data-component="TaxNotice"
+Category: feedback
+Props: label: string = "Tax", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TaxRateInput
+Mount: data-component="TaxRateInput"
+Category: forms
+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
+
+### TeamMemberCard
+Mount: data-component="TeamMemberCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TeamSizeSelector
+Mount: data-component="TeamSizeSelector"
+Category: forms
+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
+
+### TemplateCard
+Mount: data-component="TemplateCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateSelector
+Mount: data-component="TemplateSelector"
+Category: forms
+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
+Mount: data-component="TemplateVariableInput"
+Category: forms
+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
+
+### TenantIsolationDiagram
+Mount: data-component="TenantIsolationDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TerminalBlock
+Mount: data-component="TerminalBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TertiaryButton
+Mount: data-component="TertiaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TestimonialCard
+Mount: data-component="TestimonialCard"
+Category: content
+Props: class: string = "", quote: string = "Great product.", name: string = "Customer", role: string = "", company: string = "", avatar: string = ""
+Slots: none
+Events: none
+
+### TestimonialCarousel
+Mount: data-component="TestimonialCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TestMessageDialog
+Mount: data-component="TestMessageDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Textarea
+Mount: data-component="Textarea"
+Category: core
+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
+
+### TextInput
+Mount: data-component="TextInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### TextLink
+Mount: data-component="TextLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TextSkeleton
+Mount: data-component="TextSkeleton"
+Category: feedback
+Props: label: string = "Text", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### theme-toggle
+Mount: data-component="theme-toggle"
+Category: core
+Props: label: string = "Toggle theme", class: string = ""
+Slots: default
+Events: none
+
+### ThemeColorPicker
+Mount: data-component="ThemeColorPicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ThemeSwitcher
+Mount: data-component="ThemeSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimeInput
+Mount: data-component="TimeInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### Timeline
+Mount: data-component="Timeline"
+Category: visualization
+Props: class: string = "", title: string = "Timeline"
+Slots: default
+Events: none
+
+### TimelineChart
+Mount: data-component="TimelineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TimelineItem
+Mount: data-component="TimelineItem"
+Category: content
+Props: class: string = "", title: string = "Event", date: string = "", description: string = "", status: string = "default"
+Slots: none
+Events: none
+
+### TimeoutInput
+Mount: data-component="TimeoutInput"
+Category: forms
+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
+Mount: data-component="TimePicker"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### TimeRangePicker
+Mount: data-component="TimeRangePicker"
+Category: forms
+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
+Mount: data-component="TimezoneAwareTimePicker"
+Category: forms
+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
+Mount: data-component="TimezoneSelector"
+Category: forms
+Props: class: string = "", id: string = "timezone", name: string = "timezone", label: string = "Timezone"
+Slots: none
+Events: none
+
+### Toast
+Mount: data-component="Toast"
+Category: core
+Props: class: string = "", title: string = "Saved", description: string = "", variant: string = "success", duration: number = 5000
+Slots: none
+Events: click
+
+### ToastAction
+Mount: data-component="ToastAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ToastHost
+Mount: data-component="ToastHost"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### ToastIcon
+Mount: data-component="ToastIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ToastProgress
+Mount: data-component="ToastProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Toggle
+Mount: data-component="Toggle"
+Category: forms
+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
+Mount: data-component="ToggleGroup"
+Category: forms
+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
+Mount: data-component="TokenInput"
+Category: forms
+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
+
+### Tooltip
+Mount: data-component="Tooltip"
+Category: content
+Props: class: string = "", text: string = "Helpful information", position: string = "top"
+Slots: default
+Events: none
+
+### TotpVerificationForm
+Mount: data-component="TotpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TranslatedText
+Mount: data-component="TranslatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TreeTable
+Mount: data-component="TreeTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TrendIndicator
+Mount: data-component="TrendIndicator"
+Category: feedback
+Props: label: string = "Trend", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TruncatedText
+Mount: data-component="TruncatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TrustBadgeList
+Mount: data-component="TrustBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Typography
+Mount: data-component="Typography"
+Category: core
+Props: as: string = "p", variant: string = "body", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### UnavailableRegionState
+Mount: data-component="UnavailableRegionState"
+Category: feedback
+Props: label: string = "UnavailableRegion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### UnifiedTimelinePreview
+Mount: data-component="UnifiedTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UnsavedChangesDialog
+Mount: data-component="UnsavedChangesDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### UploadItem
+Mount: data-component="UploadItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadPreview
+Mount: data-component="UploadPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadProgress
+Mount: data-component="UploadProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeChart
+Mount: data-component="UptimeChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeMetric
+Mount: data-component="UptimeMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UrlInput
+Mount: data-component="UrlInput"
+Category: forms
+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
+
+### UsagePricingTable
+Mount: data-component="UsagePricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### UseCaseSelector
+Mount: data-component="UseCaseSelector"
+Category: forms
+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
+
+### UserCard
+Mount: data-component="UserCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UsernameInput
+Mount: data-component="UsernameInput"
+Category: forms
+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
+
+### ValueCard
+Mount: data-component="ValueCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ValuesGrid
+Mount: data-component="ValuesGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VerificationCodeInput
+Mount: data-component="VerificationCodeInput"
+Category: forms
+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
+
+### VerifiedBadge
+Mount: data-component="VerifiedBadge"
+Category: feedback
+Props: label: string = "Verified", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### VersionSelector
+Mount: data-component="VersionSelector"
+Category: forms
+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
+
+### VerticalTabs
+Mount: data-component="VerticalTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoCard
+Mount: data-component="VideoCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoPreviewDialog
+Mount: data-component="VideoPreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### VideoUpload
+Mount: data-component="VideoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VirtualizedTable
+Mount: data-component="VirtualizedTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VisionSection
+Mount: data-component="VisionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### VisuallyHidden
+Mount: data-component="VisuallyHidden"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptComposer
+Mount: data-component="VoiceScriptComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptEditor
+Mount: data-component="VoiceScriptEditor"
+Category: forms
+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
+Mount: data-component="VolumeInput"
+Category: forms
+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
+
+### VolumeSlider
+Mount: data-component="VolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WarningCard
+Mount: data-component="WarningCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookEventCard
+Mount: data-component="WebhookEventCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookFlowDiagram
+Mount: data-component="WebhookFlowDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WebhookPayloadViewer
+Mount: data-component="WebhookPayloadViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookUrlInput
+Mount: data-component="WebhookUrlInput"
+Category: forms
+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
+
+### WebinarCard
+Mount: data-component="WebinarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebinarRegistrationForm
+Mount: data-component="WebinarRegistrationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Well
+Mount: data-component="Well"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppComposer
+Mount: data-component="WhatsAppComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppNumberInput
+Mount: data-component="WhatsAppNumberInput"
+Category: forms
+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
+Mount: data-component="WhatsAppTemplateEditor"
+Category: forms
+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
+
+### WideContainer
+Mount: data-component="WideContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Wizard
+Mount: data-component="Wizard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WizardHeader
+Mount: data-component="WizardHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WizardNavigation
+Mount: data-component="WizardNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowCanvasPreview
+Mount: data-component="WorkflowCanvasPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowProgress
+Mount: data-component="WorkflowProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceCard
+Mount: data-component="WorkspaceCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceSelector
+Mount: data-component="WorkspaceSelector"
+Category: forms
+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
+
+### WorkspaceSwitcher
+Mount: data-component="WorkspaceSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### YearPicker
+Mount: data-component="YearPicker"
+Category: forms
+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
+
+### ZoomSlider
+Mount: data-component="ZoomSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+# UI component catalog
+
+The installed @wrnexus/ui release contains 901 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
+
+### AcceptAllCookiesButton
+Mount: data-component="AcceptAllCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AccessibleAccordion
+Mount: data-component="AccessibleAccordion"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleCarousel
+Mount: data-component="AccessibleCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleChartSummary
+Mount: data-component="AccessibleChartSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleDialog
+Mount: data-component="AccessibleDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleErrorSummary
+Mount: data-component="AccessibleErrorSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleIcon
+Mount: data-component="AccessibleIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleMenu
+Mount: data-component="AccessibleMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTabs
+Mount: data-component="AccessibleTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTooltip
+Mount: data-component="AccessibleTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Accordion
+Mount: data-component="Accordion"
+Category: content
+Props: class: string = "", title: string = "Question", open: boolean = false
+Slots: default
+Events: click
+
+### AccountMenu
+Mount: data-component="AccountMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccountStatusBanner
+Mount: data-component="AccountStatusBanner"
+Category: feedback
+Props: label: string = "AccountStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ActionMenu
+Mount: data-component="ActionMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ActiveFilterList
+Mount: data-component="ActiveFilterList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ActivityList
+Mount: data-component="ActivityList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AddOnCard
+Mount: data-component="AddOnCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AddressInput
+Mount: data-component="AddressInput"
+Category: forms
+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
+
+### AddressPreview
+Mount: data-component="AddressPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AdvancedFilterBuilder
+Mount: data-component="AdvancedFilterBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Alert
+Mount: data-component="Alert"
+Category: feedback
+Props: class: string = "", title: string = "Notice", description: string = "", variant: string = "info", dismissible: boolean = false
+Slots: default
+Events: click
+
+### AlertDialog
+Mount: data-component="AlertDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AmountInput
+Mount: data-component="AmountInput"
+Category: forms
+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
+
+### AnalyticsDashboardPreview
+Mount: data-component="AnalyticsDashboardPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AnchorNavigation
+Mount: data-component="AnchorNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AnnouncementBar
+Mount: data-component="AnnouncementBar"
+Category: core
+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"
+Slots: none
+Events: click
+
+### ApartmentInput
+Mount: data-component="ApartmentInput"
+Category: forms
+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
+
+### ApiAuthenticationNotice
+Mount: data-component="ApiAuthenticationNotice"
+Category: feedback
+Props: label: string = "ApiAuthentication", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiEndpointCard
+Mount: data-component="ApiEndpointCard"
+Category: content
+Props: class: string = "", method: string = "GET", path: string = "/api/example", description: string = ""
+Slots: default
+Events: none
+
+### ApiErrorExample
+Mount: data-component="ApiErrorExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiHeaderTable
+Mount: data-component="ApiHeaderTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyCreateDialog
+Mount: data-component="ApiKeyCreateDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyDisplay
+Mount: data-component="ApiKeyDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyInput
+Mount: data-component="ApiKeyInput"
+Category: forms
+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
+
+### ApiMethodBadge
+Mount: data-component="ApiMethodBadge"
+Category: feedback
+Props: label: string = "ApiMethod", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiParameterTable
+Mount: data-component="ApiParameterTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiRateLimitNotice
+Mount: data-component="ApiRateLimitNotice"
+Category: feedback
+Props: label: string = "ApiRateLimit", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiRequestExample
+Mount: data-component="ApiRequestExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiResponseExample
+Mount: data-component="ApiResponseExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaTable
+Mount: data-component="ApiSchemaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaViewer
+Mount: data-component="ApiSchemaViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiVersionBadge
+Mount: data-component="ApiVersionBadge"
+Category: feedback
+Props: label: string = "ApiVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### AppHeader
+Mount: data-component="AppHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArchitectureSection
+Mount: data-component="ArchitectureSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AreaChart
+Mount: data-component="AreaChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticleHero
+Mount: data-component="ArticleHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleLayout
+Mount: data-component="ArticleLayout"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleNewsletterCTA
+Mount: data-component="ArticleNewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticlePageShell
+Mount: data-component="ArticlePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleShareActions
+Mount: data-component="ArticleShareActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AspectRatio
+Mount: data-component="AspectRatio"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AssetCard
+Mount: data-component="AssetCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AttachmentPicker
+Mount: data-component="AttachmentPicker"
+Category: forms
+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
+
+### AttachmentUpload
+Mount: data-component="AttachmentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AudioUpload
+Mount: data-component="AudioUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditLogPreview
+Mount: data-component="AuditLogPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditTable
+Mount: data-component="AuditTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AuthenticatorCodeInput
+Mount: data-component="AuthenticatorCodeInput"
+Category: forms
+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
+
+### AuthorAvatar
+Mount: data-component="AuthorAvatar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorCard
+Mount: data-component="AuthorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorizedApplicationCard
+Mount: data-component="AuthorizedApplicationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AutoGrid
+Mount: data-component="AutoGrid"
+Category: data
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AutomationExampleCard
+Mount: data-component="AutomationExampleCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AvailabilityCalendar
+Mount: data-component="AvailabilityCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Avatar
+Mount: data-component="Avatar"
+Category: content
+Props: class: string = "", src: string = "", alt: string = "", initials: string = "WR", size: string = "md"
+Slots: none
+Events: none
+
+### AvatarGroup
+Mount: data-component="AvatarGroup"
+Category: forms
+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
+
+### AvatarUpload
+Mount: data-component="AvatarUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BackButton
+Mount: data-component="BackButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BackToTop
+Mount: data-component="BackToTop"
+Category: core
+Props: class: string = "", label: string = "Back to top", assistiveLabel: string = "Return to the top of the page", threshold: number = 500
+Slots: none
+Events: click
+
+### Badge
+Mount: data-component="Badge"
+Category: feedback
+Props: class: string = "", label: string = "Badge", variant: string = "neutral"
+Slots: none
+Events: none
+
+### BankTransferDetails
+Mount: data-component="BankTransferDetails"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Banner
+Mount: data-component="Banner"
+Category: feedback
+Props: class: string = "", text: string = "Announcement", href: string = "", actionLabel: string = "Learn more", variant: string = "brand"
+Slots: none
+Events: none
+
+### BarChart
+Mount: data-component="BarChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BetaBadge
+Mount: data-component="BetaBadge"
+Category: feedback
+Props: label: string = "Beta", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### BillingAddressForm
+Mount: data-component="BillingAddressForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingExample
+Mount: data-component="BillingExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingPeriodToggle
+Mount: data-component="BillingPeriodToggle"
+Category: forms
+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
+Mount: data-component="BlackoutDatePicker"
+Category: forms
+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
+
+### BlogCard
+Mount: data-component="BlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlogGrid
+Mount: data-component="BlogGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogList
+Mount: data-component="BlogList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogSearch
+Mount: data-component="BlogSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BodyText
+Mount: data-component="BodyText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BorderRadiusPicker
+Mount: data-component="BorderRadiusPicker"
+Category: forms
+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
+
+### BottomNavigation
+Mount: data-component="BottomNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BrandColorPicker
+Mount: data-component="BrandColorPicker"
+Category: forms
+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
+Mount: data-component="BrandSelector"
+Category: forms
+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
+
+### Breadcrumbs
+Mount: data-component="Breadcrumbs"
+Category: core
+Props: class: string = "", items: string = [], centered: boolean = false, compact: boolean = false, showHome: boolean = true, homeLabel: string = "Home", homeHref: string = "/"
+Slots: none
+Events: none
+
+### BrowserFrame
+Mount: data-component="BrowserFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BudgetRangeSlider
+Mount: data-component="BudgetRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BudgetSelector
+Mount: data-component="BudgetSelector"
+Category: forms
+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
+Mount: data-component="BusinessHoursPicker"
+Category: forms
+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
+
+### Button
+Mount: data-component="Button"
+Category: actions
+Props: label: string = "Button", type: string = "button", variant: string = "primary", size: string = "md", disabled: boolean = false, loading: boolean = false, icon: string = "", className: string = ""
+Slots: none
+Events: none
+
+### ButtonGroup
+Mount: data-component="ButtonGroup"
+Category: forms
+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
+Mount: data-component="ButtonSelector"
+Category: forms
+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
+
+### Calendar
+Mount: data-component="Calendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CalendarGrid
+Mount: data-component="CalendarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CalendarHeader
+Mount: data-component="CalendarHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CalendarNavigation
+Mount: data-component="CalendarNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CallbackUrlInput
+Mount: data-component="CallbackUrlInput"
+Category: forms
+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
+
+### CampaignCard
+Mount: data-component="CampaignCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignPerformancePreview
+Mount: data-component="CampaignPerformancePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignProgress
+Mount: data-component="CampaignProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CapabilityGrid
+Mount: data-component="CapabilityGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CaptchaField
+Mount: data-component="CaptchaField"
+Category: forms
+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
+
+### Card
+Mount: data-component="Card"
+Category: content
+Props: variant: string = "default", padding: string = "md", interactive: boolean = false, className: string = ""
+Slots: default
+Events: none
+
+### CardPaymentForm
+Mount: data-component="CardPaymentForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CardSelector
+Mount: data-component="CardSelector"
+Category: forms
+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
+
+### CardSkeleton
+Mount: data-component="CardSkeleton"
+Category: feedback
+Props: label: string = "Card", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CareerApplicationForm
+Mount: data-component="CareerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CareerBenefitsGrid
+Mount: data-component="CareerBenefitsGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Carousel
+Mount: data-component="Carousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyCard
+Mount: data-component="CaseStudyCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyHero
+Mount: data-component="CaseStudyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyPreview
+Mount: data-component="CaseStudyPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CenteredCTA
+Mount: data-component="CenteredCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CenteredHero
+Mount: data-component="CenteredHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CenteredSectionHeader
+Mount: data-component="CenteredSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CertificateUpload
+Mount: data-component="CertificateUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CertificationBadge
+Mount: data-component="CertificationBadge"
+Category: feedback
+Props: label: string = "Certification", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChallengeSection
+Mount: data-component="ChallengeSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ChannelBadge
+Mount: data-component="ChannelBadge"
+Category: feedback
+Props: label: string = "Channel", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChannelCard
+Mount: data-component="ChannelCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonChart
+Mount: data-component="ChannelComparisonChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonTable
+Mount: data-component="ChannelComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelFallbackDiagram
+Mount: data-component="ChannelFallbackDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelFlow
+Mount: data-component="ChannelFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelIcon
+Mount: data-component="ChannelIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelRateTable
+Mount: data-component="ChannelRateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelSelector
+Mount: data-component="ChannelSelector"
+Category: forms
+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
+
+### CharacterCounter
+Mount: data-component="CharacterCounter"
+Category: feedback
+Props: label: string = "Character", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartEmptyState
+Mount: data-component="ChartEmptyState"
+Category: feedback
+Props: label: string = "ChartEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartTooltip
+Mount: data-component="ChartTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Checkbox
+Mount: data-component="Checkbox"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Checkbox", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### CheckboxGroup
+Mount: data-component="CheckboxGroup"
+Category: forms
+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
+
+### Checklist
+Mount: data-component="Checklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChecklistProgress
+Mount: data-component="ChecklistProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Chip
+Mount: data-component="Chip"
+Category: core
+Props: label: string = "Chip", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChipInput
+Mount: data-component="ChipInput"
+Category: forms
+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
+
+### CircularProgress
+Mount: data-component="CircularProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CitySelector
+Mount: data-component="CitySelector"
+Category: forms
+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
+
+### ClearFiltersButton
+Mount: data-component="ClearFiltersButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ClickableCard
+Mount: data-component="ClickableCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CloseButton
+Mount: data-component="CloseButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Cluster
+Mount: data-component="Cluster"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### Code
+Mount: data-component="Code"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeBlock
+Mount: data-component="CodeBlock"
+Category: content
+Props: class: string = "", language: string = "text", filename: string = "", code: string = ""
+Slots: none
+Events: click
+
+### CodeCopyButton
+Mount: data-component="CodeCopyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CodeHeader
+Mount: data-component="CodeHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CodeInput
+Mount: data-component="CodeInput"
+Category: forms
+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
+
+### CodeLanguageBadge
+Mount: data-component="CodeLanguageBadge"
+Category: feedback
+Props: label: string = "CodeLanguage", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CodeTabs
+Mount: data-component="CodeTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeText
+Mount: data-component="CodeText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CohortChart
+Mount: data-component="CohortChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ColorGrid
+Mount: data-component="ColorGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ColorHexInput
+Mount: data-component="ColorHexInput"
+Category: forms
+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
+Mount: data-component="ColorPicker"
+Category: forms
+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
+Mount: data-component="ColorSelector"
+Category: forms
+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
+
+### ColorSwatch
+Mount: data-component="ColorSwatch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Combobox
+Mount: data-component="Combobox"
+Category: core
+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
+
+### ComingSoonBadge
+Mount: data-component="ComingSoonBadge"
+Category: feedback
+Props: label: string = "ComingSoon", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ComingSoonState
+Mount: data-component="ComingSoonState"
+Category: feedback
+Props: label: string = "ComingSoon", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CommandBlock
+Mount: data-component="CommandBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CommandMenu
+Mount: data-component="CommandMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### CommandSearchInput
+Mount: data-component="CommandSearchInput"
+Category: forms
+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
+
+### CompanyHero
+Mount: data-component="CompanyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanyNameInput
+Mount: data-component="CompanyNameInput"
+Category: forms
+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
+
+### CompanyPageShell
+Mount: data-component="CompanyPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanySizeSelector
+Mount: data-component="CompanySizeSelector"
+Category: forms
+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
+Mount: data-component="ComparisonDateRangePicker"
+Category: forms
+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
+
+### ComparisonTable
+Mount: data-component="ComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CompletionMeter
+Mount: data-component="CompletionMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ComplianceBadgeList
+Mount: data-component="ComplianceBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ComplianceProgramCard
+Mount: data-component="ComplianceProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConfirmationDialog
+Mount: data-component="ConfirmationDialog"
+Category: overlays
+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
+
+### ConfirmPasswordInput
+Mount: data-component="ConfirmPasswordInput"
+Category: forms
+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
+
+### ConnectedAccountCard
+Mount: data-component="ConnectedAccountCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConnectionCard
+Mount: data-component="ConnectionCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConsentTimelinePreview
+Mount: data-component="ConsentTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCard
+Mount: data-component="ContactCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCTA
+Mount: data-component="ContactCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactForm
+Mount: data-component="ContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactHero
+Mount: data-component="ContactHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactPageShell
+Mount: data-component="ContactPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesBanner
+Mount: data-component="ContactSalesBanner"
+Category: core
+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
+
+### ContactSalesButton
+Mount: data-component="ContactSalesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesForm
+Mount: data-component="ContactSalesForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Container
+Mount: data-component="Container"
+Category: core
+Props: size: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### ContextMenu
+Mount: data-component="ContextMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ContextSwitcher
+Mount: data-component="ContextSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversationList
+Mount: data-component="ConversationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ConversationPreview
+Mount: data-component="ConversationPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversionChart
+Mount: data-component="ConversionChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CookieBanner
+Mount: data-component="CookieBanner"
+Category: feedback
+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
+
+### CookieCategoryList
+Mount: data-component="CookieCategoryList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookieCategoryToggle
+Mount: data-component="CookieCategoryToggle"
+Category: forms
+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
+
+### CookieConsent
+Mount: data-component="CookieConsent"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click, change
+
+### CookieDetailsTable
+Mount: data-component="CookieDetailsTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookiePreferencesDialog
+Mount: data-component="CookiePreferencesDialog"
+Category: overlays
+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
+
+### CookieTable
+Mount: data-component="CookieTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CoordinatesInput
+Mount: data-component="CoordinatesInput"
+Category: forms
+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
+Mount: data-component="CoordinatesPicker"
+Category: forms
+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
+
+### CopyButton
+Mount: data-component="CopyButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopyCodeButton
+Mount: data-component="CopyCodeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopySecretField
+Mount: data-component="CopySecretField"
+Category: forms
+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
+
+### CostBreakdownChart
+Mount: data-component="CostBreakdownChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CostSummary
+Mount: data-component="CostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Counter
+Mount: data-component="Counter"
+Category: feedback
+Props: label: string = "Status", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CountryCallingCodeInput
+Mount: data-component="CountryCallingCodeInput"
+Category: forms
+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
+Mount: data-component="CountryCallingCodeSelector"
+Category: forms
+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
+Mount: data-component="CountrySelector"
+Category: forms
+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
+Mount: data-component="CouponInput"
+Category: forms
+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
+Mount: data-component="CreditAmountInput"
+Category: forms
+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
+
+### CronBuilder
+Mount: data-component="CronBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CronInput
+Mount: data-component="CronInput"
+Category: forms
+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
+
+### CsvUpload
+Mount: data-component="CsvUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CTASection
+Mount: data-component="CTASection"
+Category: layout
+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
+
+### CurrencyInput
+Mount: data-component="CurrencyInput"
+Category: forms
+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
+Mount: data-component="CurrencySelector"
+Category: forms
+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
+Mount: data-component="CurrentPasswordInput"
+Category: forms
+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
+
+### CustomerLogo
+Mount: data-component="CustomerLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CustomerStoryCard
+Mount: data-component="CustomerStoryCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DangerButton
+Mount: data-component="DangerButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DataProtectionCard
+Mount: data-component="DataProtectionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DataRetentionTable
+Mount: data-component="DataRetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DataTable
+Mount: data-component="DataTable"
+Category: data
+Props: caption: string = "Data table", columns: string = [], rows: string = [], emptyMessage: string = "No data available.", striped: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### DateInput
+Mount: data-component="DateInput"
+Category: forms
+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
+Mount: data-component="DatePicker"
+Category: forms
+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
+
+### DateRangeCalendar
+Mount: data-component="DateRangeCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateRangePicker
+Mount: data-component="DateRangePicker"
+Category: forms
+Props: class: string = "", label: string = "Date range", startName: string = "startDate", endName: string = "endDate"
+Slots: none
+Events: none
+
+### DateRangeSlider
+Mount: data-component="DateRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateTimeInput
+Mount: data-component="DateTimeInput"
+Category: forms
+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
+Mount: data-component="DateTimePicker"
+Category: forms
+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
+Mount: data-component="DateTimeRangePicker"
+Category: forms
+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
+Mount: data-component="DecimalInput"
+Category: forms
+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
+
+### DefinitionList
+Mount: data-component="DefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DeleteConfirmationDialog
+Mount: data-component="DeleteConfirmationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryPreview
+Mount: data-component="DeliveryPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusChart
+Mount: data-component="DeliveryStatusChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusTimeline
+Mount: data-component="DeliveryStatusTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DemoRequestForm
+Mount: data-component="DemoRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DepartmentInput
+Mount: data-component="DepartmentInput"
+Category: forms
+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
+
+### DeprecatedFeatureAlert
+Mount: data-component="DeprecatedFeatureAlert"
+Category: feedback
+Props: label: string = "DeprecatedFeature", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### DescriptionList
+Mount: data-component="DescriptionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DesktopNavigation
+Mount: data-component="DesktopNavigation"
+Category: layout
+Props: label: string = "Primary navigation", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### DeveloperCTA
+Mount: data-component="DeveloperCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeveloperHero
+Mount: data-component="DeveloperHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperPageShell
+Mount: data-component="DeveloperPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperSearch
+Mount: data-component="DeveloperSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DevelopersMegaMenu
+Mount: data-component="DevelopersMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### DevelopersMenu
+Mount: data-component="DevelopersMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeviceCard
+Mount: data-component="DeviceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### disclosure
+Mount: data-component="disclosure"
+Category: core
+Props: summary: string = "Details", class: string = ""
+Slots: default
+Events: none
+
+### DiscountInput
+Mount: data-component="DiscountInput"
+Category: forms
+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
+
+### DisplayHeading
+Mount: data-component="DisplayHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DisplayNameInput
+Mount: data-component="DisplayNameInput"
+Category: forms
+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
+
+### Divider
+Mount: data-component="Divider"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### DocumentPreview
+Mount: data-component="DocumentPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DocumentUpload
+Mount: data-component="DocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DomainInput
+Mount: data-component="DomainInput"
+Category: forms
+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
+
+### DoNotSellLink
+Mount: data-component="DoNotSellLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DonutChart
+Mount: data-component="DonutChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadAction
+Mount: data-component="DownloadAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadButton
+Mount: data-component="DownloadButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadGateForm
+Mount: data-component="DownloadGateForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DownloadPolicyButton
+Mount: data-component="DownloadPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadResourceForm
+Mount: data-component="DownloadResourceForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Drawer
+Mount: data-component="Drawer"
+Category: core
+Props: class: string = "", title: string = "Panel", open: boolean = false, side: string = "right"
+Slots: default
+Events: click
+
+### DropdownMenu
+Mount: data-component="DropdownMenu"
+Category: overlays
+Props: class: string = "", label: string = "Menu"
+Slots: default
+Events: click
+
+### DropdownNavigation
+Mount: data-component="DropdownNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DurationInput
+Mount: data-component="DurationInput"
+Category: forms
+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
+Mount: data-component="DurationPicker"
+Category: forms
+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
+
+### DurationSlider
+Mount: data-component="DurationSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ElevatedCard
+Mount: data-component="ElevatedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailBodyEditor
+Mount: data-component="EmailBodyEditor"
+Category: forms
+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
+
+### EmailComposer
+Mount: data-component="EmailComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailInput
+Mount: data-component="EmailInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Email", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### EmojiPicker
+Mount: data-component="EmojiPicker"
+Category: forms
+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
+
+### EmptyState
+Mount: data-component="EmptyState"
+Category: feedback
+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
+
+### EncryptionDiagram
+Mount: data-component="EncryptionDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseCTA
+Mount: data-component="EnterpriseCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseHero
+Mount: data-component="EnterpriseHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### EnterprisePricingCard
+Mount: data-component="EnterprisePricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EnvironmentSelector
+Mount: data-component="EnvironmentSelector"
+Category: forms
+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
+
+### EnvironmentSwitcher
+Mount: data-component="EnvironmentSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorActions
+Mount: data-component="ErrorActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ErrorCard
+Mount: data-component="ErrorCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorCode
+Mount: data-component="ErrorCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorHero
+Mount: data-component="ErrorHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorIllustration
+Mount: data-component="ErrorIllustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPage
+Mount: data-component="ErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPageShell
+Mount: data-component="ErrorPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorState
+Mount: data-component="ErrorState"
+Category: feedback
+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
+
+### ErrorSupportLink
+Mount: data-component="ErrorSupportLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EstimatedCostSummary
+Mount: data-component="EstimatedCostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EventTable
+Mount: data-component="EventTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ExpandableText
+Mount: data-component="ExpandableText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ExpiryDateTimePicker
+Mount: data-component="ExpiryDateTimePicker"
+Category: forms
+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
+
+### ExportProgress
+Mount: data-component="ExportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ExternalLink
+Mount: data-component="ExternalLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EyebrowText
+Mount: data-component="EyebrowText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FactorCard
+Mount: data-component="FactorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteBuilder
+Mount: data-component="FallbackRouteBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteDiagram
+Mount: data-component="FallbackRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FAQ
+Mount: data-component="FAQ"
+Category: core
+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
+Mount: data-component="FAQAccordion"
+Category: core
+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
+
+### FaviconUpload
+Mount: data-component="FaviconUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FaxInput
+Mount: data-component="FaxInput"
+Category: forms
+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
+
+### FeatureCard
+Mount: data-component="FeatureCard"
+Category: content
+Props: class: string = "", icon: string = "✦", title: string = "Feature", description: string = "", href: string = ""
+Slots: none
+Events: none
+
+### FeatureChecklist
+Mount: data-component="FeatureChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureComparisonTable
+Mount: data-component="FeatureComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeaturedBlogCard
+Mount: data-component="FeaturedBlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureDetailsPanel
+Mount: data-component="FeatureDetailsPanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FeatureGrid
+Mount: data-component="FeatureGrid"
+Category: data
+Props: columns: number = 3, className: string = ""
+Slots: default
+Events: none
+
+### FeatureIconCard
+Mount: data-component="FeatureIconCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureList
+Mount: data-component="FeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTabs
+Mount: data-component="FeatureTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTimeline
+Mount: data-component="FeatureTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FeatureUnavailableState
+Mount: data-component="FeatureUnavailableState"
+Category: feedback
+Props: label: string = "FeatureUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FieldActions
+Mount: data-component="FieldActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### file-upload
+Mount: data-component="file-upload"
+Category: core
+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
+
+### FileInput
+Mount: data-component="FileInput"
+Category: forms
+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
+
+### FileList
+Mount: data-component="FileList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FileSizeInput
+Mount: data-component="FileSizeInput"
+Category: forms
+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
+
+### FileSizeLabel
+Mount: data-component="FileSizeLabel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileTypeBadge
+Mount: data-component="FileTypeBadge"
+Category: feedback
+Props: label: string = "FileType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FileUpload
+Mount: data-component="FileUpload"
+Category: content
+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
+
+### FilterableTable
+Mount: data-component="FilterableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FilterBar
+Mount: data-component="FilterBar"
+Category: core
+Props: label: string = "Filters", clearLabel: string = "Clear filters", showClear: boolean = true, class: string = ""
+Slots: default
+Events: none
+
+### FilterMenu
+Mount: data-component="FilterMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FilterSearchInput
+Mount: data-component="FilterSearchInput"
+Category: forms
+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
+
+### FinalCTA
+Mount: data-component="FinalCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FirstNameInput
+Mount: data-component="FirstNameInput"
+Category: forms
+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
+
+### Flex
+Mount: data-component="Flex"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FontPicker
+Mount: data-component="FontPicker"
+Category: forms
+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
+Mount: data-component="FontSizePicker"
+Category: forms
+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
+Mount: data-component="FontWeightPicker"
+Category: forms
+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
+
+### FooterLanguageSwitcher
+Mount: data-component="FooterLanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FooterStatusIndicator
+Mount: data-component="FooterStatusIndicator"
+Category: feedback
+Props: label: string = "FooterStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenPage
+Mount: data-component="ForbiddenPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenState
+Mount: data-component="ForbiddenState"
+Category: feedback
+Props: label: string = "Forbidden", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForgotPasswordForm
+Mount: data-component="ForgotPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Form
+Mount: data-component="Form"
+Category: content
+Props: action: string = "", method: string = "post", name: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormActions
+Mount: data-component="FormActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormAlert
+Mount: data-component="FormAlert"
+Category: feedback
+Props: label: string = "Form", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FormDialog
+Mount: data-component="FormDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FormError
+Mount: data-component="FormError"
+Category: core
+Props: id: string = "", message: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormErrorSummary
+Mount: data-component="FormErrorSummary"
+Category: content
+Props: class: string = "", title: string = "Please fix the following", visible: boolean = true
+Slots: default
+Events: none
+
+### FormField
+Mount: data-component="FormField"
+Category: forms
+Props: class: string = "", label: string = "Field", help: string = "", error: string = "", required: boolean = false
+Slots: default
+Events: none
+
+### FormGrid
+Mount: data-component="FormGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormGroup
+Mount: data-component="FormGroup"
+Category: forms
+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
+
+### FormHelpText
+Mount: data-component="FormHelpText"
+Category: content
+Props: id: string = "", text: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormLabel
+Mount: data-component="FormLabel"
+Category: content
+Props: for: string = "", label: string = "Label", required: boolean = false, optional: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### FormProgress
+Mount: data-component="FormProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormRow
+Mount: data-component="FormRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormSection
+Mount: data-component="FormSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FullBleed
+Mount: data-component="FullBleed"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FullscreenDialog
+Mount: data-component="FullscreenDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FunnelChart
+Mount: data-component="FunnelChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeoChart
+Mount: data-component="GeoChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeofenceEditor
+Mount: data-component="GeofenceEditor"
+Category: forms
+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
+
+### GhostButton
+Mount: data-component="GhostButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GlassCard
+Mount: data-component="GlassCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GlobalSearch
+Mount: data-component="GlobalSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GradientCTA
+Mount: data-component="GradientCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GradientPicker
+Mount: data-component="GradientPicker"
+Category: forms
+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
+Mount: data-component="GradientStopEditor"
+Category: forms
+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
+
+### Grid
+Mount: data-component="Grid"
+Category: data
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### GuideCard
+Mount: data-component="GuideCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideChecklist
+Mount: data-component="GuideChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideDifficultyBadge
+Mount: data-component="GuideDifficultyBadge"
+Category: feedback
+Props: label: string = "GuideDifficulty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### GuideGrid
+Mount: data-component="GuideGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### GuideStep
+Mount: data-component="GuideStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Header
+Mount: data-component="Header"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeaderActions
+Mount: data-component="HeaderActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HealthIndicator
+Mount: data-component="HealthIndicator"
+Category: feedback
+Props: label: string = "Health", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Hero
+Mount: data-component="Hero"
+Category: layout
+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
+
+### HeroActions
+Mount: data-component="HeroActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroCodePanel
+Mount: data-component="HeroCodePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeroGradientText
+Mount: data-component="HeroGradientText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroPrimaryAction
+Mount: data-component="HeroPrimaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroProductPreview
+Mount: data-component="HeroProductPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroSecondaryAction
+Mount: data-component="HeroSecondaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroTrustText
+Mount: data-component="HeroTrustText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HexColorInput
+Mount: data-component="HexColorInput"
+Category: forms
+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
+Mount: data-component="HiddenField"
+Category: forms
+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
+
+### HighlightText
+Mount: data-component="HighlightText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HolidayCalendar
+Mount: data-component="HolidayCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HostnameInput
+Mount: data-component="HostnameInput"
+Category: forms
+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
+Mount: data-component="HourPicker"
+Category: forms
+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
+Mount: data-component="HslColorInput"
+Category: forms
+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
+
+### hstack
+Mount: data-component="hstack"
+Category: core
+Props: gap: string = "4", align: string = "center", class: string = ""
+Slots: default
+Events: none
+
+### HtmlEditor
+Mount: data-component="HtmlEditor"
+Category: forms
+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
+
+### HumanApprovalStep
+Mount: data-component="HumanApprovalStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Icon
+Mount: data-component="Icon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IconButton
+Mount: data-component="IconButton"
+Category: actions
+Props: class: string = "", label: string = "Action", icon: string = "•", variant: string = "ghost", disabled: boolean = false
+Slots: none
+Events: none
+
+### IconPicker
+Mount: data-component="IconPicker"
+Category: forms
+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
+Mount: data-component="IconSelector"
+Category: forms
+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
+Mount: data-component="IdentifierInput"
+Category: forms
+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
+
+### Illustration
+Mount: data-component="Illustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageCompressionPreview
+Mount: data-component="ImageCompressionPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageEditor
+Mount: data-component="ImageEditor"
+Category: forms
+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
+
+### ImagePreviewDialog
+Mount: data-component="ImagePreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ImageSelector
+Mount: data-component="ImageSelector"
+Category: forms
+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
+
+### ImageUpload
+Mount: data-component="ImageUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImportProgress
+Mount: data-component="ImportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentAlert
+Mount: data-component="IncidentAlert"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentBanner
+Mount: data-component="IncidentBanner"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentCard
+Mount: data-component="IncidentCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IncidentList
+Mount: data-component="IncidentList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### IncidentResponseFlow
+Mount: data-component="IncidentResponseFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentSeverityBadge
+Mount: data-component="IncidentSeverityBadge"
+Category: feedback
+Props: label: string = "IncidentSeverity", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentTimeline
+Mount: data-component="IncidentTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IndustryBadge
+Mount: data-component="IndustryBadge"
+Category: feedback
+Props: label: string = "Industry", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IndustrySelector
+Mount: data-component="IndustrySelector"
+Category: forms
+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
+
+### InfoCard
+Mount: data-component="InfoCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Inline
+Mount: data-component="Inline"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### InlineAlert
+Mount: data-component="InlineAlert"
+Category: feedback
+Props: label: string = "Inline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### InlineCode
+Mount: data-component="InlineCode"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### input
+Mount: data-component="input"
+Category: core
+Props: type: string = "text", name: string = "", value: string = "", placeholder: string = "", class: string = ""
+Slots: none
+Events: none
+
+### InputGroup
+Mount: data-component="InputGroup"
+Category: forms
+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
+
+### InsetPanel
+Mount: data-component="InsetPanel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### IntegerInput
+Mount: data-component="IntegerInput"
+Category: forms
+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
+
+### IntegrationCard
+Mount: data-component="IntegrationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceLineItem
+Mount: data-component="InvoiceLineItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceSummary
+Mount: data-component="InvoiceSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IpAddressInput
+Mount: data-component="IpAddressInput"
+Category: forms
+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
+
+### JobCard
+Mount: data-component="JobCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JobProgress
+Mount: data-component="JobProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### JobTitleInput
+Mount: data-component="JobTitleInput"
+Category: forms
+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
+Mount: data-component="JsonInput"
+Category: forms
+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
+
+### JsonViewer
+Mount: data-component="JsonViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### KeyValueTable
+Mount: data-component="KeyValueTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### KycDocumentUpload
+Mount: data-component="KycDocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LanguageSelector
+Mount: data-component="LanguageSelector"
+Category: forms
+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
+
+### LanguageSwitcher
+Mount: data-component="LanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LastNameInput
+Mount: data-component="LastNameInput"
+Category: forms
+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
+
+### LatencyMetric
+Mount: data-component="LatencyMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LatitudeInput
+Mount: data-component="LatitudeInput"
+Category: forms
+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
+
+### LeadershipGrid
+Mount: data-component="LeadershipGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LeadText
+Mount: data-component="LeadText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalAcceptanceNotice
+Mount: data-component="LegalAcceptanceNotice"
+Category: feedback
+Props: label: string = "LegalAcceptance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalBulletList
+Mount: data-component="LegalBulletList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalContactBlock
+Mount: data-component="LegalContactBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalDefinitionList
+Mount: data-component="LegalDefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentHeader
+Mount: data-component="LegalDocumentHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentLayout
+Mount: data-component="LegalDocumentLayout"
+Category: layout
+Props: class: string = "", title: string = "Legal document", effectiveDate: string = "", updatedDate: string = ""
+Slots: toc, default
+Events: none
+
+### LegalHero
+Mount: data-component="LegalHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalLanguageSelector
+Mount: data-component="LegalLanguageSelector"
+Category: forms
+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
+
+### LegalNotice
+Mount: data-component="LegalNotice"
+Category: feedback
+Props: label: string = "Legal", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalPageShell
+Mount: data-component="LegalPageShell"
+Category: layout
+Props: class: string = ""
+Slots: navigation, default
+Events: none
+
+### LegalPrintButton
+Mount: data-component="LegalPrintButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LegalRegionSelector
+Mount: data-component="LegalRegionSelector"
+Category: forms
+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
+
+### LegalSection
+Mount: data-component="LegalSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalSummary
+Mount: data-component="LegalSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalTable
+Mount: data-component="LegalTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalTableOfContents
+Mount: data-component="LegalTableOfContents"
+Category: core
+Props: title: string = "On this page", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### LegalVersionBadge
+Mount: data-component="LegalVersionBadge"
+Category: feedback
+Props: label: string = "LegalVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LetterSpacingPicker
+Mount: data-component="LetterSpacingPicker"
+Category: forms
+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
+Mount: data-component="LicenseKeyInput"
+Category: forms
+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
+
+### Lightbox
+Mount: data-component="Lightbox"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LineChart
+Mount: data-component="LineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LineHeightPicker
+Mount: data-component="LineHeightPicker"
+Category: forms
+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
+
+### Link
+Mount: data-component="Link"
+Category: core
+Props: href: string = "#", label: string = "Link", external: boolean = false, className: string = ""
+Slots: none
+Events: none
+
+### LinkButton
+Mount: data-component="LinkButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### List
+Mount: data-component="List"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LoadingButton
+Mount: data-component="LoadingButton"
+Category: actions
+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
+
+### LocaleSelector
+Mount: data-component="LocaleSelector"
+Category: forms
+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
+
+### LocalizedRouteLink
+Mount: data-component="LocalizedRouteLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LocationPicker
+Mount: data-component="LocationPicker"
+Category: forms
+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
+
+### Logo
+Mount: data-component="Logo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoCloud
+Mount: data-component="LogoCloud"
+Category: core
+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
+
+### LogoUpload
+Mount: data-component="LogoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoutDialog
+Mount: data-component="LogoutDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LogTable
+Mount: data-component="LogTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LongitudeInput
+Mount: data-component="LongitudeInput"
+Category: forms
+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
+
+### MaintenanceAlert
+Mount: data-component="MaintenanceAlert"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceBanner
+Mount: data-component="MaintenanceBanner"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceCard
+Mount: data-component="MaintenanceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenancePage
+Mount: data-component="MaintenancePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceState
+Mount: data-component="MaintenanceState"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceWindowPicker
+Mount: data-component="MaintenanceWindowPicker"
+Category: forms
+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
+Mount: data-component="MapPicker"
+Category: forms
+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
+Mount: data-component="MarkdownEditor"
+Category: forms
+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
+
+### MarketingPageShell
+Mount: data-component="MarketingPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### MarketingSectionHeader
+Mount: data-component="MarketingSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MaskedSecretField
+Mount: data-component="MaskedSecretField"
+Category: forms
+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
+
+### MegaMenu
+Mount: data-component="MegaMenu"
+Category: overlays
+Props: label: string = "Explore", sections: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MemberList
+Mount: data-component="MemberList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### MentionInput
+Mount: data-component="MentionInput"
+Category: forms
+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
+
+### MessageCharacterCounter
+Mount: data-component="MessageCharacterCounter"
+Category: feedback
+Props: label: string = "MessageCharacter", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposer
+Mount: data-component="MessageComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposerPreview
+Mount: data-component="MessageComposerPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageLimitInput
+Mount: data-component="MessageLimitInput"
+Category: forms
+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
+
+### MessagePreview
+Mount: data-component="MessagePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageVolumeSlider
+Mount: data-component="MessageVolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Metric
+Mount: data-component="Metric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MetricCard
+Mount: data-component="MetricCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MetricGrid
+Mount: data-component="MetricGrid"
+Category: data
+Props: label: string = "Key metrics", metrics: string = [], class: string = ""
+Slots: none
+Events: none
+
+### MetricText
+Mount: data-component="MetricText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MinutePicker
+Mount: data-component="MinutePicker"
+Category: forms
+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
+
+### MissionSection
+Mount: data-component="MissionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileDeviceFrame
+Mount: data-component="MobileDeviceFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileInput
+Mount: data-component="MobileInput"
+Category: forms
+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
+
+### MobileMenuButton
+Mount: data-component="MobileMenuButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MobileNavigation
+Mount: data-component="MobileNavigation"
+Category: layout
+Props: label: string = "Menu", closeLabel: string = "Close menu", items: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MobileTableCard
+Mount: data-component="MobileTableCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Modal
+Mount: data-component="Modal"
+Category: core
+Props: class: string = "", title: string = "Dialog", description: string = "", open: boolean = false, size: string = "md", closeLabel: string = "Close"
+Slots: default
+Events: click
+
+### MonthlyVolumeSelector
+Mount: data-component="MonthlyVolumeSelector"
+Category: forms
+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
+Mount: data-component="MonthPicker"
+Category: forms
+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
+Mount: data-component="MonthYearPicker"
+Category: forms
+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
+
+### MultiFileUpload
+Mount: data-component="MultiFileUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultipleEmailInput
+Mount: data-component="MultipleEmailInput"
+Category: forms
+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
+
+### MultiSelect
+Mount: data-component="MultiSelect"
+Category: core
+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
+
+### MutedText
+Mount: data-component="MutedText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NameInput
+Mount: data-component="NameInput"
+Category: forms
+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
+
+### NarrowContainer
+Mount: data-component="NarrowContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Navigation
+Mount: data-component="Navigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NavigationItem
+Mount: data-component="NavigationItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NavigationMegaMenu
+Mount: data-component="NavigationMegaMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### NewBadge
+Mount: data-component="NewBadge"
+Category: feedback
+Props: label: string = "New", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NewPasswordInput
+Mount: data-component="NewPasswordInput"
+Category: forms
+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
+
+### NewsletterCTA
+Mount: data-component="NewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### NewsletterForm
+Mount: data-component="NewsletterForm"
+Category: content
+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
+
+### NoResultsState
+Mount: data-component="NoResultsState"
+Category: feedback
+Props: label: string = "NoResults", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundPage
+Mount: data-component="NotFoundPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundState
+Mount: data-component="NotFoundState"
+Category: feedback
+Props: label: string = "NotFound", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationCard
+Mount: data-component="NotificationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotificationDot
+Mount: data-component="NotificationDot"
+Category: core
+Props: label: string = "Notification", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationList
+Mount: data-component="NotificationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### NumberInput
+Mount: data-component="NumberInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### OfficeCard
+Mount: data-component="OfficeCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflinePage
+Mount: data-component="OfflinePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflineState
+Mount: data-component="OfflineState"
+Category: feedback
+Props: label: string = "Offline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OnboardingProgress
+Mount: data-component="OnboardingProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OneTimeSecretDisplay
+Mount: data-component="OneTimeSecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OnlineIndicator
+Mount: data-component="OnlineIndicator"
+Category: feedback
+Props: label: string = "Online", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OpacitySlider
+Mount: data-component="OpacitySlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OpenAPICTA
+Mount: data-component="OpenAPICTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OptionalIndicator
+Mount: data-component="OptionalIndicator"
+Category: feedback
+Props: label: string = "Optional", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OrganizationSelector
+Mount: data-component="OrganizationSelector"
+Category: forms
+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
+
+### OtpInput
+Mount: data-component="OtpInput"
+Category: forms
+Props: class: string = "", name: string = "otp", length: number = 6, label: string = "Verification code"
+Slots: none
+Events: none
+
+### OtpVerificationForm
+Mount: data-component="OtpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OutlinedCard
+Mount: data-component="OutlinedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PageAlert
+Mount: data-component="PageAlert"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PageHeader
+Mount: data-component="PageHeader"
+Category: core
+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
+Mount: data-component="PageHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PageShell
+Mount: data-component="PageShell"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### PageSkeleton
+Mount: data-component="PageSkeleton"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Pagination
+Mount: data-component="Pagination"
+Category: core
+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
+
+### Panel
+Mount: data-component="Panel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### PartnerApplicationForm
+Mount: data-component="PartnerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PartnerLogoGrid
+Mount: data-component="PartnerLogoGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PartnerProgramCard
+Mount: data-component="PartnerProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PasskeyButton
+Mount: data-component="PasskeyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordInput
+Mount: data-component="PasswordInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Password", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### PasswordRequirementList
+Mount: data-component="PasswordRequirementList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PasswordStrengthMeter
+Mount: data-component="PasswordStrengthMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordVisibilityToggle
+Mount: data-component="PasswordVisibilityToggle"
+Category: forms
+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
+Mount: data-component="PathInput"
+Category: forms
+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
+
+### PaymentMethodCard
+Mount: data-component="PaymentMethodCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PdfPreview
+Mount: data-component="PdfPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PercentageInput
+Mount: data-component="PercentageInput"
+Category: forms
+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
+Mount: data-component="PermissionSelector"
+Category: forms
+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
+Mount: data-component="PhoneInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### PieChart
+Mount: data-component="PieChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Pill
+Mount: data-component="Pill"
+Category: core
+Props: label: string = "Pill", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PinInput
+Mount: data-component="PinInput"
+Category: forms
+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
+
+### PlainTextEditor
+Mount: data-component="PlainTextEditor"
+Category: forms
+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
+
+### PlanCTA
+Mount: data-component="PlanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PlanFeatureList
+Mount: data-component="PlanFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanLimitList
+Mount: data-component="PlanLimitList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanSelector
+Mount: data-component="PlanSelector"
+Category: forms
+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
+
+### PlatformPillarCard
+Mount: data-component="PlatformPillarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PolicyVersionTable
+Mount: data-component="PolicyVersionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Popover
+Mount: data-component="Popover"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### PortInput
+Mount: data-component="PortInput"
+Category: forms
+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
+Mount: data-component="PortNumberInput"
+Category: forms
+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
+Mount: data-component="PositiveNumberInput"
+Category: forms
+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
+Mount: data-component="PostalCodeInput"
+Category: forms
+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
+
+### PostmanCTA
+Mount: data-component="PostmanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PresetDateRangePicker
+Mount: data-component="PresetDateRangePicker"
+Category: forms
+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
+
+### PressReleaseCard
+Mount: data-component="PressReleaseCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PreviewBadge
+Mount: data-component="PreviewBadge"
+Category: feedback
+Props: label: string = "Preview", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PreviousNextNavigation
+Mount: data-component="PreviousNextNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PriceInput
+Mount: data-component="PriceInput"
+Category: forms
+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
+
+### PriceRangeSlider
+Mount: data-component="PriceRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PriceText
+Mount: data-component="PriceText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingCard
+Mount: data-component="PricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingComparisonTable
+Mount: data-component="PricingComparisonTable"
+Category: data
+Props: caption: string = "Plan comparison", plans: string = [], features: string = [], class: string = ""
+Slots: none
+Events: none
+
+### PricingContactForm
+Mount: data-component="PricingContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingFeatureGroup
+Mount: data-component="PricingFeatureGroup"
+Category: forms
+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
+
+### PricingGrid
+Mount: data-component="PricingGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingHero
+Mount: data-component="PricingHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingPlanCard
+Mount: data-component="PricingPlanCard"
+Category: content
+Props: class: string = "", name: string = "Starter", description: string = "", price: string = "₹0", period: string = "/month", featured: boolean = false, ctaLabel: string = "Choose plan", ctaHref: string = "#"
+Slots: default
+Events: none
+
+### PricingTable
+Mount: data-component="PricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingToggle
+Mount: data-component="PricingToggle"
+Category: forms
+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
+
+### PrimaryButton
+Mount: data-component="PrimaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintAction
+Mount: data-component="PrintAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintPolicyButton
+Mount: data-component="PrintPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrioritySelector
+Mount: data-component="PrioritySelector"
+Category: forms
+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
+
+### PrivacyNotice
+Mount: data-component="PrivacyNotice"
+Category: feedback
+Props: label: string = "Privacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductArchitectureDiagram
+Mount: data-component="ProductArchitectureDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductCard
+Mount: data-component="ProductCard"
+Category: content
+Props: eyebrow: string = "Product", title: string = "Product name", description: string = "", href: string = "#", actionLabel: string = "Learn more", status: string = "", class: string = ""
+Slots: none
+Events: none
+
+### ProductCategorySection
+Mount: data-component="ProductCategorySection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductCTA
+Mount: data-component="ProductCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductFeatureList
+Mount: data-component="ProductFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductGrid
+Mount: data-component="ProductGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductHero
+Mount: data-component="ProductHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductIcon
+Mount: data-component="ProductIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductIntegrationList
+Mount: data-component="ProductIntegrationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductList
+Mount: data-component="ProductList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductLogo
+Mount: data-component="ProductLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductMegaMenu
+Mount: data-component="ProductMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ProductMiniCard
+Mount: data-component="ProductMiniCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductNavigationCard
+Mount: data-component="ProductNavigationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductPageShell
+Mount: data-component="ProductPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### ProductSelector
+Mount: data-component="ProductSelector"
+Category: forms
+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
+
+### ProductsMegaMenu
+Mount: data-component="ProductsMegaMenu"
+Category: overlays
+Props: label: string = "Products", sections: string = [], class: string = ""
+Slots: none
+Events: none
+
+### ProductStatusBadge
+Mount: data-component="ProductStatusBadge"
+Category: feedback
+Props: label: string = "ProductStatus", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductUseCaseList
+Mount: data-component="ProductUseCaseList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### progress
+Mount: data-component="progress"
+Category: core
+Props: value: number = 0, max: number = 100, class: string = ""
+Slots: none
+Events: none
+
+### ProgressBar
+Mount: data-component="ProgressBar"
+Category: core
+Props: class: string = "", value: number = 0, max: number = 100, label: string = "Progress", showValue: boolean = true
+Slots: none
+Events: none
+
+### ProgressChart
+Mount: data-component="ProgressChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressRing
+Mount: data-component="ProgressRing"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressSlider
+Mount: data-component="ProgressSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectCard
+Mount: data-component="ProjectCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectSelector
+Mount: data-component="ProjectSelector"
+Category: forms
+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
+
+### ProjectSwitcher
+Mount: data-component="ProjectSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PromoCodeInput
+Mount: data-component="PromoCodeInput"
+Category: forms
+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
+
+### PromptDialog
+Mount: data-component="PromptDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ProviderSelector
+Mount: data-component="ProviderSelector"
+Category: forms
+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
+
+### PublicFooter
+Mount: data-component="PublicFooter"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: submit
+
+### PublicHeader
+Mount: data-component="PublicHeader"
+Category: layout
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicHeaderLogo
+Mount: data-component="PublicHeaderLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PublicMobileNavigation
+Mount: data-component="PublicMobileNavigation"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicPageShell
+Mount: data-component="PublicPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PublicSearch
+Mount: data-component="PublicSearch"
+Category: core
+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
+
+### PublishDateTimePicker
+Mount: data-component="PublishDateTimePicker"
+Category: forms
+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
+
+### PushComposer
+Mount: data-component="PushComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PushNotificationEditor
+Mount: data-component="PushNotificationEditor"
+Category: forms
+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
+
+### QrCode
+Mount: data-component="QrCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuantityInput
+Mount: data-component="QuantityInput"
+Category: forms
+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
+
+### QuantityStepper
+Mount: data-component="QuantityStepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuietHoursPicker
+Mount: data-component="QuietHoursPicker"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### QuoteText
+Mount: data-component="QuoteText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Radio
+Mount: data-component="Radio"
+Category: core
+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
+
+### RadioGroup
+Mount: data-component="RadioGroup"
+Category: forms
+Props: class: string = "", label: string = "Choose one", name: string = "choice"
+Slots: default
+Events: none
+
+### RangeInput
+Mount: data-component="RangeInput"
+Category: forms
+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
+
+### RangeSlider
+Mount: data-component="RangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitedState
+Mount: data-component="RateLimitedState"
+Category: feedback
+Props: label: string = "RateLimited", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitInput
+Mount: data-component="RateLimitInput"
+Category: forms
+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
+
+### RateLimitPage
+Mount: data-component="RateLimitPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateTable
+Mount: data-component="RateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RatingSlider
+Mount: data-component="RatingSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecipientSelector
+Mount: data-component="RecipientSelector"
+Category: forms
+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
+
+### RecoveryCodeForm
+Mount: data-component="RecoveryCodeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecoveryCodeInput
+Mount: data-component="RecoveryCodeInput"
+Category: forms
+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
+
+### RecurrenceRuleBuilder
+Mount: data-component="RecurrenceRuleBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecurringSchedulePicker
+Mount: data-component="RecurringSchedulePicker"
+Category: forms
+Props: id: string = "recurring-schedule", name: string = "recurrence", label: string = "Repeat", value: string = "none", disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### RedirectUriInput
+Mount: data-component="RedirectUriInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ReferenceInput
+Mount: data-component="ReferenceInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RegexInput
+Mount: data-component="RegexInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RegionalPrivacyBanner
+Mount: data-component="RegionalPrivacyBanner"
+Category: feedback
+Props: label: string = "RegionalPrivacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionAvailabilityTable
+Mount: data-component="RegionAvailabilityTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RegionSelector
+Mount: data-component="RegionSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RegionUnavailableAlert
+Mount: data-component="RegionUnavailableAlert"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionUnavailableState
+Mount: data-component="RegionUnavailableState"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RejectOptionalCookiesButton
+Mount: data-component="RejectOptionalCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReopenCookieSettingsButton
+Mount: data-component="ReopenCookieSettingsButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReportCard
+Mount: data-component="ReportCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestResponseViewer
+Mount: data-component="RequestResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestViewer
+Mount: data-component="RequestViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequiredIndicator
+Mount: data-component="RequiredIndicator"
+Category: feedback
+Props: label: string = "Required", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResetPasswordForm
+Mount: data-component="ResetPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResizablePanel
+Mount: data-component="ResizablePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceCard
+Mount: data-component="ResourceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourceDownloadCard
+Mount: data-component="ResourceDownloadCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcePageShell
+Mount: data-component="ResourcePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceSearch
+Mount: data-component="ResourceSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcesMegaMenu
+Mount: data-component="ResourcesMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ResourceTypeBadge
+Mount: data-component="ResourceTypeBadge"
+Category: feedback
+Props: label: string = "ResourceType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResponseViewer
+Mount: data-component="ResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResponsibleDisclosureCTA
+Mount: data-component="ResponsibleDisclosureCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ResponsiveTable
+Mount: data-component="ResponsiveTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ResultsSection
+Mount: data-component="ResultsSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### RetentionTable
+Mount: data-component="RetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RetryCountInput
+Mount: data-component="RetryCountInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RevenueChart
+Mount: data-component="RevenueChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### RgbColorInput
+Mount: data-component="RgbColorInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RichTextEditor
+Mount: data-component="RichTextEditor"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RichTextInput
+Mount: data-component="RichTextInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RoleSelector
+Mount: data-component="RoleSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### RollingDateRangePicker
+Mount: data-component="RollingDateRangePicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SaveCookiePreferencesButton
+Mount: data-component="SaveCookiePreferencesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SavedFilterSelector
+Mount: data-component="SavedFilterSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ScheduledDateTimePicker
+Mount: data-component="ScheduledDateTimePicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ScheduleMessagePicker
+Mount: data-component="ScheduleMessagePicker"
+Category: forms
+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
+Mount: data-component="SchedulePicker"
+Category: forms
+Props: class: string = "", label: string = "Schedule"
+Slots: none
+Events: none
+
+### ScreenshotFrame
+Mount: data-component="ScreenshotFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ScrollArea
+Mount: data-component="ScrollArea"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SDKCard
+Mount: data-component="SDKCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SdkLanguageSelector
+Mount: data-component="SdkLanguageSelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SDKLanguageTabs
+Mount: data-component="SDKLanguageTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SDKTabs
+Mount: data-component="SDKTabs"
+Category: core
+Props: label: string = "SDK languages", tabs: string = [], defaultIndex: number = 0, class: string = ""
+Slots: none
+Events: click
+
+### SearchButton
+Mount: data-component="SearchButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SearchCategoryTabs
+Mount: data-component="SearchCategoryTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SearchDialog
+Mount: data-component="SearchDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SearchEmptyState
+Mount: data-component="SearchEmptyState"
+Category: feedback
+Props: label: string = "SearchEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchInput
+Mount: data-component="SearchInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### SearchLoadingState
+Mount: data-component="SearchLoadingState"
+Category: feedback
+Props: label: string = "SearchLoading", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchResultItem
+Mount: data-component="SearchResultItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecondaryButton
+Mount: data-component="SecondaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SecondPicker
+Mount: data-component="SecondPicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SecretDisplay
+Mount: data-component="SecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretInput
+Mount: data-component="SecretInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### SecretRevealDialog
+Mount: data-component="SecretRevealDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Section
+Mount: data-component="Section"
+Category: layout
+Props: id: string = "", size: string = "default", surface: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### SectionActions
+Mount: data-component="SectionActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SectionHeader
+Mount: data-component="SectionHeader"
+Category: layout
+Props: class: string = "", eyebrow: string = "", title: string = "Section title", description: string = "", align: string = "left"
+Slots: default
+Events: none
+
+### SectionHeading
+Mount: data-component="SectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityAlert
+Mount: data-component="SecurityAlert"
+Category: feedback
+Props: label: string = "Security", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SecurityContactCard
+Mount: data-component="SecurityContactCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityFeatureCard
+Mount: data-component="SecurityFeatureCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityHero
+Mount: data-component="SecurityHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPillarGrid
+Mount: data-component="SecurityPillarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPracticeList
+Mount: data-component="SecurityPracticeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityReportForm
+Mount: data-component="SecurityReportForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Select
+Mount: data-component="Select"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Select", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
+Slots: default
+Events: none
+
+### SenderIdInput
+Mount: data-component="SenderIdInput"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ServerErrorPage
+Mount: data-component="ServerErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ServiceLevelTable
+Mount: data-component="ServiceLevelTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusBadge
+Mount: data-component="ServiceStatusBadge"
+Category: feedback
+Props: label: string = "ServiceStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusList
+Mount: data-component="ServiceStatusList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusRow
+Mount: data-component="ServiceStatusRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SessionCard
+Mount: data-component="SessionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SessionExpiredDialog
+Mount: data-component="SessionExpiredDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SetupChecklist
+Mount: data-component="SetupChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SeveritySelector
+Mount: data-component="SeveritySelector"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ShadowPicker
+Mount: data-component="ShadowPicker"
+Category: forms
+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
+
+### ShareAction
+Mount: data-component="ShareAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ShareButton
+Mount: data-component="ShareButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SidebarLayout
+Mount: data-component="SidebarLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SidePanel
+Mount: data-component="SidePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SignInForm
+Mount: data-component="SignInForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SignInLink
+Mount: data-component="SignInLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SignUpForm
+Mount: data-component="SignUpForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SiteSearch
+Mount: data-component="SiteSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Skeleton
+Mount: data-component="Skeleton"
+Category: feedback
+Props: height: string = "4", rounded: string = "lg", className: string = ""
+Slots: none
+Events: none
+
+### SkipLink
+Mount: data-component="SkipLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SlaTable
+Mount: data-component="SlaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Slider
+Mount: data-component="Slider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SlugInput
+Mount: data-component="SlugInput"
+Category: forms
+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
+
+### SmallText
+Mount: data-component="SmallText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SmartRouteDiagram
+Mount: data-component="SmartRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SmsComposer
+Mount: data-component="SmsComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmsMessageEditor
+Mount: data-component="SmsMessageEditor"
+Category: forms
+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
+
+### SmsSegmentCounter
+Mount: data-component="SmsSegmentCounter"
+Category: feedback
+Props: label: string = "SmsSegment", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SocialShare
+Mount: data-component="SocialShare"
+Category: core
+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
+
+### SolutionHero
+Mount: data-component="SolutionHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionPageShell
+Mount: data-component="SolutionPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionSection
+Mount: data-component="SolutionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionsMegaMenu
+Mount: data-component="SolutionsMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### SortableTable
+Mount: data-component="SortableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### spacer
+Mount: data-component="spacer"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### Spinner
+Mount: data-component="Spinner"
+Category: core
+Props: class: string = "", label: string = "Loading", size: string = "md"
+Slots: none
+Events: none
+
+### SplitButton
+Mount: data-component="SplitButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitCTA
+Mount: data-component="SplitCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitHero
+Mount: data-component="SplitHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SplitLayout
+Mount: data-component="SplitLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SplitSectionHeader
+Mount: data-component="SplitSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stack
+Mount: data-component="Stack"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### StartFreeButton
+Mount: data-component="StartFreeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### StatCard
+Mount: data-component="StatCard"
+Category: content
+Props: class: string = "", label: string = "Metric", value: string = "0", change: string = "", trend: string = "neutral"
+Slots: none
+Events: none
+
+### StateSelector
+Mount: data-component="StateSelector"
+Category: forms
+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
+
+### StatusBadge
+Mount: data-component="StatusBadge"
+Category: feedback
+Props: class: string = "", status: string = "operational"
+Slots: none
+Events: none
+
+### StatusBanner
+Mount: data-component="StatusBanner"
+Category: core
+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
+
+### StatusPageShell
+Mount: data-component="StatusPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### StatusSelector
+Mount: data-component="StatusSelector"
+Category: forms
+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
+
+### StatusSubscribeForm
+Mount: data-component="StatusSubscribeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusTable
+Mount: data-component="StatusTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### StepNavigation
+Mount: data-component="StepNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stepper
+Mount: data-component="Stepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StepperInput
+Mount: data-component="StepperInput"
+Category: forms
+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
+
+### StepUpAuthenticationDialog
+Mount: data-component="StepUpAuthenticationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### StickerPicker
+Mount: data-component="StickerPicker"
+Category: forms
+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
+
+### Sticky
+Mount: data-component="Sticky"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StickyLayout
+Mount: data-component="StickyLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StreetAddressInput
+Mount: data-component="StreetAddressInput"
+Category: forms
+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
+Mount: data-component="SubdomainInput"
+Category: forms
+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
+Mount: data-component="SubjectInput"
+Category: forms
+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
+
+### SubprocessorTable
+Mount: data-component="SubprocessorTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SubsectionHeading
+Mount: data-component="SubsectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SuccessCard
+Mount: data-component="SuccessCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SuccessState
+Mount: data-component="SuccessState"
+Category: feedback
+Props: label: string = "Success", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SupportRequestForm
+Mount: data-component="SupportRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Surface
+Mount: data-component="Surface"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Switch
+Mount: data-component="Switch"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Switch", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: click
+
+### Table
+Mount: data-component="Table"
+Category: data
+Props: class: string = "", caption: string = "Data table", responsive: boolean = true
+Slots: default
+Events: none
+
+### TableHeader
+Mount: data-component="TableHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### TableRow
+Mount: data-component="TableRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TableSkeleton
+Mount: data-component="TableSkeleton"
+Category: feedback
+Props: label: string = "Table", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Tabs
+Mount: data-component="Tabs"
+Category: content
+Props: class: string = "", active: string = "first"
+Slots: first, second
+Events: click
+
+### tag
+Mount: data-component="tag"
+Category: core
+Props: label: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TagInput
+Mount: data-component="TagInput"
+Category: forms
+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
+
+### TaxNotice
+Mount: data-component="TaxNotice"
+Category: feedback
+Props: label: string = "Tax", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TaxRateInput
+Mount: data-component="TaxRateInput"
+Category: forms
+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
+
+### TeamMemberCard
+Mount: data-component="TeamMemberCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TeamSizeSelector
+Mount: data-component="TeamSizeSelector"
+Category: forms
+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
+
+### TemplateCard
+Mount: data-component="TemplateCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateSelector
+Mount: data-component="TemplateSelector"
+Category: forms
+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
+Mount: data-component="TemplateVariableInput"
+Category: forms
+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
+
+### TenantIsolationDiagram
+Mount: data-component="TenantIsolationDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TerminalBlock
+Mount: data-component="TerminalBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TertiaryButton
+Mount: data-component="TertiaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TestimonialCard
+Mount: data-component="TestimonialCard"
+Category: content
+Props: class: string = "", quote: string = "Great product.", name: string = "Customer", role: string = "", company: string = "", avatar: string = ""
+Slots: none
+Events: none
+
+### TestimonialCarousel
+Mount: data-component="TestimonialCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TestMessageDialog
+Mount: data-component="TestMessageDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Textarea
+Mount: data-component="Textarea"
+Category: core
+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
+
+### TextInput
+Mount: data-component="TextInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### TextLink
+Mount: data-component="TextLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TextSkeleton
+Mount: data-component="TextSkeleton"
+Category: feedback
+Props: label: string = "Text", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### theme-toggle
+Mount: data-component="theme-toggle"
+Category: core
+Props: label: string = "Toggle theme", class: string = ""
+Slots: default
+Events: none
+
+### ThemeColorPicker
+Mount: data-component="ThemeColorPicker"
+Category: forms
+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 = ""
+Slots: default
+Events: none
+
+### ThemeSwitcher
+Mount: data-component="ThemeSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimeInput
+Mount: data-component="TimeInput"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### Timeline
+Mount: data-component="Timeline"
+Category: visualization
+Props: class: string = "", title: string = "Timeline"
+Slots: default
+Events: none
+
+### TimelineChart
+Mount: data-component="TimelineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TimelineItem
+Mount: data-component="TimelineItem"
+Category: content
+Props: class: string = "", title: string = "Event", date: string = "", description: string = "", status: string = "default"
+Slots: none
+Events: none
+
+### TimeoutInput
+Mount: data-component="TimeoutInput"
+Category: forms
+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
+Mount: data-component="TimePicker"
+Category: forms
+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 = ""
+Slots: none
+Events: none
+
+### TimeRangePicker
+Mount: data-component="TimeRangePicker"
+Category: forms
+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
+Mount: data-component="TimezoneAwareTimePicker"
+Category: forms
+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
+Mount: data-component="TimezoneSelector"
+Category: forms
+Props: class: string = "", id: string = "timezone", name: string = "timezone", label: string = "Timezone"
+Slots: none
+Events: none
+
+### Toast
+Mount: data-component="Toast"
+Category: core
+Props: class: string = "", title: string = "Saved", description: string = "", variant: string = "success", duration: number = 5000
+Slots: none
+Events: click
+
+### ToastAction
+Mount: data-component="ToastAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ToastHost
+Mount: data-component="ToastHost"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### ToastIcon
+Mount: data-component="ToastIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ToastProgress
+Mount: data-component="ToastProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Toggle
+Mount: data-component="Toggle"
+Category: forms
+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
+Mount: data-component="ToggleGroup"
+Category: forms
+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
+Mount: data-component="TokenInput"
+Category: forms
+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
+
+### Tooltip
+Mount: data-component="Tooltip"
+Category: content
+Props: class: string = "", text: string = "Helpful information", position: string = "top"
+Slots: default
+Events: none
+
+### TotpVerificationForm
+Mount: data-component="TotpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TranslatedText
+Mount: data-component="TranslatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TreeTable
+Mount: data-component="TreeTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TrendIndicator
+Mount: data-component="TrendIndicator"
+Category: feedback
+Props: label: string = "Trend", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TruncatedText
+Mount: data-component="TruncatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TrustBadgeList
+Mount: data-component="TrustBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Typography
+Mount: data-component="Typography"
+Category: core
+Props: as: string = "p", variant: string = "body", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### UnavailableRegionState
+Mount: data-component="UnavailableRegionState"
+Category: feedback
+Props: label: string = "UnavailableRegion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### UnifiedTimelinePreview
+Mount: data-component="UnifiedTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UnsavedChangesDialog
+Mount: data-component="UnsavedChangesDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### UploadItem
+Mount: data-component="UploadItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadPreview
+Mount: data-component="UploadPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadProgress
+Mount: data-component="UploadProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeChart
+Mount: data-component="UptimeChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeMetric
+Mount: data-component="UptimeMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UrlInput
+Mount: data-component="UrlInput"
+Category: forms
+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
+
+### UsagePricingTable
+Mount: data-component="UsagePricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### UseCaseSelector
+Mount: data-component="UseCaseSelector"
+Category: forms
+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
+
+### UserCard
+Mount: data-component="UserCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UsernameInput
+Mount: data-component="UsernameInput"
+Category: forms
+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
+
+### ValueCard
+Mount: data-component="ValueCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ValuesGrid
+Mount: data-component="ValuesGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VerificationCodeInput
+Mount: data-component="VerificationCodeInput"
+Category: forms
+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
+
+### VerifiedBadge
+Mount: data-component="VerifiedBadge"
+Category: feedback
+Props: label: string = "Verified", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### VersionSelector
+Mount: data-component="VersionSelector"
+Category: forms
+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
+
+### VerticalTabs
+Mount: data-component="VerticalTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoCard
+Mount: data-component="VideoCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoPreviewDialog
+Mount: data-component="VideoPreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### VideoUpload
+Mount: data-component="VideoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VirtualizedTable
+Mount: data-component="VirtualizedTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VisionSection
+Mount: data-component="VisionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### VisuallyHidden
+Mount: data-component="VisuallyHidden"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptComposer
+Mount: data-component="VoiceScriptComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptEditor
+Mount: data-component="VoiceScriptEditor"
+Category: forms
+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
+Mount: data-component="VolumeInput"
+Category: forms
+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
+
+### VolumeSlider
+Mount: data-component="VolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WarningCard
+Mount: data-component="WarningCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookEventCard
+Mount: data-component="WebhookEventCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookFlowDiagram
+Mount: data-component="WebhookFlowDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WebhookPayloadViewer
+Mount: data-component="WebhookPayloadViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookUrlInput
+Mount: data-component="WebhookUrlInput"
+Category: forms
+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
+
+### WebinarCard
+Mount: data-component="WebinarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebinarRegistrationForm
+Mount: data-component="WebinarRegistrationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Well
+Mount: data-component="Well"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppComposer
+Mount: data-component="WhatsAppComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppNumberInput
+Mount: data-component="WhatsAppNumberInput"
+Category: forms
+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
+Mount: data-component="WhatsAppTemplateEditor"
+Category: forms
+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
+
+### WideContainer
+Mount: data-component="WideContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Wizard
+Mount: data-component="Wizard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WizardHeader
+Mount: data-component="WizardHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WizardNavigation
+Mount: data-component="WizardNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowCanvasPreview
+Mount: data-component="WorkflowCanvasPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowProgress
+Mount: data-component="WorkflowProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceCard
+Mount: data-component="WorkspaceCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceSelector
+Mount: data-component="WorkspaceSelector"
+Category: forms
+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
+
+### WorkspaceSwitcher
+Mount: data-component="WorkspaceSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### YearPicker
+Mount: data-component="YearPicker"
+Category: forms
+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
+
+### ZoomSlider
+Mount: data-component="ZoomSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
 # Installed package documentation
 
 The following README files and declarations come from the installed private 0.2.64 release.
diff --git a/scripts/generate-docs.ts b/scripts/generate-docs.ts
index 8298856f..2322bb2b 100644
--- a/scripts/generate-docs.ts
+++ b/scripts/generate-docs.ts
@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 
 const root = resolve(import.meta.dir, "..");
@@ -9,7 +9,9 @@ const frameworkVersion = projectPackage.wrnexus?.version;
 if (!frameworkVersion) throw new Error("package.json is missing wrnexus.version");
 const pages = join(root, "app", "pages");
 const packagePages = join(pages, "packages");
+const componentPages = join(pages, "components");
 mkdirSync(packagePages, { recursive: true });
+mkdirSync(componentPages, { recursive: true });
 
 interface UiComponentReference {
   count: number;
@@ -21,6 +23,7 @@ interface UiComponentReference {
     props: Array<{ name: string; type: string; required: boolean; default: string | null }>;
     slots: string[];
     events: string[];
+    source: string;
   }>;
 }
 
@@ -259,10 +262,10 @@ ${state}
       
       
    
         W WRNexusJS
-        
+        
         
    Private preview · v${frameworkVersion}
    
       
    
-      
    Browse documentation
    
+      
    Browse documentation
    
       ${content}
       
       
@@ -320,42 +323,103 @@ for (const [name, category, summary] of catalog) {
   const guide = markdown(readme);
   const componentReference =
     name === "ui" && uiReference
-      ? `
    All ${uiReference.count} UI components and props
    This reference is generated from the exact installed .wrn sources. Required props have no default; optional props show their default value.
    ${[
-          ...new Set(uiReference.components.map((component) => component.category)),
-        ]
-          .sort()
-          .map(
-            (componentCategory) =>
-              `
    ${escape(componentCategory[0]!.toUpperCase() + componentCategory.slice(1))}
    ${uiReference.components
-                .filter((component) => component.category === componentCategory)
-                .map(
-                  (component) =>
-                    ``,
-                )
-                .join("")}
    ComponentPropsSlotsEvents
    ${escape(component.name)}
    data-component="${escape(component.mount)}"
    ${escape(component.purpose)}    		${component.props.length ? component.props.map((prop) => `${escape(prop.name)}: ${escape(prop.type)}${prop.required ? " (required)" : ` = ${escape(prop.default ?? "")}`}`).join("
    ") : "None"}    		${component.slots.length ? component.slots.map((slot) => `${escape(slot)}`).join("
    ") : "None"}    		${component.events.length ? component.events.map((event) => `${escape(event)}`).join("
    ") : "None"}
    `,
-          )
-          .join("")}
    `
+      ? `
    Explore the component library
    The component reference now has a dedicated catalog with searchable cards and one complete page per component.
    Browse all ${uiReference.count} components →
    `
       : "";
   const toc = [
     { id: "guide", title: "Guide", level: 2 },
     ...guide.headings,
     { id: "api", title: "Complete API", level: 2 },
     { id: "examples", title: "Examples", level: 2 },
-    ...(componentReference ? [{ id: "components", title: "All UI components", level: 2 }] : []),
   ]
     .map(
       (heading) =>
         `${escape(heading.title)}`,
     )
     .join("");
-  const content = `
    
-      
-      
    ${category} · Preview
    @wrnexus/${name}
    ${summary}
    Private registry access required
    This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:
    bun add @wrnexus/${name}@${frameworkVersion}
    Request preview access. Never put registry tokens in source control.
    ${guide.html}
    Complete TypeScript API
    This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.
    ${escape(types)}
    Examples
    Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.
    ${examplesFrom(readme, name)}
    ${componentReference}
    
+  const content = `
    
+      
    ${category} · Package reference
    @wrnexus/${name}
    ${summary}
    v${frameworkVersion}Private registry${category}
    Install the package
    After WorkRoot approves private registry access, install the release-aligned package:
    bun add @wrnexus/${name}@${frameworkVersion}
    Request preview access. Never put registry tokens in source control.
    ${guide.html}
    Complete TypeScript API
    Generated from the exact installed package declarations.
    ${escape(types)}
    Examples
    Copy-ready examples from the installed package documentation.
    ${examplesFrom(readme, name)}
    ${componentReference}
    
       
     
    `;
   writeFileSync(join(packagePages, `${name}.wrn`), shell(`@wrnexus/${name}`, summary, content));
 }
 
+if (!uiReference) throw new Error("Install @wrnexus/ui before generating component documentation");
+
+const componentSlug = (name: string) =>
+  (name === "file-upload" ? "file-upload-primitive" : name)
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
+const componentCategories = [
+  ...new Set(uiReference.components.map((item) => item.category)),
+].sort();
+const componentCards = uiReference.components
+  .map(
+    (item) =>
+      `${escape(item.category)}
    ${escape(item.name)}
    ${escape(item.purpose)}
    ${item.props.length} props${item.slots.length} slots${item.events.length} events
    View component →    `,
+  )
+  .join("\n");
+const componentFilters = ["All", ...componentCategories]
+  .map(
+    (category) =>
+      ``,
+  )
+  .join("");
+
+writeFileSync(
+  join(pages, "components.wrn"),
+  shell(
+    "Components",
+    `Browse all ${uiReference.count} themeable WRNexusJS UI components, props, slots, events, and examples.`,
+    `
    @wrnexus/ui · ${uiReference.count} components
    Component reference
    Production-ready, server-rendered components documented directly from the installed .wrn sources.
    ${componentFilters}
    Showing {category} components
    ${componentCards}
    `,
+    '  state query = ""\n  state category = "All"\n',
+  ),
+);
+
+const currentComponentFiles = new Set();
+for (const item of uiReference.components) {
+  const slug = componentSlug(item.name);
+  currentComponentFiles.add(`${slug}.wrn`);
+  const sourcePath = join(root, "node_modules", "@wrnexus", "ui", item.source);
+  const source = existsSync(sourcePath) ? readFileSync(sourcePath, "utf8") : "";
+  const exampleAttributes = item.props
+    .filter((prop) => prop.required || !["class", "className"].includes(prop.name))
+    .slice(0, 5)
+    .map((prop) => {
+      const value = prop.required
+        ? prop.type === "boolean"
+          ? "true"
+          : prop.type === "number"
+            ? "1"
+            : prop.type.includes("[]")
+              ? "[]"
+              : prop.name
+        : (prop.default ?? "").replace(/^"|"$/g, "");
+      return `${prop.name}="${value || prop.name}"`;
+    })
+    .join(" ");
+  const example = `<${item.mount}${exampleAttributes ? ` ${exampleAttributes}` : ""} />`;
+  const propsRows = item.props.length
+    ? item.props
+        .map(
+          (prop) =>
+            `${escape(prop.name)}${escape(prop.type)}${prop.required ? 'Required' : "Optional"}${prop.default === null ? "—" : escape(prop.default)}`,
+        )
+        .join("")
+    : 'This component has no props.';
+  const content = `
    ${escape(item.category)} component
    ${escape(item.name)}
    ${escape(item.purpose)}
    @wrnexus/ui ${frameworkVersion}${item.props.length} props${item.slots.length} slots${item.events.length} events
    Usage
    Components are auto-discovered. Use the component directly in any .wrn view:
    ${escape(example)}
    Legacy mount name: data-component="${escape(item.mount)}".
    Props and attributes
    ${propsRows}
    PropTypeRequirementDefault
    Slots
    ${item.slots.length ? `
      ${item.slots.map((slot) => `
    • ${escape(slot)}
      • `).join("")}
    ` : "
    This component does not declare a slot.
    "}
    Events
    ${item.events.length ? `
      ${item.events.map((event) => `
    • ${escape(event)}
      • `).join("")}
    ` : "
    This component does not declare a custom event.
    "}
    Source contract
    Installed source: ${escape(item.source)}
    ${escape(source)}
    `;
+  writeFileSync(
+    join(componentPages, `${slug}.wrn`),
+    shell(`${item.name} component`, item.purpose, content),
+  );
+}
+for (const file of readdirSync(componentPages)) {
+  if (file.endsWith(".wrn") && !currentComponentFiles.has(file)) {
+    throw new Error(`Stale generated component page: ${file}`);
+  }
+}
+
 writeFileSync(
   join(pages, "index.wrn"),
   shell(
diff --git a/scripts/generate-portal.ts b/scripts/generate-portal.ts
index a62659d8..bc843d84 100644
--- a/scripts/generate-portal.ts
+++ b/scripts/generate-portal.ts
@@ -29,6 +29,12 @@ const uiReference = existsSync(uiReferencePath)
       }>;
     })
   : undefined;
+const componentSlug = (name: string) =>
+  (name === "file-upload" ? "file-upload-primitive" : name)
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
 const uiReferenceText = uiReference
   ? uiReference.components
       .map(
@@ -49,6 +55,7 @@ const code = (s: string) =>
 const navigation = [
   ["/getting-started", "Get started"],
   ["/packages", "Packages"],
+  ["/components", "Components"],
   ["/language", "Language"],
   ["/architecture", "Architecture"],
 ] as const;
@@ -119,8 +126,8 @@ function marketingShell(description: string, body: string) {
   view {
     
     
    
-      
    W WRNexusJS
    Private preview · v${version}
    
-      
    Menu
    
+      
    W WRNexusJS
    Private preview · v${version}
    
+      
    Menu
    
       
    ${marketingBody}
    
       
       
@@ -464,6 +471,7 @@ const routes = [
   "/architecture",
   "/language",
   "/packages",
+  "/components",
   ...Object.keys(guides).map((x) => `/guides/${x}`),
   "/examples",
   "/showcase",
@@ -477,7 +485,13 @@ const routes = [
   "/search",
   "/404",
 ].filter(Boolean);
-const urls = [...new Set([...routes, ...packageNames.map((x) => `/packages/${x}`)])];
+const urls = [
+  ...new Set([
+    ...routes,
+    ...packageNames.map((x) => `/packages/${x}`),
+    ...(uiReference?.components.map((item) => `/components/${componentSlug(item.name)}`) ?? []),
+  ]),
+];
 writeFileSync(
   join(pub, "robots.txt"),
   `User-agent: *\nAllow: /\nSitemap: https://wrnexusjs.dev/sitemap.xml\n`,