@sekiui/cli 0.0.71 → 0.0.78
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAiBtD,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,wBAAsB,MAAM,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,EAAE,GAAG,GAAE,MAAsB,iBAwCxG"}
|
package/dist/commands/add.js
CHANGED
|
@@ -43,6 +43,22 @@ const path = __importStar(require("path"));
|
|
|
43
43
|
const picocolors_1 = __importDefault(require("picocolors"));
|
|
44
44
|
const detect_1 = require("../frameworks/detect");
|
|
45
45
|
const registry_1 = require("../components/registry");
|
|
46
|
+
async function promptFramework() {
|
|
47
|
+
const fw = await p.select({
|
|
48
|
+
message: 'Select your framework:',
|
|
49
|
+
options: [
|
|
50
|
+
{ value: 'react', label: 'React' },
|
|
51
|
+
{ value: 'vue', label: 'Vue' },
|
|
52
|
+
{ value: 'angular', label: 'Angular' },
|
|
53
|
+
{ value: 'vanilla', label: 'Vanilla HTML' },
|
|
54
|
+
],
|
|
55
|
+
});
|
|
56
|
+
if (p.isCancel(fw)) {
|
|
57
|
+
p.cancel('Cancelled.');
|
|
58
|
+
process.exit(0);
|
|
59
|
+
}
|
|
60
|
+
return fw;
|
|
61
|
+
}
|
|
46
62
|
async function runAdd(componentName, options = {}, cwd = process.cwd()) {
|
|
47
63
|
const component = (0, registry_1.getComponent)(componentName);
|
|
48
64
|
if (!component) {
|
|
@@ -51,27 +67,25 @@ async function runAdd(componentName, options = {}, cwd = process.cwd()) {
|
|
|
51
67
|
process.exit(1);
|
|
52
68
|
}
|
|
53
69
|
// Resolve framework
|
|
54
|
-
let framework
|
|
55
|
-
if (
|
|
70
|
+
let framework;
|
|
71
|
+
if (options.framework) {
|
|
72
|
+
framework = options.framework;
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
56
75
|
const detected = await (0, detect_1.detectFramework)(cwd);
|
|
57
76
|
if (detected) {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
const fw = await p.select({
|
|
62
|
-
message: 'Select your framework:',
|
|
63
|
-
options: [
|
|
64
|
-
{ value: 'react', label: 'React' },
|
|
65
|
-
{ value: 'vue', label: 'Vue' },
|
|
66
|
-
{ value: 'angular', label: 'Angular' },
|
|
67
|
-
{ value: 'vanilla', label: 'Vanilla HTML' },
|
|
68
|
-
],
|
|
77
|
+
const confirm = await p.confirm({
|
|
78
|
+
message: `Detected ${picocolors_1.default.cyan((0, detect_1.frameworkLabel)(detected))} — use this framework?`,
|
|
79
|
+
initialValue: true,
|
|
69
80
|
});
|
|
70
|
-
if (p.isCancel(
|
|
81
|
+
if (p.isCancel(confirm)) {
|
|
71
82
|
p.cancel('Cancelled.');
|
|
72
83
|
process.exit(0);
|
|
73
84
|
}
|
|
74
|
-
framework =
|
|
85
|
+
framework = confirm ? detected : await promptFramework();
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
framework = await promptFramework();
|
|
75
89
|
}
|
|
76
90
|
}
|
|
77
91
|
const output = buildOutput(component.name, component.tag, component.cssTokens, component.usageByFramework[framework], framework);
|
package/dist/commands/add.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"add.js","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"add.js","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,wBAwCC;AAnED,kDAAoC;AACpC,6CAA+B;AAC/B,2CAA6B;AAC7B,4DAA4B;AAC5B,iDAAuE;AAEvE,qDAAsE;AAEtE,KAAK,UAAU,eAAe;IAC5B,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,MAAM,CAAY;QACnC,OAAO,EAAE,wBAAwB;QACjC,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE;SAC5C;KACF,CAAC,CAAC;IACH,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;QAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC;IAChE,OAAO,EAAe,CAAC;AACzB,CAAC;AAOM,KAAK,UAAU,MAAM,CAAC,aAAqB,EAAE,UAAsB,EAAE,EAAE,MAAc,OAAO,CAAC,GAAG,EAAE;IACvG,MAAM,SAAS,GAAG,IAAA,uBAAY,EAAC,aAAa,CAAC,CAAC;IAE9C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,SAAS,GAAG,IAAA,yBAAc,GAAE,CAAC;QACnC,CAAC,CAAC,GAAG,CAAC,KAAK,CACT,sBAAsB,oBAAE,CAAC,GAAG,CAAC,aAAa,CAAC,gCAAgC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAClG,CAAC;QACF,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IAED,oBAAoB;IACpB,IAAI,SAAoB,CAAC;IAEzB,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC;QACtB,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,MAAM,QAAQ,GAAG,MAAM,IAAA,wBAAe,EAAC,GAAG,CAAC,CAAC;QAC5C,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,OAAO,CAAC;gBAC9B,OAAO,EAAE,YAAY,oBAAE,CAAC,IAAI,CAAC,IAAA,uBAAc,EAAC,QAAQ,CAAC,CAAC,wBAAwB;gBAC9E,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;YACH,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;gBAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAAC,CAAC;YACrE,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,eAAe,EAAE,CAAC;QAC3D,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,MAAM,eAAe,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;IAED,MAAM,MAAM,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,EAAE,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjI,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;QAClD,MAAM,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7B,MAAM,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACpC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,oBAAoB,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACtD,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAClB,IAAY,EACZ,GAAW,EACX,SAAmB,EACnB,KAAa,EACb,SAAoB;IAEpB,MAAM,EAAE,GAAG,IAAA,uBAAc,EAAC,SAAS,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,GAAG,GAAG,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IAEjG,OAAO;QACL,EAAE;QACF,oBAAE,CAAC,IAAI,CAAC,oBAAE,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC,CAAC,GAAG,oBAAE,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC;QAC7D,oBAAE,CAAC,GAAG,CAAC,gBAAgB,EAAE,EAAE,CAAC;QAC5B,EAAE;QACF,oBAAE,CAAC,IAAI,CAAC,WAAW,CAAC;QACpB,oBAAE,CAAC,GAAG,CAAC,SAAS,CAAC;QACjB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtB,EAAE;QACF,oBAAE,CAAC,IAAI,CAAC,gCAAgC,CAAC;QACzC,oBAAE,CAAC,GAAG,CAAC,SAAS,CAAC;QACjB,WAAW;QACX,EAAE;QACF,oBAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAC3B,oBAAE,CAAC,GAAG,CAAC,SAAS,CAAC;QACjB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QACzC,EAAE;KACH,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/components/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CAC7C;AASD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/components/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CAC7C;AASD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CA64C7D,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAErE;AAED,wBAAgB,cAAc,IAAI,MAAM,EAAE,CAEzC"}
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.COMPONENT_REGISTRY = void 0;
|
|
4
4
|
exports.getComponent = getComponent;
|
|
5
5
|
exports.listComponents = listComponents;
|
|
6
|
-
const IMPORT_SNIPPET = `// Already included if you ran: npx sekiui init
|
|
6
|
+
const IMPORT_SNIPPET = `// Already included if you ran: npx @sekiui/cli init
|
|
7
7
|
// To load manually:
|
|
8
8
|
import { defineCustomElements } from '@sekiui/elements/loader';
|
|
9
9
|
defineCustomElements();`;
|
|
@@ -583,6 +583,767 @@ exports.COMPONENT_REGISTRY = {
|
|
|
583
583
|
</seki-tabs>`,
|
|
584
584
|
},
|
|
585
585
|
},
|
|
586
|
+
accordion: {
|
|
587
|
+
name: 'Accordion',
|
|
588
|
+
tag: 'seki-accordion',
|
|
589
|
+
description: 'Vertically stacked collapsible sections.',
|
|
590
|
+
cssTokens: [],
|
|
591
|
+
usageByFramework: {
|
|
592
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-accordion>\n <seki-accordion-item value="item-1">\n <seki-accordion-trigger>Is it accessible?</seki-accordion-trigger>\n <seki-accordion-content>Yes. It follows WAI-ARIA patterns.</seki-accordion-content>\n </seki-accordion-item>\n <seki-accordion-item value="item-2">\n <seki-accordion-trigger>Is it styled?</seki-accordion-trigger>\n <seki-accordion-content>Yes. Comes with default styles you can override.</seki-accordion-content>\n </seki-accordion-item>\n</seki-accordion>`,
|
|
593
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-accordion>\n <seki-accordion-item value="item-1">\n <seki-accordion-trigger>Is it accessible?</seki-accordion-trigger>\n <seki-accordion-content>Yes. It follows WAI-ARIA patterns.</seki-accordion-content>\n </seki-accordion-item>\n</seki-accordion>`,
|
|
594
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-accordion>\n <seki-accordion-item value="item-1">\n <seki-accordion-trigger>Is it accessible?</seki-accordion-trigger>\n <seki-accordion-content>Yes. It follows WAI-ARIA patterns.</seki-accordion-content>\n </seki-accordion-item>\n</seki-accordion>`,
|
|
595
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-accordion>\n <seki-accordion-item value="item-1">\n <seki-accordion-trigger>Is it accessible?</seki-accordion-trigger>\n <seki-accordion-content>Yes. It follows WAI-ARIA patterns.</seki-accordion-content>\n </seki-accordion-item>\n</seki-accordion>`,
|
|
596
|
+
},
|
|
597
|
+
},
|
|
598
|
+
'alert-dialog': {
|
|
599
|
+
name: 'Alert Dialog',
|
|
600
|
+
tag: 'seki-alert-dialog',
|
|
601
|
+
description: 'Modal dialog requiring user acknowledgement before proceeding.',
|
|
602
|
+
cssTokens: [],
|
|
603
|
+
usageByFramework: {
|
|
604
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-alert-dialog open={isOpen} onSekiClose={() => setIsOpen(false)}>\n <div slot="title">Are you absolutely sure?</div>\n <div slot="description">This action cannot be undone.</div>\n <div slot="footer">\n <seki-button variant="outline" onClick={() => setIsOpen(false)}>Cancel</seki-button>\n <seki-button variant="destructive">Continue</seki-button>\n </div>\n</seki-alert-dialog>`,
|
|
605
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-alert-dialog :open="isOpen" @sekiClose="isOpen = false">\n <div slot="title">Are you absolutely sure?</div>\n <div slot="description">This action cannot be undone.</div>\n <div slot="footer">\n <seki-button variant="outline" @click="isOpen = false">Cancel</seki-button>\n <seki-button variant="destructive">Continue</seki-button>\n </div>\n</seki-alert-dialog>`,
|
|
606
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-alert-dialog [open]="isOpen" (sekiClose)="isOpen = false">\n <div slot="title">Are you absolutely sure?</div>\n <div slot="description">This action cannot be undone.</div>\n <div slot="footer">\n <seki-button variant="outline" (click)="isOpen = false">Cancel</seki-button>\n <seki-button variant="destructive">Continue</seki-button>\n </div>\n</seki-alert-dialog>`,
|
|
607
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-alert-dialog id="confirm-dialog">\n <div slot="title">Are you absolutely sure?</div>\n <div slot="description">This action cannot be undone.</div>\n <div slot="footer">\n <seki-button variant="outline" onclick="document.getElementById('confirm-dialog').open = false">Cancel</seki-button>\n <seki-button variant="destructive">Continue</seki-button>\n </div>\n</seki-alert-dialog>`,
|
|
608
|
+
},
|
|
609
|
+
},
|
|
610
|
+
'aspect-ratio': {
|
|
611
|
+
name: 'Aspect Ratio',
|
|
612
|
+
tag: 'seki-aspect-ratio',
|
|
613
|
+
description: 'Maintains a consistent width-to-height ratio for content.',
|
|
614
|
+
cssTokens: [],
|
|
615
|
+
usageByFramework: {
|
|
616
|
+
react: `${IMPORT_SNIPPET}\n\n// 16:9 video\n<seki-aspect-ratio ratio={16 / 9}>\n <img src="photo.jpg" alt="Photo" style={{ objectFit: 'cover', width: '100%', height: '100%' }} />\n</seki-aspect-ratio>\n\n// 1:1 square\n<seki-aspect-ratio ratio={1}>\n <img src="avatar.jpg" alt="Avatar" />\n</seki-aspect-ratio>`,
|
|
617
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-aspect-ratio :ratio="16/9">\n <img src="photo.jpg" alt="Photo" style="object-fit: cover; width: 100%; height: 100%;" />\n</seki-aspect-ratio>`,
|
|
618
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-aspect-ratio [ratio]="16/9">\n <img src="photo.jpg" alt="Photo" style="object-fit: cover; width: 100%; height: 100%;" />\n</seki-aspect-ratio>`,
|
|
619
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-aspect-ratio ratio="1.777">\n <img src="photo.jpg" alt="Photo" style="object-fit: cover; width: 100%; height: 100%;" />\n</seki-aspect-ratio>`,
|
|
620
|
+
},
|
|
621
|
+
},
|
|
622
|
+
avatar: {
|
|
623
|
+
name: 'Avatar',
|
|
624
|
+
tag: 'seki-avatar',
|
|
625
|
+
description: 'User profile image with fallback initials.',
|
|
626
|
+
cssTokens: [
|
|
627
|
+
'--seki-avatar-size-xs',
|
|
628
|
+
'--seki-avatar-size-sm',
|
|
629
|
+
'--seki-avatar-size-md',
|
|
630
|
+
'--seki-avatar-size-lg',
|
|
631
|
+
'--seki-avatar-size-xl',
|
|
632
|
+
'--seki-avatar-radius-circle',
|
|
633
|
+
'--seki-avatar-radius-square',
|
|
634
|
+
'--seki-avatar-bg',
|
|
635
|
+
'--seki-avatar-border',
|
|
636
|
+
],
|
|
637
|
+
usageByFramework: {
|
|
638
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-avatar src="https://example.com/photo.jpg" alt="Jane Doe" fallback="JD" />\n\n// Sizes: xs | sm | md | lg | xl\n<seki-avatar size="lg" src="photo.jpg" alt="User" fallback="U" />\n\n// Shape\n<seki-avatar shape="square" src="photo.jpg" alt="User" fallback="U" />`,
|
|
639
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-avatar src="https://example.com/photo.jpg" alt="Jane Doe" fallback="JD" />\n<seki-avatar size="lg" src="photo.jpg" alt="User" fallback="U" />`,
|
|
640
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-avatar src="https://example.com/photo.jpg" alt="Jane Doe" fallback="JD"></seki-avatar>\n<seki-avatar size="lg" src="photo.jpg" alt="User" fallback="U"></seki-avatar>`,
|
|
641
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-avatar src="https://example.com/photo.jpg" alt="Jane Doe" fallback="JD"></seki-avatar>\n<seki-avatar size="lg" shape="square" src="photo.jpg" alt="User" fallback="U"></seki-avatar>`,
|
|
642
|
+
},
|
|
643
|
+
},
|
|
644
|
+
breadcrumb: {
|
|
645
|
+
name: 'Breadcrumb',
|
|
646
|
+
tag: 'seki-breadcrumb',
|
|
647
|
+
description: 'Navigation trail showing current page hierarchy.',
|
|
648
|
+
cssTokens: [
|
|
649
|
+
'--seki-breadcrumb-text-color',
|
|
650
|
+
'--seki-breadcrumb-link-color',
|
|
651
|
+
'--seki-breadcrumb-link-hover',
|
|
652
|
+
'--seki-breadcrumb-separator-color',
|
|
653
|
+
'--seki-breadcrumb-font-size',
|
|
654
|
+
'--seki-breadcrumb-font-family',
|
|
655
|
+
'--seki-breadcrumb-gap',
|
|
656
|
+
],
|
|
657
|
+
usageByFramework: {
|
|
658
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-breadcrumb>\n <seki-breadcrumb-item href="/">Home</seki-breadcrumb-item>\n <seki-breadcrumb-item href="/docs">Docs</seki-breadcrumb-item>\n <seki-breadcrumb-item current>Components</seki-breadcrumb-item>\n</seki-breadcrumb>`,
|
|
659
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-breadcrumb>\n <seki-breadcrumb-item href="/">Home</seki-breadcrumb-item>\n <seki-breadcrumb-item href="/docs">Docs</seki-breadcrumb-item>\n <seki-breadcrumb-item current>Components</seki-breadcrumb-item>\n</seki-breadcrumb>`,
|
|
660
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-breadcrumb>\n <seki-breadcrumb-item href="/">Home</seki-breadcrumb-item>\n <seki-breadcrumb-item href="/docs">Docs</seki-breadcrumb-item>\n <seki-breadcrumb-item current>Components</seki-breadcrumb-item>\n</seki-breadcrumb>`,
|
|
661
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-breadcrumb>\n <seki-breadcrumb-item href="/">Home</seki-breadcrumb-item>\n <seki-breadcrumb-item href="/docs">Docs</seki-breadcrumb-item>\n <seki-breadcrumb-item current>Components</seki-breadcrumb-item>\n</seki-breadcrumb>`,
|
|
662
|
+
},
|
|
663
|
+
},
|
|
664
|
+
'button-group': {
|
|
665
|
+
name: 'Button Group',
|
|
666
|
+
tag: 'seki-button-group',
|
|
667
|
+
description: 'Groups related buttons with merged borders.',
|
|
668
|
+
cssTokens: [],
|
|
669
|
+
usageByFramework: {
|
|
670
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-button-group>\n <seki-button variant="outline">Left</seki-button>\n <seki-button variant="outline">Middle</seki-button>\n <seki-button variant="outline">Right</seki-button>\n</seki-button-group>`,
|
|
671
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-button-group>\n <seki-button variant="outline">Left</seki-button>\n <seki-button variant="outline">Middle</seki-button>\n <seki-button variant="outline">Right</seki-button>\n</seki-button-group>`,
|
|
672
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-button-group>\n <seki-button variant="outline">Left</seki-button>\n <seki-button variant="outline">Middle</seki-button>\n <seki-button variant="outline">Right</seki-button>\n</seki-button-group>`,
|
|
673
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-button-group>\n <seki-button variant="outline">Left</seki-button>\n <seki-button variant="outline">Middle</seki-button>\n <seki-button variant="outline">Right</seki-button>\n</seki-button-group>`,
|
|
674
|
+
},
|
|
675
|
+
},
|
|
676
|
+
calendar: {
|
|
677
|
+
name: 'Calendar',
|
|
678
|
+
tag: 'seki-calendar',
|
|
679
|
+
description: 'Date picker calendar with single and range selection.',
|
|
680
|
+
cssTokens: [
|
|
681
|
+
'--seki-calendar-bg',
|
|
682
|
+
'--seki-calendar-text',
|
|
683
|
+
'--seki-calendar-muted',
|
|
684
|
+
'--seki-calendar-border',
|
|
685
|
+
'--seki-calendar-accent',
|
|
686
|
+
'--seki-calendar-accent-foreground',
|
|
687
|
+
'--seki-calendar-primary',
|
|
688
|
+
'--seki-calendar-primary-foreground',
|
|
689
|
+
'--seki-calendar-cell-size',
|
|
690
|
+
'--seki-calendar-nav-button-size',
|
|
691
|
+
'--seki-calendar-radius',
|
|
692
|
+
'--seki-calendar-font-size',
|
|
693
|
+
'--seki-calendar-font-family',
|
|
694
|
+
],
|
|
695
|
+
usageByFramework: {
|
|
696
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-calendar\n value={date}\n onSekiChange={(e) => setDate(e.detail)}\n/>\n\n// Range selection\n<seki-calendar\n mode="range"\n value={range}\n onSekiChange={(e) => setRange(e.detail)}\n/>`,
|
|
697
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-calendar\n :value="date"\n @sekiChange="date = $event.detail"\n/>`,
|
|
698
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-calendar\n [value]="date"\n (sekiChange)="date = $event.detail"\n></seki-calendar>`,
|
|
699
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-calendar id="my-cal"></seki-calendar>\n\n<script>\n document.getElementById('my-cal').addEventListener('sekiChange', (e) => {\n console.log('Selected date:', e.detail);\n });\n</script>`,
|
|
700
|
+
},
|
|
701
|
+
},
|
|
702
|
+
carousel: {
|
|
703
|
+
name: 'Carousel',
|
|
704
|
+
tag: 'seki-carousel',
|
|
705
|
+
description: 'Horizontal slide carousel with navigation controls.',
|
|
706
|
+
cssTokens: [
|
|
707
|
+
'--seki-carousel-gap',
|
|
708
|
+
'--seki-carousel-arrow-size',
|
|
709
|
+
'--seki-carousel-arrow-bg',
|
|
710
|
+
'--seki-carousel-arrow-bg-hover',
|
|
711
|
+
'--seki-carousel-arrow-color',
|
|
712
|
+
'--seki-carousel-dot-size',
|
|
713
|
+
'--seki-carousel-dot-active-size',
|
|
714
|
+
'--seki-carousel-dot-gap',
|
|
715
|
+
'--seki-carousel-dot-color',
|
|
716
|
+
'--seki-carousel-dot-active-color',
|
|
717
|
+
],
|
|
718
|
+
usageByFramework: {
|
|
719
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-carousel>\n <seki-carousel-content>\n <seki-carousel-item>Slide 1</seki-carousel-item>\n <seki-carousel-item>Slide 2</seki-carousel-item>\n <seki-carousel-item>Slide 3</seki-carousel-item>\n </seki-carousel-content>\n <seki-carousel-previous />\n <seki-carousel-next />\n</seki-carousel>`,
|
|
720
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-carousel>\n <seki-carousel-content>\n <seki-carousel-item>Slide 1</seki-carousel-item>\n <seki-carousel-item>Slide 2</seki-carousel-item>\n </seki-carousel-content>\n <seki-carousel-previous />\n <seki-carousel-next />\n</seki-carousel>`,
|
|
721
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-carousel>\n <seki-carousel-content>\n <seki-carousel-item>Slide 1</seki-carousel-item>\n <seki-carousel-item>Slide 2</seki-carousel-item>\n </seki-carousel-content>\n <seki-carousel-previous></seki-carousel-previous>\n <seki-carousel-next></seki-carousel-next>\n</seki-carousel>`,
|
|
722
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-carousel>\n <seki-carousel-content>\n <seki-carousel-item>Slide 1</seki-carousel-item>\n <seki-carousel-item>Slide 2</seki-carousel-item>\n <seki-carousel-item>Slide 3</seki-carousel-item>\n </seki-carousel-content>\n <seki-carousel-previous></seki-carousel-previous>\n <seki-carousel-next></seki-carousel-next>\n</seki-carousel>`,
|
|
723
|
+
},
|
|
724
|
+
},
|
|
725
|
+
chart: {
|
|
726
|
+
name: 'Chart',
|
|
727
|
+
tag: 'seki-chart',
|
|
728
|
+
description: 'Data visualization with bar, line, and pie chart types.',
|
|
729
|
+
cssTokens: [
|
|
730
|
+
'--seki-chart-color-1',
|
|
731
|
+
'--seki-chart-color-2',
|
|
732
|
+
'--seki-chart-color-3',
|
|
733
|
+
'--seki-chart-color-4',
|
|
734
|
+
'--seki-chart-color-5',
|
|
735
|
+
'--seki-chart-grid-color',
|
|
736
|
+
'--seki-chart-text-color',
|
|
737
|
+
'--seki-chart-background',
|
|
738
|
+
],
|
|
739
|
+
usageByFramework: {
|
|
740
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-chart\n type="bar"\n data={JSON.stringify({\n labels: ['Jan', 'Feb', 'Mar'],\n datasets: [{ label: 'Sales', data: [40, 65, 30] }]\n })}\n/>`,
|
|
741
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-chart\n type="bar"\n :data="JSON.stringify(chartData)"\n/>`,
|
|
742
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-chart\n type="bar"\n [data]="chartDataJson"\n></seki-chart>`,
|
|
743
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-chart id="my-chart" type="bar"></seki-chart>\n\n<script>\n document.getElementById('my-chart').data = JSON.stringify({\n labels: ['Jan', 'Feb', 'Mar'],\n datasets: [{ label: 'Sales', data: [40, 65, 30] }]\n });\n</script>`,
|
|
744
|
+
},
|
|
745
|
+
},
|
|
746
|
+
checkbox: {
|
|
747
|
+
name: 'Checkbox',
|
|
748
|
+
tag: 'seki-checkbox',
|
|
749
|
+
description: 'Accessible checkbox with indeterminate state support.',
|
|
750
|
+
cssTokens: [],
|
|
751
|
+
usageByFramework: {
|
|
752
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-checkbox\n checked={agreed}\n onSekiChange={(e) => setAgreed(e.detail)}\n>\n Accept terms and conditions\n</seki-checkbox>\n\n// Indeterminate\n<seki-checkbox indeterminate>Partial selection</seki-checkbox>\n<seki-checkbox disabled>Disabled</seki-checkbox>`,
|
|
753
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-checkbox\n :checked="agreed"\n @sekiChange="agreed = $event.detail"\n>\n Accept terms and conditions\n</seki-checkbox>`,
|
|
754
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-checkbox\n [checked]="agreed"\n (sekiChange)="agreed = $event.detail"\n>\n Accept terms and conditions\n</seki-checkbox>`,
|
|
755
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-checkbox>Accept terms and conditions</seki-checkbox>\n<seki-checkbox indeterminate>Partial</seki-checkbox>\n<seki-checkbox disabled>Disabled</seki-checkbox>`,
|
|
756
|
+
},
|
|
757
|
+
},
|
|
758
|
+
collapsible: {
|
|
759
|
+
name: 'Collapsible',
|
|
760
|
+
tag: 'seki-collapsible',
|
|
761
|
+
description: 'Toggle show/hide for a section of content.',
|
|
762
|
+
cssTokens: [],
|
|
763
|
+
usageByFramework: {
|
|
764
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-collapsible open={isOpen} onSekiToggle={(e) => setIsOpen(e.detail)}>\n <seki-collapsible-trigger>Toggle section</seki-collapsible-trigger>\n <seki-collapsible-content>\n <p>Collapsible content here.</p>\n </seki-collapsible-content>\n</seki-collapsible>`,
|
|
765
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-collapsible :open="isOpen" @sekiToggle="isOpen = $event.detail">\n <seki-collapsible-trigger>Toggle section</seki-collapsible-trigger>\n <seki-collapsible-content>\n <p>Collapsible content here.</p>\n </seki-collapsible-content>\n</seki-collapsible>`,
|
|
766
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-collapsible [open]="isOpen" (sekiToggle)="isOpen = $event.detail">\n <seki-collapsible-trigger>Toggle section</seki-collapsible-trigger>\n <seki-collapsible-content><p>Collapsible content here.</p></seki-collapsible-content>\n</seki-collapsible>`,
|
|
767
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-collapsible>\n <seki-collapsible-trigger>Toggle section</seki-collapsible-trigger>\n <seki-collapsible-content>\n <p>Collapsible content here.</p>\n </seki-collapsible-content>\n</seki-collapsible>`,
|
|
768
|
+
},
|
|
769
|
+
},
|
|
770
|
+
combobox: {
|
|
771
|
+
name: 'Combobox',
|
|
772
|
+
tag: 'seki-combobox',
|
|
773
|
+
description: 'Searchable select with typeahead filtering.',
|
|
774
|
+
cssTokens: [],
|
|
775
|
+
usageByFramework: {
|
|
776
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-combobox placeholder="Search framework..." onSekiChange={(e) => setValue(e.detail)}>\n <seki-combobox-input placeholder="Search..." />\n <seki-combobox-content>\n <seki-combobox-group>\n <seki-combobox-item value="next">Next.js</seki-combobox-item>\n <seki-combobox-item value="remix">Remix</seki-combobox-item>\n <seki-combobox-item value="astro">Astro</seki-combobox-item>\n </seki-combobox-group>\n <seki-combobox-empty>No results found.</seki-combobox-empty>\n </seki-combobox-content>\n</seki-combobox>`,
|
|
777
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-combobox placeholder="Search framework..." @sekiChange="value = $event.detail">\n <seki-combobox-input placeholder="Search..." />\n <seki-combobox-content>\n <seki-combobox-item value="next">Next.js</seki-combobox-item>\n <seki-combobox-item value="remix">Remix</seki-combobox-item>\n <seki-combobox-empty>No results found.</seki-combobox-empty>\n </seki-combobox-content>\n</seki-combobox>`,
|
|
778
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-combobox placeholder="Search framework..." (sekiChange)="value = $event.detail">\n <seki-combobox-input placeholder="Search..."></seki-combobox-input>\n <seki-combobox-content>\n <seki-combobox-item value="next">Next.js</seki-combobox-item>\n <seki-combobox-empty>No results found.</seki-combobox-empty>\n </seki-combobox-content>\n</seki-combobox>`,
|
|
779
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-combobox placeholder="Search framework...">\n <seki-combobox-input placeholder="Search..."></seki-combobox-input>\n <seki-combobox-content>\n <seki-combobox-item value="next">Next.js</seki-combobox-item>\n <seki-combobox-item value="remix">Remix</seki-combobox-item>\n <seki-combobox-empty>No results found.</seki-combobox-empty>\n </seki-combobox-content>\n</seki-combobox>`,
|
|
780
|
+
},
|
|
781
|
+
},
|
|
782
|
+
command: {
|
|
783
|
+
name: 'Command',
|
|
784
|
+
tag: 'seki-command',
|
|
785
|
+
description: 'Command palette with keyboard-driven search.',
|
|
786
|
+
cssTokens: [],
|
|
787
|
+
usageByFramework: {
|
|
788
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-command>\n <seki-command-input placeholder="Type a command..." />\n <seki-command-list>\n <seki-command-empty>No results found.</seki-command-empty>\n <seki-command-group heading="Suggestions">\n <seki-command-item value="calendar">Calendar</seki-command-item>\n <seki-command-item value="search">Search</seki-command-item>\n <seki-command-item value="settings">Settings</seki-command-item>\n </seki-command-group>\n </seki-command-list>\n</seki-command>`,
|
|
789
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-command>\n <seki-command-input placeholder="Type a command..." />\n <seki-command-list>\n <seki-command-group heading="Suggestions">\n <seki-command-item value="calendar">Calendar</seki-command-item>\n <seki-command-item value="settings">Settings</seki-command-item>\n </seki-command-group>\n </seki-command-list>\n</seki-command>`,
|
|
790
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-command>\n <seki-command-input placeholder="Type a command..."></seki-command-input>\n <seki-command-list>\n <seki-command-group heading="Suggestions">\n <seki-command-item value="calendar">Calendar</seki-command-item>\n </seki-command-group>\n </seki-command-list>\n</seki-command>`,
|
|
791
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-command>\n <seki-command-input placeholder="Type a command..."></seki-command-input>\n <seki-command-list>\n <seki-command-empty>No results found.</seki-command-empty>\n <seki-command-group heading="Suggestions">\n <seki-command-item value="calendar">Calendar</seki-command-item>\n <seki-command-item value="settings">Settings</seki-command-item>\n </seki-command-group>\n </seki-command-list>\n</seki-command>`,
|
|
792
|
+
},
|
|
793
|
+
},
|
|
794
|
+
'context-menu': {
|
|
795
|
+
name: 'Context Menu',
|
|
796
|
+
tag: 'seki-context-menu',
|
|
797
|
+
description: 'Right-click contextual menu.',
|
|
798
|
+
cssTokens: [],
|
|
799
|
+
usageByFramework: {
|
|
800
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-context-menu>\n <seki-context-menu-trigger>\n <div style={{ border: '1px dashed', padding: '4rem', textAlign: 'center' }}>\n Right click here\n </div>\n </seki-context-menu-trigger>\n <seki-context-menu-content>\n <seki-context-menu-item>Back</seki-context-menu-item>\n <seki-context-menu-item>Reload</seki-context-menu-item>\n <seki-context-menu-separator />\n <seki-context-menu-item>Save As</seki-context-menu-item>\n </seki-context-menu-content>\n</seki-context-menu>`,
|
|
801
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-context-menu>\n <seki-context-menu-trigger>\n <div style="border: 1px dashed; padding: 4rem; text-align: center">Right click here</div>\n </seki-context-menu-trigger>\n <seki-context-menu-content>\n <seki-context-menu-item>Back</seki-context-menu-item>\n <seki-context-menu-item>Reload</seki-context-menu-item>\n </seki-context-menu-content>\n</seki-context-menu>`,
|
|
802
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-context-menu>\n <seki-context-menu-trigger><div>Right click here</div></seki-context-menu-trigger>\n <seki-context-menu-content>\n <seki-context-menu-item>Back</seki-context-menu-item>\n </seki-context-menu-content>\n</seki-context-menu>`,
|
|
803
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-context-menu>\n <seki-context-menu-trigger>\n <div style="border: 1px dashed; padding: 4rem; text-align: center">Right click here</div>\n </seki-context-menu-trigger>\n <seki-context-menu-content>\n <seki-context-menu-item>Back</seki-context-menu-item>\n <seki-context-menu-item>Reload</seki-context-menu-item>\n <seki-context-menu-separator></seki-context-menu-separator>\n <seki-context-menu-item>Save As</seki-context-menu-item>\n </seki-context-menu-content>\n</seki-context-menu>`,
|
|
804
|
+
},
|
|
805
|
+
},
|
|
806
|
+
'data-table': {
|
|
807
|
+
name: 'Data Table',
|
|
808
|
+
tag: 'seki-data-table',
|
|
809
|
+
description: 'Feature-rich table with sorting, filtering, and pagination.',
|
|
810
|
+
cssTokens: [
|
|
811
|
+
'--seki-table-border',
|
|
812
|
+
'--seki-table-radius',
|
|
813
|
+
'--seki-table-header-bg',
|
|
814
|
+
'--seki-table-header-text',
|
|
815
|
+
'--seki-table-header-height',
|
|
816
|
+
'--seki-table-row-bg',
|
|
817
|
+
'--seki-table-row-bg-hover',
|
|
818
|
+
'--seki-table-row-bg-selected',
|
|
819
|
+
'--seki-table-row-height',
|
|
820
|
+
'--seki-table-cell-padding',
|
|
821
|
+
'--seki-table-pagination-height',
|
|
822
|
+
],
|
|
823
|
+
usageByFramework: {
|
|
824
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-data-table\n columns={JSON.stringify([\n { key: 'name', header: 'Name', sortable: true },\n { key: 'email', header: 'Email' },\n { key: 'status', header: 'Status' },\n ])}\n data={JSON.stringify(rows)}\n page-size={10}\n/>`,
|
|
825
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-data-table\n :columns="JSON.stringify(columns)"\n :data="JSON.stringify(rows)"\n page-size="10"\n/>`,
|
|
826
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-data-table\n [columns]="columnsJson"\n [data]="dataJson"\n page-size="10"\n></seki-data-table>`,
|
|
827
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-data-table id="my-table" page-size="10"></seki-data-table>\n\n<script>\n const table = document.getElementById('my-table');\n table.columns = JSON.stringify([\n { key: 'name', header: 'Name', sortable: true },\n { key: 'email', header: 'Email' },\n ]);\n table.data = JSON.stringify([\n { name: 'Alice', email: 'alice@example.com' },\n { name: 'Bob', email: 'bob@example.com' },\n ]);\n</script>`,
|
|
828
|
+
},
|
|
829
|
+
},
|
|
830
|
+
'date-picker': {
|
|
831
|
+
name: 'Date Picker',
|
|
832
|
+
tag: 'seki-date-picker',
|
|
833
|
+
description: 'Input field with calendar popover for date selection.',
|
|
834
|
+
cssTokens: [
|
|
835
|
+
'--seki-date-picker-bg',
|
|
836
|
+
'--seki-date-picker-text',
|
|
837
|
+
'--seki-date-picker-muted',
|
|
838
|
+
'--seki-date-picker-border',
|
|
839
|
+
'--seki-date-picker-ring',
|
|
840
|
+
'--seki-date-picker-height',
|
|
841
|
+
'--seki-date-picker-radius',
|
|
842
|
+
'--seki-date-picker-padding',
|
|
843
|
+
'--seki-date-picker-font-size',
|
|
844
|
+
'--seki-date-picker-font-family',
|
|
845
|
+
],
|
|
846
|
+
usageByFramework: {
|
|
847
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-date-picker\n value={date}\n placeholder="Pick a date"\n onSekiChange={(e) => setDate(e.detail)}\n/>`,
|
|
848
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-date-picker\n :value="date"\n placeholder="Pick a date"\n @sekiChange="date = $event.detail"\n/>`,
|
|
849
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-date-picker\n [value]="date"\n placeholder="Pick a date"\n (sekiChange)="date = $event.detail"\n></seki-date-picker>`,
|
|
850
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-date-picker placeholder="Pick a date"></seki-date-picker>`,
|
|
851
|
+
},
|
|
852
|
+
},
|
|
853
|
+
drawer: {
|
|
854
|
+
name: 'Drawer',
|
|
855
|
+
tag: 'seki-drawer',
|
|
856
|
+
description: 'Slide-in panel from any edge, mobile-friendly with snap points.',
|
|
857
|
+
cssTokens: [
|
|
858
|
+
'--seki-drawer-bg',
|
|
859
|
+
'--seki-drawer-border',
|
|
860
|
+
'--seki-drawer-text',
|
|
861
|
+
'--seki-drawer-text-muted',
|
|
862
|
+
'--seki-drawer-handle-bg',
|
|
863
|
+
'--seki-drawer-overlay-bg',
|
|
864
|
+
'--seki-drawer-shadow',
|
|
865
|
+
'--seki-drawer-font-family',
|
|
866
|
+
'--seki-drawer-max-height',
|
|
867
|
+
'--seki-drawer-max-width',
|
|
868
|
+
'--seki-drawer-z-index',
|
|
869
|
+
],
|
|
870
|
+
usageByFramework: {
|
|
871
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-drawer open={isOpen} onSekiClose={() => setIsOpen(false)}>\n <div slot="header">Drawer Title</div>\n <div slot="content"><p>Drawer content here.</p></div>\n <div slot="footer">\n <seki-button variant="outline" onClick={() => setIsOpen(false)}>Cancel</seki-button>\n <seki-button>Save</seki-button>\n </div>\n</seki-drawer>`,
|
|
872
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-drawer :open="isOpen" @sekiClose="isOpen = false">\n <div slot="header">Drawer Title</div>\n <div slot="content"><p>Drawer content.</p></div>\n <div slot="footer">\n <seki-button variant="outline" @click="isOpen = false">Cancel</seki-button>\n <seki-button>Save</seki-button>\n </div>\n</seki-drawer>`,
|
|
873
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-drawer [open]="isOpen" (sekiClose)="isOpen = false">\n <div slot="header">Drawer Title</div>\n <div slot="content"><p>Drawer content.</p></div>\n <div slot="footer">\n <seki-button variant="outline" (click)="isOpen = false">Cancel</seki-button>\n <seki-button>Save</seki-button>\n </div>\n</seki-drawer>`,
|
|
874
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-drawer id="my-drawer">\n <div slot="header">Drawer Title</div>\n <div slot="content"><p>Drawer content.</p></div>\n</seki-drawer>\n\n<seki-button onclick="document.getElementById('my-drawer').open = true">Open Drawer</seki-button>`,
|
|
875
|
+
},
|
|
876
|
+
},
|
|
877
|
+
field: {
|
|
878
|
+
name: 'Field',
|
|
879
|
+
tag: 'seki-field',
|
|
880
|
+
description: 'Form field wrapper combining label, input, description, and error.',
|
|
881
|
+
cssTokens: ['--seki-field-spacing', '--seki-field-gap-horizontal'],
|
|
882
|
+
usageByFramework: {
|
|
883
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-field-label>Email</seki-field-label>\n <seki-input type="email" placeholder="you@example.com" />\n <seki-field-description>We'll never share your email.</seki-field-description>\n <seki-field-error>Please enter a valid email.</seki-field-error>\n</seki-field>`,
|
|
884
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-field-label>Email</seki-field-label>\n <seki-input type="email" placeholder="you@example.com" />\n <seki-field-description>We'll never share your email.</seki-field-description>\n</seki-field>`,
|
|
885
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-field-label>Email</seki-field-label>\n <seki-input type="email" placeholder="you@example.com"></seki-input>\n <seki-field-description>We'll never share your email.</seki-field-description>\n</seki-field>`,
|
|
886
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-field>\n <seki-field-label>Email</seki-field-label>\n <seki-input type="email" placeholder="you@example.com"></seki-input>\n <seki-field-description>We'll never share your email.</seki-field-description>\n</seki-field>`,
|
|
887
|
+
},
|
|
888
|
+
},
|
|
889
|
+
'field-label': {
|
|
890
|
+
name: 'Field Label',
|
|
891
|
+
tag: 'seki-field-label',
|
|
892
|
+
description: 'Accessible label for form fields with required indicator support.',
|
|
893
|
+
cssTokens: [
|
|
894
|
+
'--seki-label-color',
|
|
895
|
+
'--seki-label-font-size',
|
|
896
|
+
'--seki-label-font-weight',
|
|
897
|
+
'--seki-label-line-height',
|
|
898
|
+
'--seki-label-required-color',
|
|
899
|
+
],
|
|
900
|
+
usageByFramework: {
|
|
901
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-field-label for="email">Email</seki-field-label>\n<seki-input id="email" type="email" />\n\n// Required\n<seki-field-label required>Password</seki-field-label>`,
|
|
902
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-field-label for="email">Email</seki-field-label>\n<seki-input id="email" type="email" />\n<seki-field-label required>Required field</seki-field-label>`,
|
|
903
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-field-label for="email">Email</seki-field-label>\n<seki-input id="email" type="email"></seki-input>`,
|
|
904
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-field-label for="email">Email</seki-field-label>\n<seki-input id="email" type="email"></seki-input>`,
|
|
905
|
+
},
|
|
906
|
+
},
|
|
907
|
+
'field-description': {
|
|
908
|
+
name: 'Field Description',
|
|
909
|
+
tag: 'seki-field-description',
|
|
910
|
+
description: 'Helper text displayed below a form field.',
|
|
911
|
+
cssTokens: [
|
|
912
|
+
'--seki-description-color',
|
|
913
|
+
'--seki-description-font-size',
|
|
914
|
+
'--seki-description-line-height',
|
|
915
|
+
],
|
|
916
|
+
usageByFramework: {
|
|
917
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-input type="password" />\n <seki-field-description>Must be at least 8 characters.</seki-field-description>\n</seki-field>`,
|
|
918
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-input type="password" />\n <seki-field-description>Must be at least 8 characters.</seki-field-description>\n</seki-field>`,
|
|
919
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-input type="password"></seki-input>\n <seki-field-description>Must be at least 8 characters.</seki-field-description>\n</seki-field>`,
|
|
920
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-field-description>Must be at least 8 characters.</seki-field-description>`,
|
|
921
|
+
},
|
|
922
|
+
},
|
|
923
|
+
'field-error': {
|
|
924
|
+
name: 'Field Error',
|
|
925
|
+
tag: 'seki-field-error',
|
|
926
|
+
description: 'Validation error message for form fields.',
|
|
927
|
+
cssTokens: [
|
|
928
|
+
'--seki-error-color',
|
|
929
|
+
'--seki-error-font-size',
|
|
930
|
+
'--seki-error-font-weight',
|
|
931
|
+
'--seki-error-line-height',
|
|
932
|
+
],
|
|
933
|
+
usageByFramework: {
|
|
934
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-input type="email" invalid />\n {error && <seki-field-error>{error}</seki-field-error>}\n</seki-field>`,
|
|
935
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-input type="email" :invalid="!!error" />\n <seki-field-error v-if="error">{{ error }}</seki-field-error>\n</seki-field>`,
|
|
936
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-field>\n <seki-input type="email" [invalid]="!!error"></seki-input>\n <seki-field-error *ngIf="error">{{ error }}</seki-field-error>\n</seki-field>`,
|
|
937
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-field-error>Please enter a valid email address.</seki-field-error>`,
|
|
938
|
+
},
|
|
939
|
+
},
|
|
940
|
+
'field-group': {
|
|
941
|
+
name: 'Field Group',
|
|
942
|
+
tag: 'seki-field-group',
|
|
943
|
+
description: 'Groups multiple fields in a horizontal or vertical layout.',
|
|
944
|
+
cssTokens: ['--seki-field-group-gap'],
|
|
945
|
+
usageByFramework: {
|
|
946
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-field-group>\n <seki-field>\n <seki-field-label>First name</seki-field-label>\n <seki-input placeholder="Jane" />\n </seki-field>\n <seki-field>\n <seki-field-label>Last name</seki-field-label>\n <seki-input placeholder="Doe" />\n </seki-field>\n</seki-field-group>`,
|
|
947
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-field-group>\n <seki-field>\n <seki-field-label>First name</seki-field-label>\n <seki-input placeholder="Jane" />\n </seki-field>\n <seki-field>\n <seki-field-label>Last name</seki-field-label>\n <seki-input placeholder="Doe" />\n </seki-field>\n</seki-field-group>`,
|
|
948
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-field-group>\n <seki-field>\n <seki-field-label>First name</seki-field-label>\n <seki-input placeholder="Jane"></seki-input>\n </seki-field>\n <seki-field>\n <seki-field-label>Last name</seki-field-label>\n <seki-input placeholder="Doe"></seki-input>\n </seki-field>\n</seki-field-group>`,
|
|
949
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-field-group>\n <seki-field>\n <seki-field-label>First name</seki-field-label>\n <seki-input placeholder="Jane"></seki-input>\n </seki-field>\n <seki-field>\n <seki-field-label>Last name</seki-field-label>\n <seki-input placeholder="Doe"></seki-input>\n </seki-field>\n</seki-field-group>`,
|
|
950
|
+
},
|
|
951
|
+
},
|
|
952
|
+
fieldset: {
|
|
953
|
+
name: 'Fieldset',
|
|
954
|
+
tag: 'seki-fieldset',
|
|
955
|
+
description: 'Groups related form controls with a legend.',
|
|
956
|
+
cssTokens: [
|
|
957
|
+
'--seki-fieldset-border-color',
|
|
958
|
+
'--seki-fieldset-border-width',
|
|
959
|
+
'--seki-fieldset-border-radius',
|
|
960
|
+
'--seki-fieldset-padding',
|
|
961
|
+
],
|
|
962
|
+
usageByFramework: {
|
|
963
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-fieldset>\n <seki-field-legend>Contact Information</seki-field-legend>\n <seki-field>\n <seki-field-label>Name</seki-field-label>\n <seki-input placeholder="Jane Doe" />\n </seki-field>\n <seki-field>\n <seki-field-label>Email</seki-field-label>\n <seki-input type="email" placeholder="jane@example.com" />\n </seki-field>\n</seki-fieldset>`,
|
|
964
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-fieldset>\n <seki-field-legend>Contact Information</seki-field-legend>\n <seki-field>\n <seki-field-label>Name</seki-field-label>\n <seki-input placeholder="Jane Doe" />\n </seki-field>\n</seki-fieldset>`,
|
|
965
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-fieldset>\n <seki-field-legend>Contact Information</seki-field-legend>\n <seki-field>\n <seki-field-label>Name</seki-field-label>\n <seki-input placeholder="Jane Doe"></seki-input>\n </seki-field>\n</seki-fieldset>`,
|
|
966
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-fieldset>\n <seki-field-legend>Contact Information</seki-field-legend>\n <seki-field>\n <seki-field-label>Name</seki-field-label>\n <seki-input placeholder="Jane Doe"></seki-input>\n </seki-field>\n</seki-fieldset>`,
|
|
967
|
+
},
|
|
968
|
+
},
|
|
969
|
+
'hover-card': {
|
|
970
|
+
name: 'Hover Card',
|
|
971
|
+
tag: 'seki-hover-card',
|
|
972
|
+
description: 'Rich popover shown on hover for preview content.',
|
|
973
|
+
cssTokens: [],
|
|
974
|
+
usageByFramework: {
|
|
975
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-hover-card>\n <seki-hover-card-trigger>\n <a href="#">@shadcn</a>\n </seki-hover-card-trigger>\n <seki-hover-card-content>\n <div>\n <strong>@shadcn</strong>\n <p>UI component library creator.</p>\n </div>\n </seki-hover-card-content>\n</seki-hover-card>`,
|
|
976
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-hover-card>\n <seki-hover-card-trigger><a href="#">@shadcn</a></seki-hover-card-trigger>\n <seki-hover-card-content>\n <div><strong>@shadcn</strong><p>UI component library creator.</p></div>\n </seki-hover-card-content>\n</seki-hover-card>`,
|
|
977
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-hover-card>\n <seki-hover-card-trigger><a href="#">@shadcn</a></seki-hover-card-trigger>\n <seki-hover-card-content>\n <div><strong>@shadcn</strong><p>UI component library creator.</p></div>\n </seki-hover-card-content>\n</seki-hover-card>`,
|
|
978
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-hover-card>\n <seki-hover-card-trigger><a href="#">@shadcn</a></seki-hover-card-trigger>\n <seki-hover-card-content>\n <strong>@shadcn</strong>\n <p>UI component library creator.</p>\n </seki-hover-card-content>\n</seki-hover-card>`,
|
|
979
|
+
},
|
|
980
|
+
},
|
|
981
|
+
'input-group': {
|
|
982
|
+
name: 'Input Group',
|
|
983
|
+
tag: 'seki-input-group',
|
|
984
|
+
description: 'Input with prefix/suffix addons (icons, text, buttons).',
|
|
985
|
+
cssTokens: [],
|
|
986
|
+
usageByFramework: {
|
|
987
|
+
react: `${IMPORT_SNIPPET}\n\n// With prefix icon\n<seki-input-group>\n <span slot="prefix">$</span>\n <seki-input placeholder="0.00" />\n</seki-input-group>\n\n// With suffix button\n<seki-input-group>\n <seki-input placeholder="Search..." />\n <seki-button slot="suffix" variant="ghost">Search</seki-button>\n</seki-input-group>`,
|
|
988
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-input-group>\n <span slot="prefix">$</span>\n <seki-input placeholder="0.00" />\n</seki-input-group>`,
|
|
989
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-input-group>\n <span slot="prefix">$</span>\n <seki-input placeholder="0.00"></seki-input>\n</seki-input-group>`,
|
|
990
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-input-group>\n <span slot="prefix">$</span>\n <seki-input placeholder="0.00"></seki-input>\n</seki-input-group>`,
|
|
991
|
+
},
|
|
992
|
+
},
|
|
993
|
+
'input-otp': {
|
|
994
|
+
name: 'Input OTP',
|
|
995
|
+
tag: 'seki-input-otp',
|
|
996
|
+
description: 'One-time password input with individual character slots.',
|
|
997
|
+
cssTokens: [],
|
|
998
|
+
usageByFramework: {
|
|
999
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-input-otp\n length={6}\n onSekiComplete={(e) => verifyOTP(e.detail)}\n/>\n\n// With separator\n<seki-input-otp length={6} separator="-" />`,
|
|
1000
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-input-otp\n :length="6"\n @sekiComplete="verifyOTP($event.detail)"\n/>`,
|
|
1001
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-input-otp\n [length]="6"\n (sekiComplete)="verifyOTP($event.detail)"\n></seki-input-otp>`,
|
|
1002
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-input-otp length="6"></seki-input-otp>\n\n<script>\n document.querySelector('seki-input-otp').addEventListener('sekiComplete', (e) => {\n console.log('OTP:', e.detail);\n });\n</script>`,
|
|
1003
|
+
},
|
|
1004
|
+
},
|
|
1005
|
+
kbd: {
|
|
1006
|
+
name: 'Kbd',
|
|
1007
|
+
tag: 'seki-kbd',
|
|
1008
|
+
description: 'Keyboard shortcut display element.',
|
|
1009
|
+
cssTokens: [],
|
|
1010
|
+
usageByFramework: {
|
|
1011
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-kbd>⌘K</seki-kbd>\n<seki-kbd>Ctrl+S</seki-kbd>\n<seki-kbd size="sm">Enter</seki-kbd>`,
|
|
1012
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-kbd>⌘K</seki-kbd>\n<seki-kbd>Ctrl+S</seki-kbd>`,
|
|
1013
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-kbd>⌘K</seki-kbd>\n<seki-kbd>Ctrl+S</seki-kbd>`,
|
|
1014
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-kbd>⌘K</seki-kbd>\n<seki-kbd>Ctrl+S</seki-kbd>`,
|
|
1015
|
+
},
|
|
1016
|
+
},
|
|
1017
|
+
menubar: {
|
|
1018
|
+
name: 'Menubar',
|
|
1019
|
+
tag: 'seki-menubar',
|
|
1020
|
+
description: 'Horizontal menu bar with nested submenus.',
|
|
1021
|
+
cssTokens: [],
|
|
1022
|
+
usageByFramework: {
|
|
1023
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-menubar>\n <seki-menubar-menu>\n <seki-menubar-trigger>File</seki-menubar-trigger>\n <seki-menubar-content>\n <seki-menubar-item>New</seki-menubar-item>\n <seki-menubar-item>Open</seki-menubar-item>\n <seki-menubar-separator />\n <seki-menubar-item>Save</seki-menubar-item>\n </seki-menubar-content>\n </seki-menubar-menu>\n <seki-menubar-menu>\n <seki-menubar-trigger>Edit</seki-menubar-trigger>\n <seki-menubar-content>\n <seki-menubar-item>Undo</seki-menubar-item>\n <seki-menubar-item>Redo</seki-menubar-item>\n </seki-menubar-content>\n </seki-menubar-menu>\n</seki-menubar>`,
|
|
1024
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-menubar>\n <seki-menubar-menu>\n <seki-menubar-trigger>File</seki-menubar-trigger>\n <seki-menubar-content>\n <seki-menubar-item>New</seki-menubar-item>\n <seki-menubar-item>Open</seki-menubar-item>\n </seki-menubar-content>\n </seki-menubar-menu>\n</seki-menubar>`,
|
|
1025
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-menubar>\n <seki-menubar-menu>\n <seki-menubar-trigger>File</seki-menubar-trigger>\n <seki-menubar-content>\n <seki-menubar-item>New</seki-menubar-item>\n </seki-menubar-content>\n </seki-menubar-menu>\n</seki-menubar>`,
|
|
1026
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-menubar>\n <seki-menubar-menu>\n <seki-menubar-trigger>File</seki-menubar-trigger>\n <seki-menubar-content>\n <seki-menubar-item>New</seki-menubar-item>\n <seki-menubar-item>Open</seki-menubar-item>\n <seki-menubar-separator></seki-menubar-separator>\n <seki-menubar-item>Save</seki-menubar-item>\n </seki-menubar-content>\n </seki-menubar-menu>\n</seki-menubar>`,
|
|
1027
|
+
},
|
|
1028
|
+
},
|
|
1029
|
+
'navigation-menu': {
|
|
1030
|
+
name: 'Navigation Menu',
|
|
1031
|
+
tag: 'seki-navigation-menu',
|
|
1032
|
+
description: 'Accessible site navigation with dropdown panels.',
|
|
1033
|
+
cssTokens: [
|
|
1034
|
+
'--seki-nav-height',
|
|
1035
|
+
'--seki-nav-gap',
|
|
1036
|
+
'--seki-nav-trigger-padding',
|
|
1037
|
+
'--seki-nav-content-shadow',
|
|
1038
|
+
'--seki-nav-content-radius',
|
|
1039
|
+
'--seki-nav-indicator-size',
|
|
1040
|
+
'--seki-nav-animation-duration',
|
|
1041
|
+
],
|
|
1042
|
+
usageByFramework: {
|
|
1043
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-navigation-menu>\n <seki-navigation-menu-list>\n <seki-navigation-menu-item>\n <seki-navigation-menu-trigger>Getting started</seki-navigation-menu-trigger>\n <seki-navigation-menu-content>\n <a href="/docs">Introduction</a>\n <a href="/docs/installation">Installation</a>\n </seki-navigation-menu-content>\n </seki-navigation-menu-item>\n <seki-navigation-menu-item>\n <seki-navigation-menu-link href="/docs">Documentation</seki-navigation-menu-link>\n </seki-navigation-menu-item>\n </seki-navigation-menu-list>\n</seki-navigation-menu>`,
|
|
1044
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-navigation-menu>\n <seki-navigation-menu-list>\n <seki-navigation-menu-item>\n <seki-navigation-menu-link href="/docs">Documentation</seki-navigation-menu-link>\n </seki-navigation-menu-item>\n </seki-navigation-menu-list>\n</seki-navigation-menu>`,
|
|
1045
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-navigation-menu>\n <seki-navigation-menu-list>\n <seki-navigation-menu-item>\n <seki-navigation-menu-link href="/docs">Documentation</seki-navigation-menu-link>\n </seki-navigation-menu-item>\n </seki-navigation-menu-list>\n</seki-navigation-menu>`,
|
|
1046
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-navigation-menu>\n <seki-navigation-menu-list>\n <seki-navigation-menu-item>\n <seki-navigation-menu-link href="/docs">Documentation</seki-navigation-menu-link>\n </seki-navigation-menu-item>\n </seki-navigation-menu-list>\n</seki-navigation-menu>`,
|
|
1047
|
+
},
|
|
1048
|
+
},
|
|
1049
|
+
pagination: {
|
|
1050
|
+
name: 'Pagination',
|
|
1051
|
+
tag: 'seki-pagination',
|
|
1052
|
+
description: 'Page navigation controls with first, previous, next, last.',
|
|
1053
|
+
cssTokens: [
|
|
1054
|
+
'--seki-pagination-text-color',
|
|
1055
|
+
'--seki-pagination-text-muted',
|
|
1056
|
+
'--seki-pagination-bg',
|
|
1057
|
+
'--seki-pagination-bg-hover',
|
|
1058
|
+
'--seki-pagination-bg-active',
|
|
1059
|
+
'--seki-pagination-text-active',
|
|
1060
|
+
'--seki-pagination-border',
|
|
1061
|
+
'--seki-pagination-border-radius',
|
|
1062
|
+
'--seki-pagination-font-size',
|
|
1063
|
+
'--seki-pagination-gap',
|
|
1064
|
+
'--seki-pagination-size',
|
|
1065
|
+
],
|
|
1066
|
+
usageByFramework: {
|
|
1067
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-pagination\n total={100}\n page-size={10}\n current-page={page}\n onSekiPageChange={(e) => setPage(e.detail)}\n/>`,
|
|
1068
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-pagination\n :total="100"\n page-size="10"\n :current-page="page"\n @sekiPageChange="page = $event.detail"\n/>`,
|
|
1069
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-pagination\n [total]="100"\n page-size="10"\n [current-page]="page"\n (sekiPageChange)="page = $event.detail"\n></seki-pagination>`,
|
|
1070
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-pagination total="100" page-size="10" current-page="1"></seki-pagination>`,
|
|
1071
|
+
},
|
|
1072
|
+
},
|
|
1073
|
+
popover: {
|
|
1074
|
+
name: 'Popover',
|
|
1075
|
+
tag: 'seki-popover',
|
|
1076
|
+
description: 'Floating content panel anchored to a trigger element.',
|
|
1077
|
+
cssTokens: [],
|
|
1078
|
+
usageByFramework: {
|
|
1079
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-popover>\n <seki-button slot="trigger" variant="outline">Open popover</seki-button>\n <div slot="content" style={{ padding: '1rem' }}>\n <h4>Popover title</h4>\n <p>Popover content here.</p>\n </div>\n</seki-popover>`,
|
|
1080
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-popover>\n <seki-button slot="trigger" variant="outline">Open popover</seki-button>\n <div slot="content" style="padding: 1rem">\n <h4>Popover title</h4>\n <p>Popover content here.</p>\n </div>\n</seki-popover>`,
|
|
1081
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-popover>\n <seki-button slot="trigger" variant="outline">Open popover</seki-button>\n <div slot="content" style="padding: 1rem">\n <h4>Popover title</h4>\n </div>\n</seki-popover>`,
|
|
1082
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-popover>\n <seki-button slot="trigger" variant="outline">Open popover</seki-button>\n <div slot="content" style="padding: 1rem">\n <h4>Popover title</h4>\n <p>Popover content here.</p>\n </div>\n</seki-popover>`,
|
|
1083
|
+
},
|
|
1084
|
+
},
|
|
1085
|
+
progress: {
|
|
1086
|
+
name: 'Progress',
|
|
1087
|
+
tag: 'seki-progress',
|
|
1088
|
+
description: 'Linear progress bar with animated fill.',
|
|
1089
|
+
cssTokens: [
|
|
1090
|
+
'--seki-progress-height',
|
|
1091
|
+
'--seki-progress-border-radius',
|
|
1092
|
+
'--seki-progress-bg',
|
|
1093
|
+
'--seki-progress-indicator-bg',
|
|
1094
|
+
'--seki-progress-transition-duration',
|
|
1095
|
+
'--seki-progress-transition-timing',
|
|
1096
|
+
],
|
|
1097
|
+
usageByFramework: {
|
|
1098
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-progress value={60} />\n\n// With label\n<seki-progress value={60} max={100} />\n\n// Indeterminate\n<seki-progress />`,
|
|
1099
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-progress :value="progress" />\n<seki-progress :value="60" :max="100" />`,
|
|
1100
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-progress [value]="progress"></seki-progress>`,
|
|
1101
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-progress value="60"></seki-progress>\n<seki-progress value="33" max="100"></seki-progress>`,
|
|
1102
|
+
},
|
|
1103
|
+
},
|
|
1104
|
+
'radio-group': {
|
|
1105
|
+
name: 'Radio Group',
|
|
1106
|
+
tag: 'seki-radio-group',
|
|
1107
|
+
description: 'Single-selection radio button group.',
|
|
1108
|
+
cssTokens: [],
|
|
1109
|
+
usageByFramework: {
|
|
1110
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-radio-group value={selected} onSekiChange={(e) => setSelected(e.detail)}>\n <seki-radio value="option-one">Option One</seki-radio>\n <seki-radio value="option-two">Option Two</seki-radio>\n <seki-radio value="option-three" disabled>Disabled</seki-radio>\n</seki-radio-group>`,
|
|
1111
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-radio-group :value="selected" @sekiChange="selected = $event.detail">\n <seki-radio value="option-one">Option One</seki-radio>\n <seki-radio value="option-two">Option Two</seki-radio>\n</seki-radio-group>`,
|
|
1112
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-radio-group [value]="selected" (sekiChange)="selected = $event.detail">\n <seki-radio value="option-one">Option One</seki-radio>\n <seki-radio value="option-two">Option Two</seki-radio>\n</seki-radio-group>`,
|
|
1113
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-radio-group>\n <seki-radio value="option-one">Option One</seki-radio>\n <seki-radio value="option-two">Option Two</seki-radio>\n</seki-radio-group>`,
|
|
1114
|
+
},
|
|
1115
|
+
},
|
|
1116
|
+
resizable: {
|
|
1117
|
+
name: 'Resizable',
|
|
1118
|
+
tag: 'seki-resizable-panel-group',
|
|
1119
|
+
description: 'Resizable split panel layout with drag handle.',
|
|
1120
|
+
cssTokens: [],
|
|
1121
|
+
usageByFramework: {
|
|
1122
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-resizable-panel-group direction="horizontal">\n <seki-resizable-panel default-size={50}>Left panel</seki-resizable-panel>\n <seki-resizable-handle />\n <seki-resizable-panel default-size={50}>Right panel</seki-resizable-panel>\n</seki-resizable-panel-group>`,
|
|
1123
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-resizable-panel-group direction="horizontal">\n <seki-resizable-panel :default-size="50">Left panel</seki-resizable-panel>\n <seki-resizable-handle />\n <seki-resizable-panel :default-size="50">Right panel</seki-resizable-panel>\n</seki-resizable-panel-group>`,
|
|
1124
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-resizable-panel-group direction="horizontal">\n <seki-resizable-panel default-size="50">Left panel</seki-resizable-panel>\n <seki-resizable-handle></seki-resizable-handle>\n <seki-resizable-panel default-size="50">Right panel</seki-resizable-panel>\n</seki-resizable-panel-group>`,
|
|
1125
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-resizable-panel-group direction="horizontal">\n <seki-resizable-panel default-size="50">Left panel</seki-resizable-panel>\n <seki-resizable-handle></seki-resizable-handle>\n <seki-resizable-panel default-size="50">Right panel</seki-resizable-panel>\n</seki-resizable-panel-group>`,
|
|
1126
|
+
},
|
|
1127
|
+
},
|
|
1128
|
+
'scroll-area': {
|
|
1129
|
+
name: 'Scroll Area',
|
|
1130
|
+
tag: 'seki-scroll-area',
|
|
1131
|
+
description: 'Custom-styled scrollable container.',
|
|
1132
|
+
cssTokens: [],
|
|
1133
|
+
usageByFramework: {
|
|
1134
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-scroll-area style={{ height: '200px' }}>\n {Array.from({ length: 50 }, (_, i) => (\n <div key={i}>Item {i + 1}</div>\n ))}\n</seki-scroll-area>`,
|
|
1135
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-scroll-area style="height: 200px">\n <div v-for="i in 50" :key="i">Item {{ i }}</div>\n</seki-scroll-area>`,
|
|
1136
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-scroll-area style="height: 200px">\n <div *ngFor="let i of items">{{ i }}</div>\n</seki-scroll-area>`,
|
|
1137
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-scroll-area style="height: 200px">\n <p>Lots of content...</p>\n</seki-scroll-area>`,
|
|
1138
|
+
},
|
|
1139
|
+
},
|
|
1140
|
+
separator: {
|
|
1141
|
+
name: 'Separator',
|
|
1142
|
+
tag: 'seki-separator',
|
|
1143
|
+
description: 'Horizontal or vertical divider line.',
|
|
1144
|
+
cssTokens: ['--seki-separator-color', '--seki-separator-thickness'],
|
|
1145
|
+
usageByFramework: {
|
|
1146
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-separator />\n\n// Vertical\n<div style={{ display: 'flex', alignItems: 'center', height: '20px' }}>\n <span>Left</span>\n <seki-separator orientation="vertical" style={{ margin: '0 0.5rem' }} />\n <span>Right</span>\n</div>`,
|
|
1147
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-separator />\n<seki-separator orientation="vertical" />`,
|
|
1148
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-separator></seki-separator>\n<seki-separator orientation="vertical"></seki-separator>`,
|
|
1149
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-separator></seki-separator>\n<seki-separator orientation="vertical"></seki-separator>`,
|
|
1150
|
+
},
|
|
1151
|
+
},
|
|
1152
|
+
sheet: {
|
|
1153
|
+
name: 'Sheet',
|
|
1154
|
+
tag: 'seki-sheet',
|
|
1155
|
+
description: 'Side panel overlay, similar to a drawer but more spacious.',
|
|
1156
|
+
cssTokens: [
|
|
1157
|
+
'--seki-sheet-bg',
|
|
1158
|
+
'--seki-sheet-border',
|
|
1159
|
+
'--seki-sheet-text',
|
|
1160
|
+
'--seki-sheet-text-muted',
|
|
1161
|
+
'--seki-sheet-overlay-bg',
|
|
1162
|
+
'--seki-sheet-shadow',
|
|
1163
|
+
'--seki-sheet-font-family',
|
|
1164
|
+
'--seki-sheet-width',
|
|
1165
|
+
'--seki-sheet-height',
|
|
1166
|
+
'--seki-sheet-z-index',
|
|
1167
|
+
'--seki-sheet-animation-duration',
|
|
1168
|
+
],
|
|
1169
|
+
usageByFramework: {
|
|
1170
|
+
react: `${IMPORT_SNIPPET}\n\n// side: top | right | bottom | left (default: right)\n<seki-sheet open={isOpen} side="right" onSekiClose={() => setIsOpen(false)}>\n <div slot="header">Edit Profile</div>\n <div slot="content">\n <seki-field>\n <seki-field-label>Name</seki-field-label>\n <seki-input placeholder="Your name" />\n </seki-field>\n </div>\n <div slot="footer">\n <seki-button onClick={() => setIsOpen(false)}>Save</seki-button>\n </div>\n</seki-sheet>`,
|
|
1171
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-sheet :open="isOpen" side="right" @sekiClose="isOpen = false">\n <div slot="header">Edit Profile</div>\n <div slot="content">\n <seki-input placeholder="Your name" />\n </div>\n</seki-sheet>`,
|
|
1172
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-sheet [open]="isOpen" side="right" (sekiClose)="isOpen = false">\n <div slot="header">Edit Profile</div>\n <div slot="content">\n <seki-input placeholder="Your name"></seki-input>\n </div>\n</seki-sheet>`,
|
|
1173
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-sheet id="my-sheet" side="right">\n <div slot="header">Edit Profile</div>\n <div slot="content"><seki-input placeholder="Your name"></seki-input></div>\n</seki-sheet>\n\n<seki-button onclick="document.getElementById('my-sheet').open = true">Open</seki-button>`,
|
|
1174
|
+
},
|
|
1175
|
+
},
|
|
1176
|
+
sidebar: {
|
|
1177
|
+
name: 'Sidebar',
|
|
1178
|
+
tag: 'seki-sidebar',
|
|
1179
|
+
description: 'App sidebar with collapsible navigation and icon mode.',
|
|
1180
|
+
cssTokens: [
|
|
1181
|
+
'--sidebar-width',
|
|
1182
|
+
'--sidebar-width-icon',
|
|
1183
|
+
'--sidebar-width-mobile',
|
|
1184
|
+
'--sidebar-background',
|
|
1185
|
+
'--sidebar-foreground',
|
|
1186
|
+
'--sidebar-primary',
|
|
1187
|
+
'--sidebar-primary-foreground',
|
|
1188
|
+
'--sidebar-accent',
|
|
1189
|
+
'--sidebar-accent-foreground',
|
|
1190
|
+
'--sidebar-border',
|
|
1191
|
+
'--sidebar-ring',
|
|
1192
|
+
'--sidebar-transition-duration',
|
|
1193
|
+
'--sidebar-transition-timing',
|
|
1194
|
+
],
|
|
1195
|
+
usageByFramework: {
|
|
1196
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-sidebar-provider>\n <seki-sidebar>\n <seki-sidebar-header>\n <strong>My App</strong>\n </seki-sidebar-header>\n <seki-sidebar-content>\n <seki-sidebar-group>\n <seki-sidebar-group-label>Navigation</seki-sidebar-group-label>\n <seki-sidebar-menu>\n <seki-sidebar-menu-item>\n <seki-sidebar-menu-button href="/dashboard">Dashboard</seki-sidebar-menu-button>\n </seki-sidebar-menu-item>\n <seki-sidebar-menu-item>\n <seki-sidebar-menu-button href="/settings">Settings</seki-sidebar-menu-button>\n </seki-sidebar-menu-item>\n </seki-sidebar-menu>\n </seki-sidebar-group>\n </seki-sidebar-content>\n </seki-sidebar>\n <main>Main content</main>\n</seki-sidebar-provider>`,
|
|
1197
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-sidebar-provider>\n <seki-sidebar>\n <seki-sidebar-content>\n <seki-sidebar-menu>\n <seki-sidebar-menu-item>\n <seki-sidebar-menu-button href="/dashboard">Dashboard</seki-sidebar-menu-button>\n </seki-sidebar-menu-item>\n </seki-sidebar-menu>\n </seki-sidebar-content>\n </seki-sidebar>\n <main>Main content</main>\n</seki-sidebar-provider>`,
|
|
1198
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-sidebar-provider>\n <seki-sidebar>\n <seki-sidebar-content>\n <seki-sidebar-menu>\n <seki-sidebar-menu-item>\n <seki-sidebar-menu-button href="/dashboard">Dashboard</seki-sidebar-menu-button>\n </seki-sidebar-menu-item>\n </seki-sidebar-menu>\n </seki-sidebar-content>\n </seki-sidebar>\n <main>Main content</main>\n</seki-sidebar-provider>`,
|
|
1199
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-sidebar-provider>\n <seki-sidebar>\n <seki-sidebar-content>\n <seki-sidebar-menu>\n <seki-sidebar-menu-item>\n <seki-sidebar-menu-button href="/dashboard">Dashboard</seki-sidebar-menu-button>\n </seki-sidebar-menu-item>\n </seki-sidebar-menu>\n </seki-sidebar-content>\n </seki-sidebar>\n <main>Main content</main>\n</seki-sidebar-provider>`,
|
|
1200
|
+
},
|
|
1201
|
+
},
|
|
1202
|
+
skeleton: {
|
|
1203
|
+
name: 'Skeleton',
|
|
1204
|
+
tag: 'seki-skeleton',
|
|
1205
|
+
description: 'Loading placeholder with animated shimmer effect.',
|
|
1206
|
+
cssTokens: ['--seki-skeleton-bg'],
|
|
1207
|
+
usageByFramework: {
|
|
1208
|
+
react: `${IMPORT_SNIPPET}\n\n// Inline sizing\n<seki-skeleton style={{ width: '200px', height: '20px' }} />\n\n// Card skeleton\n<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>\n <seki-skeleton style={{ width: '100%', height: '12rem' }} />\n <seki-skeleton style={{ width: '60%', height: '1rem' }} />\n <seki-skeleton style={{ width: '80%', height: '1rem' }} />\n</div>`,
|
|
1209
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-skeleton style="width: 200px; height: 20px" />\n<seki-skeleton style="width: 100%; height: 12rem" />`,
|
|
1210
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-skeleton style="width: 200px; height: 20px"></seki-skeleton>`,
|
|
1211
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-skeleton style="width: 200px; height: 20px"></seki-skeleton>\n<seki-skeleton style="width: 100%; height: 12rem; display: block;"></seki-skeleton>`,
|
|
1212
|
+
},
|
|
1213
|
+
},
|
|
1214
|
+
slider: {
|
|
1215
|
+
name: 'Slider',
|
|
1216
|
+
tag: 'seki-slider',
|
|
1217
|
+
description: 'Range input slider with single or dual thumbs.',
|
|
1218
|
+
cssTokens: [
|
|
1219
|
+
'--seki-slider-track-bg',
|
|
1220
|
+
'--seki-slider-range-bg',
|
|
1221
|
+
'--seki-slider-thumb-bg',
|
|
1222
|
+
'--seki-slider-thumb-border',
|
|
1223
|
+
],
|
|
1224
|
+
usageByFramework: {
|
|
1225
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-slider\n value={volume}\n min={0}\n max={100}\n step={1}\n onSekiChange={(e) => setVolume(e.detail)}\n/>\n\n// Range (dual thumbs)\n<seki-slider value={[20, 80]} min={0} max={100} />`,
|
|
1226
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-slider\n :value="volume"\n :min="0"\n :max="100"\n @sekiChange="volume = $event.detail"\n/>`,
|
|
1227
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-slider\n [value]="volume"\n [min]="0"\n [max]="100"\n (sekiChange)="volume = $event.detail"\n></seki-slider>`,
|
|
1228
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-slider value="50" min="0" max="100" step="1"></seki-slider>`,
|
|
1229
|
+
},
|
|
1230
|
+
},
|
|
1231
|
+
spinner: {
|
|
1232
|
+
name: 'Spinner',
|
|
1233
|
+
tag: 'seki-spinner',
|
|
1234
|
+
description: 'Animated loading spinner.',
|
|
1235
|
+
cssTokens: [],
|
|
1236
|
+
usageByFramework: {
|
|
1237
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-spinner />\n\n// Sizes: sm | md | lg\n<seki-spinner size="lg" />\n\n// With label\n<seki-spinner>Loading...</seki-spinner>`,
|
|
1238
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-spinner />\n<seki-spinner size="lg" />`,
|
|
1239
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-spinner></seki-spinner>\n<seki-spinner size="lg"></seki-spinner>`,
|
|
1240
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-spinner></seki-spinner>\n<seki-spinner size="lg"></seki-spinner>`,
|
|
1241
|
+
},
|
|
1242
|
+
},
|
|
1243
|
+
switch: {
|
|
1244
|
+
name: 'Switch',
|
|
1245
|
+
tag: 'seki-switch',
|
|
1246
|
+
description: 'Toggle switch for boolean on/off state.',
|
|
1247
|
+
cssTokens: [
|
|
1248
|
+
'--seki-switch-width',
|
|
1249
|
+
'--seki-switch-height',
|
|
1250
|
+
'--seki-switch-bg-unchecked',
|
|
1251
|
+
'--seki-switch-bg-checked',
|
|
1252
|
+
'--seki-switch-bg-disabled',
|
|
1253
|
+
'--seki-switch-focus-ring',
|
|
1254
|
+
'--seki-switch-thumb-size',
|
|
1255
|
+
'--seki-switch-thumb-bg',
|
|
1256
|
+
'--seki-switch-transition-duration',
|
|
1257
|
+
],
|
|
1258
|
+
usageByFramework: {
|
|
1259
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-switch\n checked={enabled}\n onSekiChange={(e) => setEnabled(e.detail)}\n>\n Airplane mode\n</seki-switch>\n\n<seki-switch disabled>Disabled</seki-switch>`,
|
|
1260
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-switch\n :checked="enabled"\n @sekiChange="enabled = $event.detail"\n>\n Airplane mode\n</seki-switch>`,
|
|
1261
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-switch\n [checked]="enabled"\n (sekiChange)="enabled = $event.detail"\n>\n Airplane mode\n</seki-switch>`,
|
|
1262
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-switch>Airplane mode</seki-switch>`,
|
|
1263
|
+
},
|
|
1264
|
+
},
|
|
1265
|
+
table: {
|
|
1266
|
+
name: 'Table',
|
|
1267
|
+
tag: 'seki-table',
|
|
1268
|
+
description: 'Simple semantic table with consistent styling.',
|
|
1269
|
+
cssTokens: [
|
|
1270
|
+
'--seki-table-bg',
|
|
1271
|
+
'--seki-table-text',
|
|
1272
|
+
'--seki-table-muted',
|
|
1273
|
+
'--seki-table-border',
|
|
1274
|
+
'--seki-table-hover',
|
|
1275
|
+
'--seki-table-font-size',
|
|
1276
|
+
'--seki-table-font-family',
|
|
1277
|
+
],
|
|
1278
|
+
usageByFramework: {
|
|
1279
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-table>\n <seki-table-header>\n <seki-table-row>\n <seki-table-head>Name</seki-table-head>\n <seki-table-head>Email</seki-table-head>\n <seki-table-head>Role</seki-table-head>\n </seki-table-row>\n </seki-table-header>\n <seki-table-body>\n <seki-table-row>\n <seki-table-cell>Alice</seki-table-cell>\n <seki-table-cell>alice@example.com</seki-table-cell>\n <seki-table-cell>Admin</seki-table-cell>\n </seki-table-row>\n </seki-table-body>\n</seki-table>`,
|
|
1280
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-table>\n <seki-table-header>\n <seki-table-row>\n <seki-table-head>Name</seki-table-head>\n <seki-table-head>Email</seki-table-head>\n </seki-table-row>\n </seki-table-header>\n <seki-table-body>\n <seki-table-row v-for="row in rows" :key="row.id">\n <seki-table-cell>{{ row.name }}</seki-table-cell>\n <seki-table-cell>{{ row.email }}</seki-table-cell>\n </seki-table-row>\n </seki-table-body>\n</seki-table>`,
|
|
1281
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-table>\n <seki-table-header>\n <seki-table-row>\n <seki-table-head>Name</seki-table-head>\n </seki-table-row>\n </seki-table-header>\n <seki-table-body>\n <seki-table-row *ngFor="let row of rows">\n <seki-table-cell>{{ row.name }}</seki-table-cell>\n </seki-table-row>\n </seki-table-body>\n</seki-table>`,
|
|
1282
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-table>\n <seki-table-header>\n <seki-table-row>\n <seki-table-head>Name</seki-table-head>\n <seki-table-head>Email</seki-table-head>\n </seki-table-row>\n </seki-table-header>\n <seki-table-body>\n <seki-table-row>\n <seki-table-cell>Alice</seki-table-cell>\n <seki-table-cell>alice@example.com</seki-table-cell>\n </seki-table-row>\n </seki-table-body>\n</seki-table>`,
|
|
1283
|
+
},
|
|
1284
|
+
},
|
|
1285
|
+
textarea: {
|
|
1286
|
+
name: 'Textarea',
|
|
1287
|
+
tag: 'seki-textarea',
|
|
1288
|
+
description: 'Multi-line text input with auto-resize support.',
|
|
1289
|
+
cssTokens: [],
|
|
1290
|
+
usageByFramework: {
|
|
1291
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-textarea\n placeholder="Type your message here."\n value={message}\n onSekiChange={(e) => setMessage(e.detail)}\n/>\n\n// Auto-resize\n<seki-textarea auto-resize placeholder="Grows with content" />\n<seki-textarea disabled placeholder="Disabled" />`,
|
|
1292
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-textarea\n placeholder="Type your message here."\n :value="message"\n @sekiChange="message = $event.detail"\n/>`,
|
|
1293
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-textarea\n placeholder="Type your message here."\n [value]="message"\n (sekiChange)="message = $event.detail"\n></seki-textarea>`,
|
|
1294
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-textarea placeholder="Type your message here."></seki-textarea>\n<seki-textarea auto-resize placeholder="Grows with content"></seki-textarea>`,
|
|
1295
|
+
},
|
|
1296
|
+
},
|
|
1297
|
+
toast: {
|
|
1298
|
+
name: 'Toast',
|
|
1299
|
+
tag: 'seki-toast',
|
|
1300
|
+
description: 'Non-blocking notification with auto-dismiss and action support.',
|
|
1301
|
+
cssTokens: [
|
|
1302
|
+
'--seki-toast-width',
|
|
1303
|
+
'--seki-toast-padding',
|
|
1304
|
+
'--seki-toast-border-radius',
|
|
1305
|
+
'--seki-toast-shadow',
|
|
1306
|
+
'--seki-toaster-gap',
|
|
1307
|
+
'--seki-toast-default-bg',
|
|
1308
|
+
'--seki-toast-default-border',
|
|
1309
|
+
'--seki-toast-default-text',
|
|
1310
|
+
'--seki-toast-success-bg',
|
|
1311
|
+
'--seki-toast-error-bg',
|
|
1312
|
+
'--seki-toast-warning-bg',
|
|
1313
|
+
'--seki-toast-info-bg',
|
|
1314
|
+
'--seki-toast-animation-duration',
|
|
1315
|
+
],
|
|
1316
|
+
usageByFramework: {
|
|
1317
|
+
react: `${IMPORT_SNIPPET}\n\n// Add toaster to your root layout\n<seki-toaster />\n\n// Trigger toasts imperatively\ndocument.querySelector('seki-toaster').toast({ message: 'Saved!', variant: 'success' });\ndocument.querySelector('seki-toaster').toast({ message: 'Error occurred', variant: 'error' });\ndocument.querySelector('seki-toaster').toast({\n message: 'File deleted',\n variant: 'default',\n action: { label: 'Undo', onClick: () => restoreFile() },\n});`,
|
|
1318
|
+
vue: `${IMPORT_SNIPPET}\n\n<!-- Add to App.vue root template -->\n<seki-toaster ref="toaster" />\n\n// Trigger via ref\nthis.$refs.toaster.toast({ message: 'Saved!', variant: 'success' });`,
|
|
1319
|
+
angular: `${IMPORT_SNIPPET}\n\n<!-- Add to AppComponent template -->\n<seki-toaster id="toaster"></seki-toaster>\n\n// Trigger in a service or component\ndocument.getElementById('toaster').toast({ message: 'Saved!', variant: 'success' });`,
|
|
1320
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-toaster id="toaster"></seki-toaster>\n\n<script>\n function showToast() {\n document.getElementById('toaster').toast({ message: 'Saved!', variant: 'success' });\n }\n</script>\n\n<seki-button onclick="showToast()">Show toast</seki-button>`,
|
|
1321
|
+
},
|
|
1322
|
+
},
|
|
1323
|
+
toggle: {
|
|
1324
|
+
name: 'Toggle',
|
|
1325
|
+
tag: 'seki-toggle',
|
|
1326
|
+
description: 'Two-state button that can be toggled on or off.',
|
|
1327
|
+
cssTokens: [],
|
|
1328
|
+
usageByFramework: {
|
|
1329
|
+
react: `${IMPORT_SNIPPET}\n\n<seki-toggle pressed={bold} onSekiChange={(e) => setBold(e.detail)}>\n Bold\n</seki-toggle>\n\n// Variants: default | outline\n<seki-toggle variant="outline" pressed={italic}>Italic</seki-toggle>\n\n// Sizes: sm | default | lg\n<seki-toggle size="sm">B</seki-toggle>`,
|
|
1330
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-toggle :pressed="bold" @sekiChange="bold = $event.detail">Bold</seki-toggle>\n<seki-toggle variant="outline" :pressed="italic">Italic</seki-toggle>`,
|
|
1331
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-toggle [pressed]="bold" (sekiChange)="bold = $event.detail">Bold</seki-toggle>`,
|
|
1332
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-toggle>Bold</seki-toggle>\n<seki-toggle variant="outline">Italic</seki-toggle>`,
|
|
1333
|
+
},
|
|
1334
|
+
},
|
|
1335
|
+
'toggle-group': {
|
|
1336
|
+
name: 'Toggle Group',
|
|
1337
|
+
tag: 'seki-toggle-group',
|
|
1338
|
+
description: 'Group of toggles with single or multiple selection.',
|
|
1339
|
+
cssTokens: [],
|
|
1340
|
+
usageByFramework: {
|
|
1341
|
+
react: `${IMPORT_SNIPPET}\n\n// Single selection\n<seki-toggle-group type="single" value={align} onSekiChange={(e) => setAlign(e.detail)}>\n <seki-toggle-group-item value="left">Left</seki-toggle-group-item>\n <seki-toggle-group-item value="center">Center</seki-toggle-group-item>\n <seki-toggle-group-item value="right">Right</seki-toggle-group-item>\n</seki-toggle-group>\n\n// Multiple selection\n<seki-toggle-group type="multiple">\n <seki-toggle-group-item value="bold">B</seki-toggle-group-item>\n <seki-toggle-group-item value="italic">I</seki-toggle-group-item>\n <seki-toggle-group-item value="underline">U</seki-toggle-group-item>\n</seki-toggle-group>`,
|
|
1342
|
+
vue: `${IMPORT_SNIPPET}\n\n<seki-toggle-group type="single" :value="align" @sekiChange="align = $event.detail">\n <seki-toggle-group-item value="left">Left</seki-toggle-group-item>\n <seki-toggle-group-item value="center">Center</seki-toggle-group-item>\n <seki-toggle-group-item value="right">Right</seki-toggle-group-item>\n</seki-toggle-group>`,
|
|
1343
|
+
angular: `${IMPORT_SNIPPET}\n\n<seki-toggle-group type="single" [value]="align" (sekiChange)="align = $event.detail">\n <seki-toggle-group-item value="left">Left</seki-toggle-group-item>\n <seki-toggle-group-item value="center">Center</seki-toggle-group-item>\n</seki-toggle-group>`,
|
|
1344
|
+
vanilla: `${CDN_SNIPPET}\n\n<seki-toggle-group type="single">\n <seki-toggle-group-item value="left">Left</seki-toggle-group-item>\n <seki-toggle-group-item value="center">Center</seki-toggle-group-item>\n <seki-toggle-group-item value="right">Right</seki-toggle-group-item>\n</seki-toggle-group>`,
|
|
1345
|
+
},
|
|
1346
|
+
},
|
|
586
1347
|
};
|
|
587
1348
|
function getComponent(name) {
|
|
588
1349
|
return exports.COMPONENT_REGISTRY[name.toLowerCase()];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/components/registry.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/components/registry.ts"],"names":[],"mappings":"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"}
|