natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update new functions

Browse Source
This commit is contained in:
natxocc
2026-04-06 03:19:15 +02:00
parent f9095332eb
commit 294547fc56
139 changed files with 2249 additions and 2109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/accordion.md
View File

@@ -69,7 +69,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Group Accordion (Radio Style)
@@ -112,7 +112,7 @@ const GroupDemo = () => {
])
]);
};
$mount(GroupDemo, '#demo-group');
Mount(GroupDemo, '#demo-group');
```
### FAQ Accordion
@@ -146,7 +146,7 @@ const FaqDemo = () => {
])
));
};
$mount(FaqDemo, '#demo-faq');
Mount(FaqDemo, '#demo-faq');
```
### With Rich Content
@@ -218,7 +218,7 @@ const RichDemo = () => {
])
]);
};
$mount(RichDemo, '#demo-rich');
Mount(RichDemo, '#demo-rich');
```
### Form Accordion
@@ -346,7 +346,7 @@ const FormAccordion = () => {
])
]);
};
$mount(FormAccordion, '#demo-form');
Mount(FormAccordion, '#demo-form');
```
### All Variants
@@ -396,5 +396,5 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

16
docs/components/alert.md
View File

@@ -60,7 +60,7 @@ const BasicDemo = () => {
Alert({ type: 'error', message: 'An error occurred while processing your request.' })
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Soft vs Solid Variants
@@ -81,7 +81,7 @@ const VariantsDemo = () => {
Alert({ type: 'success', soft: false, message: 'Solid success alert' })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### With Actions
@@ -130,7 +130,7 @@ const ActionsDemo = () => {
}) : null
]);
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### Dismissible Alert
@@ -161,7 +161,7 @@ const DismissibleDemo = () => {
}, 'Show Alert') : null
]);
};
$mount(DismissibleDemo, '#demo-dismissible');
Mount(DismissibleDemo, '#demo-dismissible');
```
### Reactive Alert
@@ -201,7 +201,7 @@ const ReactiveDemo = () => {
}) : null
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Form Validation
@@ -268,7 +268,7 @@ const FormDemo = () => {
}) : null
]);
};
$mount(FormDemo, '#demo-form');
Mount(FormDemo, '#demo-form');
```
### Icon Alerts
@@ -289,7 +289,7 @@ const IconsDemo = () => {
Alert({ type: 'error', message: 'Error alert with custom icon' })
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### All Types
@@ -310,5 +310,5 @@ const AllTypesDemo = () => {
Alert({ type: 'error', message: '❌ This is an error alert' })
]);
};
$mount(AllTypesDemo, '#demo-all');
Mount(AllTypesDemo, '#demo-all');
```

10
docs/components/autocomplete.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
onSelect: (value) => selected(value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Objects
@@ -94,7 +94,7 @@ const ObjectsDemo = () => {
])
]);
};
$mount(ObjectsDemo, '#demo-objects');
Mount(ObjectsDemo, '#demo-objects');
```
### With Reactive Display
@@ -125,7 +125,7 @@ const ReactiveDemo = () => {
]) : null
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Dynamic Items
@@ -165,7 +165,7 @@ const DynamicDemo = () => {
})
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -208,5 +208,5 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

20
docs/components/badge.md
View File

@@ -56,7 +56,7 @@ const BasicDemo = () => {
Badge({ class: 'badge-error' }, 'Error')
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Badge Sizes
@@ -78,7 +78,7 @@ const SizesDemo = () => {
Badge({ class: 'badge-lg' }, 'Large')
]);
};
$mount(SizesDemo, '#demo-sizes');
Mount(SizesDemo, '#demo-sizes');
```
### Outline Badges
@@ -103,7 +103,7 @@ const OutlineDemo = () => {
Badge({ class: 'badge-outline badge-error' }, 'Error')
]);
};
$mount(OutlineDemo, '#demo-outline');
Mount(OutlineDemo, '#demo-outline');
```
### Ghost Badges
@@ -128,7 +128,7 @@ const GhostDemo = () => {
Badge({ class: 'badge-ghost badge-error' }, 'Error')
]);
};
$mount(GhostDemo, '#demo-ghost');
Mount(GhostDemo, '#demo-ghost');
```
### With Icons
@@ -165,7 +165,7 @@ const IconsDemo = () => {
])
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Status Badges
@@ -194,7 +194,7 @@ const StatusDemo = () => {
))
]);
};
$mount(StatusDemo, '#demo-status');
Mount(StatusDemo, '#demo-status');
```
### Count Badges
@@ -227,7 +227,7 @@ const CountDemo = () => {
])
]);
};
$mount(CountDemo, '#demo-count');
Mount(CountDemo, '#demo-count');
```
### Interactive Badge
@@ -255,7 +255,7 @@ const InteractiveDemo = () => {
}, 'Reset')
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### All Variants
@@ -287,7 +287,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Inline with Text
@@ -319,5 +319,5 @@ const InlineDemo = () => {
])
]);
};
$mount(InlineDemo, '#demo-inline');
Mount(InlineDemo, '#demo-inline');
```

14
docs/components/button.md
View File

@@ -48,7 +48,7 @@ Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me");
const BasicDemo = () => {
return Button({ class: "btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
Mount(BasicDemo, "#demo-basic");
```
### With Loading State
@@ -72,7 +72,7 @@ const LoadingDemo = () => {
"Save Changes",
);
};
$mount(LoadingDemo, "#demo-loading");
Mount(LoadingDemo, "#demo-loading");
```
### With Icon
@@ -89,7 +89,7 @@ const IconDemo = () => {
"Favorite",
);
};
$mount(IconDemo, "#demo-icon");
Mount(IconDemo, "#demo-icon");
```
### With Badge (using Indicator)
@@ -103,7 +103,7 @@ const BadgeDemo = () => {
Button({ class: "btn-outline" }, "Notifications"),
);
};
$mount(BadgeDemo, "#demo-badge");
Mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
@@ -114,7 +114,7 @@ $mount(BadgeDemo, "#demo-badge");
const TooltipDemo = () => {
return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
};
$mount(TooltipDemo, "#demo-tooltip");
Mount(TooltipDemo, "#demo-tooltip");
```
### Combined (Badge + Tooltip)
@@ -139,7 +139,7 @@ const CombinedDemo = () => {
),
);
};
$mount(CombinedDemo, "#demo-combined");
Mount(CombinedDemo, "#demo-combined");
```
### All Color Variants
@@ -156,5 +156,5 @@ const VariantsDemo = () => {
Button({ class: "btn-outline" }, "Outline"),
]);
};
$mount(VariantsDemo, "#demo-variants");
Mount(VariantsDemo, "#demo-variants");
```

14
docs/components/checkbox.md
View File

@@ -62,7 +62,7 @@ const BasicDemo = () => {
onclick: () => accepted(!accepted())
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Toggle Switch
@@ -90,7 +90,7 @@ const ToggleDemo = () => {
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]);
};
$mount(ToggleDemo, '#demo-toggle');
Mount(ToggleDemo, '#demo-toggle');
```
### With Tooltip
@@ -113,7 +113,7 @@ const TooltipDemo = () => {
onclick: () => darkMode(!darkMode())
});
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Disabled State
@@ -140,7 +140,7 @@ const DisabledDemo = () => {
})
]);
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Reactive Multiple Selection
@@ -193,7 +193,7 @@ const MultipleDemo = () => {
})
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### All Variants
@@ -242,7 +242,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Form Example
@@ -286,5 +286,5 @@ const FormDemo = () => {
: null
]);
};
$mount(FormDemo, '#demo-form');
Mount(FormDemo, '#demo-form');
```

12
docs/components/colorpicker.md
View File

@@ -45,7 +45,7 @@ const BasicDemo = () => {
value: color
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Reactive Preview
@@ -74,7 +74,7 @@ const PreviewDemo = () => {
])
]);
};
$mount(PreviewDemo, '#demo-preview');
Mount(PreviewDemo, '#demo-preview');
```
### Color Palette Grid
@@ -112,7 +112,7 @@ const PaletteDemo = () => {
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
]);
};
$mount(PaletteDemo, '#demo-palette');
Mount(PaletteDemo, '#demo-palette');
```
### With Text Color Preview
@@ -148,7 +148,7 @@ const TextDemo = () => {
])
]);
};
$mount(TextDemo, '#demo-text');
Mount(TextDemo, '#demo-text');
```
### All Variants
@@ -181,7 +181,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Dynamic Color Swatch
@@ -221,5 +221,5 @@ const DynamicDemo = () => {
])
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```

12
docs/components/datepicker.md
View File

@@ -50,7 +50,7 @@ const BasicDemo = () => {
placeholder: 'Choose a date...'
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Date Range Picker
@@ -78,7 +78,7 @@ const RangeDemo = () => {
]) : null
]);
};
$mount(RangeDemo, '#demo-range');
Mount(RangeDemo, '#demo-range');
```
### With Time Selection
@@ -106,7 +106,7 @@ const TimeDemo = () => {
]) : null
]);
};
$mount(TimeDemo, '#demo-time');
Mount(TimeDemo, '#demo-time');
```
### Range with Time
@@ -135,7 +135,7 @@ const RangeTimeDemo = () => {
]) : null
]);
};
$mount(RangeTimeDemo, '#demo-range-time');
Mount(RangeTimeDemo, '#demo-range-time');
```
### Reactive Display
@@ -167,7 +167,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### All Variants
@@ -201,5 +201,5 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/drawer.md
View File

@@ -61,7 +61,7 @@ const BasicDemo = () => {
])
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Navigation Drawer
@@ -138,7 +138,7 @@ const NavDrawer = () => {
])
});
};
$mount(NavDrawer, '#demo-nav');
Mount(NavDrawer, '#demo-nav');
```
### Settings Drawer
@@ -233,7 +233,7 @@ const SettingsDrawer = () => {
])
});
};
$mount(SettingsDrawer, '#demo-settings');
Mount(SettingsDrawer, '#demo-settings');
```
### Cart Drawer
@@ -336,7 +336,7 @@ const CartDrawer = () => {
])
});
};
$mount(CartDrawer, '#demo-cart');
Mount(CartDrawer, '#demo-cart');
```
### Responsive Drawer
@@ -404,7 +404,7 @@ const ResponsiveDrawer = () => {
])
});
};
$mount(ResponsiveDrawer, '#demo-responsive');
Mount(ResponsiveDrawer, '#demo-responsive');
```
### Form Drawer
@@ -462,7 +462,7 @@ const FormDrawer = () => {
}),
Div({ class: 'form-control' }, [
Span({ class: 'label-text mb-1' }, 'Message'),
$html('textarea', {
Tag('textarea', {
class: 'textarea textarea-bordered h-24',
placeholder: 'Your message',
value: message,
@@ -489,5 +489,5 @@ const FormDrawer = () => {
])
});
};
$mount(FormDrawer, '#demo-form');
Mount(FormDrawer, '#demo-form');
```

14
docs/components/dropdown.md
View File

@@ -71,7 +71,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -96,7 +96,7 @@ const IconsDemo = () => {
]
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Action Dropdown
@@ -124,7 +124,7 @@ const ActionsDemo = () => {
]
});
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### User Dropdown
@@ -153,7 +153,7 @@ const UserDropdown = () => {
]
});
};
$mount(UserDropdown, '#demo-user');
Mount(UserDropdown, '#demo-user');
```
### Reactive Items
@@ -180,7 +180,7 @@ const ReactiveDropdown = () => {
items: items
});
};
$mount(ReactiveDropdown, '#demo-reactive');
Mount(ReactiveDropdown, '#demo-reactive');
```
### Notification Dropdown
@@ -225,7 +225,7 @@ const NotificationsDropdown = () => {
});
};
$mount(NotificationsDropdown, '#demo-notifications');
Mount(NotificationsDropdown, '#demo-notifications');
```
### All Variants
@@ -251,5 +251,5 @@ const VariantsDemo = () => {
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

16
docs/components/fab.md
View File

@@ -75,7 +75,7 @@ const BasicDemo = () => {
})
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Label
@@ -101,7 +101,7 @@ const LabelDemo = () => {
})
]);
};
$mount(LabelDemo, '#demo-label');
Mount(LabelDemo, '#demo-label');
```
### Different Positions
@@ -145,7 +145,7 @@ const PositionsDemo = () => {
})
]);
};
$mount(PositionsDemo, '#demo-positions');
Mount(PositionsDemo, '#demo-positions');
```
### Color Variants
@@ -190,7 +190,7 @@ const ColorsDemo = () => {
})
]);
};
$mount(ColorsDemo, '#demo-colors');
Mount(ColorsDemo, '#demo-colors');
```
### Reactive Actions
@@ -236,7 +236,7 @@ const ReactiveActions = () => {
})
]);
};
$mount(ReactiveActions, '#demo-reactive');
Mount(ReactiveActions, '#demo-reactive');
```
### Document Actions
@@ -275,7 +275,7 @@ const DocumentActions = () => {
})
]);
};
$mount(DocumentActions, '#demo-document');
Mount(DocumentActions, '#demo-document');
```
### Messaging FAB
@@ -333,7 +333,7 @@ const MessagingFAB = () => {
})
]);
};
$mount(MessagingFAB, '#demo-messaging');
Mount(MessagingFAB, '#demo-messaging');
```
### All Variants
@@ -374,5 +374,5 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/fieldset.md
View File

@@ -62,7 +62,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Reactive Legend
@@ -104,7 +104,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Address Form
@@ -146,7 +146,7 @@ const AddressDemo = () => {
])
]);
};
$mount(AddressDemo, '#demo-address');
Mount(AddressDemo, '#demo-address');
```
### Payment Method
@@ -187,7 +187,7 @@ const PaymentDemo = () => {
])
]);
};
$mount(PaymentDemo, '#demo-payment');
Mount(PaymentDemo, '#demo-payment');
```
### Preferences Panel
@@ -236,7 +236,7 @@ const PreferencesDemo = () => {
])
]);
};
$mount(PreferencesDemo, '#demo-preferences');
Mount(PreferencesDemo, '#demo-preferences');
```
### Registration Form
@@ -294,7 +294,7 @@ const RegistrationDemo = () => {
])
]);
};
$mount(RegistrationDemo, '#demo-registration');
Mount(RegistrationDemo, '#demo-registration');
```
### All Variants
@@ -320,5 +320,5 @@ const VariantsDemo = () => {
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

12
docs/components/indicator.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
)
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Online Status Indicator
@@ -91,7 +91,7 @@ const StatusDemo = () => {
)
]);
};
$mount(StatusDemo, '#demo-status');
Mount(StatusDemo, '#demo-status');
```
### Reactive Counter
@@ -129,7 +129,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Shopping Cart
@@ -188,7 +188,7 @@ const CartDemo = () => {
]);
};
$mount(CartDemo, '#demo-cart');
Mount(CartDemo, '#demo-cart');
```
### Email Inbox
@@ -249,7 +249,7 @@ const InboxDemo = () => {
]);
};
$mount(InboxDemo, '#demo-inbox');
Mount(InboxDemo, '#demo-inbox');
```
### All Variants
@@ -280,5 +280,5 @@ const VariantsDemo = () => {
)
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/input.md
View File

@@ -43,7 +43,7 @@ const BasicDemo = () => {
oninput: (e) => name(e.target.value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icon
@@ -66,7 +66,7 @@ const IconDemo = () => {
oninput: (e) => email(e.target.value)
});
};
$mount(IconDemo, '#demo-icon');
Mount(IconDemo, '#demo-icon');
```
### Password with Toggle
@@ -88,7 +88,7 @@ const PasswordDemo = () => {
oninput: (e) => password(e.target.value)
});
};
$mount(PasswordDemo, '#demo-password');
Mount(PasswordDemo, '#demo-password');
```
### With Tooltip
@@ -110,7 +110,7 @@ const TooltipDemo = () => {
oninput: (e) => username(e.target.value)
});
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Error State
@@ -142,7 +142,7 @@ const ErrorDemo = () => {
})
]);
};
$mount(ErrorDemo, '#demo-error');
Mount(ErrorDemo, '#demo-error');
```
### Disabled State
@@ -161,7 +161,7 @@ const DisabledDemo = () => {
disabled: true
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### All Variants
@@ -205,5 +205,5 @@ const VariantsDemo = () => {
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

18
docs/components/list.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
]),
});
};
$mount(BasicDemo, "#demo-basic");
Mount(BasicDemo, "#demo-basic");
```
### With Header
@@ -90,7 +90,7 @@ const HeaderDemo = () => {
]),
});
};
$mount(HeaderDemo, "#demo-header");
Mount(HeaderDemo, "#demo-header");
```
### With Icons
@@ -134,7 +134,7 @@ const IconsDemo = () => {
),
});
};
$mount(IconsDemo, "#demo-icons");
Mount(IconsDemo, "#demo-icons");
```
### With Badges
@@ -194,7 +194,7 @@ const BadgesDemo = () => {
),
});
};
$mount(BadgesDemo, "#demo-badges");
Mount(BadgesDemo, "#demo-badges");
```
### Interactive List
@@ -252,7 +252,7 @@ const InteractiveDemo = () => {
: Div({ class: "alert alert-soft" }, "Select a project to see details"),
]);
};
$mount(InteractiveDemo, "#demo-interactive");
Mount(InteractiveDemo, "#demo-interactive");
```
### Reactive List (Todo App)
@@ -291,7 +291,7 @@ const ReactiveDemo = () => {
};
const pendingCount = () => todos().filter(t => !t.done).length;
$watch(()=> console.log(pendingCount()));
Watch(()=> console.log(pendingCount()));
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex gap-2' }, [
Input({
@@ -330,7 +330,7 @@ const ReactiveDemo = () => {
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Avatar List
@@ -383,7 +383,7 @@ const AvatarDemo = () => {
]),
});
};
$mount(AvatarDemo, "#demo-avatar");
Mount(AvatarDemo, "#demo-avatar");
```
### All Variants
@@ -421,5 +421,5 @@ const VariantsDemo = () => {
}),
]);
};
$mount(VariantsDemo, "#demo-variants");
Mount(VariantsDemo, "#demo-variants");
```

16
docs/components/menu.md
View File

@@ -72,7 +72,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -117,7 +117,7 @@ const IconsDemo = () => {
]
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Nested Menu
@@ -187,7 +187,7 @@ const NestedDemo = () => {
]
});
};
$mount(NestedDemo, '#demo-nested');
Mount(NestedDemo, '#demo-nested');
```
### Horizontal Menu
@@ -232,7 +232,7 @@ const HorizontalDemo = () => {
]
});
};
$mount(HorizontalDemo, '#demo-horizontal');
Mount(HorizontalDemo, '#demo-horizontal');
```
### Sidebar Menu
@@ -295,7 +295,7 @@ const SidebarDemo = () => {
])
]);
};
$mount(SidebarDemo, '#demo-sidebar');
Mount(SidebarDemo, '#demo-sidebar');
```
### Account Menu
@@ -346,7 +346,7 @@ const AccountDemo = () => {
]
});
};
$mount(AccountDemo, '#demo-account');
Mount(AccountDemo, '#demo-account');
```
### Collapsible Sidebar
@@ -384,7 +384,7 @@ const CollapsibleDemo = () => {
])
]);
};
$mount(CollapsibleDemo, '#demo-collapsible');
Mount(CollapsibleDemo, '#demo-collapsible');
```
### All Variants
@@ -422,5 +422,5 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/modal.md
View File

@@ -63,7 +63,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Modal with Actions
@@ -113,7 +113,7 @@ const ActionsDemo = () => {
])
]);
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### Form Modal
@@ -182,7 +182,7 @@ const FormModal = () => {
])
]);
};
$mount(FormModal, '#demo-form');
Mount(FormModal, '#demo-form');
```
### Confirmation Modal
@@ -243,7 +243,7 @@ const ConfirmDemo = () => {
])
]);
};
$mount(ConfirmDemo, '#demo-confirm');
Mount(ConfirmDemo, '#demo-confirm');
```
### Large Content Modal
@@ -295,7 +295,7 @@ const LargeDemo = () => {
])
]);
};
$mount(LargeDemo, '#demo-large');
Mount(LargeDemo, '#demo-large');
```
### Multiple Modals
@@ -337,7 +337,7 @@ const MultipleDemo = () => {
}, 'Please review your input before proceeding.')
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### Custom Styled Modal
@@ -374,5 +374,5 @@ const CustomDemo = () => {
])
]);
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```

14
docs/components/navbar.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Navigation Links
@@ -92,7 +92,7 @@ const LinksDemo = () => {
])
]);
};
$mount(LinksDemo, '#demo-links');
Mount(LinksDemo, '#demo-links');
```
### With Search
@@ -128,7 +128,7 @@ const SearchDemo = () => {
])
]);
};
$mount(SearchDemo, '#demo-search');
Mount(SearchDemo, '#demo-search');
```
### With Avatar and Dropdown
@@ -167,7 +167,7 @@ const AvatarDemo = () => {
])
]);
};
$mount(AvatarDemo, '#demo-avatar');
Mount(AvatarDemo, '#demo-avatar');
```
### Responsive Navbar
@@ -206,7 +206,7 @@ const ResponsiveDemo = () => {
]) : null
]);
};
$mount(ResponsiveDemo, '#demo-responsive');
Mount(ResponsiveDemo, '#demo-responsive');
```
### With Brand and Actions
@@ -237,7 +237,7 @@ const BrandDemo = () => {
])
]);
};
$mount(BrandDemo, '#demo-brand');
Mount(BrandDemo, '#demo-brand');
```
### All Variants
@@ -272,5 +272,5 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/radio.md
View File

@@ -70,7 +70,7 @@ const BasicDemo = () => {
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Tooltip
@@ -105,7 +105,7 @@ const TooltipDemo = () => {
})
]);
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Disabled State
@@ -139,7 +139,7 @@ const DisabledDemo = () => {
})
]);
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Reactive Preview
@@ -199,7 +199,7 @@ const ReactiveDemo = () => {
}, () => `${size()} ${color()} preview`)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Payment Method Selection
@@ -250,7 +250,7 @@ const PaymentDemo = () => {
})
]);
};
$mount(PaymentDemo, '#demo-payment');
Mount(PaymentDemo, '#demo-payment');
```
### All Variants
@@ -334,7 +334,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Dynamic Options
@@ -405,5 +405,5 @@ const DynamicDemo = () => {
: null
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```

14
docs/components/range.md
View File

@@ -57,7 +57,7 @@ const BasicDemo = () => {
Div({ class: 'text-center' }, () => `Value: ${value()}%`)
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Tooltip
@@ -85,7 +85,7 @@ const TooltipDemo = () => {
Div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` })
]);
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Color Variants
@@ -109,7 +109,7 @@ const ColorsDemo = () => {
Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) })
]);
};
$mount(ColorsDemo, '#demo-colors');
Mount(ColorsDemo, '#demo-colors');
```
### Size Variants
@@ -135,7 +135,7 @@ const SizesDemo = () => {
Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) })
]);
};
$mount(SizesDemo, '#demo-sizes');
Mount(SizesDemo, '#demo-sizes');
```
### Price Range
@@ -173,7 +173,7 @@ const PriceDemo = () => {
})
]);
};
$mount(PriceDemo, '#demo-price');
Mount(PriceDemo, '#demo-price');
```
### Audio Controls
@@ -227,7 +227,7 @@ const AudioDemo = () => {
])
]);
};
$mount(AudioDemo, '#demo-audio');
Mount(AudioDemo, '#demo-audio');
```
### All Variants
@@ -254,5 +254,5 @@ const VariantsDemo = () => {
Range({ disabled: true, value: $(50), oninput: (e) => {} })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/rating.md
View File

@@ -54,7 +54,7 @@ const BasicDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Heart Rating
@@ -80,7 +80,7 @@ const HeartDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
]);
};
$mount(HeartDemo, '#demo-heart');
Mount(HeartDemo, '#demo-heart');
```
### Star with Outline
@@ -106,7 +106,7 @@ const Star2Demo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
]);
};
$mount(Star2Demo, '#demo-star2');
Mount(Star2Demo, '#demo-star2');
```
### Read-only Rating
@@ -131,7 +131,7 @@ const ReadonlyDemo = () => {
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
]);
};
$mount(ReadonlyDemo, '#demo-readonly');
Mount(ReadonlyDemo, '#demo-readonly');
```
### Product Review
@@ -186,7 +186,7 @@ const ReviewDemo = () => {
])
]);
};
$mount(ReviewDemo, '#demo-review');
Mount(ReviewDemo, '#demo-review');
```
### All Variants
@@ -219,7 +219,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Interactive Feedback
@@ -268,5 +268,5 @@ const FeedbackDemo = () => {
: null
]);
};
$mount(FeedbackDemo, '#demo-feedback');
Mount(FeedbackDemo, '#demo-feedback');
```

10
docs/components/select.md
View File

@@ -56,7 +56,7 @@ const BasicDemo = () => {
onchange: (e) => selected(e.target.value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Reactive Display
@@ -85,7 +85,7 @@ const ReactiveDemo = () => {
Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Disabled State
@@ -110,7 +110,7 @@ const DisabledDemo = () => {
disabled: true
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Dynamic Items
@@ -160,7 +160,7 @@ const DynamicDemo = () => {
() => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -213,5 +213,5 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

16
docs/components/stack.md
View File

@@ -44,7 +44,7 @@ const BasicDemo = () => {
Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Card Stack
@@ -73,7 +73,7 @@ const CardsDemo = () => {
])
]);
};
$mount(CardsDemo, '#demo-cards');
Mount(CardsDemo, '#demo-cards');
```
### Avatar Stack
@@ -99,7 +99,7 @@ const AvatarsDemo = () => {
])
]);
};
$mount(AvatarsDemo, '#demo-avatars');
Mount(AvatarsDemo, '#demo-avatars');
```
### Image Stack
@@ -125,7 +125,7 @@ const ImagesDemo = () => {
])
]);
};
$mount(ImagesDemo, '#demo-images');
Mount(ImagesDemo, '#demo-images');
```
### Photo Gallery Stack
@@ -157,7 +157,7 @@ const GalleryDemo = () => {
)
]);
};
$mount(GalleryDemo, '#demo-gallery');
Mount(GalleryDemo, '#demo-gallery');
```
### Interactive Stack
@@ -197,7 +197,7 @@ const InteractiveDemo = () => {
])
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### Notification Stack
@@ -249,7 +249,7 @@ const NotificationsDemo = () => {
}, 'Clear All')
]);
};
$mount(NotificationsDemo, '#demo-notifications');
Mount(NotificationsDemo, '#demo-notifications');
```
### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/stat.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
})
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -94,7 +94,7 @@ const IconsDemo = () => {
})
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Reactive Values
@@ -137,7 +137,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Multiple Stats in Row
@@ -178,7 +178,7 @@ const MultipleDemo = () => {
})
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### Dashboard Example
@@ -243,7 +243,7 @@ const DashboardDemo = () => {
])
]);
};
$mount(DashboardDemo, '#demo-dashboard');
Mount(DashboardDemo, '#demo-dashboard');
```
### All Variants
@@ -288,7 +288,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Compact Stats
@@ -325,5 +325,5 @@ const CompactDemo = () => {
})
]);
};
$mount(CompactDemo, '#demo-compact');
Mount(CompactDemo, '#demo-compact');
```

16
docs/components/swap.md
View File

@@ -50,7 +50,7 @@ const BasicDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Icon Swap
@@ -73,7 +73,7 @@ const IconsDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Emoji Swap
@@ -96,7 +96,7 @@ const EmojiDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(EmojiDemo, '#demo-emoji');
Mount(EmojiDemo, '#demo-emoji');
```
### Custom Content Swap
@@ -119,7 +119,7 @@ const CustomDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
### With Reactive State
@@ -149,7 +149,7 @@ const ReactiveDemo = () => {
)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Toggle Mode Swap
@@ -200,7 +200,7 @@ const ModeDemo = () => {
])
]);
};
$mount(ModeDemo, '#demo-mode');
Mount(ModeDemo, '#demo-mode');
```
### All Variants
@@ -249,7 +249,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Simple Todo Toggle
@@ -288,5 +288,5 @@ const TodoDemo = () => {
})
]);
};
$mount(TodoDemo, '#demo-todo');
Mount(TodoDemo, '#demo-todo');
```

16
docs/components/table.md
View File

@@ -70,7 +70,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Zebra Stripes
@@ -101,7 +101,7 @@ const ZebraDemo = () => {
zebra: true
});
};
$mount(ZebraDemo, '#demo-zebra');
Mount(ZebraDemo, '#demo-zebra');
```
### With Custom Cell Rendering
@@ -147,7 +147,7 @@ const CustomDemo = () => {
zebra: true
});
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
### With Footers
@@ -195,7 +195,7 @@ const FooterDemo = () => {
zebra: true
});
};
$mount(FooterDemo, '#demo-footer');
Mount(FooterDemo, '#demo-footer');
```
### Empty State
@@ -223,7 +223,7 @@ const EmptyDemo = () => {
])
});
};
$mount(EmptyDemo, '#demo-empty');
Mount(EmptyDemo, '#demo-empty');
```
### Reactive Data
@@ -294,7 +294,7 @@ const ReactiveDemo = () => {
})
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### With Actions
@@ -354,7 +354,7 @@ const ActionsDemo = () => {
zebra: true
});
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### All Variants
@@ -408,5 +408,5 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

14
docs/components/tabs.md
View File

@@ -87,7 +87,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -126,7 +126,7 @@ const IconsDemo = () => {
]
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### With Tooltips
@@ -168,7 +168,7 @@ const TooltipsDemo = () => {
]
});
};
$mount(TooltipsDemo, '#demo-tooltips');
Mount(TooltipsDemo, '#demo-tooltips');
```
### Disabled Tab
@@ -207,7 +207,7 @@ const DisabledDemo = () => {
]
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Reactive Content
@@ -253,7 +253,7 @@ const ReactiveDemo = () => {
]
});
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Form Tabs
@@ -355,7 +355,7 @@ const FormTabs = () => {
])
]);
};
$mount(FormTabs, '#demo-form');
Mount(FormTabs, '#demo-form');
```
### All Variants
@@ -405,5 +405,5 @@ const VariantsDemo = () => {
Tabs({ items: createItems(active3), class: 'tabs-lifted' })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

16
docs/components/timeline.md
View File

@@ -60,7 +60,7 @@ const BasicDemo = () => {
return Timeline({ items: events });
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Horizontal Timeline
@@ -88,7 +88,7 @@ const HorizontalDemo = () => {
class: 'min-w-[600px]'
});
};
$mount(HorizontalDemo, '#demo-horizontal');
Mount(HorizontalDemo, '#demo-horizontal');
```
### Compact Timeline
@@ -114,7 +114,7 @@ const CompactDemo = () => {
compact: true
});
};
$mount(CompactDemo, '#demo-compact');
Mount(CompactDemo, '#demo-compact');
```
### Custom Icons
@@ -137,7 +137,7 @@ const IconsDemo = () => {
return Timeline({ items: milestones });
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Reactive Timeline
@@ -192,7 +192,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Order Status Tracker
@@ -234,7 +234,7 @@ const OrderDemo = () => {
))
]);
};
$mount(OrderDemo, '#demo-order');
Mount(OrderDemo, '#demo-order');
```
### Company History
@@ -259,7 +259,7 @@ const HistoryDemo = () => {
return Timeline({ items: milestones });
};
$mount(HistoryDemo, '#demo-history');
Mount(HistoryDemo, '#demo-history');
```
### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
Timeline({ items: sampleItems, compact: true })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

16
docs/components/toast.md
View File

@@ -44,7 +44,7 @@ const BasicDemo = () => {
}, 'Error Toast')
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Different Durations
@@ -77,7 +77,7 @@ const DurationDemo = () => {
}, '8 Seconds')
]);
};
$mount(DurationDemo, '#demo-duration');
Mount(DurationDemo, '#demo-duration');
```
### Interactive Toast
@@ -115,7 +115,7 @@ const InteractiveDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### Form Validation Toast
@@ -174,7 +174,7 @@ const FormToastDemo = () => {
}, 'Login')
]);
};
$mount(FormToastDemo, '#demo-form');
Mount(FormToastDemo, '#demo-form');
```
### Success Feedback
@@ -227,7 +227,7 @@ const FeedbackDemo = () => {
))
]);
};
$mount(FeedbackDemo, '#demo-feedback');
Mount(FeedbackDemo, '#demo-feedback');
```
### Error Handling
@@ -274,7 +274,7 @@ const ErrorDemo = () => {
}, 'Timeout')
]);
};
$mount(ErrorDemo, '#demo-error');
Mount(ErrorDemo, '#demo-error');
```
### Custom Messages
@@ -311,7 +311,7 @@ const CustomDemo = () => {
}, 'Security Alert')
]);
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
### Multiple Toasts
@@ -339,5 +339,5 @@ const MultipleDemo = () => {
}, 'Show Multiple Toasts')
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```

16
docs/components/tooltip.md
View File

@@ -58,7 +58,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Tooltip Positions
@@ -87,7 +87,7 @@ const PositionsDemo = () => {
])
]);
};
$mount(PositionsDemo, '#demo-positions');
Mount(PositionsDemo, '#demo-positions');
```
### Tooltip with Icons
@@ -116,7 +116,7 @@ const IconsDemo = () => {
])
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Form Field Tooltips
@@ -159,7 +159,7 @@ const FormDemo = () => {
])
]);
};
$mount(FormDemo, '#demo-form');
Mount(FormDemo, '#demo-form');
```
### Interactive Tooltip
@@ -201,7 +201,7 @@ const InteractiveDemo = () => {
])
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### Rich Tooltip Content
@@ -240,7 +240,7 @@ const RichDemo = () => {
])
]);
};
$mount(RichDemo, '#demo-rich');
Mount(RichDemo, '#demo-rich');
```
### Color Variants
@@ -278,7 +278,7 @@ const ColorsDemo = () => {
])
]);
};
$mount(ColorsDemo, '#demo-colors');
Mount(ColorsDemo, '#demo-colors');
```
### All Tooltip Positions
@@ -315,5 +315,5 @@ const AllPositionsDemo = () => {
])
]);
};
$mount(AllPositionsDemo, '#demo-all-positions');
Mount(AllPositionsDemo, '#demo-all-positions');
```