feat(docs): docs changes

apps/docs/components/cmdk.tsx

@@ -154,6 +154,16 @@ export const Cmdk: FC<{}> = () => {
  }
  };
 
+ const prioritizeFirstLevelItems = (a: SearchResultItem, b: SearchResultItem) => {
+ if (a.type === "lvl1") {
+ return -1;
+ } else if (b.type === "lvl1") {
+ return 1;
+ }
+
+ return 0;
+ };
+
  const results = useMemo<SearchResultItem[]>(
  function getResults() {
  if (query.length < 2) return [];
@@ -165,12 +175,22 @@ export const Cmdk: FC<{}> = () => {
  if (words.length === 1) {
  return matchSorter(data, query, {
  keys: MATCH_KEYS,
+ sorter: (matches) => {
+ matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+ return matches;
+ },
  }).slice(0, MAX_RESULTS);
  }
 
  const matchesForEachWord = words.map((word) =>
  matchSorter(data, word, {
  keys: MATCH_KEYS,
+ sorter: (matches) => {
+ matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+ return matches;
+ },
  }),
  );
 

apps/docs/content/components/input/regex-validation.ts

@@ -19,7 +19,7 @@ export default function App() {
  variant="bordered"
  isInvalid={isInvalid}
  color={isInvalid ? "danger" : "success"}
- errorMessage={isInvalid && "Please enter a valid email"}
+ errorMessage="Please enter a valid email"
  onValueChange={setValue}
  className="max-w-xs"
  />

apps/docs/content/components/tabs/form.ts

@@ -69,7 +69,7 @@ export default function App() {
 const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react";
 
 export default function App() {
- const [selected, setSelected] = React.useState<string | number>("login");
+ const [selected, setSelected] = React.useState<React.Key>("login");
 
  return (
  <div className="flex flex-col w-full">

apps/docs/content/docs/api-references/nextui-provider.mdx

@@ -5,80 +5,167 @@ description: API References for NextUI Provider
 
 # NextUI Provider
 
+API reference for the `NextUIProvider`. 
+
 ------
 
-Here's the API reference for the `NextUIProvider`.
+## Import
+
+<ImportTabs
+ commands={{
+ main: 'import {NextUIProvider} from "@nextui-org/react";',
+ individual: 'import {NextUIProvider} from "@nextui-org/system";',
+ }}
+/>
+
+## Usage
+
+```jsx
+import * as React from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+function App() {
+ return (
+ <NextUIProvider>
+ <YourApplication />
+ </NextUIProvider>
+ );
+}
+```
 
 ## Props
 
-### navigate
+<Spacer y={6}/>
 
-`navigate` provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
+`navigate`
 
-**type**: `((path: string) => void) | undefined`
+- **Description**: Provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
+- **Type**: `((path: string) => void) | undefined`
 
-### locale
+<Spacer y={2}/>
 
-The locale to apply to the children. The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale. By default, It is `en-US`. 
+`locale`
 
-**type**: `string | undefined`
+- **Description**: The locale to apply to the children.
+- **Type**: `string | undefined`
+- **Default**: `en-US`
 
-### defaultDates
 
-The default dates range that can be selected in the calendar.
+Here's the supported locales. By default, It is `en-US`.
 
-**type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
+```tsx
+const localeValues = [
+ 'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
+ 'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES', 
+ 'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG', 
+ 'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT', 
+ 'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI', 
+ 'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA', 
+ 'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'
+];
+```
 
-- minDate
+Here's an example to set a Spanish locale.
 
- The minimum date that can be selected in the calendar.
+```tsx
+"use client";
 
- **type**: `CalendarDate | undefined`
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
 
- **default**: `new CalendarDate(1900, 1, 1)`
+export function AppProvider(props: AppProviderProps) {
+ const {children, className} = props;
 
-- maxDate
+ return (
+ <NextUIProvider locale="es-ES" className={className}>
+ {children}
+ </NextUIProvider>
+ );
+}
 
- The maximum date that can be selected in the calendar.
+interface AppProviderProps {
+ children: ReactNode;
+ className?: string;
+}
+```
 
- **type**: `CalendarDate | undefined`
+<Spacer y={2}/>
 
- **default**: `new CalendarDate(2099, 12, 31)`
+`defaultDates`
 
-### createCalendar
+- **Description**: The default dates range that can be selected in the calendar.
+- **Type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
+- **Default**: `{ minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }`
 
-This function helps to reduce the bundle size by providing a custom calendar system.
+<Spacer y={2}/>
 
-By default, this includes all calendar systems supported by `@internationalized/date`. However,
-if your application supports a more limited set of regions, or you know you will only be picking dates
-in a certain calendar system, you can reduce your bundle size by providing your own implementation
-of `createCalendar` that includes a subset of these Calendar implementations.
+`createCalendar`
 
-For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
-function like this:
+- **Description**: 
+ This function helps to reduce the bundle size by providing a custom calendar system.
 
-```tsx
-import {GregorianCalendar} from '@internationalized/date';
-
-function createCalendar(identifier) {
- switch (identifier) {
- case 'gregory':
- return new GregorianCalendar();
- default:
- throw new Error(`Unsupported calendar ${identifier}`);
- }
-}
-```
+ By default, this includes all calendar systems supported by `@internationalized/date`. However,
+ if your application supports a more limited set of regions, or you know you will only be picking dates
+ in a certain calendar system, you can reduce your bundle size by providing your own implementation
+ of `createCalendar` that includes a subset of these Calendar implementations.
+
+ For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
+ function like this:
+
+ ```tsx
+ import {GregorianCalendar} from '@internationalized/date';
+
+ function createCalendar(identifier) {
+ switch (identifier) {
+ case 'gregory':
+ return new GregorianCalendar();
+ default:
+ throw new Error(`Unsupported calendar ${identifier}`);
+ }
+ }
+ ```
+
+ This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
+
+- **Type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
+
+<Spacer y={2}/>
+
+`disableAnimation`
 
-This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
+- **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size.
+- **Type**: `boolean`
+- **Default**: `false`
 
-**type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
+<Spacer y={2}/>
+
+`disableRipple`
+
+- **Description**: Disables ripple effect globally.
+- **Type**: `boolean`
+- **Default**: `false`
+
+<Spacer y={2}/>
+
+`skipFramerMotionAnimations`
+
+- **Description**:
+ Controls whether `framer-motion` animations are skipped within the application.
+ This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`,
+ effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while
+ using the `disableAnimation` prop for other purposes, set this to `false`. However, note that
+ animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
+- **Type**: `boolean`
+- **Default**: Same as `disableAnimation`
+
+---
 
 ## Types
 
-### CalendarDate
+`CalendarDate`
 
-A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`. 
+- **Description**: A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`.
+- **Type**: `import {CalendarDate} from '@internationalized/date';`
 
 ### SupportedCalendars
 

apps/docs/content/docs/components/date-range-picker.mdx

@@ -340,7 +340,7 @@ import {I18nProvider} from "@react-aria/i18n";
 ### DateRangePicker Props
 
 | Attribute | Type | Description | Default |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------|
 | label | `ReactNode` | The content to display as the label. | - |
 | value | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null` | The current value of the date-range-picker (controlled). | - |
 | variant | `flat` \| `bordered` \| `faded` \| `underlined` | The variant of the date input. | `flat` |
@@ -367,7 +367,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | selectorIcon | `ReactNode` | The icon to toggle the date picker popover. Usually a calendar icon. | |
 | pageBehavior | `single` \| `visible` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` |
 | validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
-| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1` |
+| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported.   | `1` |
 | autoFocus | `boolean` | Whether the element should receive focus on render. | `false` |
 | hourCycle | `12` \| `24` | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale. | - |
 | granularity | `day` \| `hour` \| `minute` \| `second` | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates. | - |

apps/docs/content/docs/components/input.mdx

@@ -107,7 +107,7 @@ You can add a description to the input by passing the `description` property.
 
 ### With Error Message
 
-You can combine the `isInvalid` and `errorMessage` properties to show an invalid input.
+You can combine the `isInvalid` and `errorMessage` properties to show an invalid input. `errorMessage` is only shown when `isInvalid` is set to `true`.
 
 <CodeDemo title="With Error Message" files={inputContent.errorMessage} />
 
@@ -205,7 +205,7 @@ In case you need to customize the input even further, you can use the `useInput`
 | defaultValue | `string` | The default value of the input (uncontrolled). | - |
 | placeholder | `string` | The placeholder of the input. | - |
 | description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - |
-| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. | - |
+| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - |
 | validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
 | startContent | `ReactNode` | Element to be rendered in the left side of the input. | - |
 | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - |