archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(root): pagination docs done, colors a11y improved

Browse Source
This commit is contained in:
Junior Garcia 2023-06-19 21:48:03 -03:00
parent 63a2f2d4b3
commit fdecb49117
147 changed files with 1174 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/docs/components/docs/components/community.tsx
View File

@ -1,4 +1,4 @@
import {FeaturesGrid} from "@/components/marketing";
import {FeaturesGrid} from "@/components/marketing/features-grid";
import {communityAccounts} from "@/libs/constants";
export const Community = () => {

2
apps/docs/components/docs/components/frameworks.tsx
View File

@ -1,5 +1,5 @@
import {NewNextJSIcon, ViteIcon, RemixIcon, AstroIcon} from "@/components/icons";
import {FeaturesGrid} from "@/components/marketing";
import {FeaturesGrid} from "@/components/marketing/features-grid";
const frameworks = [
{

3
apps/docs/components/marketing/features-grid.tsx
View File

@ -9,8 +9,7 @@ import {LinkIcon} from "@nextui-org/shared-icons";
const styles = tv({
slots: {
base: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
card:
"dark:border-transparent bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]",
card: "dark:border-transparent bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]",
header: "gap-2 pb-0",
body: "",
iconWrapper:

9
apps/docs/components/marketing/index.ts
View File

@ -1,9 +0,0 @@
export * from "./hero";
export * from "./a11y-otb";
export * from "./features-grid";
export * from "./dark-mode";
export * from "./customization";
export * from "./last-but-not-least";
export * from "./support";
export * from "./install-banner";
export * from "./community";

3
apps/docs/components/marketing/support.tsx
View File

@ -6,7 +6,8 @@ import {clamp, get} from "lodash";
import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
import {FeaturesGrid} from "@/components/marketing";
import {FeaturesGrid} from "./features-grid";
import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons";
import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
import {SonarPulse} from "@/components/sonar-pulse";

4
apps/docs/components/mdx-components.tsx
View File

@ -152,7 +152,7 @@ const InlineCode = ({children}: {children?: React.ReactNode}) => {
);
};
export const MDXComponents = ({
export const MDXComponents = {
/**
* Next.js components
*/
@ -203,4 +203,4 @@ export const MDXComponents = ({
/>
),
// Block,
} as unknown) as Record<string, React.ReactNode>;
} as unknown as Record<string, React.ReactNode>;

8
apps/docs/components/theme-switch.tsx
View File

@ -1,8 +1,11 @@
"use client";
import {FC} from "react";
import {VisuallyHidden} from "@react-aria/visually-hidden";
import {SwitchProps, useSwitch} from "@nextui-org/react";
import {useTheme} from "next-themes";
import {clsx} from "@nextui-org/shared-utils";
import {useIsSSR} from "@react-aria/ssr";
import {SunFilledIcon, MoonFilledIcon} from "@/components/icons";
@ -13,6 +16,7 @@ export interface ThemeSwitchProps {
export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
const {theme, setTheme} = useTheme();
const isSSR = useIsSSR();
const onChange = () => {
theme === "light" ? setTheme("dark") : setTheme("light");
@ -28,7 +32,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
<Component
{...getBaseProps({
className: clsx(
"p-1 transition-opacity hover:opacity-80 cursor-pointer",
"p-1 w-8 h-8 transition-opacity hover:opacity-80 cursor-pointer",
className,
classNames?.base,
),
@ -56,7 +60,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
),
})}
>
{isSelected ? <MoonFilledIcon size={22} /> : <SunFilledIcon size={22} />}
{!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
</div>
</Component>
);

6
apps/docs/content/components/pagination/boundaries.ts
View File

@ -6,19 +6,19 @@ export default function App() {
<p>1 Boundary (default)</p>
<Pagination
total={10}
color="danger"
color="secondary"
/>
<p>2 Boundaries</p>
<Pagination
total={10}
boundaries={2}
color="danger"
color="secondary"
/>
<p>3 Boundaries</p>
<Pagination
total={10}
boundaries={3}
color="danger"
color="secondary"
/>
</div>
);

97
apps/docs/content/components/pagination/custom-impl.ts Normal file
View File

@ -0,0 +1,97 @@
const ChevronIcon = `export const ChevronIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path
d="M15.5 19l-7-7 7-7"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
</svg>
);
`;
const App = `import {usePagination, PaginationItemType} from "@nextui-org/react";
import {ChevronIcon} from "./ChevronIcon";
export default function App() {
const {activePage, range, setPage, onNext, onPrevious} = usePagination({
total: 6,
showControls: true,
siblings: 10,
boundaries: 10,
});
return (
<div className="flex flex-col gap-2">
<p>Active page: {activePage}</p>
<ul className="flex gap-2 items-center">
{range.map((page) => {
if (page === PaginationItemType.NEXT) {
return (
<li key={page} aria-label="next page" className="w-4 h-4">
<button
className="w-full h-full bg-default-200 rounded-full"
onClick={onNext}
>
<ChevronIcon className="rotate-180" />
</button>
</li>
);
}
if (page === PaginationItemType.PREV) {
return (
<li key={page} aria-label="previous page" className="w-4 h-4">
<button
className="w-full h-full bg-default-200 rounded-full"
onClick={onPrevious}
>
<ChevronIcon />
</button>
</li>
);
}
if (page === PaginationItemType.DOTS) {
return (
<li key={page} className="w-4 h-4">
...
</li>
);
}
return (
<li key={page} aria-label={\`page \${page}\`} className="w-4 h-4">
<button
className={cn(
"w-full h-full bg-default-300 rounded-full",
activePage === page && "bg-secondary"
)}
onClick={() => setPage(page)}
/>
</li>
);
})}
</ul>
</div>
);
}`;
const react = {
"/App.jsx": App,
"/ChevronIcon.jsx": ChevronIcon,
};
export default {
...react,
};

4
apps/docs/content/components/pagination/custom-items.ts
View File

@ -86,7 +86,7 @@ export default function App() {
className={cn(
className,
isActive &&
"bg-gradient-to-br from-indigo-500 to-pink-500 border border-white/50 shadow-pink-500/30 shadow-lg font-bold",
"bg-gradient-to-br from-indigo-500 to-pink-500 shadow-pink-500/30 shadow-lg font-bold",
)}
onClick={() => setPage(value)}
>
@ -149,7 +149,7 @@ export default function App() {
className={cn(
className,
isActive &&
"bg-gradient-to-br from-indigo-500 to-pink-500 border border-white/50 shadow-pink-500/30 shadow-lg font-bold",
"bg-gradient-to-br from-indigo-500 to-pink-500 shadow-pink-500/30 shadow-lg font-bold",
)}
onClick={() => setPage(value)}
>

23
apps/docs/content/components/pagination/custom-styles.ts Normal file
View File

@ -0,0 +1,23 @@
const App = `import {Pagination, Button} from "@nextui-org/react";
export default function App() {
return (
<Pagination
total={10}
classNames={{
base: "gap-0 rounded border-2 border-default",
item: "w-8 h-8 text-sm rounded-none bg-transparent",
cursor:
"bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
}}
/>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

6
apps/docs/content/components/pagination/index.ts
View File

@ -8,10 +8,13 @@ import controls from "./controls";
import loop from "./loop";
import initialPage from "./initial-page";
import compact from "./compact";
import shadow from "./shadow";
import controlled from "./controlled";
import siblings from "./siblings";
import boundaries from "./boundaries";
import customItems from "./custom-items";
import customStyles from "./custom-styles";
import customImpl from "./custom-impl";
export const paginationContent = {
usage,
@ -22,10 +25,13 @@ export const paginationContent = {
variants,
controls,
loop,
shadow,
initialPage,
compact,
controlled,
siblings,
boundaries,
customItems,
customStyles,
customImpl,
};

15
apps/docs/content/components/pagination/shadow.ts Normal file
View File

@ -0,0 +1,15 @@
const App = `import {Pagination} from "@nextui-org/react";
export default function App() {
return (
<Pagination showShadow color="warning" total={10} initialPage={1} />
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

3
apps/docs/content/components/pagination/siblings.ts
View File

@ -6,19 +6,16 @@ export default function App() {
<p>1 Sibling (default)</p>
<Pagination
total={10}
color="danger"
/>
<p>2 Siblings</p>
<Pagination
total={10}
siblings={2}
color="danger"
/>
<p>3 Siblings</p>
<Pagination
total={10}
siblings={3}
color="danger"
/>
</div>
);

6
apps/docs/content/docs/components/accordion.mdx
View File

@ -231,9 +231,9 @@ Here's an example of how to customize the accordion styles:
### Accordion Events
| Attribute | Type | Description | Default |
| ----------------- | ---------------------------------------- | -------------------------------------------------- | ------- |
| onSelectionChange | `(keys: "all" ｜ Set<React.Key>) => any` | Handler that is called when the selection changes. | |
| Attribute | Type | Description |
| ----------------- | ---------------------------------------- | -------------------------------------------------- |
| onSelectionChange | `(keys: "all" ｜ Set<React.Key>) => any` | Handler that is called when the selection changes. |
---

138
apps/docs/content/docs/components/pagination.mdx
View File

@ -1,6 +1,6 @@
---
title: 'Pagination'
description: 'The Pagination component allows you to display active page and navigate between multiple pages.'
title: "Pagination"
description: "The Pagination component allows you to display active page and navigate between multiple pages."
url: https://nextui.org/docs/components/pagination
---
@ -58,7 +58,7 @@ You can set the `showControls` to `true` to display the `next` and `previous` bu
### Pagination Loop
In case you want to loop the pagination, you can set the `loop` property to `true`.
In case you want to loop the pagination, you can set the `loop` property to `true`.
The cursor will go back to the first page when it reaches the last page and vice versa.
<CodeDemo title="Pagination Loop" files={paginationContent.loop} />
@ -75,6 +75,12 @@ You can set the `isCompact` property to `true` to display reduced version of the
<CodeDemo title="Compact Pagination" files={paginationContent.compact} />
### With Shadow
You can use the `showShadow` property to display a shadow below the active page item.
<CodeDemo title="With Shadow" files={paginationContent.shadow} />
### Controlled
<CodeDemo title="Controlled" files={paginationContent.controlled} />
@ -95,4 +101,128 @@ You can control the number of pages to show at the beginning and end of the pagi
You can use the `renderItem` property to customize the pagination items.
<CodeDemo title="Custom items" files={paginationContent.customItems} />
<CodeDemo title="Custom items" files={paginationContent.customItems} />
## Slots
- **base**: The main pagination slot.
- **prev**: The previous button slot.
- **next**: The next button slot.
- **item**: The pagination item slot, applied to the middle items.
- **cursor**: The current page slot. Available only when `disableCursor` is `false` and `disableAnimation` is `false.
- **forwardIcon**: The forward icon slot. The one that appears when hovering the ellipsis button.
- **ellipsis**: The ellipsis slot.
- **chevronNext**: The chevron next icon slot.
### Custom Styles
You can customize the `Pagination` component by passing custom Tailwind CSS classes to the component slots.
<CodeDemo title="Custom Styles" files={paginationContent.customStyles} />
### Custom Implementation
In case you need to customize the pagination even further, you can use the `usePagination` hook to create
your own implementation.
<CodeDemo title="Custom Implementation" files={paginationContent.customImpl} />
<Spacer y={4} />
## Data Attributes
`Pagination` has the following attributes on the `root` element:
- **data-controls**:
Indicates whether the pagination has controls. Based on `showControls` prop.
- **data-loop**:
When the pagination is looped. Based on `loop` prop.
- **data-dots-jump**:
Indicates whether the pagination has dots jump. Based on `dotsJump` prop.
- **data-total**:
The total number of pages. Based on `total` prop.
- **data-active-page**:
The active page. Based on `activePage` prop.
<Spacer y={4} />
## Accessibility
- The root node has a role of `navigation` by default.
- The pagination items have an aria-label that identifies the item purpose ("next page button", "previous page button", etc.), you
can override this label by using the `getItemAriaLabel` function.
- The pagination items are in tab order, with a tabindex of "0".
<Spacer y={4} />
## API
### Pagination Props
| Attribute | Type | Description | Default |
| ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | --------- |
| variant | `flat` \| `bordered` \| `light` \| `faded` | The pagination variant. | `flat` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The pagination size. | `md` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The pagination color theme. | `default` |
| radius | `none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The pagination border radius. | `xl` |
| total | `number` | The total number of pages. | `1` |
| dotsJump | `boolean` | umber of pages that are added or subtracted on the '...' button. | `5` |
| initialPage | `number` | The initial page. (uncontrolled) | `1` |
| page | `number` | The current page. (controlled) | - |
| siblings | `number` | The number of pages to show before and after the current page. | `1` |
| boundaries | `number` | The number of pages to show at the beginning and end of the pagination. | `1` |
| loop | `boolean` | Whether the pagination should be looped. | `false` |
| isCompact | `boolean` | Whether the pagination should have a compact style. | `false` |
| isDisabled | `boolean` | Whether the pagination is disabled. | `false` |
| showShadow | `boolean` | Whether the pagination cursor should have a shadow. | `false` |
| showControls | `boolean` | Whether the pagination should have controls. | `false` |
| hideCursor | `boolean` | Whether the pagination cursor should be hidden. | `false` |
| renderItem | [PaginationItemProps](#pagination-item-props) | The pagination item render function. | - |
| getItemAriaLabel | `(page: string) => string` | A function that allows you to customize the pagination items aria-label. | - |
| disableAnimation | `boolean` | Whether the pagination cursor should be animated. | `false` |
| classNames | `Record<"base"｜ "prev"｜ "next" ｜ "item" ｜ "cursor" ｜ "forwardIcon" ｜ "ellipsis" ｜ "chevronNext", string>` | Allows to set custom class names for the pagination slots. | - |
### Pagination Events
| Attribute | Type | Description |
| --------- | ------------------------ | --------------------------------------------------------------- |
| onChange | `(page: number) => void` | Handler that is called when the pagination acitve page changes. |
---
### Types
#### Pagination Item Props
```ts
export type PaginationItemRenderProps = {
// The pagination item ref.
ref?: Ref<T>;
// The pagination item value.
value: PaginationItemValue;
// The pagination item index.
index: number;
// The active page number.
activePage: number;
// Whether the pagination item is active.
isActive: boolean;
// Whether the pagination item is the first item in the pagination.
isFirst: boolean;
// Whether the pagination item is the last item in the pagination.
isLast: boolean;
// Whether the pagination item is the next item in the pagination.
isNext: boolean;
// Whether the pagination item is the previous item in the pagination.
isPrevious: boolean;
// The pagination item className.
className: string;
// Callback to go to the next page.
onNext: () => void;
// Callback to go to the previous page.
onPrevious: () => void;
// Callback to go to the page.
setPage: (page: number) => void;
};
type renderItem?: (props: PaginationItemRenderProps) => ReactNode;
```

3
package.json
View File

@ -30,9 +30,10 @@
"lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/**/*.{ts,tsx}",
"turbo:clean": "turbo clean && rimraf ./node_modules/.cache/turbo",
"turbo:graph": "pnpm build --graph=dependency-graph.png",
"clean": "pnpm turbo:clean && pnpm clean:node-modules && pnpm clean:lock && pnpm install --hoist",
"clean": "pnpm turbo:clean && pnpm clean:node-modules && pnpm clean:lock && pnpm clean:jest && pnpm install --hoist",
"clean:node-modules": "rimraf ./apps/**/node_modules && rimraf ./packages/**/**/node_modules && rm -rf ./node_modules",
"clean:lock": "rm ./pnpm-lock.yaml",
"clean:jest": "jest --clearCache",
"create:cmp": "plop component",
"create:pkg": "plop package",
"create:hook": "plop hook",

15
packages/components/accordion/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230620004617
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/aria-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/accordion/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/accordion",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
"keywords": [
"react",

12
packages/components/avatar/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-image@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/avatar/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/avatar",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
"keywords": [
"avatar"

11
packages/components/badge/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/badge/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/badge",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
"keywords": [
"badge"

14
packages/components/button/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/spinner@0.0.0-dev-v2-20230620004617
- @nextui-org/drip@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/button/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/button",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Buttons allow users to perform actions and choose with a single tap.",
"keywords": [
"button"

13
packages/components/card/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/drip@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/card/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/card",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
"keywords": [
"card"

11
packages/components/checkbox/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/checkbox/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/checkbox",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
"keywords": [
"checkbox"

12
packages/components/chip/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/chip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/chip",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
"keywords": [
"chip"

11
packages/components/code/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/code/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/code",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Code is a component used to display inline code.",
"keywords": [
"code"

11
packages/components/divider/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/divider
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/divider/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/divider",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": ". A separator is a visual divider between two groups of content",
"keywords": [
"divider"

10
packages/components/drip/CHANGELOG.md
View File

@ -1,5 +1,15 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/drip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/drip",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
"keywords": [
"drip"

14
packages/components/dropdown/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/dropdown
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/aria-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230620004617
- @nextui-org/popover@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/dropdown/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/dropdown",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A dropdown displays a list of actions or options that a user can choose.",
"keywords": [
"dropdown"

12
packages/components/image/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/image
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-image@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/image/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/image",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A simple image component",
"keywords": [
"image"

13
packages/components/input/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/input
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/input/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/input",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "The input component is designed for capturing user input within a text field.",
"keywords": [
"input"

11
packages/components/kbd/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/kbd
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/kbd/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/kbd",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
"keywords": [
"kbd"

12
packages/components/link/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/link
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/link/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/link",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;",
"keywords": [
"link"

16
packages/components/modal/CHANGELOG.md
View File

@ -1,5 +1,21 @@
# @nextui-org/modal
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/use-aria-modal-overlay@0.0.0-dev-v2-20230620004617
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/modal/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/modal",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
"keywords": [
"modal"

14
packages/components/navbar/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/navbar
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230620004617
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230620004617
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/navbar/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/navbar",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
"keywords": [
"navbar"

13
packages/components/pagination/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/pagination
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-pagination@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/pagination/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/pagination",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
"keywords": [
"pagination"

14
packages/components/pagination/src/pagination.tsx
View File

@ -21,12 +21,13 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
range,
loop,
activePage,
disableCursor,
hideCursor,
disableAnimation,
renderItem: renderItemProp,
onNext,
onPrevious,
setPage,
getItemAriaLabel,
getItemRef,
getBaseProps,
getItemProps,
@ -62,6 +63,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
className={slots.prev({
class: classNames?.prev,
})}
getAriaLabel={getItemAriaLabel}
isDisabled={!loop && activePage === 1}
value={value}
onPress={onPrevious}
@ -77,6 +79,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
className={slots.next({
class: clsx(classNames?.next),
})}
getAriaLabel={getItemAriaLabel}
isDisabled={!loop && activePage === total}
value={value}
onPress={onNext}
@ -97,6 +100,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
className={slots.item({
class: clsx(classNames?.item, "group"),
})}
getAriaLabel={getItemAriaLabel}
value={value}
onPress={() =>
isBefore
@ -114,7 +118,11 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
}
return (
<PaginationItem key={`${value}-${index}`} {...getItemProps({value})}>
<PaginationItem
key={`${value}-${index}`}
{...getItemProps({value})}
getAriaLabel={getItemAriaLabel}
>
{value}
</PaginationItem>
);
@ -124,7 +132,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
return (
<Component {...getBaseProps()}>
{!disableCursor && !disableAnimation && <PaginationCursor {...getCursorProps()} />}
{!hideCursor && !disableAnimation && <PaginationCursor {...getCursorProps()} />}
{range.map(renderItem)}
</Component>
);

28
packages/components/pagination/src/use-pagination-item.ts
View File

@ -3,7 +3,7 @@ import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
import type {PressEvent} from "@react-types/shared";
import {useMemo} from "react";
import {PaginationItemType, PaginationItemValue} from "@nextui-org/use-pagination";
import {PaginationItemType} from "@nextui-org/use-pagination";
import {clsx, dataAttr} from "@nextui-org/shared-utils";
import {chain, mergeProps} from "@react-aria/utils";
import {useDOMRef} from "@nextui-org/react-utils";
@ -43,30 +43,10 @@ export interface UsePaginationItemProps extends Omit<HTMLNextUIProps<"li">, "onC
/**
* Function to get the aria-label of the item.
* @param page PaginationItemValue
* @returns string
*/
getAriaLabel?: (page?: PaginationItemValue) => string;
getAriaLabel?: (page?: string) => string | undefined;
}
const getItemAriaLabel = (page?: string | number) => {
if (!page) return;
switch (page) {
case PaginationItemType.DOTS:
return "dots element";
case PaginationItemType.PREV:
return "previous page button";
case PaginationItemType.NEXT:
return "next page button";
case "first":
return "first page button";
case "last":
return "last page button";
default:
return `pagination item ${page}`;
}
};
export function usePaginationItem(props: UsePaginationItemProps) {
const {
as,
@ -77,7 +57,7 @@ export function usePaginationItem(props: UsePaginationItemProps) {
isDisabled,
onPress,
onClick,
getAriaLabel = getItemAriaLabel,
getAriaLabel,
className,
...otherProps
} = props;
@ -86,7 +66,7 @@ export function usePaginationItem(props: UsePaginationItemProps) {
const domRef = useDOMRef(ref);
const ariaLabel = useMemo(
() => (isActive ? `${getAriaLabel(value)} active` : getAriaLabel(value)),
() => (isActive ? `${getAriaLabel?.(value)} active` : getAriaLabel?.(value)),
[value, isActive],
);

79
packages/components/pagination/src/use-pagination.ts
View File

@ -2,11 +2,12 @@ import type {PaginationSlots, PaginationVariantProps, SlotsToClasses} from "@nex
import type {Timer} from "@nextui-org/shared-utils";
import type {ReactNode, Ref} from "react";
import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
import type {
import {
UsePaginationProps as UseBasePaginationProps,
PaginationItemValue,
PaginationItemType,
} from "@nextui-org/use-pagination";
import {useEffect, useRef, useMemo} from "react";
import {mapPropsVariants} from "@nextui-org/system";
import {usePagination as useBasePagination} from "@nextui-org/use-pagination";
@ -15,18 +16,57 @@ import {useDOMRef} from "@nextui-org/react-utils";
import {clsx, dataAttr} from "@nextui-org/shared-utils";
export type PaginationItemRenderProps<T extends HTMLElement = HTMLElement> = {
/**
* The pagination item ref.
*/
ref?: Ref<T>;
/**
* The pagination item value.
*/
value: PaginationItemValue;
/**
* The pagination item index.
*/
index: number;
/**
* The active page number.
*/
activePage: number;
/**
* Whether the pagination item is active.
*/
isActive: boolean;
/**
* Whether the pagination item is the first item in the pagination.
*/
isFirst: boolean;
/**
* Whether the pagination item is the last item in the pagination.
*/
isLast: boolean;
/**
* Whether the pagination item is the next item in the pagination.
*/
isNext: boolean;
/**
* Whether the pagination item is the previous item in the pagination.
*/
isPrevious: boolean;
/**
* The pagination item className.
*/
className: string;
/**
* Callback to go to the next page.
*/
onNext: () => void;
/**
* Callback to go to the previous page.
*/
onPrevious: () => void;
/**
* Callback to go to the page.
*/
setPage: (page: number) => void;
};
@ -56,6 +96,10 @@ interface Props extends Omit<HTMLNextUIProps<"ul">, "onChange"> {
* @returns ReactNode
*/
renderItem?: <T extends HTMLElement>(props: PaginationItemRenderProps<T>) => ReactNode;
/**
* Function to get the aria-label of the item. If not provided, pagination will use the default one.
*/
getItemAriaLabel?: (page?: string) => string;
/**
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
@ -99,6 +143,7 @@ export function usePagination(originalProps: UsePaginationProps) {
onChange,
className,
renderItem,
getItemAriaLabel: getItemAriaLabelProp,
...otherProps
} = props;
@ -176,14 +221,14 @@ export function usePagination(originalProps: UsePaginationProps) {
activePage,
originalProps.disableAnimation,
originalProps.isCompact,
originalProps.disableCursor,
originalProps.hideCursor,
]);
const slots = useMemo(
() =>
pagination({
...variantProps,
disableCursor: originalProps.disableCursor || originalProps.disableAnimation,
hideCursor: originalProps.hideCursor || originalProps.disableAnimation,
}),
[...Object.values(variantProps)],
);
@ -221,6 +266,29 @@ export function usePagination(originalProps: UsePaginationProps) {
};
};
const getItemAriaLabel = (page?: string) => {
if (!page) return;
if (getItemAriaLabelProp) {
return getItemAriaLabelProp(page);
}
switch (page) {
case PaginationItemType.DOTS:
return "dots element";
case PaginationItemType.PREV:
return "previous page button";
case PaginationItemType.NEXT:
return "next page button";
case "first":
return "first page button";
case "last":
return "last page button";
default:
return `pagination item ${page}`;
}
};
const getItemProps: PropGetter = (props = {}) => {
return {
...props,
@ -255,7 +323,7 @@ export function usePagination(originalProps: UsePaginationProps) {
range,
activePage,
getItemRef,
disableCursor: originalProps.disableCursor,
hideCursor: originalProps.hideCursor,
disableAnimation: originalProps.disableAnimation,
setPage,
onPrevious,
@ -264,6 +332,7 @@ export function usePagination(originalProps: UsePaginationProps) {
getBaseProps,
getItemProps,
getCursorProps,
getItemAriaLabel,
};
}

2
packages/components/pagination/stories/pagination.stories.tsx
View File

@ -189,7 +189,7 @@ export const CustomItems = () => {
return (
<Pagination
{...defaultProps}
disableCursor
hideCursor
showControls
className="gap-2"
radius="full"

15
packages/components/popover/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/popover
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/aria-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/button@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/popover/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/popover",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A popover is an overlay element positioned relative to a trigger.",
"keywords": [
"popover"

13
packages/components/progress/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/progress
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230620004617
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/progress/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/progress",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
"keywords": [
"progress"

11
packages/components/radio/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/radio
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/radio/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/radio",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
"keywords": [
"radio"

11
packages/components/skeleton/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/skeleton
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/skeleton/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/skeleton",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Skeleton is used to display the loading state of some component.",
"keywords": [
"skeleton"

15
packages/components/snippet/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/snippet
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230620004617
- @nextui-org/tooltip@0.0.0-dev-v2-20230620004617
- @nextui-org/button@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/snippet/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/snippet",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Display a snippet of copyable code for the command line.",
"keywords": [
"snippet"

11
packages/components/spacer/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/spacer
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/spacer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/spacer",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
"keywords": [
"spacer"

11
packages/components/spinner/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/spinner
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/spinner/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/spinner",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Loaders express an unspecified wait time or display the length of a process.",
"keywords": [
"loading",

11
packages/components/switch/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/switch
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/switch/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/switch",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
"keywords": [
"switch"

14
packages/components/table/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/table
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/checkbox@0.0.0-dev-v2-20230620004617
- @nextui-org/spacer@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/table/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/table",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Tables are used to display tabular data using rows and columns. ",
"keywords": [
"table"

14
packages/components/tabs/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/tabs
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230620004617
- @nextui-org/aria-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/tabs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/tabs",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
"keywords": [
"tabs"

13
packages/components/tooltip/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/tooltip
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230620004617
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/aria-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/tooltip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/tooltip",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "A React Component for rendering dynamically positioned Tooltips",
"keywords": [
"tooltip"

12
packages/components/user/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/user
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/react-utils@0.0.0-dev-v2-20230620004617
- @nextui-org/avatar@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/components/user/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/user",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Flexible User Profile Component.",
"keywords": [
"user"

39
packages/core/react/CHANGELOG.md
View File

@ -1,5 +1,44 @@
# @nextui-org/react
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/pagination@0.0.0-dev-v2-20230620004617
- @nextui-org/accordion@0.0.0-dev-v2-20230620004617
- @nextui-org/checkbox@0.0.0-dev-v2-20230620004617
- @nextui-org/dropdown@0.0.0-dev-v2-20230620004617
- @nextui-org/progress@0.0.0-dev-v2-20230620004617
- @nextui-org/skeleton@0.0.0-dev-v2-20230620004617
- @nextui-org/divider@0.0.0-dev-v2-20230620004617
- @nextui-org/popover@0.0.0-dev-v2-20230620004617
- @nextui-org/snippet@0.0.0-dev-v2-20230620004617
- @nextui-org/spinner@0.0.0-dev-v2-20230620004617
- @nextui-org/tooltip@0.0.0-dev-v2-20230620004617
- @nextui-org/avatar@0.0.0-dev-v2-20230620004617
- @nextui-org/button@0.0.0-dev-v2-20230620004617
- @nextui-org/navbar@0.0.0-dev-v2-20230620004617
- @nextui-org/spacer@0.0.0-dev-v2-20230620004617
- @nextui-org/switch@0.0.0-dev-v2-20230620004617
- @nextui-org/badge@0.0.0-dev-v2-20230620004617
- @nextui-org/image@0.0.0-dev-v2-20230620004617
- @nextui-org/input@0.0.0-dev-v2-20230620004617
- @nextui-org/modal@0.0.0-dev-v2-20230620004617
- @nextui-org/radio@0.0.0-dev-v2-20230620004617
- @nextui-org/table@0.0.0-dev-v2-20230620004617
- @nextui-org/card@0.0.0-dev-v2-20230620004617
- @nextui-org/chip@0.0.0-dev-v2-20230620004617
- @nextui-org/code@0.0.0-dev-v2-20230620004617
- @nextui-org/drip@0.0.0-dev-v2-20230620004617
- @nextui-org/link@0.0.0-dev-v2-20230620004617
- @nextui-org/tabs@0.0.0-dev-v2-20230620004617
- @nextui-org/user@0.0.0-dev-v2-20230620004617
- @nextui-org/kbd@0.0.0-dev-v2-20230620004617
- @nextui-org/system@0.0.0-dev-v2-20230620004617
- @nextui-org/theme@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/core/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/react",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "🚀 Beautiful and modern React UI library.",
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"homepage": "https://nextui.org",

6
packages/core/system/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/system
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/core/system/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/system",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "NextUI system primitives",
"keywords": [
"system"

6
packages/core/theme/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/theme
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
## 0.0.0-dev-v2-20230619185541
### Patch Changes

22
packages/core/theme/src/colors/__tests__/semantic.test.ts → packages/core/theme/__tests__/semantic-colors.test.ts
View File

@ -1,20 +1,19 @@
import {getContrast} from "color2k";
import get from "lodash.get";
import {semanticColors} from "../semantic";
import {semanticColors} from "../src/colors/semantic";
type Guideline = keyof typeof guidelines;
const guidelines = {decorative: 1.5, readable: 3, aa: 4.5, aaa: 7};
const targetGuideline: keyof typeof guidelines = "aa";
const targetGuideline: Guideline = "readable";
const testGoodContrast = (
colorPath: string,
backgroundPath: string,
standard: keyof typeof guidelines,
) => {
it(`${colorPath} has enough contrast with ${backgroundPath} to be ${standard}`, () => {
expect(
getContrast(get(semanticColors, colorPath), get(semanticColors, backgroundPath)),
).toBeGreaterThanOrEqual(guidelines[standard]);
const testGoodContrast = (colorPath: string, backgroundPath: string, standard: Guideline) => {
const color = get(semanticColors, colorPath);
const background = get(semanticColors, backgroundPath);
it(`${colorPath}(${color}) has enough contrast with ${backgroundPath}(${background}) to be ${standard}`, () => {
expect(getContrast(color, background)).toBeGreaterThanOrEqual(guidelines[standard]);
});
};
@ -28,7 +27,6 @@ describe("semanticColors", () => {
testGoodContrast(`${mode}.${name}.foreground`, `${mode}.${name}.DEFAULT`, targetGuideline);
});
["primary", "secondary", "success", "warning", "danger"].forEach((name) => {
testGoodContrast(`${mode}.${name}.DEFAULT`, `${mode}.background.DEFAULT`, targetGuideline);
testGoodContrast(`${mode}.${name}.foreground`, `${mode}.${name}.DEFAULT`, targetGuideline);
});
});

2
packages/core/theme/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/theme",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "The default theme for NextUI components",
"keywords": [
"theme",

2
packages/core/theme/src/colors/blue.ts
View File

@ -4,7 +4,7 @@ export const blue = {
200: "#99c7fb",
300: "#66aaf9",
400: "#338ef7",
500: "#0072f5",
500: "#0069E0",
600: "#005bc4",
700: "#004493",
800: "#002e62",

12
packages/core/theme/src/colors/semantic.ts
View File

@ -73,22 +73,22 @@ export const semanticColorsLight: SemanticColors = {
},
primary: {
...common.blue,
foreground: common.white,
foreground: readableColor(common.blue[500]),
DEFAULT: common.blue[500],
},
secondary: {
...common.purple,
foreground: common.white,
foreground: readableColor(common.purple[500]),
DEFAULT: common.purple[500],
},
success: {
...common.green,
foreground: common.white,
foreground: common.green[800],
DEFAULT: common.green[500],
},
warning: {
...common.yellow,
foreground: common.white,
foreground: common.yellow[900],
DEFAULT: common.yellow[500],
},
danger: {
@ -107,12 +107,12 @@ export const semanticColorsDark: SemanticColors = {
},
primary: {
...swapColorValues(common.blue),
foreground: readableColor(common.blue[500]),
DEFAULT: common.blue[500],
foreground: common.white,
},
secondary: {
...swapColorValues(common.purple),
foreground: common.white,
foreground: readableColor(common.purple[400]),
DEFAULT: common.purple[400],
},
success: {

40
packages/core/theme/src/components/pagination.ts
View File

@ -108,6 +108,11 @@ const pagination = tv({
showShadow: {
true: {},
},
hideCursor: {
true: {
cursor: "hidden",
},
},
disableAnimation: {
true: {
item: "transition-none",
@ -118,11 +123,6 @@ const pagination = tv({
cursor: ["transition-transform", "!duration-300"],
},
},
disableCursor: {
true: {
cursor: "hidden",
},
},
},
defaultVariants: {
variant: "flat",
@ -133,7 +133,7 @@ const pagination = tv({
isDisabled: false,
showShadow: false,
disableAnimation: false,
disableCursor: false,
hideCursor: false,
},
compoundVariants: [
// showShadow / color
@ -189,13 +189,13 @@ const pagination = tv({
},
/**
* --------------------------------------------------------
* disableCursor
* hideCursor
* the classNames will be applied to the active item
* --------------------------------------------------------
*/
// disableCursor / color
// hideCursor / color
{
disableCursor: true,
hideCursor: true,
color: "default",
class: {
item: [
@ -206,7 +206,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
color: "primary",
class: {
item: [
@ -217,7 +217,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
color: "secondary",
class: {
item: [
@ -228,7 +228,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
color: "success",
class: {
item: [
@ -239,7 +239,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
color: "warning",
class: {
item: [
@ -250,7 +250,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
color: "danger",
class: {
item: [
@ -262,7 +262,7 @@ const pagination = tv({
},
// shadow / color
{
disableCursor: true,
hideCursor: true,
showShadow: true,
color: "default",
class: {
@ -270,7 +270,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
showShadow: true,
color: "primary",
class: {
@ -278,7 +278,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
showShadow: true,
color: "secondary",
class: {
@ -286,7 +286,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
showShadow: true,
color: "success",
class: {
@ -294,7 +294,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
showShadow: true,
color: "warning",
class: {
@ -302,7 +302,7 @@ const pagination = tv({
},
},
{
disableCursor: true,
hideCursor: true,
showShadow: true,
color: "danger",
class: {

9
packages/core/theme/src/plugin.ts
View File

@ -68,6 +68,10 @@ export type NextUIConfig = {
* @default "nextui"
*/
prefix?: string;
/**
* If true, the common nextui colors (e.g. "blue", "green", "purple") will not be extended on the theme.
*/
omitCommonColors?: boolean;
/**
* The theme definitions.
*/
@ -173,6 +177,7 @@ const corePlugin = (
config: ConfigObject | ConfigFunction = {},
defaultTheme: DefaultThemeType,
prefix: string,
omitCommonColors: boolean,
) => {
const resolved = resolveConfig(config, defaultTheme, prefix);
@ -197,7 +202,7 @@ const corePlugin = (
extend: {
// @ts-ignore
colors: {
...commonColors,
...(omitCommonColors ? {} : commonColors),
...resolved.colors,
},
fontSize: {
@ -248,6 +253,7 @@ export const nextui = (config: NextUIConfig = {}) => {
const defaultTheme = config.defaultTheme || "light";
const defaultPrefix = config.prefix || DEFAULT_PREFIX;
const omitCommonColors = config.omitCommonColors || false;
// get other themes from the config different from light and dark
const otherThemes = omit(themeObject, ["light", "dark"]) || {};
@ -260,5 +266,6 @@ export const nextui = (config: NextUIConfig = {}) => {
},
defaultTheme,
defaultPrefix,
omitCommonColors,
);
};

6
packages/hooks/use-aria-accordion-item/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-accordion-item
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/hooks/use-aria-accordion-item/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-accordion-item",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Internal impl for react aria accordion item",
"keywords": [
"use-aria-accordion-item"

6
packages/hooks/use-aria-button/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-button
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/hooks/use-aria-button/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-button",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"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"

9
packages/hooks/use-aria-field/CHANGELOG.md
View File

@ -1,5 +1,14 @@
# @nextui-org/use-aria-field
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
- Updated dependencies
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230620004617
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230620004617
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/hooks/use-aria-field/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-field",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"description": "Based on react-aria useField hook, provides the accessibility implementation for input fields",
"keywords": [
"use-aria-field"

6
packages/hooks/use-aria-label/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-label
## 0.0.0-dev-v2-20230620004617
### Patch Changes
- Pagination API improved
## 0.0.0-dev-v2-20230619185541
### Patch Changes

2
packages/hooks/use-aria-label/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-label",
"version": "0.0.0-dev-v2-20230619185541",
"version": "0.0.0-dev-v2-20230620004617",
"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"

Some files were not shown because too many files have changed in this diff Show More