feat: deployable design studio and updated component showcase

This commit is contained in:
Clintchiz committed 2026-10-19 13:18:06 +05:30
1 parent 3dddcaac1a
commit 3987ddbcfe
113 files changed
+4544 -1039

No files matched your search

+3 -3
View File
@@ -112,7 +112,7 @@ page ToggleCountDetail {
<div class="demo-workbench">
<div id="toggle-count-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 1 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
</div>
<section class="demo-code" aria-label="Production default usage">
@@ -155,7 +155,7 @@ page ToggleCountDetail {
<div class="demo-workbench">
<div id="toggle-count-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ToggleCount size="sm" variant="secondary" class="showcase-instance showcase-instance--2" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 2 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="center" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
</div>
<section class="demo-code" aria-label="Compact application usage">
@@ -200,7 +200,7 @@ page ToggleCountDetail {
<div class="demo-workbench">
<div id="toggle-count-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ToggleCount size="lg" variant="success" class="showcase-instance showcase-instance--3" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 3 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="end" fullWidth="true" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">