+ ))}
+
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7f17d3c..20386d7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,6 +9,7 @@ import Avatar from '@components/Avatar/Avatar.astro'
import Badge from '@components/Badge/Badge.astro'
import Button from '@components/Button/Button.astro'
import Checkbox from '@components/Checkbox/Checkbox.astro'
+import Collapsible from '@components/Collapsible/Collapsible.astro'
import Icon from '@components/Icon/Icon.astro'
import Input from '@components/Input/Input.astro'
import Menu from '@components/Menu/Menu.astro'
@@ -20,6 +21,7 @@ import Spinner from '@components/Spinner/Spinner.astro'
import Switch from '@components/Switch/Switch.astro'
import Table from '@components/Table/Table.astro'
import Tabs from '@components/Tabs/Tabs.astro'
+import Textarea from '@components/Textarea/Textarea.astro'
import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.astro'
import Timeline from '@components/Timeline/Timeline.astro'
import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
@@ -103,6 +105,12 @@ const tabItems = [{
+
+
+ This book has been rated for...
+ Expand
+
+
+
+
+
@@ -153,6 +164,9 @@ const tabItems = [{
+
+
+
@@ -171,6 +185,9 @@ const tabItems = [{
+
+
+
diff --git a/src/pages/popover.astro b/src/pages/popover.astro
new file mode 100644
index 0000000..1c08e9e
--- /dev/null
+++ b/src/pages/popover.astro
@@ -0,0 +1,262 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Button from '@components/Button/Button.astro'
+import AstroPopover from '@components/Popover/Popover.astro'
+import SveltePopover from '@components/Popover/Popover.svelte'
+import ReactPopover from '@components/Popover/Popover.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+ title: 'popovers',
+ components: [AstroPopover, SveltePopover, ReactPopover]
+})
+---
+
+
+
Popover
+
+
+
+
+
+ This is a popover created with an Astro component.
+
+
+
+
+
+
+ This is a popover created with a Svelte component.
+
+
+
+
+
+
+ This is a popover created with a React component.
+
+
+
+ This popover cannot be closed by clicking outside.
+ Using the button below will close the popover and remove the event listener, so the popover cannot be opened again.
+
+
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+
+
+
+ This is a popover
+
With rich content
+
+
+
+ ))}
+
+
+
diff --git a/src/pages/sheet.astro b/src/pages/sheet.astro
new file mode 100644
index 0000000..f6c4999
--- /dev/null
+++ b/src/pages/sheet.astro
@@ -0,0 +1,239 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Button from '@components/Button/Button.astro'
+import AstroSheet from '@components/Sheet/Sheet.astro'
+import SvelteSheet from '@components/Sheet/Sheet.svelte'
+import ReactSheet from '@components/Sheet/Sheet.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+ title: 'sheets',
+ components: [AstroSheet, SvelteSheet, ReactSheet]
+})
+---
+
+
+
Sheet
+
+
+
+
+
+
+ Click on the close icon, close button, overlay, or hit esc to close this sheet.
+
+
+
+
+
+
+
+
+
+
+
+ Click on the close icon, close button, overlay, or hit esc to close this sheet.
+
+
+
+
+
+
+
+
+
+
+
+ Click on the close icon, close button, overlay, or hit esc to close this sheet.
+
+
+
+
+
+
+
+ {sections.map((section, index) => (
+
{section.title}
+
+
+
+
+ Sheet with content only
+
+
+
+
+
+
+ Sheet with a title
+
+
+
+
+
+
+ Sheet with title and sub title
+
+
+
+
+
+
+ This sheet cannot be closed by clicking the esc button.
+
+
+
+
+
+
+ This sheet cannot be closed by clicking the overlay.
+
+
+
+
+
+
+ This sheet doesn't have a close button. It can only be closed by clicking on the overlay or using the esc button.
+
+
+
+
+
+
+ This sheet was created using the left position
+
+
+
+
+
+
+ This sheet was created using the top position
+
+
+
+
+
+
+ This sheet was created using the bottom position
+
+
+
+ ))}
+
+
+
diff --git a/src/pages/textarea.astro b/src/pages/textarea.astro
new file mode 100644
index 0000000..e885bff
--- /dev/null
+++ b/src/pages/textarea.astro
@@ -0,0 +1,89 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import AstroTextarea from '@components/Textarea/Textarea.astro'
+import SvelteTextarea from '@components/Textarea/Textarea.svelte'
+import ReactTextarea from '@components/Textarea/Textarea.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+ title: 'textareas',
+ components: [AstroTextarea, SvelteTextarea, ReactTextarea],
+ showSubTitle: true
+})
+---
+
+
+
Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {sections.map(section => (
+
{section.title}
+
+ {section.subTitle && }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
diff --git a/src/pages/toast.astro b/src/pages/toast.astro
index b0008cc..540c1a8 100644
--- a/src/pages/toast.astro
+++ b/src/pages/toast.astro
@@ -129,7 +129,7 @@ const sections = getSections({
-
+
@@ -138,11 +138,11 @@ const sections = getSections({
Original content
-
@@ -208,14 +208,12 @@ const sections = getSections({
})
});
- // Programmatically setting theme
+ // Programmatically setting position
[0, 1, 2].forEach(x => {
- on(`#themed-btn-${x}`, () => {
+ on(`#pos-btn-${x}`, () => {
toast({
- element: `#themed-toast-${x}`,
+ element: `#pos-toast-${x}`,
title: 'Title set through JS',
- content: 'Theme set to "success"',
- theme: 'success',
position: 'top-left'
})
})
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index 2ee21a8..2e1afb1 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -6,6 +6,7 @@ import Accordion from '@components/Accordion/Accordion.tsx'
import Badge from '@components/Badge/Badge.tsx'
import Button from '@components/Button/Button.tsx'
import Checkbox from '@components/Checkbox/Checkbox.tsx'
+import Collapsible from '@components/Collapsible/Collapsible.tsx'
import Icon from '@components/Icon/Icon.tsx'
import Input from '@components/Input/Input.tsx'
import Progress from '@components/Progress/Progress.tsx'
@@ -13,6 +14,7 @@ import Radio from '@components/Radio/Radio.tsx'
import Slider from '@components/Slider/Slider.tsx'
import Switch from '@components/Switch/Switch.tsx'
import Tabs from '@components/Tabs/Tabs.tsx'
+import Textarea from '@components/Textarea/Textarea.tsx'
import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.tsx'
import Toast from '@components/Toast/Toast.tsx'
@@ -28,6 +30,7 @@ const ReactPlayground = () => {
const [toggle, setToggle] = useState(false)
const [input, setInput] = useState('')
const [slider, setSlider] = useState(50)
+ const [wordCount, setWordCount] = useState(0)
return (