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

@@ -19,10 +19,48 @@ Here's the API reference for the `NextUIProvider`.
 
 ### locale
 
-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`. 
+The locale to apply to the children.
 
 **type**: `string | undefined`
 
+Here's the supported locales. By default, It is `en-US`.
+
+```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'
+];
+```
+
+Here's an example to set a Spanish locale.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+ const {children, className} = props;
+
+ return (
+ <NextUIProvider locale="es-ES" className={className}>
+ {children}
+ </NextUIProvider>
+ );
+}
+
+interface AppProviderProps {
+ children: ReactNode;
+ className?: string;
+}
+```
+
 ### defaultDates
 
 The default dates range that can be selected in the calendar.

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