diff --git a/packages/DatePicker/docs/index.mdx b/packages/DatePicker/docs/index.mdx
index 37e7df1c9..065a850e8 100644
--- a/packages/DatePicker/docs/index.mdx
+++ b/packages/DatePicker/docs/index.mdx
@@ -6,9 +6,11 @@ title: DatePicker
usage: import { DatePicker } from @welcome-ui/date-picker
---
-### Props from react-datepicker
+### react-datepicker
-Simply add on DatePicker the props from [react-datepicker](https://github.com/Hacker0x01/react-datepicker)
+It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepicker) library.
+
+_Note_: Pass a value of `null` if you don't want the default value of `Date.now()`.
diff --git a/packages/DateTimePicker/docs/index.mdx b/packages/DateTimePicker/docs/index.mdx
index b97d86b70..78bbeff15 100644
--- a/packages/DateTimePicker/docs/index.mdx
+++ b/packages/DateTimePicker/docs/index.mdx
@@ -6,7 +6,9 @@ title: DateTimePicker
usage: import { DateTimePicker } from @welcome-ui/date-time-picker
---
-It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepicker) library. [All the props](https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepicker.md) the library exposes can be passed to either DatePicker or TimePicker.
+### react-datepicker
+
+It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepicker) library.
_Note_: Pass a value of `null` if you don't want the default value of `Date.now()`.
diff --git a/packages/DropdownMenu/docs/index.mdx b/packages/DropdownMenu/docs/index.mdx
index 6ceb42854..56aa7ea6e 100644
--- a/packages/DropdownMenu/docs/index.mdx
+++ b/packages/DropdownMenu/docs/index.mdx
@@ -1,6 +1,6 @@
---
ariakit: https://ariakit.org/components/menu
-category: forms
+category: navigation
description: The Dropdown Menu component is a navigational element that reveals a list of options or actions when triggered by a user interaction, such as clicking a button. It provides a compact and efficient way to present multiple choices without cluttering the interface. Dropdown menus enhance usability by organizing related items in a hierarchical structure, making it easier for users to find and select options.
packageName: dropdown-menu
title: DropdownMenu
diff --git a/packages/Stack/docs/examples/childs.tsx b/packages/Stack/docs/examples/childs.tsx
new file mode 100644
index 000000000..da27ad797
--- /dev/null
+++ b/packages/Stack/docs/examples/childs.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+ return (
+
+
Foo
+
Bar
+
Baz
+
+ )
+}
+
+export default Example
diff --git a/packages/Stack/docs/examples/overview.tsx b/packages/Stack/docs/examples/overview.tsx
new file mode 100644
index 000000000..a74dcc338
--- /dev/null
+++ b/packages/Stack/docs/examples/overview.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+ return (
+
+
Foo
+
Bar
+
Baz
+
+ )
+}
+
+export default Example
diff --git a/packages/Stack/docs/examples/spacing.tsx b/packages/Stack/docs/examples/spacing.tsx
new file mode 100644
index 000000000..6835679d2
--- /dev/null
+++ b/packages/Stack/docs/examples/spacing.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+ return (
+
+
Foo
+
Bar
+
Baz
+
+ )
+}
+
+export default Example
diff --git a/packages/Stack/docs/index.mdx b/packages/Stack/docs/index.mdx
new file mode 100644
index 000000000..ec75b2994
--- /dev/null
+++ b/packages/Stack/docs/index.mdx
@@ -0,0 +1,21 @@
+---
+category: layout
+description: The Stack component is a layout element that arranges child components in a vertical or horizontal stack with consistent spacing. It simplifies the creation of flexible and responsive layouts by managing the alignment, spacing, and distribution of its children. This component is ideal for organizing content in a structured and visually appealing manner.
+packageName: stack
+title: Slider
+usage: import { Stack } from '@welcome-ui/stack
+---
+
+The default use of `Stack` will stack its children vertically.
+
+### Spacing and direction
+
+You can change the `direction` & the `spacing`.
+
+
+
+### Childs
+
+It will ensure that its children are `li`s when is rendered as an `ul` or an `ol`.
+
+
diff --git a/packages/Stack/docs/properties.json b/packages/Stack/docs/properties.json
new file mode 100644
index 000000000..cbb8a409f
--- /dev/null
+++ b/packages/Stack/docs/properties.json
@@ -0,0 +1,81 @@
+{
+ "Stack": {
+ "props": {
+ "direction": {
+ "defaultValue": {
+ "value": "column"
+ },
+ "description": "",
+ "name": "direction",
+ "parent": {
+ "fileName": "Stack/src/index.tsx",
+ "name": "StackOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Stack/src/index.tsx",
+ "name": "StackOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "\"row\" | \"column\"",
+ "value": [
+ {
+ "value": "\"row\""
+ },
+ {
+ "value": "\"column\""
+ }
+ ]
+ }
+ },
+ "spacing": {
+ "defaultValue": {
+ "value": "md"
+ },
+ "description": "",
+ "name": "spacing",
+ "parent": {
+ "fileName": "Stack/src/index.tsx",
+ "name": "StackOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Stack/src/index.tsx",
+ "name": "StackOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "\"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\"",
+ "value": [
+ {
+ "value": "\"xxs\""
+ },
+ {
+ "value": "\"xs\""
+ },
+ {
+ "value": "\"sm\""
+ },
+ {
+ "value": "\"md\""
+ },
+ {
+ "value": "\"lg\""
+ },
+ {
+ "value": "\"xl\""
+ },
+ {
+ "value": "\"xxl\""
+ }
+ ]
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/Swiper/docs/examples/autoplay.tsx b/packages/Swiper/docs/examples/autoplay.tsx
new file mode 100644
index 000000000..ea4230b6e
--- /dev/null
+++ b/packages/Swiper/docs/examples/autoplay.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+ const swiper = useSwiper({ autoplay: true, loop: true })
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/centered.tsx b/packages/Swiper/docs/examples/centered.tsx
new file mode 100644
index 000000000..3545c2012
--- /dev/null
+++ b/packages/Swiper/docs/examples/centered.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+ const swiper = useSwiper({ firstSlideToShow: 2, centeredSlides: true })
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/dark.tsx b/packages/Swiper/docs/examples/dark.tsx
new file mode 100644
index 000000000..f9bb9970f
--- /dev/null
+++ b/packages/Swiper/docs/examples/dark.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+import { Box } from '@welcome-ui/box'
+
+const Example = () => {
+ const swiper = useSwiper({
+ slidesPerView: { mobile: 1, tablet: 2, desktop: 4 },
+ withPagination: { mobile: true, desktop: true },
+ withDarkUI: true,
+ })
+
+ return (
+
+ {[...Array(6)].map(item => (
+
+ ))}
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/first.tsx b/packages/Swiper/docs/examples/first.tsx
new file mode 100644
index 000000000..b20cef8fb
--- /dev/null
+++ b/packages/Swiper/docs/examples/first.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+ const swiper = useSwiper({ firstSlideToShow: 2 })
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/no-navigation.tsx b/packages/Swiper/docs/examples/no-navigation.tsx
new file mode 100644
index 000000000..4e65fe152
--- /dev/null
+++ b/packages/Swiper/docs/examples/no-navigation.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+ const swiper = useSwiper({ withNavigation: { mobile: false, desktop: false } })
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/overview.tsx b/packages/Swiper/docs/examples/overview.tsx
new file mode 100644
index 000000000..1c933e8a0
--- /dev/null
+++ b/packages/Swiper/docs/examples/overview.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+ const swiper = useSwiper({ spaceBetween: 0 })
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/pagination.tsx b/packages/Swiper/docs/examples/pagination.tsx
new file mode 100644
index 000000000..bec4822d9
--- /dev/null
+++ b/packages/Swiper/docs/examples/pagination.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+ const swiper = useSwiper({ withPagination: { mobile: true, desktop: true } })
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/slides-per-view.tsx b/packages/Swiper/docs/examples/slides-per-view.tsx
new file mode 100644
index 000000000..6612b7442
--- /dev/null
+++ b/packages/Swiper/docs/examples/slides-per-view.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+ const swiper = useSwiper({ slidesPerView: { mobile: 1, tablet: 1, desktop: 2 } })
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/index.mdx b/packages/Swiper/docs/index.mdx
new file mode 100644
index 000000000..81c00a3be
--- /dev/null
+++ b/packages/Swiper/docs/index.mdx
@@ -0,0 +1,49 @@
+---
+category: data-display
+description: The Swiper component is an interactive UI element that allows users to navigate through a series of content panels or images by swiping left or right. It provides a smooth and responsive experience for browsing content, making it ideal for image galleries, slideshows, and mobile interfaces. This component enhances user engagement by enabling intuitive and fluid navigation.
+packageName: swiper
+title: Swiper
+usage: import { Swiper, useSwiper } from '@welcome-ui/swiper
+---
+
+### Slides per view
+
+Providing `slidesPerView` with `{ mobile: 1, tablet: 1, desktop: 2 }` will show 1 slide per view on mobile and tablet and 2 slides per view on desktop.
+
+
+
+### First slide to show
+
+By providing `firstSlideToShow` with `2`, the swiper will begin on the second slide.
+
+
+
+### Centered slides
+
+By providing `centeredSlides`, the swiper will begin on the middle slide, `firstSlideToShow` won't be used in this case.
+
+
+
+### Autoplay
+
+Providing `autoplay` lets the slides advance automatically. Pass `duration` to control the amount of time each slide shows for.
+
+
+
+### With pagination
+
+By providing the optional `withPagination` with `{ mobile: true, desktop: true }`, you can activate the pagination on mobile/tablet and on desktop.
+
+
+
+### Without navigation
+
+By providing the optional `withNavigation` with `{ mobile: false, desktop: false }`, you can hide the navigation arrows on mobile/tablet and desktop, you still can scroll between slides.
+
+
+
+### With dark UI
+
+Use dark (black) colors for the pagination and arrows in case of slides too bright with `withDarkUI` props.
+
+
diff --git a/packages/Swiper/docs/properties.json b/packages/Swiper/docs/properties.json
new file mode 100644
index 000000000..defee4fc0
--- /dev/null
+++ b/packages/Swiper/docs/properties.json
@@ -0,0 +1,5 @@
+{
+ "Swiper": {
+ "props": {}
+ }
+}
\ No newline at end of file
diff --git a/packages/Table/docs/examples/overview.tsx b/packages/Table/docs/examples/overview.tsx
new file mode 100644
index 000000000..c10542f42
--- /dev/null
+++ b/packages/Table/docs/examples/overview.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Table } from '@welcome-ui/table'
+import { Button } from '@welcome-ui/button'
+import { SettingsIcon } from '@welcome-ui/icons'
+
+const Example = () => {
+ return (
+
+
+
+ Name
+ Description
+ Number
+
+ Actions
+
+
+
+
+
+ Consectetur
+ Lorem ipsum dolor sit amet
+ 23
+
+
+
+
+
+ Suspendisse
+ Pellentesque a maximus magna
+ 41
+
+
+
+
+
+ Ullamcorper
+ Cras viverra ac erat ullamcorper maximus
+ 8
+
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Table/docs/examples/states.tsx b/packages/Table/docs/examples/states.tsx
new file mode 100644
index 000000000..260d8e54d
--- /dev/null
+++ b/packages/Table/docs/examples/states.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react'
+import { Table } from '@welcome-ui/table'
+import { Button } from '@welcome-ui/button'
+import { SettingsIcon } from '@welcome-ui/icons'
+
+const Example = () => {
+ return (
+
+
+
+ Name
+ Description
+ Number
+ Actions
+
+
+
+
+ Consectetur
+ Lorem ipsum dolor sit amet
+ 23
+
+
+
+
+
+ Suspendisse
+ Pellentesque a maximus magna
+ 41
+
+
+
+
+
+ Ullamcorper
+ Cras viverra ac erat ullamcorper maximus
+ 8
+
+
+
+
+
+ Vestibulum
+ Aliquam erat volutpat
+ 102
+
+
+
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Table/docs/index.mdx b/packages/Table/docs/index.mdx
new file mode 100644
index 000000000..99aa9ad01
--- /dev/null
+++ b/packages/Table/docs/index.mdx
@@ -0,0 +1,15 @@
+---
+category: data-display
+description: The Table component is a structured layout element used to display data in rows and columns. It provides a clear and organized way to present large amounts of information, supporting features like sorting, filtering, and pagination. This component is essential for applications that require the display of tabular data, enhancing readability and usability.
+packageName: table
+title: Table
+usage: import { Table } from '@welcome-ui/table
+---
+
+Use `Table`, `Table.Thead`, `Table.Th`, `Table.Tbody`, `Table.Td`, `Table.Tr`.
+
+### With state
+
+You can use one of `success`, `error`, `warning` or `info` and add `indent` on Table for more spacing.
+
+
diff --git a/packages/Table/docs/properties.json b/packages/Table/docs/properties.json
new file mode 100644
index 000000000..a07b5615e
--- /dev/null
+++ b/packages/Table/docs/properties.json
@@ -0,0 +1,66 @@
+{
+ "Table": {
+ "props": {
+ "indent": {
+ "defaultValue": null,
+ "description": "Add space on first and last child on the Td and Th component",
+ "name": "indent",
+ "parent": {
+ "fileName": "Table/src/index.tsx",
+ "name": "TableOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Table/src/index.tsx",
+ "name": "TableOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ }
+ }
+ },
+ "TableComponent": {
+ "props": {
+ "indent": {
+ "defaultValue": null,
+ "description": "Add space on first and last child on the Td and Th component",
+ "name": "indent",
+ "parent": {
+ "fileName": "Table/src/index.tsx",
+ "name": "TableOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Table/src/index.tsx",
+ "name": "TableOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/Tabs/docs/examples/badge.tsx b/packages/Tabs/docs/examples/badge.tsx
new file mode 100644
index 000000000..a3ab8de7b
--- /dev/null
+++ b/packages/Tabs/docs/examples/badge.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { Tab, useTab } from '@welcome-ui/tabs'
+import { Badge } from '@welcome-ui/badge'
+import { HeartIcon } from '@welcome-ui/icons'
+
+const Example = () => {
+ const tab = useTab({ defaultSelectedId: 'tab2' })
+ const selectedId = tab.useState('selectedId')
+
+ const getVariant = (item: string) => (selectedId === item ? 'primary' : 'default')
+
+ return (
+ <>
+
+
+ Tab 1new
+
+
+ Tab 2old
+
+ 2
+
+
+
+ Tab 3
+
+
+
+ {' '}
+ Tab 4
+
+
+
+ Tab.Panel 1
+
+
+ Tab.Panel 2
+
+
+ Tab.Panel 3
+
+
+ Tab.Panel 4
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tabs/docs/examples/component.tsx b/packages/Tabs/docs/examples/component.tsx
new file mode 100644
index 000000000..2eb206de8
--- /dev/null
+++ b/packages/Tabs/docs/examples/component.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Tab, useTab } from '@welcome-ui/tabs'
+
+const Example = () => {
+ const tab = useTab({ defaultSelectedId: 'tab1' })
+
+ return (
+ <>
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+ Tab.Panel 1
+
+
+ Tab.Panel 2
+
+
+ Tab.Panel 3
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tabs/docs/examples/no-border.tsx b/packages/Tabs/docs/examples/no-border.tsx
new file mode 100644
index 000000000..f6a39d4f1
--- /dev/null
+++ b/packages/Tabs/docs/examples/no-border.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Tab, useTab } from '@welcome-ui/tabs'
+
+const Example = () => {
+ const tab = useTab({ defaultSelectedId: 'tab1' })
+
+ return (
+ <>
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+ Tab 4
+
+
+ Tab 5
+
+
+
+ Tab.Panel 1
+
+
+ Tab.Panel 2
+
+
+ Tab.Panel 3
+
+
+ Tab.Panel 4
+
+
+ Tab.Panel 5
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tabs/docs/examples/one.tsx b/packages/Tabs/docs/examples/one.tsx
new file mode 100644
index 000000000..dc154bc98
--- /dev/null
+++ b/packages/Tabs/docs/examples/one.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Tab, useTab } from '@welcome-ui/tabs'
+
+const Example = () => {
+ const tab = useTab({ defaultSelectedId: 'tab1' })
+
+ return (
+ <>
+
+
+ Tab 1
+
+
+
+ Tab.Panel 1
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tabs/docs/examples/overview.tsx b/packages/Tabs/docs/examples/overview.tsx
new file mode 100644
index 000000000..f8e307394
--- /dev/null
+++ b/packages/Tabs/docs/examples/overview.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Tab, useTab } from '@welcome-ui/tabs'
+
+const Example = () => {
+ const tab = useTab({ defaultSelectedId: 'tab1' })
+
+ return (
+ <>
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+ Tab 4
+
+
+ Tab 5
+
+
+
+ Tab.Panel 1
+
+
+ Tab.Panel 2
+
+
+ Tab.Panel 3
+
+
+ Tab.Panel 4
+
+
+ Tab.Panel 5
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tabs/docs/examples/sizes.tsx b/packages/Tabs/docs/examples/sizes.tsx
new file mode 100644
index 000000000..d02b0b486
--- /dev/null
+++ b/packages/Tabs/docs/examples/sizes.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { Tab, useTab } from '@welcome-ui/tabs'
+
+const Example = () => {
+ const tab = useTab({ defaultSelectedId: 'tab1' })
+
+ return (
+ <>
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+ Tab.Panel 1
+
+
+ Tab.Panel 2
+
+
+ Tab.Panel 3
+
+ {/* sm size */}
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+ Tab.Panel 1
+
+
+ Tab.Panel 2
+
+
+ Tab.Panel 3
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tabs/docs/examples/vertical.tsx b/packages/Tabs/docs/examples/vertical.tsx
new file mode 100644
index 000000000..7efe24e20
--- /dev/null
+++ b/packages/Tabs/docs/examples/vertical.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Box } from '@welcome-ui/box'
+import { Tab, useTab } from '@welcome-ui/tabs'
+
+const Example = () => {
+ const tab = useTab({ orientation: 'vertical', defaultSelectedId: 'tab2' })
+
+ return (
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+ Tab 4
+
+
+
+ Tab.Panel 1
+
+
+ Tab.Panel 2
+
+
+ Tab.Panel 3
+
+
+ Tab.Panel 4
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Tabs/docs/index.mdx b/packages/Tabs/docs/index.mdx
new file mode 100644
index 000000000..c37897177
--- /dev/null
+++ b/packages/Tabs/docs/index.mdx
@@ -0,0 +1,53 @@
+---
+category: navigation
+description: The Tabs component is a navigational element that allows users to switch between different views or sections of content within the same page. Each tab is associated with a content panel, and clicking a tab displays the corresponding panel while hiding others. This component helps organize content efficiently and improves user experience by providing easy access to different sections without leaving the current page.
+packageName: tabs
+title: Tabs
+usage: import { Tabs, useTabs } from '@welcome-ui/tabs
+---
+
+Use `Table`, `Table.Thead`, `Table.Th`, `Table.Tbody`, `Table.Td`, `Table.Tr`.
+
+### Sizes
+
+Size is set on Tab.List. Available sizes are `sm` and `md`. By default size is set to `md`.
+
+
+
+### With no border
+
+The border on `Tab.List` is an inset shadow that you can customize or disable via the `boxShadow` style prop
+
+
+
+### With a badge
+
+Add badges, icons and images in tab.
+
+
+
+### Use another component
+
+Use another component in tab.
+
+
+
+### One tab
+
+Active bar doesn't display with only one tab.
+
+
+
+### Vertical
+
+Set the tab orientation by providing the `orientation` prop to the tab state
+
+
+
+## useTab
+
+We use `useTab` from [Ariakit Tab](https://ariakit.org/reference/use-tab-store) for the state of the Tab.
+
+Pass options to `useTab`:
+
+- **defaultSelectedId**: e.g. `const store = useTab({ defaultSelectedId: 'tab2' })`
diff --git a/packages/Tabs/docs/properties.json b/packages/Tabs/docs/properties.json
new file mode 100644
index 000000000..13e23ba2c
--- /dev/null
+++ b/packages/Tabs/docs/properties.json
@@ -0,0 +1,577 @@
+{
+ "ActiveBar": {
+ "props": {
+ "activeTab": {
+ "defaultValue": null,
+ "description": "",
+ "name": "activeTab",
+ "parent": {
+ "fileName": "Tabs/src/ActiveBar.tsx",
+ "name": "ActiveBarOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tabs/src/ActiveBar.tsx",
+ "name": "ActiveBarOptions"
+ }
+ ],
+ "required": true,
+ "type": {
+ "name": "HTMLElement"
+ }
+ },
+ "listRef": {
+ "defaultValue": null,
+ "description": "",
+ "name": "listRef",
+ "parent": {
+ "fileName": "Tabs/src/ActiveBar.tsx",
+ "name": "ActiveBarOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tabs/src/ActiveBar.tsx",
+ "name": "ActiveBarOptions"
+ }
+ ],
+ "required": true,
+ "type": {
+ "name": "MutableRefObject"
+ }
+ }
+ }
+ },
+ "Tab": {
+ "props": {
+ "combobox": {
+ "defaultValue": null,
+ "description": "A reference to a [combobox\nstore](https://ariakit.org/reference/use-combobox-store). This is\nautomatically set when rendering tabs inside a\n[Combobox](https://ariakit.org/components/combobox).\n\nLive examples:\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)",
+ "name": "combobox",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "ComboboxStore"
+ }
+ },
+ "composite": {
+ "defaultValue": null,
+ "description": "A reference to another [composite\nstore](https://ariakit.org/reference/use-composite-store). This is\nautomatically set when rendering tabs as part of another composite widget,\nsuch as [Combobox](https://ariakit.org/components/combobox) or\n[Select](https://ariakit.org/components/select).\n\nLive examples:\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)",
+ "name": "composite",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "CompositeStore"
+ }
+ },
+ "defaultActiveId": {
+ "defaultValue": null,
+ "description": "The composite item id that should be active by default when the composite\nwidget is rendered. If `null`, the composite element itself will have focus\nand users will be able to navigate to it using arrow keys. If `undefined`,\nthe first enabled item will be focused.",
+ "name": "defaultActiveId",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts",
+ "name": "CompositeStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts",
+ "name": "CompositeStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "defaultItems": {
+ "defaultValue": {
+ "value": "[]"
+ },
+ "description": "The defaut value for the\n[`items`](https://ariakit.org/reference/collection-provider#items) state.",
+ "name": "defaultItems",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/core/cjs/collection/collection-store.d.ts",
+ "name": "CollectionStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/core/cjs/collection/collection-store.d.ts",
+ "name": "CollectionStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "TabStoreItem[]"
+ }
+ },
+ "defaultSelectedId": {
+ "defaultValue": null,
+ "description": "The id of the tab whose panel is currently visible. If it's `undefined`, it\nwill be automatically set to the first enabled tab.\n\nLive examples:\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)\n- [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)",
+ "name": "defaultSelectedId",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "setActiveId": {
+ "defaultValue": null,
+ "description": "A callback that gets called when the\n[`activeId`](https://ariakit.org/reference/composite-provider#activeid)\nstate changes.",
+ "name": "setActiveId",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/composite/composite-store.d.ts",
+ "name": "CompositeStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/composite/composite-store.d.ts",
+ "name": "CompositeStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(activeId: string) => void"
+ }
+ },
+ "setItems": {
+ "defaultValue": null,
+ "description": "A callback that gets called when the\n[`items`](https://ariakit.org/reference/collection-provider#items) state\nchanges.\n@example const [items, setItems] = useState([]);\nconst collection = useCollectionStore({ items, setItems });",
+ "name": "setItems",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-store.d.ts",
+ "name": "CollectionStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-store.d.ts",
+ "name": "CollectionStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "BivariantCallback<(items: TabStoreItem[]) => void>"
+ }
+ },
+ "setSelectedId": {
+ "defaultValue": null,
+ "description": "Function that will be called when the\n[`selectedId`](https://ariakit.org/reference/tab-provider#selectedid) state\nchanges.\n\nLive examples:\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)",
+ "name": "setSelectedId",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts",
+ "name": "TabStoreOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(selectedId: string) => void"
+ }
+ }
+ }
+ },
+ "Tabs.TabList": {
+ "props": {
+ "size": {
+ "defaultValue": {
+ "value": "md"
+ },
+ "description": "",
+ "name": "size",
+ "parent": {
+ "fileName": "Tabs/src/TabList.tsx",
+ "name": "SizeOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tabs/src/TabList.tsx",
+ "name": "SizeOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "\"sm\" | \"md\"",
+ "value": [
+ {
+ "value": "\"sm\""
+ },
+ {
+ "value": "\"md\""
+ }
+ ]
+ }
+ }
+ }
+ },
+ "Tabs.TabPanel": {
+ "props": {
+ "accessibleWhenDisabled": {
+ "defaultValue": null,
+ "description": "Indicates whether the element should be focusable even when it is\n[`disabled`](https://ariakit.org/reference/focusable#disabled).\n\nThis is important when discoverability is a concern. For example:\n\n> A toolbar in an editor contains a set of special smart paste functions\nthat are disabled when the clipboard is empty or when the function is not\napplicable to the current content of the clipboard. It could be helpful to\nkeep the disabled buttons focusable if the ability to discover their\nfunctionality is primarily via their presence on the toolbar.\n\nLearn more on [Focusability of disabled\ncontrols](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n\nLive examples:\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)",
+ "name": "accessibleWhenDisabled",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "alwaysVisible": {
+ "defaultValue": {
+ "value": "false"
+ },
+ "description": "Determines whether the content element should remain visible even when the\n[`open`](https://ariakit.org/reference/disclosure-provider#open) state is\n`false`. If this prop is set to `true`, the `hidden` prop and the `display:\nnone` style will not be applied, unless explicitly set otherwise.\n\nThis prop is particularly useful when using third-party animation libraries\nsuch as Framer Motion or React Spring, where the element needs to be\nvisible for exit animations to work.\n\nLive examples:\n- [Dialog with Framer\n Motion](https://ariakit.org/examples/dialog-framer-motion)\n- [Menu with Framer\n Motion](https://ariakit.org/examples/menu-framer-motion)\n- [Tooltip with Framer\n Motion](https://ariakit.org/examples/tooltip-framer-motion)\n- [Dialog with details &\n summary](https://ariakit.org/examples/dialog-details)",
+ "name": "alwaysVisible",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/disclosure/disclosure-content.d.ts",
+ "name": "DisclosureContentOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/disclosure/disclosure-content.d.ts",
+ "name": "DisclosureContentOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "autoFocus": {
+ "defaultValue": {
+ "value": "false"
+ },
+ "description": "Automatically focuses the element upon mounting, similar to the native\n`autoFocus` prop. This addresses an issue where the element with the native\n`autoFocus` attribute might receive focus before React effects are\nexecuted.\n\nThe `autoFocus` prop can also be used with\n[Focusable](https://ariakit.org/components/focusable) elements within a\n[Dialog](https://ariakit.org/components/dialog) component, establishing the\ninitial focus as the dialog opens.\n\n**Note**: For this prop to work, the\n[`focusable`](https://ariakit.org/reference/command#focusable) prop must be\nset to `true`, if it's not set by default.\n\nLive examples:\n- [Warning on Dialog\n hide](https://ariakit.org/examples/dialog-hide-warning)\n- [Dialog with React\n Router](https://ariakit.org/examples/dialog-react-router)\n- [Nested Dialog](https://ariakit.org/examples/dialog-nested)",
+ "name": "autoFocus",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "disabled": {
+ "defaultValue": {
+ "value": "false"
+ },
+ "description": "Determines if the element is disabled. This sets the `aria-disabled`\nattribute accordingly, enabling support for all elements, including those\nthat don't support the native `disabled` attribute.\n\nThis feature can be combined with the\n[`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled)\nprop to make disabled elements still accessible via keyboard.\n\n**Note**: For this prop to work, the\n[`focusable`](https://ariakit.org/reference/command#focusable) prop must be\nset to `true`, if it's not set by default.\n\nLive examples:\n- [Submenu](https://ariakit.org/examples/menu-nested)\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)\n- [Context Menu](https://ariakit.org/examples/menu-context-menu)",
+ "name": "disabled",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "focusable": {
+ "defaultValue": {
+ "value": "true"
+ },
+ "description": "Determines if [Focusable](https://ariakit.org/components/focusable)\nfeatures should be active on non-native focusable elements.\n\n**Note**: This prop only turns off the additional features provided by the\n[`Focusable`](https://ariakit.org/reference/focusable) component.\nNon-native focusable elements will lose their focusability entirely.\nHowever, native focusable elements will retain their inherent focusability,\nbut without added features such as improved\n[`autoFocus`](https://ariakit.org/reference/focusable#autofocus),\n[`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),\n[`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),\netc.",
+ "name": "focusable",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "getItem": {
+ "defaultValue": null,
+ "description": "A memoized function that returns props to be passed with the item during\nits registration in the store.\n@example ```jsx\nconst getItem = useCallback((data) => ({ ...data, custom: true }), []);\n\n```",
+ "name": "getItem",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-item.d.ts",
+ "name": "CollectionItemOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-item.d.ts",
+ "name": "CollectionItemOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(props: CollectionStoreItem) => CollectionStoreItem"
+ }
+ },
+ "id": {
+ "defaultValue": null,
+ "description": "The unique ID of the item. This will be used to register the item in the\nstore and for the element's `id` attribute. If not provided, a unique ID\nwill be automatically generated.\n\nLive examples:\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)\n- [Tab with React Router](https://ariakit.org/examples/tab-react-router)\n- [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)",
+ "name": "id",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-item.d.ts",
+ "name": "CollectionItemOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-item.d.ts",
+ "name": "CollectionItemOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "onFocusVisible": {
+ "defaultValue": null,
+ "description": "Custom event handler invoked when the element gains focus through keyboard\ninteraction or a key press occurs while the element is in focus. This is\nthe programmatic equivalent of the\n[`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible)\nattribute.\n\n**Note**: For this prop to work, the\n[`focusable`](https://ariakit.org/reference/command#focusable) prop must be\nset to `true`, if it's not set by default.\n\nLive examples:\n- [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)\n- [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)",
+ "name": "onFocusVisible",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/focusable/focusable.d.ts",
+ "name": "FocusableOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "BivariantCallback<(event: SyntheticEvent) => void>"
+ }
+ },
+ "render": {
+ "defaultValue": null,
+ "description": "Allows the component to be rendered as a different HTML element or React\ncomponent. The value can be a React element or a function that takes in the\noriginal component props and gives back a React element with the props\nmerged.\n\nCheck out the [Composition](https://ariakit.org/guide/composition) guide\nfor more details.",
+ "name": "render",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/utils/types.d.ts",
+ "name": "Options"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/utils/types.d.ts",
+ "name": "Options"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "ReactElement> | RenderProp & { ref?: Ref; }>",
+ "value": [
+ {
+ "value": "ReactElement>",
+ "description": "",
+ "fullComment": "",
+ "tags": {}
+ },
+ {
+ "value": "RenderProp & { ref?: Ref; }>",
+ "description": "",
+ "fullComment": "",
+ "tags": {}
+ }
+ ]
+ }
+ },
+ "shouldRegisterItem": {
+ "defaultValue": {
+ "value": "true"
+ },
+ "description": "Whether the item should be registered as part of the collection.",
+ "name": "shouldRegisterItem",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-item.d.ts",
+ "name": "CollectionItemOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/collection/collection-item.d.ts",
+ "name": "CollectionItemOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "tabId": {
+ "defaultValue": null,
+ "description": "The [`id`](https://ariakit.org/reference/tab#id) of the tab controlling\nthis panel. This connection is used to assign the `aria-labelledby`\nattribute to the tab panel and to determine if the tab panel should be\nvisible.\n\nThis link is automatically established by matching the order of\n[`Tab`](https://ariakit.org/reference/tab) and\n[`TabPanel`](https://ariakit.org/reference/tab-panel) elements in the DOM.\nIf you're rendering a single tab panel, this can be set to a dynamic value\nthat refers to the selected tab.\n\nLive examples:\n- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)\n- [Tab with React Router](https://ariakit.org/examples/tab-react-router)\n- [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)",
+ "name": "tabId",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-panel.d.ts",
+ "name": "TabPanelOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tab/tab-panel.d.ts",
+ "name": "TabPanelOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "unmountOnHide": {
+ "defaultValue": {
+ "value": "false"
+ },
+ "description": "When set to `true`, the content element will be unmounted and removed from\nthe DOM when it's hidden.\n\nLive examples:\n- [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)\n- [Combobox with integrated\n filter](https://ariakit.org/examples/combobox-filtering-integrated)\n- [Textarea with inline\n Combobox](https://ariakit.org/examples/combobox-textarea)\n- [Standalone Popover](https://ariakit.org/examples/popover-standalone)\n- [Animated Select](https://ariakit.org/examples/select-animated)\n- [Multi-Select](https://ariakit.org/examples/select-multiple)",
+ "name": "unmountOnHide",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/disclosure/disclosure-content.d.ts",
+ "name": "DisclosureContentOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/disclosure/disclosure-content.d.ts",
+ "name": "DisclosureContentOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "wrapElement": {
+ "defaultValue": null,
+ "description": "",
+ "name": "wrapElement",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/utils/types.d.ts",
+ "name": "Options"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/utils/types.d.ts",
+ "name": "Options"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "WrapElement"
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/Tag/docs/examples/clickable.tsx b/packages/Tag/docs/examples/clickable.tsx
new file mode 100644
index 000000000..61d90e691
--- /dev/null
+++ b/packages/Tag/docs/examples/clickable.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+
+const Example = () => {
+ return (
+ alert('clicked')} size="xs">
+ Clickable tag
+
+ )
+}
+
+export default Example
diff --git a/packages/Tag/docs/examples/on-remove.tsx b/packages/Tag/docs/examples/on-remove.tsx
new file mode 100644
index 000000000..f6ddd8dd8
--- /dev/null
+++ b/packages/Tag/docs/examples/on-remove.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+import { Text } from '@welcome-ui/text'
+
+const Example = () => {
+ const [isHide, setHide] = React.useState(false)
+
+ return isHide ? (
+
+ Tag removed
+
+ ) : (
+ <>
+ setHide(true)}>Example of remove tag
+ setHide(true)} size="sm">
+ small
+
+ setHide(true)} variant="success">
+ success
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tag/docs/examples/one-character.tsx b/packages/Tag/docs/examples/one-character.tsx
new file mode 100644
index 000000000..6e47720e7
--- /dev/null
+++ b/packages/Tag/docs/examples/one-character.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+
+const Example = () => {
+ return (
+ <>
+ 1
+ 1
+ 1
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tag/docs/examples/overview.tsx b/packages/Tag/docs/examples/overview.tsx
new file mode 100644
index 000000000..2fa99c957
--- /dev/null
+++ b/packages/Tag/docs/examples/overview.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+
+const Example = () => {
+ return Default
+}
+
+export default Example
diff --git a/packages/Tag/docs/examples/sizes.tsx b/packages/Tag/docs/examples/sizes.tsx
new file mode 100644
index 000000000..a42a89351
--- /dev/null
+++ b/packages/Tag/docs/examples/sizes.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+
+const Example = () => {
+ return (
+ <>
+ Tiny
+ Small
+ Medium
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tag/docs/examples/variants-basics.tsx b/packages/Tag/docs/examples/variants-basics.tsx
new file mode 100644
index 000000000..8c6337edc
--- /dev/null
+++ b/packages/Tag/docs/examples/variants-basics.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+
+const Example = () => {
+ return (
+ <>
+ Default
+ Primary
+ Secondary
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tag/docs/examples/variants-states.tsx b/packages/Tag/docs/examples/variants-states.tsx
new file mode 100644
index 000000000..5552f6e33
--- /dev/null
+++ b/packages/Tag/docs/examples/variants-states.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+
+const Example = () => {
+ return (
+ <>
+ Success
+ Error
+ Warning
+ Info
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tag/docs/examples/variants-subs.tsx b/packages/Tag/docs/examples/variants-subs.tsx
new file mode 100644
index 000000000..eb223a8fe
--- /dev/null
+++ b/packages/Tag/docs/examples/variants-subs.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/tag'
+
+const Example = () => {
+ return (
+ <>
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tag/docs/index.mdx b/packages/Tag/docs/index.mdx
new file mode 100644
index 000000000..41d2f59aa
--- /dev/null
+++ b/packages/Tag/docs/index.mdx
@@ -0,0 +1,49 @@
+---
+category: data-display
+description: The Tag component is a small, interactive UI element used to label, categorize, or filter content. It can display text or icons and often supports actions like deletion or selection. Tags enhance user experience by providing a clear and concise way to organize information, highlight key attributes, or manage items dynamically.
+packageName: tag
+title: Tag
+usage: import { Tag } from '@welcome-ui/tag
+---
+
+The default use of `Stack` will stack its children vertically.
+
+### Variants
+
+Admire these beautiful colors 💅
+
+#### Basics
+
+
+
+#### States
+
+
+
+#### Subs
+
+
+
+### Sizes
+
+Use size property with `xs`, `sm`, or `md`.
+
+
+
+### List of clickable tags
+
+When we have a clickable tag, we apply an hover state
+
+
+
+### One character
+
+When we have only one character, we apply same size for the width and height
+
+
+
+### OnRemove
+
+Simply add a function `onRemove` to reveal a cross icon with a remove action (or other).
+
+
diff --git a/packages/Tag/docs/properties.json b/packages/Tag/docs/properties.json
new file mode 100644
index 000000000..16878957a
--- /dev/null
+++ b/packages/Tag/docs/properties.json
@@ -0,0 +1,184 @@
+{
+ "Tag": {
+ "props": {
+ "href": {
+ "defaultValue": null,
+ "description": "",
+ "name": "href",
+ "parent": {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "onClick": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onClick",
+ "parent": {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "() => void"
+ }
+ },
+ "onRemove": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onRemove",
+ "parent": {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "() => void"
+ }
+ },
+ "size": {
+ "defaultValue": {
+ "value": "md"
+ },
+ "description": "",
+ "name": "size",
+ "parent": {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Size",
+ "value": [
+ {
+ "value": "\"xs\""
+ },
+ {
+ "value": "\"sm\""
+ },
+ {
+ "value": "\"md\""
+ }
+ ]
+ }
+ },
+ "to": {
+ "defaultValue": null,
+ "description": "",
+ "name": "to",
+ "parent": {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "variant": {
+ "defaultValue": {
+ "value": "default"
+ },
+ "description": "",
+ "name": "variant",
+ "parent": {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Tag/src/index.tsx",
+ "name": "TagOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Variant",
+ "value": [
+ {
+ "value": "\"1\""
+ },
+ {
+ "value": "\"2\""
+ },
+ {
+ "value": "\"3\""
+ },
+ {
+ "value": "\"4\""
+ },
+ {
+ "value": "\"5\""
+ },
+ {
+ "value": "\"6\""
+ },
+ {
+ "value": "\"7\""
+ },
+ {
+ "value": "\"dark\""
+ },
+ {
+ "value": "\"default\""
+ },
+ {
+ "value": "\"error\""
+ },
+ {
+ "value": "\"info\""
+ },
+ {
+ "value": "\"primary\""
+ },
+ {
+ "value": "\"secondary\""
+ },
+ {
+ "value": "\"success\""
+ },
+ {
+ "value": "\"warning\""
+ }
+ ]
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/Text/docs/examples/overview.tsx b/packages/Text/docs/examples/overview.tsx
new file mode 100644
index 000000000..743640b46
--- /dev/null
+++ b/packages/Text/docs/examples/overview.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { Text } from '@welcome-ui/text'
+
+const Example = () => {
+ return (
+ <>
+
+ Heading (h0)
+
+
+ Heading (h1)
+
+
+ Heading (h2)
+
+
+ Heading (h3)
+
+
+ Heading (h4)
+
+
+ Heading (h5)
+
+
+ Heading (h6)
+
+
+ Text (lg)
+
+
+ Text (md)
+
+
+ Text (sm)
+
+
+ Text (xs)
+
+
+ Subtitle (md)
+
+
+ Subtitle (sm)
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Text/docs/examples/overwrite.tsx b/packages/Text/docs/examples/overwrite.tsx
new file mode 100644
index 000000000..a836efd6a
--- /dev/null
+++ b/packages/Text/docs/examples/overwrite.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { Text } from '@welcome-ui/text'
+
+const Example = () => {
+ return (
+ <>
+
+ p tag styled as an H3
+
+
+ H1 tag styled as a sm
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Text/docs/examples/truncation.tsx b/packages/Text/docs/examples/truncation.tsx
new file mode 100644
index 000000000..a91f7e13b
--- /dev/null
+++ b/packages/Text/docs/examples/truncation.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Text } from '@welcome-ui/text'
+
+const Example = () => {
+ return (
+ <>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel
+ tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut
+ ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit
+ accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus
+ at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac
+ malesuada.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel
+ tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut
+ ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit
+ accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus
+ at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac
+ malesuada.
+
+ Lorem ipsum dolor sit amet
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Text/docs/index.mdx b/packages/Text/docs/index.mdx
new file mode 100644
index 000000000..2a68871e2
--- /dev/null
+++ b/packages/Text/docs/index.mdx
@@ -0,0 +1,19 @@
+---
+category: typography
+description: The Text component is a fundamental UI element used to display and style text content within an application. It provides various typography options, such as font size, weight, color, and alignment, allowing for consistent and customizable presentation of textual information. This component is essential for conveying information clearly and effectively in the user interface.
+packageName: text
+title: Text
+usage: import { Text } from '@welcome-ui/text
+---
+
+### Overwrite tag
+
+You can pass a tag name with `as` to use that tag type with the styling from another tag. For example…
+
+
+
+### Truncation
+
+Set the number of lines you want to display with `lines`. Your text will be displayed truncated with an ellipsis (`...`) at the end (if necessary).
+
+
diff --git a/packages/Text/docs/properties.json b/packages/Text/docs/properties.json
new file mode 100644
index 000000000..d2ebfe89c
--- /dev/null
+++ b/packages/Text/docs/properties.json
@@ -0,0 +1,88 @@
+{
+ "Text": {
+ "props": {
+ "lines": {
+ "defaultValue": null,
+ "description": "",
+ "name": "lines",
+ "parent": {
+ "fileName": "Text/src/index.tsx",
+ "name": "TextOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Text/src/index.tsx",
+ "name": "TextOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "number"
+ }
+ },
+ "variant": {
+ "defaultValue": {
+ "value": "md"
+ },
+ "description": "",
+ "name": "variant",
+ "parent": {
+ "fileName": "Text/src/index.tsx",
+ "name": "TextOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Text/src/index.tsx",
+ "name": "TextOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"h0\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | \"subtitle-md\" | \"subtitle-sm\"",
+ "value": [
+ {
+ "value": "\"h1\""
+ },
+ {
+ "value": "\"h2\""
+ },
+ {
+ "value": "\"h3\""
+ },
+ {
+ "value": "\"h4\""
+ },
+ {
+ "value": "\"h5\""
+ },
+ {
+ "value": "\"h6\""
+ },
+ {
+ "value": "\"h0\""
+ },
+ {
+ "value": "\"lg\""
+ },
+ {
+ "value": "\"md\""
+ },
+ {
+ "value": "\"sm\""
+ },
+ {
+ "value": "\"xs\""
+ },
+ {
+ "value": "\"subtitle-md\""
+ },
+ {
+ "value": "\"subtitle-sm\""
+ }
+ ]
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/Textarea/docs/examples/field.tsx b/packages/Textarea/docs/examples/field.tsx
new file mode 100644
index 000000000..af84245c1
--- /dev/null
+++ b/packages/Textarea/docs/examples/field.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Textarea } from '@welcome-ui/textarea'
+import { Field } from '@welcome-ui/field'
+
+const Example = () => {
+ const [value, setValue] = React.useState('')
+
+ const handleChange = (event: React.ChangeEvent) => {
+ setValue(event.target.value)
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Textarea/docs/examples/overview.tsx b/packages/Textarea/docs/examples/overview.tsx
new file mode 100644
index 000000000..275cb07a8
--- /dev/null
+++ b/packages/Textarea/docs/examples/overview.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Textarea } from '@welcome-ui/textarea'
+
+const Example = () => {
+ return (
+
+ )
+}
+
+export default Example
diff --git a/packages/Textarea/docs/index.mdx b/packages/Textarea/docs/index.mdx
new file mode 100644
index 000000000..64753f129
--- /dev/null
+++ b/packages/Textarea/docs/index.mdx
@@ -0,0 +1,13 @@
+---
+category: forms
+description: The Textarea component is a multi-line input field that allows users to enter and edit larger blocks of text. It is commonly used in forms and applications where more extensive text input is required, such as comments, descriptions, or messages. This component provides features like resizing, placeholder text, and validation, enhancing the user experience by accommodating detailed text entry.
+packageName: textarea
+title: Textarea
+usage: import { Textarea } from '@welcome-ui/textarea
+---
+
+### With Field
+
+Example with Field component
+
+
diff --git a/packages/Textarea/docs/properties.json b/packages/Textarea/docs/properties.json
new file mode 100644
index 000000000..898001bfd
--- /dev/null
+++ b/packages/Textarea/docs/properties.json
@@ -0,0 +1,399 @@
+{
+ "Textarea": {
+ "props": {
+ "autoFocus": {
+ "defaultValue": null,
+ "description": "",
+ "name": "autoFocus",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "disabled": {
+ "defaultValue": null,
+ "description": "",
+ "name": "disabled",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "hasIcon": {
+ "defaultValue": null,
+ "description": "",
+ "name": "hasIcon",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "iconPlacement": {
+ "defaultValue": null,
+ "description": "",
+ "name": "iconPlacement",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "\"right\" | \"left\" | \"both\"",
+ "value": [
+ {
+ "value": "\"right\""
+ },
+ {
+ "value": "\"left\""
+ },
+ {
+ "value": "\"both\""
+ }
+ ]
+ }
+ },
+ "isClearable": {
+ "defaultValue": null,
+ "description": "",
+ "name": "isClearable",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "maxLength": {
+ "defaultValue": null,
+ "description": "",
+ "name": "maxLength",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "number"
+ }
+ },
+ "minRows": {
+ "defaultValue": {
+ "value": 5
+ },
+ "description": "",
+ "name": "minRows",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "number"
+ }
+ },
+ "name": {
+ "defaultValue": null,
+ "description": "",
+ "name": "name",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "onBlur": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onBlur",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(event: FocusEvent) => void"
+ }
+ },
+ "onChange": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onChange",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(event: ChangeEvent) => void"
+ }
+ },
+ "onFocus": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onFocus",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(event: FocusEvent) => void"
+ }
+ },
+ "onKeyDown": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onKeyDown",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(event: KeyboardEvent) => void"
+ }
+ },
+ "placeholder": {
+ "defaultValue": null,
+ "description": "",
+ "name": "placeholder",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "size": {
+ "defaultValue": {
+ "value": "md"
+ },
+ "description": "",
+ "name": "size",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Size",
+ "value": [
+ {
+ "value": "\"xs\""
+ },
+ {
+ "value": "\"sm\""
+ },
+ {
+ "value": "\"md\""
+ },
+ {
+ "value": "\"lg\""
+ }
+ ]
+ }
+ },
+ "transparent": {
+ "defaultValue": null,
+ "description": "",
+ "name": "transparent",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "value": {
+ "defaultValue": null,
+ "description": "",
+ "name": "value",
+ "parent": {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Textarea/src/index.tsx",
+ "name": "TextareaOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "variant": {
+ "defaultValue": null,
+ "description": "",
+ "name": "variant",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Variant",
+ "value": [
+ {
+ "value": "\"error\""
+ },
+ {
+ "value": "\"focused\""
+ },
+ {
+ "value": "\"info\""
+ },
+ {
+ "value": "\"success\""
+ },
+ {
+ "value": "\"warning\""
+ }
+ ]
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/TimePicker/docs/examples/icon.tsx b/packages/TimePicker/docs/examples/icon.tsx
new file mode 100644
index 000000000..e75d1b4d2
--- /dev/null
+++ b/packages/TimePicker/docs/examples/icon.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { TimePicker } from '@welcome-ui/time-picker'
+import { WttjIcon } from '@welcome-ui/icons'
+
+const Example = () => {
+ return (
+ <>
+ } name="welcome" value={new Date()} />
+ } iconPlacement="right" name="welcome" value={new Date()} />
+ >
+ )
+}
+
+export default Example
diff --git a/packages/TimePicker/docs/examples/overview.tsx b/packages/TimePicker/docs/examples/overview.tsx
new file mode 100644
index 000000000..0cb935561
--- /dev/null
+++ b/packages/TimePicker/docs/examples/overview.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { TimePicker } from '@welcome-ui/time-picker'
+
+const Example = () => {
+ return
+}
+
+export default Example
diff --git a/packages/TimePicker/docs/examples/react-date-picker.tsx b/packages/TimePicker/docs/examples/react-date-picker.tsx
new file mode 100644
index 000000000..5e8be7339
--- /dev/null
+++ b/packages/TimePicker/docs/examples/react-date-picker.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { TimePicker } from '@welcome-ui/time-picker'
+
+const Example = () => {
+ return (
+
+ )
+}
+
+export default Example
diff --git a/packages/TimePicker/docs/index.mdx b/packages/TimePicker/docs/index.mdx
new file mode 100644
index 000000000..a12e6798d
--- /dev/null
+++ b/packages/TimePicker/docs/index.mdx
@@ -0,0 +1,21 @@
+---
+category: forms
+description: The Time Picker component is an interactive UI element that allows users to select a specific time from a predefined format. It typically includes options for hours, minutes, and sometimes seconds, often presented in a dropdown or clock interface. This component is essential for applications requiring precise time input, such as scheduling events, setting alarms, or booking appointments, providing a user-friendly and accurate way to select times.
+packageName: time-picker
+title: TimePicker
+usage: import { TimlePicker } from @welcome-ui/time-picker
+---
+
+### react-datepicker
+
+It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepicker) library.
+
+_Note_: Pass a value of `null` if you don't want the default value of `Date.now()`.
+
+
+
+### Give an Icon
+
+Add an icon with the `icon` property
+
+
diff --git a/packages/TimePicker/docs/properties.json b/packages/TimePicker/docs/properties.json
new file mode 100644
index 000000000..f9c699005
--- /dev/null
+++ b/packages/TimePicker/docs/properties.json
@@ -0,0 +1,239 @@
+{
+ "TimePicker": {
+ "props": {
+ "icon": {
+ "defaultValue": null,
+ "description": "",
+ "name": "icon",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@types/react-datepicker/index.d.ts",
+ "name": "ReactDatePickerProps"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@types/react-datepicker/index.d.ts",
+ "name": "ReactDatePickerProps"
+ },
+ {
+ "fileName": "packages/DateTimePickerCommon/dist/types/CustomInput.d.ts",
+ "name": "CustomInputOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "(string | ReactElement>) & Element",
+ "value": [
+ {
+ "value": "string & Element"
+ },
+ {
+ "value": "ReactElement> & Element"
+ }
+ ]
+ }
+ },
+ "iconPlacement": {
+ "defaultValue": {
+ "value": "left"
+ },
+ "description": "",
+ "name": "iconPlacement",
+ "parent": {
+ "fileName": "packages/DateTimePickerCommon/dist/types/CustomInput.d.ts",
+ "name": "CustomInputOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "packages/DateTimePickerCommon/dist/types/CustomInput.d.ts",
+ "name": "CustomInputOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "IconPlacement",
+ "value": [
+ {
+ "value": "\"right\""
+ },
+ {
+ "value": "\"left\""
+ }
+ ]
+ }
+ },
+ "onBlur": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onBlur",
+ "parent": {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(event: FocusEvent) => void"
+ }
+ },
+ "onChange": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onChange",
+ "parent": {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(date?: Date) => void"
+ }
+ },
+ "onFocus": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onFocus",
+ "parent": {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(event: FocusEvent) => void"
+ }
+ },
+ "placeholder": {
+ "defaultValue": null,
+ "description": "",
+ "name": "placeholder",
+ "parent": {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "size": {
+ "defaultValue": {
+ "value": "md"
+ },
+ "description": "",
+ "name": "size",
+ "parent": {
+ "fileName": "packages/DateTimePickerCommon/dist/types/CustomInput.d.ts",
+ "name": "CustomInputOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "packages/DateTimePickerCommon/dist/types/CustomInput.d.ts",
+ "name": "CustomInputOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Size",
+ "value": [
+ {
+ "value": "\"xs\""
+ },
+ {
+ "value": "\"sm\""
+ },
+ {
+ "value": "\"md\""
+ },
+ {
+ "value": "\"lg\""
+ }
+ ]
+ }
+ },
+ "transparent": {
+ "defaultValue": null,
+ "description": "",
+ "name": "transparent",
+ "parent": {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "value": {
+ "defaultValue": null,
+ "description": "",
+ "name": "value",
+ "parent": {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "TimePicker/src/index.tsx",
+ "name": "TimePickerOptions"
+ }
+ ],
+ "required": true,
+ "type": {
+ "name": "enum",
+ "raw": "string | Date",
+ "value": [
+ {
+ "value": "string"
+ },
+ {
+ "value": "Date",
+ "description": "Enables basic storage and retrieval of dates and times.",
+ "fullComment": "Enables basic storage and retrieval of dates and times.",
+ "tags": {}
+ }
+ ]
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/Toast/docs/examples/custom-close.tsx b/packages/Toast/docs/examples/custom-close.tsx
new file mode 100644
index 000000000..509ee9120
--- /dev/null
+++ b/packages/Toast/docs/examples/custom-close.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { toast, Toast } from '@welcome-ui/toast'
+import { Button } from '@welcome-ui/button'
+
+const Example = () => {
+ const onClose = () => {
+ alert('Toast hidden!')
+ }
+
+ return (
+
+ )
+}
+
+export default Example
diff --git a/packages/Toast/docs/examples/growl.tsx b/packages/Toast/docs/examples/growl.tsx
new file mode 100644
index 000000000..0b4c92cce
--- /dev/null
+++ b/packages/Toast/docs/examples/growl.tsx
@@ -0,0 +1,115 @@
+/* eslint-disable react/jsx-curly-newline */
+import * as React from 'react'
+import { toast, Toast } from '@welcome-ui/toast'
+import { Button } from '@welcome-ui/button'
+import { Box } from '@welcome-ui/box'
+
+const Example = () => {
+ return (
+ <>
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+ himenaeos
+
+ alert('action')} size="sm" variant="secondary">
+ Action
+
+
+
+ )
+ }
+ >
+ Info
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+ himenaeos
+
+ )
+ }
+ >
+ Error
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+ himenaeos
+
+ )
+ }
+ >
+ Warning
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+ himenaeos
+
+ )
+ }
+ >
+ Success
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+ himenaeos
+
+ )
+ }
+ >
+ Custom icon
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+ himenaeos
+
+ )
+ }
+ >
+ No icon
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Toast/docs/examples/overview.tsx b/packages/Toast/docs/examples/overview.tsx
new file mode 100644
index 000000000..3b89b53f7
--- /dev/null
+++ b/packages/Toast/docs/examples/overview.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Notifications, toast } from '@welcome-ui/toast'
+import { Box } from '@welcome-ui/box'
+import { Button } from '@welcome-ui/button'
+
+const Element = () => (
+
+ Lorem ipsum dolor sit amet
+
+)
+
+const Example = () => {
+ return (
+ <>
+ toast()}>Show Toast
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Toast/docs/examples/snackbar.tsx b/packages/Toast/docs/examples/snackbar.tsx
new file mode 100644
index 000000000..535b4aec5
--- /dev/null
+++ b/packages/Toast/docs/examples/snackbar.tsx
@@ -0,0 +1,96 @@
+/* eslint-disable react/jsx-curly-newline */
+import * as React from 'react'
+import { toast, Toast } from '@welcome-ui/toast'
+import { Button } from '@welcome-ui/button'
+
+const Example = () => {
+ return (
+ <>
+
+ toast(
+
+ Lorem ipsum dolor sit amet taciti sociosqu ad
+
+ )
+ }
+ >
+ Default
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet taciti sociosqu ad
+
+ Action
+
+
+ )
+ }
+ >
+ Info
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet taciti sociosqu ad
+
+ )
+ }
+ >
+ Error
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet taciti sociosqu ad
+
+ )
+ }
+ >
+ Warning
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet taciti sociosqu ad
+
+ )
+ }
+ >
+ Success
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet taciti sociosqu ad
+
+ )
+ }
+ >
+ Custom icon
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet taciti sociosqu ad
+
+ Action
+
+
+ )
+ }
+ >
+ No icon
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Toast/docs/examples/toast.tsx b/packages/Toast/docs/examples/toast.tsx
new file mode 100644
index 000000000..f5e891b98
--- /dev/null
+++ b/packages/Toast/docs/examples/toast.tsx
@@ -0,0 +1,48 @@
+/* eslint-disable react/jsx-curly-newline */
+import * as React from 'react'
+import { toast } from '@welcome-ui/toast'
+import { Box } from '@welcome-ui/box'
+import { Button } from '@welcome-ui/button'
+import { ToastPosition } from 'react-hot-toast/headless'
+
+const Element = () => (
+
+ Lorem ipsum dolor sit amet
+
+)
+
+const positions = [
+ 'top-left',
+ 'top-center',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-center',
+ 'bottom-right',
+]
+
+const Example = () => {
+ return (
+ <>
+ {positions.map(position => (
+
+ toast(, { position: position as ToastPosition, duration: 6000 })
+ }
+ >
+ {position}
+
+ ))}
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Toast/docs/examples/without-close.tsx b/packages/Toast/docs/examples/without-close.tsx
new file mode 100644
index 000000000..d54b5d49b
--- /dev/null
+++ b/packages/Toast/docs/examples/without-close.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-curly-newline */
+import * as React from 'react'
+import { toast, Toast } from '@welcome-ui/toast'
+import { Button } from '@welcome-ui/button'
+
+const Example = () => {
+ return (
+ <>
+
+ toast(Lorem ipsum dolor sit amet)
+ }
+ >
+ Snackbar
+
+
+ toast(
+
+ Lorem ipsum dolor sit amet
+ Class aptent taciti sociosqu ad
+
+ )
+ }
+ >
+ Growl
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Toast/docs/index.mdx b/packages/Toast/docs/index.mdx
new file mode 100644
index 000000000..614ccc049
--- /dev/null
+++ b/packages/Toast/docs/index.mdx
@@ -0,0 +1,89 @@
+---
+category: feedback
+description: The Toast component is a transient, non-blocking notification that appears briefly to provide feedback to the user. It is typically used to display messages such as success, error, warning, or informational alerts. Toasts appear at a designated area of the screen, often at the bottom or top, and automatically disappear after a few seconds, ensuring a smooth and unobtrusive user experience.
+packageName: toast
+title: Toast
+usage: import { Notifications, Toast, toast } from @welcome-ui/toast
+---
+
+Notification component with [react-hot-toast](https://react-hot-toast.com/) and 2 components:
+
+- Growl
+- Snackbar
+
+### Notifications
+
+Before using the `Toast` component, you must add the `Notifications` component in your project root. This component will contain all your toasts.
+
+```jsx
+function App() {
+ return
+}
+```
+
+You can pass a boolean value to `pauseOnHover` prop (default to `true`) to pause duration of all notifications on mouse hover.
+
+### toast
+
+Use `toast` function to show the toast element. This function returns a unique identifier that can be used to update or remove the toast later.
+
+#### Options
+
+The `toast` function takes a component to be displayed and an `options` object:
+
+- **position**: one of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right`
+- **duration**: before closing the element, in ms, with a default `7000`. It can also be set to `null` to prevent your element from closing automatically.
+- **id**: a unique identifier for the toast that can be used to update or remove it later and prevent duplicates
+
+### Position
+
+
+
+### Supplied components
+
+You can create your own notification component to display in the Toast or one of our default components: `Snackbar` and `Growl`.
+
+In general:
+
+- `Snackbar` is used to display a temporary, information-only notification, and
+- `Growl` is used to display a more important notification with an action (that requires the user to close the notification)
+
+### Snackbar
+
+At bottom center by default.
+
+
+
+### Growl
+
+At top right by default.
+
+
+
+### Custom close function
+
+You can add your custom function when user click on close button
+
+
+
+## Without close button on Growl or Snackbar
+
+You can choose not to show a close button on Growl or Snackbar with the `hasCloseButton` prop (defaults to `true`).
+
+
+
+### Close or dismiss a toast
+
+You can close or dismiss a toast programmatically with the `dismiss` and `remove` functions. Dismiss will hide the toast with a fade out animation, while remove will hide the toast immediately.
+
+```jsx
+const toastId = toast()
+
+// Remove or dismiss this specific toast
+remove(toastId)
+dismiss(toastId)
+
+// Remove or dismiss all toasts
+remove()
+dismiss()
+```
diff --git a/packages/Toast/docs/properties.json b/packages/Toast/docs/properties.json
new file mode 100644
index 000000000..c01386787
--- /dev/null
+++ b/packages/Toast/docs/properties.json
@@ -0,0 +1,236 @@
+{
+ "Notifications": {
+ "props": {}
+ },
+ "Toast.Growl": {
+ "props": {
+ "hasCloseButton": {
+ "defaultValue": {
+ "value": true
+ },
+ "description": "",
+ "name": "hasCloseButton",
+ "parent": {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "icon": {
+ "defaultValue": null,
+ "description": "",
+ "name": "icon",
+ "parent": {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "Element"
+ }
+ },
+ "onClose": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onClose",
+ "parent": {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "() => void"
+ }
+ },
+ "variant": {
+ "defaultValue": {
+ "value": "default"
+ },
+ "description": "",
+ "name": "variant",
+ "parent": {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Growl.tsx",
+ "name": "GrowlOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Variant",
+ "value": [
+ {
+ "value": "\"default\""
+ },
+ {
+ "value": "\"error\""
+ },
+ {
+ "value": "\"warning\""
+ },
+ {
+ "value": "\"info\""
+ },
+ {
+ "value": "\"success\""
+ }
+ ]
+ }
+ }
+ }
+ },
+ "Toast.Snackbar": {
+ "props": {
+ "hasCloseButton": {
+ "defaultValue": {
+ "value": true
+ },
+ "description": "",
+ "name": "hasCloseButton",
+ "parent": {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "icon": {
+ "defaultValue": null,
+ "description": "",
+ "name": "icon",
+ "parent": {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "Element"
+ }
+ },
+ "onClose": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onClose",
+ "parent": {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ }
+ ],
+ "required": true,
+ "type": {
+ "name": "() => void"
+ }
+ },
+ "variant": {
+ "defaultValue": {
+ "value": "default"
+ },
+ "description": "",
+ "name": "variant",
+ "parent": {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "Toast/src/Snackbar.tsx",
+ "name": "SnackbarOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Variant",
+ "value": [
+ {
+ "value": "\"default\""
+ },
+ {
+ "value": "\"error\""
+ },
+ {
+ "value": "\"warning\""
+ },
+ {
+ "value": "\"info\""
+ },
+ {
+ "value": "\"success\""
+ }
+ ]
+ }
+ }
+ }
+ },
+ "ToastWrapper": {
+ "props": {}
+ },
+ "dismiss": {
+ "props": {}
+ },
+ "remove": {
+ "props": {}
+ }
+}
\ No newline at end of file
diff --git a/packages/Toast/src/index.tsx b/packages/Toast/src/index.tsx
index 14a8f087b..28082f5c1 100644
--- a/packages/Toast/src/index.tsx
+++ b/packages/Toast/src/index.tsx
@@ -12,10 +12,11 @@ export type Variant = 'default' | 'error' | 'warning' | 'info' | 'success'
type NotificationsProps = { pauseOnHover?: boolean }
-type ToastOptions = {
+export type ToastOptions = {
duration?: number
id?: string
position?: ToastPosition
+ onClose?: () => void
}
export const Notifications: React.FC = ({ pauseOnHover = true }) => {
diff --git a/packages/Toggle/docs/examples/hint.tsx b/packages/Toggle/docs/examples/hint.tsx
new file mode 100644
index 000000000..d8fccaa78
--- /dev/null
+++ b/packages/Toggle/docs/examples/hint.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { Toggle } from '@welcome-ui/toggle'
+import { Field } from '@welcome-ui/field'
+
+const Example = () => {
+ const [toggle, setToggle] = React.useState(false)
+
+ return (
+
+ setToggle(!toggle)} />
+
+ )
+}
+
+export default Example
diff --git a/packages/Toggle/docs/examples/icon.tsx b/packages/Toggle/docs/examples/icon.tsx
new file mode 100644
index 000000000..88b23775a
--- /dev/null
+++ b/packages/Toggle/docs/examples/icon.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { Toggle } from '@welcome-ui/toggle'
+import { HideIcon, ShowIcon } from '@welcome-ui/icons'
+
+const Example = () => {
+ const [toggle, setToggle] = React.useState(false)
+
+ return (
+ }
+ onClick={() => setToggle(!toggle)}
+ size="md"
+ uncheckedIcon={}
+ />
+ )
+}
+
+export default Example
diff --git a/packages/Toggle/docs/examples/label.tsx b/packages/Toggle/docs/examples/label.tsx
new file mode 100644
index 000000000..406f6c6f1
--- /dev/null
+++ b/packages/Toggle/docs/examples/label.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Toggle } from '@welcome-ui/toggle'
+import { Field } from '@welcome-ui/field'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+ const [toggle, setToggle] = React.useState(false)
+
+ return (
+
+
+ setToggle(!toggle)} />
+
+
+ setToggle(!toggle)} />
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Toggle/docs/examples/overview.tsx b/packages/Toggle/docs/examples/overview.tsx
new file mode 100644
index 000000000..5cae8862f
--- /dev/null
+++ b/packages/Toggle/docs/examples/overview.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { Toggle } from '@welcome-ui/toggle'
+
+const Example = () => {
+ const [toggle, setToggle] = React.useState(false)
+ const [toggleChecked, setToggleChecked] = React.useState(true)
+
+ return (
+ <>
+ setToggle(!toggle)} />
+ setToggleChecked(!toggleChecked)}
+ />
+
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Toggle/docs/examples/size.tsx b/packages/Toggle/docs/examples/size.tsx
new file mode 100644
index 000000000..32410aca6
--- /dev/null
+++ b/packages/Toggle/docs/examples/size.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { Toggle } from '@welcome-ui/toggle'
+
+const Example = () => {
+ const [toggle, setToggle] = React.useState(false)
+
+ return (
+ <>
+ setToggle(!toggle)} />
+ setToggle(!toggle)}
+ size="sm"
+ />
+ setToggle(!toggle)}
+ size="md"
+ />
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Toggle/docs/examples/variant.tsx b/packages/Toggle/docs/examples/variant.tsx
new file mode 100644
index 000000000..d4b70c1fd
--- /dev/null
+++ b/packages/Toggle/docs/examples/variant.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { Toggle } from '@welcome-ui/toggle'
+import { Field } from '@welcome-ui/field'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+ const [toggle, setToggle] = React.useState(false)
+
+ return (
+
+
+ setToggle(!toggle)} />
+
+
+ setToggle(!toggle)} />
+
+
+ setToggle(!toggle)} />
+
+
+ setToggle(!toggle)} />
+
+
+ )
+}
+
+export default Example
diff --git a/packages/Toggle/docs/index.mdx b/packages/Toggle/docs/index.mdx
new file mode 100644
index 000000000..db781cd4d
--- /dev/null
+++ b/packages/Toggle/docs/index.mdx
@@ -0,0 +1,37 @@
+---
+category: forms
+description: The Toggle component is an interactive UI element that allows users to switch between two states, such as on/off or enabled/disabled. It is commonly used for settings and preferences where a binary choice is required. This component provides a clear and intuitive way for users to make selections, enhancing usability and interaction within an application.
+packageName: toggle
+title: Toggle
+usage: import { Toggle } from '@welcome-ui/toggle
+---
+
+### Label
+
+Use Field component to add a `label`
+
+
+
+### Hint
+
+Use Field component to add a `hint`
+
+
+
+### Size
+
+Use size property with option:
+
+
+
+### Variant
+
+Use `hint`, `warning`, `error`, `info` or `success` properties on Field component to add a variant status on your checkbox. The label, hint or border color are set by magic 🪄
+
+
+
+### Icon
+
+Pass a `checkedIcon` or `uncheckedIcon` through to decorate your `Toggle` and give more context to the toggle action. We recommend to use an icon with `sm` or `md` size.
+
+
diff --git a/packages/Toggle/docs/properties.json b/packages/Toggle/docs/properties.json
new file mode 100644
index 000000000..d5a50875a
--- /dev/null
+++ b/packages/Toggle/docs/properties.json
@@ -0,0 +1,166 @@
+{
+ "Toggle": {
+ "props": {
+ "checked": {
+ "defaultValue": null,
+ "description": "",
+ "name": "checked",
+ "parent": {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "disabled": {
+ "defaultValue": null,
+ "description": "",
+ "name": "disabled",
+ "parent": {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "boolean",
+ "value": [
+ {
+ "value": "false"
+ },
+ {
+ "value": "true"
+ }
+ ]
+ }
+ },
+ "name": {
+ "defaultValue": null,
+ "description": "",
+ "name": "name",
+ "parent": {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "string"
+ }
+ },
+ "onChange": {
+ "defaultValue": null,
+ "description": "",
+ "name": "onChange",
+ "parent": {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "packages/Checkbox/dist/types/index.d.ts",
+ "name": "CheckboxOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "(event: ChangeEvent) => void"
+ }
+ },
+ "size": {
+ "defaultValue": {
+ "value": "xs"
+ },
+ "description": "",
+ "name": "size",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ },
+ {
+ "fileName": "Toggle/src/index.tsx",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "\"xs\" | \"sm\" | \"md\"",
+ "value": [
+ {
+ "value": "\"xs\""
+ },
+ {
+ "value": "\"sm\""
+ },
+ {
+ "value": "\"md\""
+ }
+ ]
+ }
+ },
+ "variant": {
+ "defaultValue": null,
+ "description": "",
+ "name": "variant",
+ "declarations": [
+ {
+ "fileName": "packages/Utils/dist/types/field-styles.d.ts",
+ "name": "TypeLiteral"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "enum",
+ "raw": "Variant",
+ "value": [
+ {
+ "value": "\"error\""
+ },
+ {
+ "value": "\"focused\""
+ },
+ {
+ "value": "\"info\""
+ },
+ {
+ "value": "\"success\""
+ },
+ {
+ "value": "\"warning\""
+ }
+ ]
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/Tooltip/docs/examples/disabled.tsx b/packages/Tooltip/docs/examples/disabled.tsx
new file mode 100644
index 000000000..5a968c968
--- /dev/null
+++ b/packages/Tooltip/docs/examples/disabled.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Tooltip } from '@welcome-ui/tooltip'
+import { Button } from '@welcome-ui/button'
+
+const Example = () => {
+ return (
+
+ Disabled Button
+
+ )
+}
+
+export default Example
diff --git a/packages/Tooltip/docs/examples/fixed.tsx b/packages/Tooltip/docs/examples/fixed.tsx
new file mode 100644
index 000000000..41ea61b42
--- /dev/null
+++ b/packages/Tooltip/docs/examples/fixed.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Tooltip } from '@welcome-ui/tooltip'
+import { Button } from '@welcome-ui/button'
+
+const Example = () => {
+ return (
+
+ Fixed tooltip
+
+ )
+}
+
+export default Example
diff --git a/packages/Tooltip/docs/examples/long-text.tsx b/packages/Tooltip/docs/examples/long-text.tsx
new file mode 100644
index 000000000..fb3c70668
--- /dev/null
+++ b/packages/Tooltip/docs/examples/long-text.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { Tooltip } from '@welcome-ui/tooltip'
+
+const Example = () => {
+ return (
+ lorem ipsum dolor sit amet, consectetur adipiscing elit}
+ fixed
+ placement="bottom-start"
+ >
+ With long text
+
+ )
+}
+
+export default Example
diff --git a/packages/Tooltip/docs/examples/overview.tsx b/packages/Tooltip/docs/examples/overview.tsx
new file mode 100644
index 000000000..136a915d8
--- /dev/null
+++ b/packages/Tooltip/docs/examples/overview.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Tooltip } from '@welcome-ui/tooltip'
+import { Button } from '@welcome-ui/button'
+
+const Example = () => {
+ return (
+
+ Tooltip
+
+ )
+}
+
+export default Example
diff --git a/packages/Tooltip/docs/examples/placement.tsx b/packages/Tooltip/docs/examples/placement.tsx
new file mode 100644
index 000000000..63887054d
--- /dev/null
+++ b/packages/Tooltip/docs/examples/placement.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { Tooltip } from '@welcome-ui/tooltip'
+import { Button } from '@welcome-ui/button'
+import { Flex } from '@welcome-ui/flex'
+
+const Example = () => {
+ return (
+ <>
+
+
+
+ top-start ↖
+
+
+
+
+ top ↑
+
+
+
+
+ top-end ↗
+
+
+
+
+
+
+ bottom-start ↙
+
+
+
+
+ bottom ↓
+
+
+
+
+ bottom-end ↘
+
+
+
+
+
+
+ left-start ↖
+
+
+
+
+ left ←
+
+
+
+
+ left-end ↙
+
+
+
+
+
+
+ right-start ↗
+
+
+
+
+ right →
+
+
+
+
+ right-end ↘
+
+
+
+ >
+ )
+}
+
+export default Example
diff --git a/packages/Tooltip/docs/index.mdx b/packages/Tooltip/docs/index.mdx
new file mode 100644
index 000000000..d9cd0d16e
--- /dev/null
+++ b/packages/Tooltip/docs/index.mdx
@@ -0,0 +1,31 @@
+---
+category: overlay
+description: The Tooltip component is a small, interactive UI element that provides contextual information or descriptions when users hover over an element or focus on it. It enhances user experience by offering additional guidance or clarifications without cluttering the main interface. Tooltips are commonly used for icons, buttons, links, and other interactive elements to improve accessibility and usability.
+packageName: tooltip
+title: Tooltip
+usage: import { Tooltip } from '@welcome-ui/tooltip
+---
+
+### Fixed
+
+Maybe you don't want the tooltip to follow the cursor set by `fixed` property
+
+
+
+### With a long text and a custom placement
+
+Set a `max-width` for long text
+
+
+
+### With a disabled button
+
+We're adding a wrapper around the button when it's disabled otherwise the tooltip does not trigger.
+
+
+
+### Placement
+
+Using only with the `fixed` prop, `placement` will enable a translate animation on your tooltip. The direction works with these values for `placement`.
+
+
diff --git a/packages/Tooltip/docs/properties.json b/packages/Tooltip/docs/properties.json
new file mode 100644
index 000000000..8da04eed8
--- /dev/null
+++ b/packages/Tooltip/docs/properties.json
@@ -0,0 +1,27 @@
+{
+ "Tooltip": {
+ "props": {
+ "gutter": {
+ "defaultValue": {
+ "value": 8
+ },
+ "description": "The distance between the popover and the anchor element.\n\nLive examples:\n- [Combobox filtering](https://ariakit.org/examples/combobox-filtering)\n- [Form with Select](https://ariakit.org/examples/form-select)\n- [Hovercard with keyboard support](https://ariakit.org/examples/hovercard-disclosure)\n- [MenuItemRadio](https://ariakit.org/examples/menu-item-radio)\n- [Submenu](https://ariakit.org/examples/menu-nested)\n- [Toolbar with Select](https://ariakit.org/examples/toolbar-select)",
+ "name": "gutter",
+ "parent": {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tooltip/tooltip.d.ts",
+ "name": "TooltipOptions"
+ },
+ "declarations": [
+ {
+ "fileName": "welcome-ui-next/node_modules/@ariakit/react-core/cjs/tooltip/tooltip.d.ts",
+ "name": "TooltipOptions"
+ }
+ ],
+ "required": false,
+ "type": {
+ "name": "number"
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/website/app/page.tsx b/website/app/page.tsx
index 6d7a6370a..ca52b19ac 100644
--- a/website/app/page.tsx
+++ b/website/app/page.tsx
@@ -3,16 +3,18 @@ import NextLink from 'next/link'
import { Button } from '@welcome-ui/button'
import { Box } from '@welcome-ui/box'
import { GithubIcon, HeartIcon, RightIcon } from '@welcome-ui/icons'
+import { Notifications } from '@welcome-ui/toast'
import { Components } from '@/build-app/components/Homepage/Components'
import { Stats } from '@/build-app/components/Homepage/Stats'
import { Expectations } from '@/build-app/components/Homepage/Expectations'
-import { LogoWttj } from '@/build-app/components'
+import { LogoWttj } from '@/build-app/components/LogoWttj'
import { Section } from '@/build-app/components/Section'
const Home = () => {
return (
+
Welcome UI
diff --git a/website/build-app/components/Footer/index.tsx b/website/build-app/components/Footer/index.tsx
index f12f00bec..badc61289 100644
--- a/website/build-app/components/Footer/index.tsx
+++ b/website/build-app/components/Footer/index.tsx
@@ -5,7 +5,7 @@ import { Box } from '@welcome-ui/box'
import { Grid } from '@welcome-ui/grid'
import { Section } from '../Section'
-import { LogoWttj } from '..'
+import { LogoWttj } from '../LogoWttj'
const links = [
{
diff --git a/website/build-app/components/index.tsx b/website/build-app/components/LogoWttj/index.tsx
similarity index 100%
rename from website/build-app/components/index.tsx
rename to website/build-app/components/LogoWttj/index.tsx
diff --git a/website/build-app/components/Mdx/Playground.tsx b/website/build-app/components/Mdx/Playground.tsx
index 93b4f25b4..a46929b4e 100644
--- a/website/build-app/components/Mdx/Playground.tsx
+++ b/website/build-app/components/Mdx/Playground.tsx
@@ -33,7 +33,8 @@ export const Playground = ({
const Component = examples[pathToFile]
const preview = Component &&
- const removeFlex = ['AspectRatio', 'FileUpload', 'Grid'].includes(name)
+ const columnDirection = ['FileUpload', 'Grid', 'Text'].includes(name)
+ const removeFlex = ['AspectRatio'].includes(name)
const handleClickStackBlitz = () => {
openStackBlitz({
@@ -44,19 +45,21 @@ export const Playground = ({
return (
<>
-
- {preview}
+
+
+ {preview}
+
{withCodeEditor && (
<>
diff --git a/website/build-app/examples.js b/website/build-app/examples.js
index 54a5b8375..99af6e66d 100644
--- a/website/build-app/examples.js
+++ b/website/build-app/examples.js
@@ -179,5 +179,58 @@ export default {
"/Slider/docs/examples/tooltip.tsx": dynamic(() => import("../../packages/Slider/docs/examples/tooltip.tsx").then(mod => mod), { ssr: false }),
"/Slider/docs/examples/types-slider-range.tsx": dynamic(() => import("../../packages/Slider/docs/examples/types-slider-range.tsx").then(mod => mod), { ssr: false }),
"/Slider/docs/examples/types-slider.tsx": dynamic(() => import("../../packages/Slider/docs/examples/types-slider.tsx").then(mod => mod), { ssr: false }),
- "/Slider/docs/examples/values.tsx": dynamic(() => import("../../packages/Slider/docs/examples/values.tsx").then(mod => mod), { ssr: false })
+ "/Slider/docs/examples/values.tsx": dynamic(() => import("../../packages/Slider/docs/examples/values.tsx").then(mod => mod), { ssr: false }),
+ "/Stack/docs/examples/childs.tsx": dynamic(() => import("../../packages/Stack/docs/examples/childs.tsx").then(mod => mod), { ssr: false }),
+ "/Stack/docs/examples/overview.tsx": dynamic(() => import("../../packages/Stack/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Stack/docs/examples/spacing.tsx": dynamic(() => import("../../packages/Stack/docs/examples/spacing.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/autoplay.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/autoplay.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/centered.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/centered.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/dark.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/dark.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/first.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/first.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/no-navigation.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/no-navigation.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/overview.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/pagination.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/pagination.tsx").then(mod => mod), { ssr: false }),
+ "/Swiper/docs/examples/slides-per-view.tsx": dynamic(() => import("../../packages/Swiper/docs/examples/slides-per-view.tsx").then(mod => mod), { ssr: false }),
+ "/Table/docs/examples/overview.tsx": dynamic(() => import("../../packages/Table/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Table/docs/examples/states.tsx": dynamic(() => import("../../packages/Table/docs/examples/states.tsx").then(mod => mod), { ssr: false }),
+ "/Tabs/docs/examples/badge.tsx": dynamic(() => import("../../packages/Tabs/docs/examples/badge.tsx").then(mod => mod), { ssr: false }),
+ "/Tabs/docs/examples/component.tsx": dynamic(() => import("../../packages/Tabs/docs/examples/component.tsx").then(mod => mod), { ssr: false }),
+ "/Tabs/docs/examples/no-border.tsx": dynamic(() => import("../../packages/Tabs/docs/examples/no-border.tsx").then(mod => mod), { ssr: false }),
+ "/Tabs/docs/examples/one.tsx": dynamic(() => import("../../packages/Tabs/docs/examples/one.tsx").then(mod => mod), { ssr: false }),
+ "/Tabs/docs/examples/overview.tsx": dynamic(() => import("../../packages/Tabs/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Tabs/docs/examples/sizes.tsx": dynamic(() => import("../../packages/Tabs/docs/examples/sizes.tsx").then(mod => mod), { ssr: false }),
+ "/Tabs/docs/examples/vertical.tsx": dynamic(() => import("../../packages/Tabs/docs/examples/vertical.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/clickable.tsx": dynamic(() => import("../../packages/Tag/docs/examples/clickable.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/on-remove.tsx": dynamic(() => import("../../packages/Tag/docs/examples/on-remove.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/one-character.tsx": dynamic(() => import("../../packages/Tag/docs/examples/one-character.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/overview.tsx": dynamic(() => import("../../packages/Tag/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/sizes.tsx": dynamic(() => import("../../packages/Tag/docs/examples/sizes.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/variants-basics.tsx": dynamic(() => import("../../packages/Tag/docs/examples/variants-basics.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/variants-states.tsx": dynamic(() => import("../../packages/Tag/docs/examples/variants-states.tsx").then(mod => mod), { ssr: false }),
+ "/Tag/docs/examples/variants-subs.tsx": dynamic(() => import("../../packages/Tag/docs/examples/variants-subs.tsx").then(mod => mod), { ssr: false }),
+ "/Text/docs/examples/overview.tsx": dynamic(() => import("../../packages/Text/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Text/docs/examples/overwrite.tsx": dynamic(() => import("../../packages/Text/docs/examples/overwrite.tsx").then(mod => mod), { ssr: false }),
+ "/Text/docs/examples/truncation.tsx": dynamic(() => import("../../packages/Text/docs/examples/truncation.tsx").then(mod => mod), { ssr: false }),
+ "/Textarea/docs/examples/field.tsx": dynamic(() => import("../../packages/Textarea/docs/examples/field.tsx").then(mod => mod), { ssr: false }),
+ "/Textarea/docs/examples/overview.tsx": dynamic(() => import("../../packages/Textarea/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/TimePicker/docs/examples/icon.tsx": dynamic(() => import("../../packages/TimePicker/docs/examples/icon.tsx").then(mod => mod), { ssr: false }),
+ "/TimePicker/docs/examples/overview.tsx": dynamic(() => import("../../packages/TimePicker/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/TimePicker/docs/examples/react-date-picker.tsx": dynamic(() => import("../../packages/TimePicker/docs/examples/react-date-picker.tsx").then(mod => mod), { ssr: false }),
+ "/Toast/docs/examples/custom-close.tsx": dynamic(() => import("../../packages/Toast/docs/examples/custom-close.tsx").then(mod => mod), { ssr: false }),
+ "/Toast/docs/examples/growl.tsx": dynamic(() => import("../../packages/Toast/docs/examples/growl.tsx").then(mod => mod), { ssr: false }),
+ "/Toast/docs/examples/overview.tsx": dynamic(() => import("../../packages/Toast/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Toast/docs/examples/snackbar.tsx": dynamic(() => import("../../packages/Toast/docs/examples/snackbar.tsx").then(mod => mod), { ssr: false }),
+ "/Toast/docs/examples/toast.tsx": dynamic(() => import("../../packages/Toast/docs/examples/toast.tsx").then(mod => mod), { ssr: false }),
+ "/Toast/docs/examples/without-close.tsx": dynamic(() => import("../../packages/Toast/docs/examples/without-close.tsx").then(mod => mod), { ssr: false }),
+ "/Toggle/docs/examples/hint.tsx": dynamic(() => import("../../packages/Toggle/docs/examples/hint.tsx").then(mod => mod), { ssr: false }),
+ "/Toggle/docs/examples/icon.tsx": dynamic(() => import("../../packages/Toggle/docs/examples/icon.tsx").then(mod => mod), { ssr: false }),
+ "/Toggle/docs/examples/label.tsx": dynamic(() => import("../../packages/Toggle/docs/examples/label.tsx").then(mod => mod), { ssr: false }),
+ "/Toggle/docs/examples/overview.tsx": dynamic(() => import("../../packages/Toggle/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Toggle/docs/examples/size.tsx": dynamic(() => import("../../packages/Toggle/docs/examples/size.tsx").then(mod => mod), { ssr: false }),
+ "/Toggle/docs/examples/variant.tsx": dynamic(() => import("../../packages/Toggle/docs/examples/variant.tsx").then(mod => mod), { ssr: false }),
+ "/Tooltip/docs/examples/disabled.tsx": dynamic(() => import("../../packages/Tooltip/docs/examples/disabled.tsx").then(mod => mod), { ssr: false }),
+ "/Tooltip/docs/examples/fixed.tsx": dynamic(() => import("../../packages/Tooltip/docs/examples/fixed.tsx").then(mod => mod), { ssr: false }),
+ "/Tooltip/docs/examples/long-text.tsx": dynamic(() => import("../../packages/Tooltip/docs/examples/long-text.tsx").then(mod => mod), { ssr: false }),
+ "/Tooltip/docs/examples/overview.tsx": dynamic(() => import("../../packages/Tooltip/docs/examples/overview.tsx").then(mod => mod), { ssr: false }),
+ "/Tooltip/docs/examples/placement.tsx": dynamic(() => import("../../packages/Tooltip/docs/examples/placement.tsx").then(mod => mod), { ssr: false })
};