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/config/routes.json

@@ -421,7 +421,8 @@
           "key": "nextui-provider",
           "title": "NextUI Provider",
           "keywords": "api references, nextui, api, nextui provider",
-          "path": "/docs/api-references/nextui-provider.mdx"
+          "path": "/docs/api-references/nextui-provider.mdx",
+          "updated": true
         }
       ]
     }

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.                                                                | -         |