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 ( + +