Merge branch 'main' of github.com:nextui-org/nextui into canary

heroui-inc · Jun 22, 2024 · 2ce7d74 · 2ce7d74
2 parents cd0c15d + 87ca759
commit 2ce7d74
Show file tree

Hide file tree

Showing 24 changed files with 256 additions and 177 deletions.
diff --git a/apps/docs/components/docs/components/package-managers.tsx b/apps/docs/components/docs/components/package-managers.tsx
@@ -97,9 +97,9 @@ export const PackageManagers = ({
         })}
       </Tabs>
       {showGlobalInstallWarning && (
-        <Blockquote className="my-2">
-          No need to install this package if <Code>@nextui-org/react</Code> is already installed
-          globally.
+        <Blockquote className="my-2" color="warning">
+          The above command is for individual installation only. You may skip this step if{" "}
+          <Code>@nextui-org/react</Code> is already installed globally.
         </Blockquote>
       )}
     </>

diff --git a/apps/docs/content/blog/nextui-v2.mdx b/apps/docs/content/blog/nextui-v2.mdx
@@ -60,14 +60,19 @@ into React Server Components issues.
 NextUI v2.0 comes with a TailwindCSS plugin that enables the customization and addition of default themes.
 This plugin allows you to customize colors and layouts tokens that are used by NextUI components.
 
-```js {8,13-14}
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {9,14-15}
 // tailwind.config.js
 const {nextui} = require("@nextui-org/react");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {

diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx
@@ -151,7 +151,7 @@ Here's an example of how to customize the accordion styles:
 
 <CodeDemo title="Custom Accordion Styles" files={accordionContent.customStyles} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -172,7 +172,7 @@ Here's an example of how to customize the accordion styles:
 - **data-pressed**:
   When the accordion item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html).
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -182,7 +182,7 @@ Here's an example of how to customize the accordion styles:
 - `aria-disabled` attribute for the accordion item.
 - `aria-controls` attribute for the accordion item.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
@@ -150,7 +150,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 
 <CodeDemo title="Custom Avatar" files={avatarContent.custom} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -163,7 +163,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 - **data-focus-visible**:
   When the avatar is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx
@@ -127,7 +127,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
 - **data-loading**:
   When the checkbox is loading. Based on `isLoading` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 

diff --git a/apps/docs/content/docs/components/chip.mdx b/apps/docs/content/docs/components/chip.mdx
@@ -93,7 +93,7 @@ You can customize the `Chip` component by passing custom Tailwind CSS classes to
 
 <CodeDemo title="Custom Styles" files={chipContent.customStyles} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/circular-progress.mdx b/apps/docs/content/docs/components/circular-progress.mdx
@@ -92,7 +92,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
   highlightedLines="9-12"
 />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -103,7 +103,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
 - **data-disabled**:
   Indicates whether the progress is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -113,7 +113,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
 - Determinate and indeterminate progress support.
 - Exposes the `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` attributes.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/code.mdx b/apps/docs/content/docs/components/code.mdx
@@ -50,7 +50,7 @@ Code is a component used to display inline code.
 
 <CodeDemo title="Colors" files={codeContent.colors} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx
@@ -247,7 +247,7 @@ import {parseZonedDateTime} from "@internationalized/date";
 - **description**: The description of the date-input.
 - **errorMessage**: The error message of the date-input.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 

diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx
@@ -270,7 +270,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - **timeInputLabel**: The time-input component's label element.
 - **timeInput**: The time-input component element.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -289,7 +289,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - **data-disabled**:
   When the date-picker is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -299,7 +299,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
 - Integrates with HTML forms, supporting required, minimum and maximum values, unavailable dates, custom validation functions, realtime validation, and server-side validation errors
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
@@ -85,14 +85,14 @@ You can change the position of the label by setting the `labelPlacement` propert
 
 You can use the `type` property to change the input type to `password`.
 
-<CodeDemo title="Password Input" highlightedLines="24" files={inputContent.password} />
+<CodeDemo title="Password Input" highlightedLines="25" files={inputContent.password} />
 
 ### Clear Button
 
 If you pass the `isClearable` property to the input, it will have a clear button at the
 end of the input, it will be visible when the input has a value.
 
-<CodeDemo title="Clear Button" highlightedLines="6" files={inputContent.clearButton} />
+<CodeDemo title="Clear Button" highlightedLines="7" files={inputContent.clearButton} />
 
 ### Start & End Content
 
@@ -142,7 +142,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 You can customize the `Input` component by passing custom Tailwind CSS classes to the component slots.
 
-<CodeDemo title="Custom Styles" highlightedLines="14-32" files={inputContent.customStyles} />
+<CodeDemo title="Custom Styles" highlightedLines="13-31" files={inputContent.customStyles} />
 
 ### Custom Implementation
 
@@ -155,7 +155,7 @@ In case you need to customize the input even further, you can use the `useInput`
   files={inputContent.customImpl}
 />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -178,7 +178,7 @@ In case you need to customize the input even further, you can use the `useInput`
 - **data-disabled**:
   When the input is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -188,7 +188,7 @@ In case you need to customize the input even further, you can use the `useInput`
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
@@ -104,7 +104,7 @@ In case you need to customize the link even further, you can use the `useLink` h
 
 <CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -117,7 +117,7 @@ In case you need to customize the link even further, you can use the `useLink` h
 - **data-disabled**:
   When the link is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -126,7 +126,7 @@ In case you need to customize the link even further, you can use the `useLink` h
 - Support for disabled links.
 - Keyboard users may activate links using the <Kbd>Enter</Kbd> key.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx
@@ -100,7 +100,7 @@ In case you need to customize the radio group even further, you can use the `use
 
 <CodeDemo title="Custom Implementation" files={radioGroupContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -130,7 +130,7 @@ In case you need to customize the radio group even further, you can use the `use
   - **data-disabled**:
     When the radio is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -141,7 +141,7 @@ In case you need to customize the radio group even further, you can use the `use
 - Keyboard focus management and cross browser normalization.
 - Group and radio labeling support for assistive technology.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/snippet.mdx b/apps/docs/content/docs/components/snippet.mdx
@@ -92,7 +92,7 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 - **copyIcon**: The copy icon slot.
 - **checkIcon**: The check icon slot.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/spinner.mdx b/apps/docs/content/docs/components/spinner.mdx
@@ -68,7 +68,7 @@ Spinner express an unspecified wait time or display the length of a process.
 - **circle2**: The second circle of the spinner.
 - **label**: The label content.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
@@ -97,7 +97,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
 
 <CodeDemo title="Custom Implementation" files={switchContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -118,7 +118,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
 - **data-disabled**:
   When the switch is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -129,7 +129,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
 - Labeling support for assistive technology.
 - Exposed as a switch to assistive technology via ARIA
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx
@@ -99,7 +99,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **description**: The description of the textarea.
 - **errorMessage**: The error message of the textarea.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -120,7 +120,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **data-disabled**:
   When the textarea is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -130,7 +130,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

diff --git a/apps/docs/content/docs/customization/theme.mdx b/apps/docs/content/docs/customization/theme.mdx
@@ -28,14 +28,19 @@ app's look and feel.
 The first step to using NextUI's theming capability is adding the `nextui` plugin to your
 `tailwind.config.js` file. Below is an example of how to do this:
 
-```js {8,13-14}
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {9,14-15}
 // tailwind.config.js
 const {nextui} = require("@nextui-org/react");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-Original file line number
+Diff line change
@@ Expand Up @@
     <CodeDemo title="Custom Styles" files={chipContent.customStyles} />
-    <Spacer y={4} />{" "}
+    <Spacer y={4} />
     ## API
@@ Expand Down @@