mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(root): tabs component created, animation improved
This commit is contained in:
Junior Garcia
parent
b1bb36f898
commit
07f9e86116
Binary file not shown.
@ -1,5 +1,20 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/button
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/card
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
||||
"keywords": [
|
||||
"checkbox"
|
||||
|
||||
@ -182,7 +182,7 @@ export const CustomWithClassNames = (props: CustomCheckboxProps) => {
|
||||
aria-label={userName}
|
||||
classNames={{
|
||||
base: clsx(
|
||||
"inline-flex w-full max-w-md bg-content1 hover:bg-content2 items-center justify-start cursor-pointer rounded-lg gap-2 p-4 border-1.5 border-transparent",
|
||||
"inline-flex w-full max-w-md bg-content1 hover:bg-content2 items-center justify-start cursor-pointer rounded-lg gap-2 p-4 border-2.5 border-transparent",
|
||||
{
|
||||
"border-primary": isChecked,
|
||||
},
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/code
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/divider
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/divider",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": ". A separator is a visual divider between two groups of content",
|
||||
"keywords": [
|
||||
"divider"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/drip
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/drip",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
|
||||
"keywords": [
|
||||
"drip"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/image
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/input
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/kbd
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/kbd",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
|
||||
"keywords": [
|
||||
"kbd"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/link
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
|
||||
"keywords": [
|
||||
"link"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
|
||||
@ -204,7 +204,7 @@ CustomWithClassNames.args = {
|
||||
...defaultProps,
|
||||
showShadow: true,
|
||||
classNames: {
|
||||
base: "gap-0 rounded border-1 border-neutral",
|
||||
base: "gap-0 rounded border-2 border-neutral",
|
||||
item: "w-8 h-8 text-sm rounded-none bg-transparent",
|
||||
cursor:
|
||||
"bg-gradient-to-b shadow-lg shadow-neutral from-neutral-500 to-neutral-800 dark:from-neutral-300 dark:to-neutral-100 text-white font-bold",
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/popover",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A popover is an overlay element positioned relative to a trigger.",
|
||||
"keywords": [
|
||||
"popover"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/progress
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/progress",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
|
||||
"keywords": [
|
||||
"progress"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/radio
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/radio",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
|
||||
"keywords": [
|
||||
"radio"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/snippet
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/snippet",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Display a snippet of copyable code for the command line.",
|
||||
"keywords": [
|
||||
"snippet"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/spacer
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spacer",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
|
||||
"keywords": [
|
||||
"spacer"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/spinner
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spinner",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Loaders express an unspecified wait time or display the length of a process.",
|
||||
"keywords": [
|
||||
"loading",
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/switch
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/switch",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
|
||||
"keywords": [
|
||||
"switch"
|
||||
|
||||
@ -82,7 +82,7 @@ const CustomWithClassNamesTemplate: ComponentStory<typeof Switch> = (args: Switc
|
||||
<Switch
|
||||
classNames={{
|
||||
base: clsx(
|
||||
"inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center justify-between cursor-pointer rounded-lg gap-2 p-4 border-1.5 border-transparent",
|
||||
"inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center justify-between cursor-pointer rounded-lg gap-2 p-4 border-2.5 border-transparent",
|
||||
{
|
||||
"border-primary": isSelected,
|
||||
},
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/table
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/table",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Tables are used to display tabular data using rows and columns. ",
|
||||
"keywords": [
|
||||
"table"
|
||||
|
||||
14
packages/components/tabs/CHANGELOG.md
Normal file
14
packages/components/tabs/CHANGELOG.md
Normal file
@ -0,0 +1,14 @@
|
||||
# @nextui-org/tabs
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
@ -1,11 +1,63 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {act, render} from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import {focus} from "@nextui-org/test-utils";
|
||||
|
||||
import {Tabs} from "../src";
|
||||
import {Tabs, TabItem} from "../src";
|
||||
|
||||
type Item = {
|
||||
id: string;
|
||||
label: string;
|
||||
content?: React.ReactNode;
|
||||
};
|
||||
|
||||
let tabs: Item[] = [
|
||||
{
|
||||
id: "item1",
|
||||
label: "Item1 ",
|
||||
content: "Content 1",
|
||||
},
|
||||
{
|
||||
id: "item2",
|
||||
label: "Item 2",
|
||||
content: "Content 2",
|
||||
},
|
||||
{
|
||||
id: "item3",
|
||||
label: "Item 3",
|
||||
content: "Content 3",
|
||||
},
|
||||
];
|
||||
|
||||
describe("Tabs", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Tabs />);
|
||||
it("should render correctly (static)", () => {
|
||||
const wrapper = render(
|
||||
<Tabs aria-label="Tabs static test">
|
||||
<TabItem key="item1" title="Item 1">
|
||||
<div>Content 1</div>
|
||||
</TabItem>
|
||||
<TabItem key="item2" title="Item 2">
|
||||
<div>Content 2</div>
|
||||
</TabItem>
|
||||
<TabItem key="item3" title="Item 3">
|
||||
<div>Content 3</div>
|
||||
</TabItem>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("should render correctly (dynamic)", () => {
|
||||
const wrapper = render(
|
||||
<Tabs aria-label="Tabs static test" items={tabs}>
|
||||
{(item) => (
|
||||
<TabItem key={item.id} title={item.label}>
|
||||
<div>{item.content}</div>
|
||||
</TabItem>
|
||||
)}
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
@ -13,7 +65,165 @@ describe("Tabs", () => {
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
|
||||
render(<Tabs ref={ref} />);
|
||||
render(
|
||||
<Tabs ref={ref} aria-label="Tabs static test">
|
||||
<TabItem key="item1" title="Item 1">
|
||||
<div>Content 1</div>
|
||||
</TabItem>
|
||||
<TabItem key="item2" title="Item 2">
|
||||
<div>Content 2</div>
|
||||
</TabItem>
|
||||
<TabItem key="item3" title="Item 3">
|
||||
<div>Content 3</div>
|
||||
</TabItem>
|
||||
</Tabs>,
|
||||
);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
|
||||
test("should select the correct tab with keyboard navigation", async () => {
|
||||
const wrapper = render(
|
||||
<Tabs aria-label="Tabs static test">
|
||||
<TabItem key="item1" data-testid="item1" title="Item 1">
|
||||
<div>Content 1</div>
|
||||
</TabItem>
|
||||
<TabItem key="item2" data-testid="item2" title="Item 2">
|
||||
<div>Content 2</div>
|
||||
</TabItem>
|
||||
<TabItem key="item3" data-testid="item3" title="Item 3">
|
||||
<div>Content 3</div>
|
||||
</TabItem>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
const tab1 = wrapper.getByTestId("item1");
|
||||
const tab2 = wrapper.getByTestId("item2");
|
||||
const tab3 = wrapper.getByTestId("item3");
|
||||
|
||||
expect(tab1).toHaveAttribute("aria-selected", "true");
|
||||
expect(tab2).toHaveAttribute("aria-selected", "false");
|
||||
expect(tab3).toHaveAttribute("aria-selected", "false");
|
||||
|
||||
act(() => {
|
||||
focus(tab1);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.keyboard("[ArrowRight]");
|
||||
});
|
||||
|
||||
expect(tab1).toHaveAttribute("aria-selected", "false");
|
||||
expect(tab2).toHaveAttribute("aria-selected", "true");
|
||||
expect(tab3).toHaveAttribute("aria-selected", "false");
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.keyboard("[ArrowRight]");
|
||||
});
|
||||
|
||||
expect(tab1).toHaveAttribute("aria-selected", "false");
|
||||
expect(tab2).toHaveAttribute("aria-selected", "false");
|
||||
expect(tab3).toHaveAttribute("aria-selected", "true");
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.keyboard("[ArrowRight]");
|
||||
});
|
||||
|
||||
expect(tab1).toHaveAttribute("aria-selected", "true");
|
||||
expect(tab2).toHaveAttribute("aria-selected", "false");
|
||||
expect(tab3).toHaveAttribute("aria-selected", "false");
|
||||
});
|
||||
|
||||
test("should focus the correct tab with manual keyboard navigation", async () => {
|
||||
const wrapper = render(
|
||||
<Tabs aria-label="Tabs static test" keyboardActivation="manual">
|
||||
<TabItem key="item1" data-testid="item1" title="Item 1">
|
||||
<div>Content 1</div>
|
||||
</TabItem>
|
||||
<TabItem key="item2" data-testid="item2" title="Item 2">
|
||||
<div>Content 2</div>
|
||||
</TabItem>
|
||||
<TabItem key="item3" data-testid="item3" title="Item 3">
|
||||
<div>Content 3</div>
|
||||
</TabItem>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
const tab1 = wrapper.getByTestId("item1");
|
||||
const tab2 = wrapper.getByTestId("item2");
|
||||
const tab3 = wrapper.getByTestId("item3");
|
||||
|
||||
expect(tab1).toHaveAttribute("aria-selected", "true");
|
||||
expect(tab2).toHaveAttribute("aria-selected", "false");
|
||||
expect(tab3).toHaveAttribute("aria-selected", "false");
|
||||
|
||||
act(() => {
|
||||
focus(tab1);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.keyboard("[ArrowRight]");
|
||||
});
|
||||
|
||||
expect(tab2).toHaveFocus();
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.keyboard("[ArrowRight]");
|
||||
});
|
||||
|
||||
expect(tab3).toHaveFocus();
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.keyboard("[ArrowLeft]");
|
||||
});
|
||||
|
||||
expect(tab2).toHaveFocus();
|
||||
|
||||
expect(tab1).toHaveAttribute("aria-selected", "true");
|
||||
expect(tab2).toHaveAttribute("aria-selected", "false");
|
||||
expect(tab3).toHaveAttribute("aria-selected", "false");
|
||||
});
|
||||
|
||||
it("it should work with defaultSelectedKey", () => {
|
||||
const wrapper = render(
|
||||
<Tabs aria-label="Tabs static test" defaultSelectedKey="item2">
|
||||
<TabItem key="item1" title="Item 1">
|
||||
<div>Content 1</div>
|
||||
</TabItem>
|
||||
<TabItem key="item2" data-testid="item2" title="Item 2">
|
||||
<div>Content 2</div>
|
||||
</TabItem>
|
||||
<TabItem key="item3" title="Item 3">
|
||||
<div>Content 3</div>
|
||||
</TabItem>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
const tab2 = wrapper.getByTestId("item2");
|
||||
|
||||
expect(tab2).toHaveAttribute("aria-selected", "true");
|
||||
});
|
||||
|
||||
it("should not select a tab when disabled", async () => {
|
||||
const wrapper = render(
|
||||
<Tabs aria-label="Tabs static test" disabledKeys={["item2"]}>
|
||||
<TabItem key="item1" title="Item 1">
|
||||
<div>Content 1</div>
|
||||
</TabItem>
|
||||
<TabItem key="item2" data-testid="item2" title="Item 2">
|
||||
<div>Content 2</div>
|
||||
</TabItem>
|
||||
<TabItem key="item3" title="Item 3">
|
||||
<div>Content 3</div>
|
||||
</TabItem>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
const tab2 = wrapper.getByTestId("item2");
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(tab2);
|
||||
});
|
||||
|
||||
expect(tab2).toHaveAttribute("aria-selected", "false");
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tabs",
|
||||
"version": "2.0.0-beta.1",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
|
||||
"keywords": [
|
||||
"tabs"
|
||||
@ -54,6 +54,11 @@
|
||||
"framer-motion": "^10.11.2",
|
||||
"@react-types/shared": "^3.18.0",
|
||||
"react-lorem-component": "0.13.0",
|
||||
"@nextui-org/card": "workspace:*",
|
||||
"@nextui-org/input": "workspace:*",
|
||||
"@nextui-org/test-utils": "workspace:*",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@react-types/tabs": "^3.2.1",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
|
||||
import {ReactNode} from "react";
|
||||
|
||||
interface Props<T extends object = {}> extends Omit<ItemProps<"div", T>, "children"> {
|
||||
interface Props<T extends object = {}> extends Omit<ItemProps<"div", T>, "children" | "title"> {
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
children?: ReactNode | null;
|
||||
/**
|
||||
* The title of the component.
|
||||
*/
|
||||
title?: ReactNode | null;
|
||||
}
|
||||
|
||||
export type TabItemProps<T extends object = {}> = Props<T>;
|
||||
|
||||
@ -22,38 +22,57 @@ export interface TabItemProps<T = object> extends HTMLNextUIProps<"div"> {
|
||||
* @internal
|
||||
*/
|
||||
const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
|
||||
const {as, className, item, style, onClick, ...otherProps} = props;
|
||||
const {className, as, item, style, onClick, ...otherProps} = props;
|
||||
|
||||
const {key} = item;
|
||||
|
||||
const Component = as || "div";
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const {slots, state, tabPanelId, classNames} = useTabsContext();
|
||||
const Component = as || "div";
|
||||
|
||||
const {
|
||||
slots,
|
||||
state,
|
||||
tabPanelId,
|
||||
isDisabled: isDisabledProp,
|
||||
disableAnimation,
|
||||
classNames,
|
||||
} = useTabsContext();
|
||||
|
||||
const {tabProps, isSelected, isDisabled: isDisabledItem, isPressed} = useTab(
|
||||
{key},
|
||||
state,
|
||||
domRef,
|
||||
);
|
||||
|
||||
const isDisabled = isDisabledProp || isDisabledItem;
|
||||
|
||||
const {tabProps, isSelected, isDisabled, isPressed} = useTab({key}, state, domRef);
|
||||
const {focusProps, isFocused, isFocusVisible} = useFocusRing();
|
||||
const {hoverProps, isHovered} = useHover({
|
||||
isDisabled,
|
||||
});
|
||||
|
||||
const tabStyles = clsx(classNames?.tab, className, item.props?.className);
|
||||
const tabStyles = clsx(classNames?.tab, className);
|
||||
|
||||
return (
|
||||
<Component
|
||||
ref={domRef}
|
||||
data-disabled={dataAttr(isDisabledItem)}
|
||||
data-focus={dataAttr(isFocused)}
|
||||
data-focus-visible={dataAttr(isFocusVisible)}
|
||||
data-hover={dataAttr(isHovered)}
|
||||
data-hover-unselected={dataAttr(isHovered && !isSelected)}
|
||||
data-hover-unselected={dataAttr((isHovered || isPressed) && !isSelected)}
|
||||
data-pressed={dataAttr(isPressed)}
|
||||
data-selected={dataAttr(isSelected)}
|
||||
{...mergeProps(
|
||||
tabProps,
|
||||
focusProps,
|
||||
hoverProps,
|
||||
filterDOMProps(item.props, {labelable: true}),
|
||||
otherProps,
|
||||
!isDisabled
|
||||
? {
|
||||
...focusProps,
|
||||
...hoverProps,
|
||||
}
|
||||
: {},
|
||||
filterDOMProps(otherProps, {labelable: true}),
|
||||
)}
|
||||
aria-controls={tabPanelId}
|
||||
className={slots.tab?.({class: tabStyles})}
|
||||
@ -64,7 +83,7 @@ const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
|
||||
}}
|
||||
onClick={chain(onClick, tabProps.onClick)}
|
||||
>
|
||||
{isSelected && (
|
||||
{isSelected && !disableAnimation ? (
|
||||
<motion.span
|
||||
className={slots.cursor({class: classNames?.cursor})}
|
||||
layoutDependency={false}
|
||||
@ -74,7 +93,7 @@ const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
|
||||
duration: 0.6,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
) : null}
|
||||
<div
|
||||
className={slots.tabContent({
|
||||
class: classNames?.tabContent,
|
||||
|
||||
@ -3,7 +3,7 @@ import type {AriaTabPanelProps} from "@react-aria/tabs";
|
||||
import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx} from "@nextui-org/shared-utils";
|
||||
import {filterDOMProps, mergeProps} from "@react-aria/utils";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
import {useTabPanel} from "@react-aria/tabs";
|
||||
import {useFocusRing} from "@react-aria/focus";
|
||||
|
||||
@ -38,12 +38,7 @@ const TabPanel = forwardRef<TabPanelProps, "div">((props, ref) => {
|
||||
ref={domRef}
|
||||
data-focus={isFocused}
|
||||
data-focus-visible={isFocusVisible}
|
||||
{...mergeProps(
|
||||
tabPanelProps,
|
||||
focusProps,
|
||||
filterDOMProps(selectedItem.props, {labelable: true}),
|
||||
otherProps,
|
||||
)}
|
||||
{...mergeProps(tabPanelProps, focusProps, otherProps)}
|
||||
aria-labelledby={`${tabPanelId}-${state.selectedItem?.key}`}
|
||||
className={slots.panel?.({class: tabPanelStyles})}
|
||||
id={tabPanelId}
|
||||
|
||||
@ -1,17 +1,14 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {AriaTabProps} from "@react-aria/tabs";
|
||||
import {forwardRef, ForwardedRef, ReactElement, Ref} from "react";
|
||||
|
||||
import {TabsProvider} from "./tabs-context";
|
||||
import {UseTabsProps, useTabs} from "./use-tabs";
|
||||
import TabItem from "./tab-item";
|
||||
import TabPanel from "./tab-panel";
|
||||
|
||||
interface Props extends Omit<UseTabsProps, "ref"> {}
|
||||
interface Props<T> extends Omit<UseTabsProps<T>, "ref"> {}
|
||||
|
||||
export type TabsProps = Props & AriaTabProps;
|
||||
|
||||
const Tabs = forwardRef<TabsProps, "div">((props, ref) => {
|
||||
const {Component, state, context, getBaseProps, getTabListProps} = useTabs({ref, ...props});
|
||||
function Tabs<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
|
||||
const {Component, state, context, getBaseProps, getTabListProps} = useTabs<T>({ref, ...props});
|
||||
|
||||
return (
|
||||
<TabsProvider value={context}>
|
||||
@ -25,8 +22,11 @@ const Tabs = forwardRef<TabsProps, "div">((props, ref) => {
|
||||
<TabPanel key={state.selectedItem?.key} />
|
||||
</TabsProvider>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export type TabsProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
|
||||
|
||||
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
||||
export default forwardRef(Tabs) as <T = object>(props: TabsProps<T>) => ReactElement;
|
||||
|
||||
Tabs.displayName = "NextUI.Tabs";
|
||||
|
||||
export default Tabs;
|
||||
|
||||
@ -4,20 +4,18 @@ import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system"
|
||||
import {tabs} from "@nextui-org/theme";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, ReactRef} from "@nextui-org/shared-utils";
|
||||
import {useMemo, ReactNode, useId} from "react";
|
||||
import {useMemo, useId} from "react";
|
||||
import {TabListState, TabListStateOptions, useTabListState} from "@react-stately/tabs";
|
||||
import {AriaTabListOptions, useTabList} from "@react-aria/tabs";
|
||||
import {AriaTabListProps, useTabList} from "@react-aria/tabs";
|
||||
import {filterDOMProps, mergeProps} from "@react-aria/utils";
|
||||
import {CollectionProps} from "@nextui-org/aria-utils";
|
||||
import {CollectionChildren} from "@react-types/shared";
|
||||
|
||||
export interface Props extends HTMLNextUIProps<"div"> {
|
||||
export interface Props extends Omit<HTMLNextUIProps<"div">, "children"> {
|
||||
/**
|
||||
* Ref to the DOM node.
|
||||
*/
|
||||
ref?: ReactRef<HTMLElement | null>;
|
||||
/*
|
||||
* The list of `TabItem` elements.
|
||||
*/
|
||||
children?: ReactNode | ReactNode[];
|
||||
/**
|
||||
* Classname or List of classes to change the classNames of the element.
|
||||
* if `className` is passed, it will be added to the base slot.
|
||||
@ -25,7 +23,8 @@ export interface Props extends HTMLNextUIProps<"div"> {
|
||||
* @example
|
||||
* ```ts
|
||||
* <Tabs classNames={{
|
||||
* base:"base-classes", // table wrapper
|
||||
* base:"base-classes", // main wrapper (tabs + panels)
|
||||
* tabList: "tab-list-classes", // tabs wrapper
|
||||
* tab: "tab-classes", // tab item
|
||||
* panel: "panel-classes", // tab panel
|
||||
* }} />
|
||||
@ -34,29 +33,35 @@ export interface Props extends HTMLNextUIProps<"div"> {
|
||||
classNames?: SlotsToClasses<TabsSlots>;
|
||||
}
|
||||
|
||||
export type UseTabsProps<T = object> = Props &
|
||||
export type UseTabsProps<T> = Props &
|
||||
TabsVariantProps &
|
||||
TabListStateOptions<T> &
|
||||
AriaTabListOptions<T>;
|
||||
Omit<TabListStateOptions<T>, "children"> &
|
||||
Omit<AriaTabListProps<T>, "children" | "orientation"> &
|
||||
CollectionProps<T>;
|
||||
|
||||
export type ContextType<T = object> = {
|
||||
state: TabListState<T>;
|
||||
slots: TabsReturnType;
|
||||
tabPanelId: string;
|
||||
classNames?: SlotsToClasses<TabsSlots>;
|
||||
disableAnimation?: boolean;
|
||||
isDisabled?: boolean;
|
||||
};
|
||||
|
||||
export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
|
||||
const [props, variantProps] = mapPropsVariants(originalProps, tabs.variantKeys);
|
||||
|
||||
const {ref, as, className, classNames, ...otherProps} = props;
|
||||
const {ref, as, className, children, classNames, ...otherProps} = props;
|
||||
|
||||
const Component = as || "div";
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const state = useTabListState(otherProps);
|
||||
const {tabListProps} = useTabList(otherProps, state, domRef);
|
||||
const state = useTabListState<T>({
|
||||
children: children as CollectionChildren<T>,
|
||||
...otherProps,
|
||||
});
|
||||
const {tabListProps} = useTabList<T>(otherProps, state, domRef);
|
||||
|
||||
const tabListId = useId();
|
||||
const tabPanelId = useId();
|
||||
@ -78,8 +83,17 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
|
||||
slots,
|
||||
tabPanelId,
|
||||
classNames,
|
||||
isDisabled: originalProps?.isDisabled,
|
||||
disableAnimation: originalProps?.disableAnimation,
|
||||
}),
|
||||
[state, slots, tabPanelId, classNames],
|
||||
[
|
||||
state,
|
||||
slots,
|
||||
tabPanelId,
|
||||
originalProps?.disableAnimation,
|
||||
originalProps?.isDisabled,
|
||||
classNames,
|
||||
],
|
||||
);
|
||||
|
||||
const getBaseProps: PropGetter = (props) => ({
|
||||
|
||||
@ -1,7 +1,18 @@
|
||||
import React from "react";
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {tabs} from "@nextui-org/theme";
|
||||
import {button, link, tabs} from "@nextui-org/theme";
|
||||
import Lorem from "react-lorem-component";
|
||||
import {Input} from "@nextui-org/input";
|
||||
import {Button} from "@nextui-org/button";
|
||||
import {Card, CardBody} from "@nextui-org/card";
|
||||
import {
|
||||
AlignVerticallyBoldIcon,
|
||||
AlignHorizontallyBoldIcon,
|
||||
AlignBottomBoldIcon,
|
||||
AlignLeftBoldIcon,
|
||||
AlignRightBoldIcon,
|
||||
AlignTopBoldIcon,
|
||||
} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Tabs, TabItem, TabsProps} from "../src";
|
||||
|
||||
@ -9,6 +20,12 @@ export default {
|
||||
title: "Components/Tabs",
|
||||
component: Tabs,
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["solid", "underlined", "bordered"],
|
||||
},
|
||||
},
|
||||
color: {
|
||||
control: {
|
||||
type: "select",
|
||||
@ -32,6 +49,11 @@ export default {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Tabs>;
|
||||
|
||||
@ -39,7 +61,7 @@ const defaultProps = {
|
||||
...tabs.defaultVariants,
|
||||
};
|
||||
|
||||
const Template: ComponentStory<typeof Tabs> = (args: TabsProps) => (
|
||||
const StaticTemplate: ComponentStory<any> = (args: TabsProps) => (
|
||||
<Tabs aria-label="Tabs example" {...args}>
|
||||
<TabItem key="world" title="World">
|
||||
<Lorem count={1} sentenceUpperBound={20} />
|
||||
@ -59,7 +81,233 @@ const Template: ComponentStory<typeof Tabs> = (args: TabsProps) => (
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
const WithIconsTemplate: ComponentStory<any> = (args: TabsProps) => (
|
||||
<Tabs
|
||||
aria-label="Tabs example"
|
||||
{...args}
|
||||
classNames={{
|
||||
tab: "text-lg",
|
||||
}}
|
||||
>
|
||||
<TabItem key="align-left" title={<AlignLeftBoldIcon />} />
|
||||
<TabItem key="align-vertically" title={<AlignVerticallyBoldIcon />} />
|
||||
<TabItem key="align-right" title={<AlignRightBoldIcon />} />
|
||||
<TabItem key="align-top" title={<AlignTopBoldIcon />} />
|
||||
<TabItem key="align-horizontally" title={<AlignHorizontallyBoldIcon />} />
|
||||
<TabItem key="align-bottom" title={<AlignBottomBoldIcon />} />
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
const ControlledTemplate: ComponentStory<any> = (args: TabsProps) => {
|
||||
const [selected, setSelected] = React.useState<React.Key>("world");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Tabs
|
||||
aria-label="Tabs example"
|
||||
{...args}
|
||||
selectedKey={selected}
|
||||
onSelectionChange={setSelected}
|
||||
>
|
||||
<TabItem key="world" title="World">
|
||||
<Lorem count={1} sentenceUpperBound={20} />
|
||||
</TabItem>
|
||||
<TabItem key="ny" title="N.Y">
|
||||
<Lorem count={1} sentenceUpperBound={30} />
|
||||
</TabItem>
|
||||
<TabItem key="business" title="Business">
|
||||
<Lorem count={1} sentenceUpperBound={10} />
|
||||
</TabItem>
|
||||
<TabItem key="arts" title="Arts">
|
||||
<Lorem count={1} sentenceUpperBound={50} />
|
||||
</TabItem>
|
||||
<TabItem key="science" title="Science">
|
||||
<Lorem count={1} sentenceUpperBound={24} />
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<p className="text-neutral-500">Selected: {selected}</p>
|
||||
|
||||
<div className="flex gap-2 justify-start">
|
||||
<button
|
||||
className={button({color: "secondary", variant: "flat"})}
|
||||
onClick={() => setSelected("arts")}
|
||||
>
|
||||
Select "Arts"
|
||||
</button>
|
||||
<button
|
||||
className={button({color: "secondary", variant: "flat"})}
|
||||
onClick={() => setSelected("science")}
|
||||
>
|
||||
Select "Science"
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type Item = {
|
||||
id: string;
|
||||
label: string;
|
||||
content?: React.ReactNode;
|
||||
};
|
||||
|
||||
const DynamicTemplate: ComponentStory<any> = (args: TabsProps<Item>) => {
|
||||
let tabs: Item[] = [
|
||||
{
|
||||
id: "world",
|
||||
label: "World",
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
},
|
||||
{
|
||||
id: "ny",
|
||||
label: "N.Y.",
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam id libero rutrum aliquam. Sed eget nunc vitae nisl aliquam aliquet. Sed vitae nisl eget nunc aliquam aliquet. Sed eget nunc vitae nisl aliquam aliquet. Sed vitae nisl eget nunc aliquam aliquet. Sed eget nunc vitae nisl aliquam aliquet. ",
|
||||
},
|
||||
{
|
||||
id: "business",
|
||||
label: "Business",
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam id libero rutrum aliquam. Sed eget nunc vitae nisl aliquam aliquet.",
|
||||
},
|
||||
{
|
||||
id: "arts",
|
||||
label: "Arts",
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam id libero rutrum aliquam. Sed eget nunc vitae nisl aliquam aliquet. Sed vitae nisl eget nunc aliquam aliquet. Sed eget nunc vitae nisl aliquam aliquet. Sed vitae nisl eget nunc aliquam aliquet. Sed eget nunc vitae nisl aliquam aliquet. ",
|
||||
},
|
||||
{
|
||||
id: "science",
|
||||
label: "Science",
|
||||
content:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam id libero rutrum aliquam. Sed eget nunc vitae nisl aliquam aliquet. Sed vitae nisl eget nunc aliquam aliquet. Sed eget nunc vitae nisl aliquam aliquet. Sed vitae nisl eget nunc aliquam aliquet. Sed eget nunc vitae nisl aliquam aliquet. ",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Tabs aria-label="Dynamic tabs" {...args} items={tabs}>
|
||||
{(item) => (
|
||||
<TabItem key={item.id} title={item.label}>
|
||||
{item.content}
|
||||
</TabItem>
|
||||
)}
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
const WithFormTemplate: ComponentStory<any> = (args: TabsProps) => {
|
||||
const [selected, setSelected] = React.useState<React.Key>("login");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center w-full h-screen">
|
||||
<Card className="w-full w-[340px] h-[400px]">
|
||||
<CardBody>
|
||||
<Tabs
|
||||
aria-label="Tabs form"
|
||||
{...args}
|
||||
selectedKey={selected}
|
||||
onSelectionChange={setSelected}
|
||||
>
|
||||
<TabItem key="login" title="Login">
|
||||
<form className="flex flex-col gap-4">
|
||||
<Input isRequired label="Email" placeholder="Enter your email" type="email" />
|
||||
<Input
|
||||
isRequired
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
/>
|
||||
<p className="text-center text-sm">
|
||||
Need to create an account?
|
||||
<button className={link({size: "sm"})} onClick={() => setSelected("sign-up")}>
|
||||
Sign up
|
||||
</button>
|
||||
</p>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button fullWidth color="primary">
|
||||
Login
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</TabItem>
|
||||
<TabItem key="sign-up" title="Sign up">
|
||||
<form className="flex flex-col gap-4 h-[300px]">
|
||||
<Input isRequired label="Name" placeholder="Enter your name" type="password" />
|
||||
<Input isRequired label="Email" placeholder="Enter your email" type="email" />
|
||||
<Input
|
||||
isRequired
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
/>
|
||||
<p className="text-center text-sm">
|
||||
Already have an account?
|
||||
<button className={link({size: "sm"})} onClick={() => setSelected("login")}>
|
||||
Login
|
||||
</button>
|
||||
</p>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button fullWidth color="primary">
|
||||
Sign up
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Static = StaticTemplate.bind({});
|
||||
Static.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
export const Dynamic = DynamicTemplate.bind({});
|
||||
Dynamic.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
export const Controlled = ControlledTemplate.bind({});
|
||||
Controlled.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
export const WithIcons = WithIconsTemplate.bind({});
|
||||
WithIcons.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
export const WithForm = WithFormTemplate.bind({});
|
||||
WithForm.args = {
|
||||
...defaultProps,
|
||||
fullWidth: true,
|
||||
variant: "underlined",
|
||||
};
|
||||
|
||||
export const ManualKeyboardActivation = StaticTemplate.bind({});
|
||||
ManualKeyboardActivation.args = {
|
||||
...defaultProps,
|
||||
keyboardActivation: "manual",
|
||||
};
|
||||
|
||||
export const DisabledItems = StaticTemplate.bind({});
|
||||
DisabledItems.args = {
|
||||
...defaultProps,
|
||||
disabledKeys: ["ny", "arts"],
|
||||
};
|
||||
|
||||
export const Disabled = StaticTemplate.bind({});
|
||||
Disabled.args = {
|
||||
...defaultProps,
|
||||
isDisabled: true,
|
||||
};
|
||||
|
||||
export const DisableAnimation = StaticTemplate.bind({});
|
||||
DisableAnimation.args = {
|
||||
...defaultProps,
|
||||
disableAnimation: true,
|
||||
};
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/tooltip
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tooltip",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "A React Component for rendering dynamically positioned Tooltips",
|
||||
"keywords": [
|
||||
"tooltip"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/user
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/user",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Flexible User Profile Component.",
|
||||
"keywords": [
|
||||
"user"
|
||||
|
||||
@ -1,5 +1,43 @@
|
||||
# @nextui-org/react
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/divider@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/table@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/tabs@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/kbd@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/react",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "🚀 Beautiful and modern React UI library.",
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/system
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/system",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "NextUI system primitives",
|
||||
"keywords": [
|
||||
"system"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/theme
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/theme",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "The default theme for NextUI components",
|
||||
"keywords": [
|
||||
"theme",
|
||||
|
||||
@ -42,7 +42,7 @@ const badge = tv({
|
||||
solid: {},
|
||||
flat: {},
|
||||
faded: {
|
||||
badge: "border-1.5",
|
||||
badge: "border-2.5",
|
||||
},
|
||||
shadow: {},
|
||||
},
|
||||
|
||||
@ -53,7 +53,7 @@ const button = tv({
|
||||
bordered: "border-2 !bg-transparent",
|
||||
light: "!bg-transparent",
|
||||
flat: "",
|
||||
faded: "border-1.5",
|
||||
faded: "border-2.5",
|
||||
shadow: "",
|
||||
ghost: "border-2 !bg-transparent",
|
||||
},
|
||||
|
||||
@ -43,18 +43,18 @@ const chip = tv({
|
||||
variant: {
|
||||
solid: {},
|
||||
bordered: {
|
||||
base: "border-1.5 bg-transparent",
|
||||
base: "border-2.5 bg-transparent",
|
||||
},
|
||||
light: {
|
||||
base: "bg-transparent",
|
||||
},
|
||||
flat: {},
|
||||
faded: {
|
||||
base: "border-1.5",
|
||||
base: "border-2.5",
|
||||
},
|
||||
shadow: {},
|
||||
dot: {
|
||||
base: "border-1.5 border-neutral text-foreground bg-transparent",
|
||||
base: "border-2.5 border-neutral text-foreground bg-transparent",
|
||||
},
|
||||
},
|
||||
color: {
|
||||
|
||||
@ -43,7 +43,7 @@ const pagination = tv({
|
||||
variant: {
|
||||
bordered: {
|
||||
item: [
|
||||
"border-1.5",
|
||||
"border-2.5",
|
||||
"border-neutral",
|
||||
"bg-transparent",
|
||||
"data-[hover=true]:bg-neutral-100",
|
||||
@ -54,7 +54,7 @@ const pagination = tv({
|
||||
},
|
||||
flat: {},
|
||||
faded: {
|
||||
item: "border-1.5",
|
||||
item: "border-2.5",
|
||||
},
|
||||
},
|
||||
color: {
|
||||
|
||||
@ -13,9 +13,9 @@ import {colorVariants} from "../utils";
|
||||
*
|
||||
* <div className={base())}>
|
||||
* <div className={tabList())}>
|
||||
* <div className={tab())}>Tab 1</div>
|
||||
* <div className={tab())}>Tab 2</div>
|
||||
* <div className={tab())}>Tab 3</div>
|
||||
* <div className={tab())} data-selected="boolean">Tab 1</div>
|
||||
* <div className={tab())} data-selected="boolean" data-disabled="boolean">Tab 2</div>
|
||||
* <div className={tab())} data-selected="boolean">Tab 3</div>
|
||||
* </div>
|
||||
* <div className={panel())}>Selected panel</div>
|
||||
* </div>
|
||||
@ -38,8 +38,8 @@ const tabs = tv({
|
||||
"outline-none",
|
||||
"cursor-pointer",
|
||||
"transition-opacity",
|
||||
"text-neutral-600",
|
||||
"data-[selected=true]:text-foreground",
|
||||
"data-[disabled=true]:cursor-not-allowed",
|
||||
"data-[disabled=true]:opacity-30",
|
||||
"data-[hover-unselected=true]:opacity-70",
|
||||
// focus ring
|
||||
"data-[focus-visible=true]:outline-none",
|
||||
@ -49,57 +49,64 @@ const tabs = tv({
|
||||
"data-[focus-visible=true]:ring-offset-background",
|
||||
"data-[focus-visible=true]:dark:ring-offset-background-dark",
|
||||
],
|
||||
tabContent: ["relative", "z-10"],
|
||||
cursor: ["absolute", "inset-0", "z-0", "bg-white", "shadow-md"],
|
||||
panel: ["mt-3"],
|
||||
tabContent: [
|
||||
"relative",
|
||||
"z-10",
|
||||
"text-inherit",
|
||||
"transition-colors",
|
||||
"text-neutral-500",
|
||||
"group-data-[selected=true]:text-foreground",
|
||||
],
|
||||
cursor: ["absolute", "z-0", "bg-white", "shadow-md"],
|
||||
panel: [
|
||||
"mt-3",
|
||||
"outline-none",
|
||||
// focus ring
|
||||
"data-[focus-visible=true]:outline-none",
|
||||
"data-[focus-visible=true]:ring-2",
|
||||
"data-[focus-visible=true]:ring-primary",
|
||||
"data-[focus-visible=true]:ring-offset-2",
|
||||
"data-[focus-visible=true]:ring-offset-background",
|
||||
"data-[focus-visible=true]:dark:ring-offset-background-dark",
|
||||
],
|
||||
},
|
||||
variants: {
|
||||
variant: {
|
||||
solid: {
|
||||
cursor: "inset-0",
|
||||
},
|
||||
underlined: {
|
||||
tabList: "bg-transparent",
|
||||
cursor: "h-[2px] w-[80%] bottom-0 shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
|
||||
},
|
||||
bordered: {
|
||||
tabList: "bg-transparent border-2 border-neutral-200 shadow-sm",
|
||||
cursor: "inset-0",
|
||||
},
|
||||
},
|
||||
color: {
|
||||
neutral: {
|
||||
cursor: ["bg-background", "dark:bg-neutral"],
|
||||
tabContent: "group-data-[selected=true]:text-neutral-foreground",
|
||||
},
|
||||
primary: {
|
||||
cursor: colorVariants.solid.primary,
|
||||
tabContent: "group-data-[selected=true]:text-primary-foreground",
|
||||
},
|
||||
secondary: {
|
||||
cursor: colorVariants.solid.secondary,
|
||||
tabContent: "group-data-[selected=true]:text-secondary-foreground",
|
||||
},
|
||||
success: {
|
||||
cursor: colorVariants.solid.success,
|
||||
tabContent: "group-data-[selected=true]:text-success-foreground",
|
||||
},
|
||||
warning: {
|
||||
cursor: colorVariants.solid.warning,
|
||||
tabContent: "group-data-[selected=true]:text-warning-foreground",
|
||||
},
|
||||
danger: {
|
||||
cursor: colorVariants.solid.danger,
|
||||
tabContent: "group-data-[selected=true]:text-danger-foreground",
|
||||
},
|
||||
neutral: {},
|
||||
primary: {},
|
||||
secondary: {},
|
||||
success: {},
|
||||
warning: {},
|
||||
danger: {},
|
||||
},
|
||||
size: {
|
||||
xs: {
|
||||
tabContent: "text-xs",
|
||||
tab: "h-7",
|
||||
tab: "h-7 text-xs",
|
||||
},
|
||||
sm: {
|
||||
tabContent: "text-sm",
|
||||
tab: "h-8",
|
||||
tab: "h-8 text-sm",
|
||||
},
|
||||
md: {
|
||||
tabContent: "text-sm",
|
||||
tab: "h-9",
|
||||
tab: "h-9 text-sm",
|
||||
},
|
||||
lg: {
|
||||
tabContent: "text-base",
|
||||
tab: "h-10",
|
||||
tab: "h-10 text-base",
|
||||
},
|
||||
xl: {
|
||||
tabContent: "text-base",
|
||||
tab: "h-11",
|
||||
tab: "h-11 text-base",
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
@ -114,35 +121,25 @@ const tabs = tv({
|
||||
cursor: "rounded",
|
||||
},
|
||||
sm: {
|
||||
tabList: "rounded-sm",
|
||||
tabList: "rounded-md",
|
||||
tab: "rounded-sm",
|
||||
cursor: "rounded-sm",
|
||||
},
|
||||
md: {
|
||||
tabList: "rounded-md",
|
||||
tabList: "rounded-lg",
|
||||
tab: "rounded-md",
|
||||
cursor: "rounded-md",
|
||||
},
|
||||
lg: {
|
||||
tabList: "rounded-lg",
|
||||
tabList: "rounded-xl",
|
||||
tab: "rounded-lg",
|
||||
cursor: "rounded-lg",
|
||||
},
|
||||
xl: {
|
||||
tabList: "rounded-xl",
|
||||
tabList: "rounded-2xl",
|
||||
tab: "rounded-xl",
|
||||
cursor: "rounded-xl",
|
||||
},
|
||||
"2xl": {
|
||||
tabList: "rounded-2xl",
|
||||
tab: "rounded-2xl",
|
||||
cursor: "rounded-2xl",
|
||||
},
|
||||
"3xl": {
|
||||
tabList: "rounded-3xl",
|
||||
tab: "rounded-3xl",
|
||||
cursor: "rounded-3xl",
|
||||
},
|
||||
full: {
|
||||
tabList: "rounded-full",
|
||||
tab: "rounded-full",
|
||||
@ -160,14 +157,244 @@ const tabs = tv({
|
||||
tabList: "opacity-50 pointer-events-none",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
tab: "transition-none",
|
||||
tabContent: "transition-none",
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
radius: "lg",
|
||||
radius: "xl",
|
||||
color: "neutral",
|
||||
variant: "solid",
|
||||
size: "md",
|
||||
fullWidth: false,
|
||||
isDisabled: false,
|
||||
disableAnimation: false,
|
||||
},
|
||||
compoundVariants: [
|
||||
/**
|
||||
* Variants & Colors
|
||||
*/
|
||||
// solid + bordered && color
|
||||
{
|
||||
variant: ["solid", "bordered"],
|
||||
color: "neutral",
|
||||
class: {
|
||||
cursor: ["bg-background", "dark:bg-neutral"],
|
||||
tabContent: "group-data-[selected=true]:text-neutral-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "bordered"],
|
||||
color: "primary",
|
||||
class: {
|
||||
cursor: colorVariants.solid.primary,
|
||||
tabContent: "group-data-[selected=true]:text-primary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "bordered"],
|
||||
color: "secondary",
|
||||
class: {
|
||||
cursor: colorVariants.solid.secondary,
|
||||
tabContent: "group-data-[selected=true]:text-secondary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "bordered"],
|
||||
color: "success",
|
||||
class: {
|
||||
cursor: colorVariants.solid.success,
|
||||
tabContent: "group-data-[selected=true]:text-success-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "bordered"],
|
||||
color: "warning",
|
||||
class: {
|
||||
cursor: colorVariants.solid.warning,
|
||||
tabContent: "group-data-[selected=true]:text-warning-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "bordered"],
|
||||
color: "danger",
|
||||
class: {
|
||||
cursor: colorVariants.solid.danger,
|
||||
tabContent: "group-data-[selected=true]:text-danger-foreground",
|
||||
},
|
||||
},
|
||||
// underlined && color
|
||||
{
|
||||
variant: "underlined",
|
||||
color: "neutral",
|
||||
class: {
|
||||
cursor: "bg-foreground",
|
||||
tabContent: "group-data-[selected=true]:text-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "underlined",
|
||||
color: "primary",
|
||||
class: {
|
||||
cursor: "bg-primary",
|
||||
tabContent: "group-data-[selected=true]:text-primary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "underlined",
|
||||
color: "secondary",
|
||||
class: {
|
||||
cursor: "bg-secondary",
|
||||
tabContent: "group-data-[selected=true]:text-secondary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "underlined",
|
||||
color: "success",
|
||||
class: {
|
||||
cursor: "bg-success",
|
||||
tabContent: "group-data-[selected=true]:text-success",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "underlined",
|
||||
color: "warning",
|
||||
class: {
|
||||
cursor: "bg-warning",
|
||||
tabContent: "group-data-[selected=true]:text-warning",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "underlined",
|
||||
color: "danger",
|
||||
class: {
|
||||
cursor: "bg-danger",
|
||||
tabContent: "group-data-[selected=true]:text-danger",
|
||||
},
|
||||
},
|
||||
/**
|
||||
* Disable animation & Variants & Colors
|
||||
*/
|
||||
// disabledAnimation && underlined
|
||||
{
|
||||
disableAnimation: true,
|
||||
variant: "underlined",
|
||||
class: {
|
||||
tab: [
|
||||
"after:content-['']",
|
||||
"after:absolute",
|
||||
"after:bottom-0",
|
||||
"after:h-[2px]",
|
||||
"after:w-[80%]",
|
||||
"after:opacity-0",
|
||||
"after:shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
|
||||
"data-[selected=true]:after:opacity-100",
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// disableAnimation && color && solid/bordered
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "neutral",
|
||||
variant: ["solid", "bordered"],
|
||||
class: {
|
||||
tab: "data-[selected=true]:bg-neutral data-[selected=true]:text-neutral-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "primary",
|
||||
variant: ["solid", "bordered"],
|
||||
class: {
|
||||
tab: "data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "secondary",
|
||||
variant: ["solid", "bordered"],
|
||||
class: {
|
||||
tab: "data-[selected=true]:bg-secondary data-[selected=true]:text-secondary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "success",
|
||||
variant: ["solid", "bordered"],
|
||||
class: {
|
||||
tab: "data-[selected=true]:bg-success data-[selected=true]:text-success-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "warning",
|
||||
variant: ["solid", "bordered"],
|
||||
class: {
|
||||
tab: "data-[selected=true]:bg-warning data-[selected=true]:text-warning-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "danger",
|
||||
variant: ["solid", "bordered"],
|
||||
class: {
|
||||
tab: "data-[selected=true]:bg-danger data-[selected=true]:text-danger-foreground",
|
||||
},
|
||||
},
|
||||
// disableAnimation && color && underlined
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "neutral",
|
||||
variant: "underlined",
|
||||
class: {
|
||||
tab: "data-[selected=true]:after:bg-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "primary",
|
||||
variant: "underlined",
|
||||
class: {
|
||||
tab: "data-[selected=true]:after:bg-primary",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "secondary",
|
||||
variant: "underlined",
|
||||
class: {
|
||||
tab: "data-[selected=true]:after:bg-secondary",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "success",
|
||||
variant: "underlined",
|
||||
class: {
|
||||
tab: "data-[selected=true]:after:bg-success",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "warning",
|
||||
variant: "underlined",
|
||||
class: {
|
||||
tab: "data-[selected=true]:after:bg-warning",
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: true,
|
||||
color: "danger",
|
||||
variant: "underlined",
|
||||
class: {
|
||||
tab: "data-[selected=true]:after:bg-danger",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export type TabsVariantProps = VariantProps<typeof tabs>;
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-accordion-item
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-accordion-item",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Internal impl for react aria accordion item",
|
||||
"keywords": [
|
||||
"use-aria-accordion-item"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-button
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-button",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
|
||||
"keywords": [
|
||||
"use-aria-button"
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @nextui-org/use-aria-field
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230428031422
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-field",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Based on react-aria useField hook, provides the accessibility implementation for input fields",
|
||||
"keywords": [
|
||||
"use-aria-field"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-label
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-label",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Based on react-aria label hook, it provides the accessibility implementation for labels and their associated elements. Labels provide context for user inputs.",
|
||||
"keywords": [
|
||||
"use-aria-label"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-slot-id
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-slot-id",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Based on react-aria useSlotId, used to generate an id, and after render check if that id is rendered",
|
||||
"keywords": [
|
||||
"use-aria-slot-id"
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
# @nextui-org/use-aria-toggle-button
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-toggle-button",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
|
||||
"keywords": [
|
||||
"use-aria-toggle-button"
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
# @nextui-org/use-callback-ref
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-callback-ref",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "React hook to persist any value between renders, but keeps it up-to-date if it changes.",
|
||||
"keywords": [
|
||||
"use-callback-ref"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-clipboard
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-clipboard",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "Wrapper around navigator.clipboard with feedback timeout",
|
||||
"keywords": [
|
||||
"use-clipboard"
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
# @nextui-org/use-disclosure
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-callback-ref@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-disclosure",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "The hook in charge of managing modals",
|
||||
"keywords": [
|
||||
"use-disclosure"
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
# @nextui-org/use-image
|
||||
|
||||
## 0.0.0-dev-v2-20230428031422
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tabs component added
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230428031422
|
||||
|
||||
## 0.0.0-dev-v2-20230425031000
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-image",
|
||||
"version": "0.0.0-dev-v2-20230425031000",
|
||||
"version": "0.0.0-dev-v2-20230428031422",
|
||||
"description": "React hook for progressing image loading",
|
||||
"keywords": [
|
||||
"use-image"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user