@birdycom/omniaui-blocks 0.0.0-stage → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +9 -2
- package/blocks/about-timeline.html +23 -0
- package/blocks/app-header.html +32 -0
- package/blocks/app-shell.html +84 -0
- package/blocks/auth-split.html +45 -0
- package/blocks/auth.html +21 -0
- package/blocks/contact-grid.html +38 -0
- package/blocks/cta.html +8 -0
- package/blocks/data-table.html +111 -0
- package/blocks/faq.html +33 -0
- package/blocks/features.html +18 -0
- package/blocks/footer.html +41 -0
- package/blocks/forgot-password.html +34 -0
- package/blocks/form-page.html +28 -0
- package/blocks/hero-code.html +27 -0
- package/blocks/hero-orbit.html +38 -0
- package/blocks/hero-split.html +12 -0
- package/blocks/hero.html +10 -0
- package/blocks/login-01.html +41 -0
- package/blocks/login-02.html +55 -0
- package/blocks/login-03.html +47 -0
- package/blocks/module-header.html +24 -0
- package/blocks/otp-01.html +36 -0
- package/blocks/otp-02.html +46 -0
- package/blocks/page-hero.html +10 -0
- package/blocks/portfolio-grid.html +31 -0
- package/blocks/pricing.html +42 -0
- package/blocks/process.html +19 -0
- package/blocks/product-grid.html +37 -0
- package/blocks/profile-header.html +27 -0
- package/blocks/reset-password.html +45 -0
- package/blocks/showcase.html +27 -0
- package/blocks/sidebar-01.html +56 -0
- package/blocks/sidebar-02.html +55 -0
- package/blocks/sidebar-03.html +53 -0
- package/blocks/sidebar-04.html +56 -0
- package/blocks/sidebar-05.html +68 -0
- package/blocks/signup-01.html +53 -0
- package/blocks/signup-02.html +56 -0
- package/blocks/site-footer.html +39 -0
- package/blocks/site-header.html +14 -0
- package/blocks/spotlight.html +22 -0
- package/blocks/stats-counter.html +15 -0
- package/blocks/stats.html +19 -0
- package/blocks/team-list.html +30 -0
- package/blocks/two-factor.html +33 -0
- package/blocks/wizard-dialog.html +36 -0
- package/dist/blocks.css +1431 -0
- package/dist/blocks.min.css +1 -0
- package/dist/parts/.gitkeep +0 -0
- package/dist/parts/site-about-timeline.css +61 -0
- package/dist/parts/site-contact-grid.css +58 -0
- package/dist/parts/site-faq.css +52 -0
- package/dist/parts/site-hero-orbit.css +62 -0
- package/dist/parts/site-portfolio-grid.css +23 -0
- package/dist/parts/site-profile-header.css +77 -0
- package/manifest.json +418 -0
- package/package.json +53 -4
- package/pro.json +140 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<!-- OmniaUI block: two-factor - Authenticator setup: QR, copyable key, OTP code and recovery codes. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
|
|
2
|
+
Class API (modifiers are extra classes / attributes on the same element):
|
|
3
|
+
.oc-block-twofactor: Single-column wrapper
|
|
4
|
+
.oc-block-twofactor-step: One step (heading + content)
|
|
5
|
+
.oc-block-twofactor-center: Centered column for the QR code
|
|
6
|
+
.oc-block-twofactor-qr: QR placeholder box (replace with your img/svg)
|
|
7
|
+
Slots: QR code, setup key, code input, recovery codes
|
|
8
|
+
-->
|
|
9
|
+
<div class="oc-block-twofactor">
|
|
10
|
+
<section class="oc-block-twofactor-step">
|
|
11
|
+
<div class="oc-heading oc-heading--sm"><h2 class="oc-heading-title">1. Scan the QR code</h2><p class="oc-heading-description">Use an authenticator app, or enter the key manually.</p></div>
|
|
12
|
+
<div class="oc-block-twofactor-center">
|
|
13
|
+
<div class="oc-block-twofactor-qr" role="img" aria-label="QR code">QR code</div>
|
|
14
|
+
<div class="oc-copy-field"><input class="oc-copy-field-value" type="text" readonly value="JBSWY3DPEHPK3PXP" aria-label="Setup key"><button class="oc-copy-field-button" type="button">Copy</button></div>
|
|
15
|
+
</div>
|
|
16
|
+
</section>
|
|
17
|
+
<section class="oc-block-twofactor-step">
|
|
18
|
+
<div class="oc-heading oc-heading--sm"><h2 class="oc-heading-title">2. Confirm with a code</h2></div>
|
|
19
|
+
<div class="oc-field">
|
|
20
|
+
<label class="oc-field-label" for="oc-twofactor-code">Authentication code</label>
|
|
21
|
+
<input class="oc-otp" id="oc-twofactor-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" style="--oc-otp-length: 6">
|
|
22
|
+
</div>
|
|
23
|
+
<button class="oc-btn" type="submit">Enable two-factor</button>
|
|
24
|
+
</section>
|
|
25
|
+
<section class="oc-block-twofactor-step">
|
|
26
|
+
<div class="oc-recovery-codes">
|
|
27
|
+
<h3 class="oc-recovery-codes-title">Recovery codes</h3>
|
|
28
|
+
<p class="oc-recovery-codes-warning">Store these codes somewhere safe. Each code works once.</p>
|
|
29
|
+
<ul class="oc-recovery-codes-list"><li>4F8K-92QA</li><li>M3ZP-71LD</li><li>7TQX-0BNE</li><li>C8WV-5YHR</li></ul>
|
|
30
|
+
<div class="oc-recovery-codes-actions"><button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Copy all</button><button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Download .txt</button></div>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
</div>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!-- OmniaUI block: wizard-dialog - Modal wizard: stepper rail on the left, step content and navigation footer. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
|
|
2
|
+
Class API (modifiers are extra classes / attributes on the same element):
|
|
3
|
+
dialog.oc-modal > .oc-modal-content.oc-modal-content--xl: Dialog shell
|
|
4
|
+
.oc-block-wizard: Rail + main (row from 48rem, column below)
|
|
5
|
+
.oc-block-wizard-rail: Contains an ol.oc-stepper
|
|
6
|
+
.oc-block-wizard-main: Right column
|
|
7
|
+
.oc-block-wizard-step: One step's content (hidden when inactive)
|
|
8
|
+
.oc-modal-footer: Back / Next buttons
|
|
9
|
+
Slots: stepper rail, step content (one per step), footer (back, next/finish)
|
|
10
|
+
-->
|
|
11
|
+
<button class="oc-btn" type="button" command="show-modal" commandfor="oc-wizard-demo">Open setup wizard</button>
|
|
12
|
+
|
|
13
|
+
<dialog class="oc-modal" id="oc-wizard-demo" closedby="closerequest" aria-labelledby="oc-wizard-title">
|
|
14
|
+
<div class="oc-modal-content oc-modal-content--xl">
|
|
15
|
+
<div class="oc-block-wizard">
|
|
16
|
+
<div class="oc-block-wizard-rail">
|
|
17
|
+
<ol class="oc-stepper" aria-label="Setup steps">
|
|
18
|
+
<li><button class="oc-stepper-item oc-stepper-item--done" type="button"><span class="oc-stepper-label">Company</span></button></li>
|
|
19
|
+
<li><button class="oc-stepper-item oc-stepper-item--active" type="button" aria-current="step"><span class="oc-stepper-label">Invoicing</span></button></li>
|
|
20
|
+
<li><button class="oc-stepper-item" type="button" disabled><span class="oc-stepper-label">Team</span></button></li>
|
|
21
|
+
</ol>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="oc-block-wizard-main">
|
|
24
|
+
<div class="oc-modal-header"><h2 class="oc-modal-title" id="oc-wizard-title">Invoicing</h2><p class="oc-modal-description">Step 2 of 3</p></div>
|
|
25
|
+
<div class="oc-block-wizard-step">
|
|
26
|
+
<div class="oc-field"><label class="oc-field-label" for="oc-wizard-prefix">Invoice prefix</label><input class="oc-input" id="oc-wizard-prefix" value="INV-"></div>
|
|
27
|
+
<div class="oc-field"><label class="oc-field-label" for="oc-wizard-next">Next number</label><input class="oc-input" id="oc-wizard-next" value="1001"></div>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="oc-modal-footer">
|
|
30
|
+
<button class="oc-btn oc-btn--outline" type="button">Back</button>
|
|
31
|
+
<button class="oc-btn" type="button">Next</button>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</dialog>
|