feat(docs): textarea docs done

This commit is contained in:
Junior Garcia 2023-05-30 23:05:11 -03:00
parent 849dd9948b
commit 4b8655e267
141 changed files with 1088 additions and 147 deletions

View File

@ -53,30 +53,33 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
>
<p className="text-sm">On this page</p>
<ul className="scrollbar-hide flex flex-col gap-2">
{headings.map((heading, i) => (
<li
key={i}
className={clsx(
"transition-colors",
"flex items-center text-sm font-normal text-foreground/30",
"data-[active=true]:text-foreground/80",
"before:content-['']",
"before:opacity-0",
"data-[active=true]:before:opacity-100",
"before:transition-opacity",
"before:-ml-3",
"before:absolute",
"before:bg-default-400",
"before:w-1",
"before:h-1",
"before:rounded-full",
paddingLeftByLevel[heading.level],
)}
data-active={activeId == heading.id}
>
<a href={`#${heading.id}`}>{heading.text}</a>
</li>
))}
{headings.map(
(heading, i) =>
heading.level > 1 && (
<li
key={i}
className={clsx(
"transition-colors",
"flex items-center text-sm font-normal text-foreground/30",
"data-[active=true]:text-foreground/80",
"before:content-['']",
"before:opacity-0",
"data-[active=true]:before:opacity-100",
"before:transition-opacity",
"before:-ml-3",
"before:absolute",
"before:bg-default-400",
"before:w-1",
"before:h-1",
"before:rounded-full",
paddingLeftByLevel[heading.level],
)}
data-active={activeId == heading.id}
>
<a href={`#${heading.id}`}>{heading.text}</a>
</li>
),
)}
<li
className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
data-visible={activeIndex >= 2}

View File

@ -58,7 +58,7 @@ const FloatingComponents: React.FC<{mounted: boolean}> = ({mounted}) => {
color="secondary"
defaultValue="NextUI"
label="Input"
labelPosition="outside"
labelPlacement="outside"
radius="xl"
variant="bordered"
onClear={() => {}}

View File

@ -15,7 +15,7 @@ export default function App() {
key={position}
type="email"
label="Email"
labelPosition={position}
labelPlacement={position}
/>
))}
</div>
@ -25,7 +25,7 @@ export default function App() {
key={position}
type="email"
label="Email"
labelPosition={position}
labelPlacement={position}
placeholder="Enter your email"
/>
))}

View File

@ -27,7 +27,7 @@ export default function App() {
type="email"
label="Email"
placeholder="you@example.com"
labelPosition="outside"
labelPlacement="outside"
startContent={
<MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
}
@ -36,7 +36,7 @@ export default function App() {
type="number"
label="Price"
placeholder="0.00"
labelPosition="outside"
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">$</span>
@ -47,7 +47,7 @@ export default function App() {
type="url"
label="Website"
placeholder="nextui.org"
labelPosition="outside"
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">https://</span>
@ -60,7 +60,7 @@ export default function App() {
type="email"
label="Email"
placeholder="you@example.com"
labelPosition="outside"
labelPlacement="outside"
endContent={
<MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
}
@ -69,7 +69,7 @@ export default function App() {
type="number"
label="Price"
placeholder="0.00"
labelPosition="outside"
labelPlacement="outside"
endContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">$</span>
@ -80,7 +80,7 @@ export default function App() {
type="url"
label="Website"
placeholder="nextui"
labelPosition="outside"
labelPlacement="outside"
endContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">.org/</span>
@ -92,7 +92,7 @@ export default function App() {
<Input
label="Email"
placeholder="nextui"
labelPosition="outside"
labelPlacement="outside"
startContent={
<MailFilledIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
}
@ -105,7 +105,7 @@ export default function App() {
<Input
label="Price"
placeholder="0.00"
labelPosition="outside"
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">$</span>
@ -133,7 +133,7 @@ export default function App() {
type="url"
label="Website"
placeholder="nextui"
labelPosition="outside"
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">https://</span>

View File

@ -0,0 +1,33 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
return (
<div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
<Textarea
label="Description"
labelPlacement="outside"
placeholder="Enter your description (Default autosize)"
/>
<Textarea
minRows={2}
label="Description"
labelPlacement="outside"
placeholder="Enter your description (Min rows 2)"
/>
<Textarea
maxRows={3}
label="Description"
labelPlacement="outside"
placeholder="Enter your description (Max rows 3)"
/>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -0,0 +1,27 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
const [value, setValue] = React.useState("");
return (
<div className="w-full flex flex-col gap-2 max-w-[240px]">
<Textarea
variant="underlined"
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
value={value}
onValueChange={setValue}
/>
<p className="text-default-500 text-sm">Textarea value: {value}</p>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -0,0 +1,22 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
return (
<Textarea
variant="faded"
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
description="Enter a concise description of your project."
className="max-w-xs"
/>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -0,0 +1,22 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
return (
<Textarea
isDisabled
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
className="max-w-xs"
/>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -0,0 +1,24 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
return (
<Textarea
variant="bordered"
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
defaultValue="NextUI is a React UI library with..."
validationState="invalid"
errorMessage="The description should be at least 255 characters long."
className="max-w-xs"
/>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -1,5 +1,21 @@
import usage from "./usage";
import disabled from "./disabled";
import required from "./required";
import readonly from "./readonly";
import autosize from "./autosize";
import variants from "./variants";
import errorMessage from "./error-message";
import description from "./description";
import controlled from "./controlled";
export const textareaContent = {
usage,
disabled,
required,
readonly,
autosize,
variants,
errorMessage,
description,
controlled,
};

View File

@ -0,0 +1,23 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
return (
<Textarea
isReadOnly
label="Description"
variant="bordered"
labelPlacement="outside"
placeholder="Enter your description"
defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
className="max-w-xs"
/>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -0,0 +1,21 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
return (
<Textarea
isRequired
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
className="max-w-xs"
/>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -4,6 +4,7 @@ export default function App() {
return (
<Textarea
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
className="max-w-xs"
/>

View File

@ -0,0 +1,28 @@
const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
const variants = ["flat", "faded", "bordered", "underlined"];
return (
<div className="w-full grid grid-cols-12 gap-4">
{variants.map((variant) => (
<Textarea
key={variant}
variant={variant}
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
className="col-span-12 md:col-span-6 mb-6 md:mb-0"
/>
))}
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

View File

@ -56,9 +56,9 @@ the end of the label and the input will be required.
<CodeDemo title="Radius" files={inputContent.radius} />
### Label Positions
### Label Placements
You can change the position of the label by setting the `labelPosition` property to `inside`, `outside` or `outside-left`.
You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`.
<CodeDemo title="Label Positions" files={inputContent.labelPositions} />
@ -153,11 +153,11 @@ In case you need to customize the input even further, you can use the `useInput`
## Accessibility
- Built with a native `<input>` element
- Visual and ARIA labeling support
- Change, clipboard, composition, selection, and input event support
- Required and invalid states exposed to assistive technology via ARIA
- Support for description and error message help text linked to the input via ARIA
- Built with a native `<input>` element.
- Visual and ARIA labeling support.
- Change, clipboard, composition, selection, and input event support.
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.
## API
@ -176,9 +176,10 @@ In case you need to customize the input even further, you can use the `useInput`
| 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` | An error message for the input. | - |
| labelPosition | `inside` \| `outside` \| `outside-left` | The position of the label. | `inside` |
| labelPlacement | `inside` \| `outside` \| `outside-left` | The position of the label. | `inside` |
| fullWidth | `boolean` | Whether the input should take up the width of its parent. | `true` |
| validationState | `valid` \| `invalid` | Whether the input should display its "valid" or "invalid" visual styling. | - |
| isClearable | `boolean` | Whether the input should have a clear button. | `false` |
| isRequired | `boolean` | Whether user input is required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the input can be selected but not changed by the user. | |
| isDisabled | `boolean` | Whether the input is disabled. | `false` |

View File

@ -24,3 +24,122 @@ Textarea component is a multi-line Input which allows you to write large texts.
## Usage
<CodeDemo title="Usage" files={textareaContent.usage} />
### Disabled
<CodeDemo title="Disabled" files={textareaContent.disabled} />
### Readonly
<CodeDemo title="Readonly" files={textareaContent.readonly} />
### Required
If you pass the `isRequired` property to the input, it will have a `danger` asterisk at
the end of the label and the textarea will be required.
<CodeDemo title="Required" files={textareaContent.required} />
### Autosize
Textarea grows automatically based on the content, but you can also set a min and max height to
it using the `minRows` and `maxRows` properties. It is based on [react-textarea-autosize](https://github.com/Andarist/react-textarea-autosize).
<CodeDemo title="Autosize" files={textareaContent.autosize} />
### Variants
<CodeDemo title="Variants" files={textareaContent.variants} />
### With Error Message
You can combine the `validationState="invalid"` and `errorMessage` properties to show an invalid textarea.
<CodeDemo title="With Error Message" files={textareaContent.errorMessage} />
### Description
<CodeDemo title="Description" files={textareaContent.description} />
### Controlled
You can use the `value` and `onValueChange` properties to control the input value.
<CodeDemo title="Controlled" files={textareaContent.controlled} />
> **Note**: NextUI `Textarea` also supports native events like `onChange`, useful for form libraries
> such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/).
## Slots
- **base**: Input wrapper, it handles alignment, placement, and general appearance.
- **label**: Label of the textarea, it is the one that is displayed above, inside or left of the textarea.
- **inputWrapper**: Wraps the `label` (when it is inside) and the `innerWrapper`.
- **input**: The textarea input element.
- **description**: The description of the textarea.
- **errorMessage**: The error message of the textarea.
## Data Attributes
`Textarea` has the following attributes on the `root` element:
- **data-invalid**:
When the textarea is invalid. Based on `validationState` prop.
- **data-required**:
When the textarea is required. Based on `isRequired` prop.
- **data-readonly**:
When the textarea is readonly. Based on `isReadOnly` prop.
- **data-hover**:
When the textarea is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
- **data-focus**:
When the textarea is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-focus-visible**:
When the textarea is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-disabled**:
When the textarea is disabled. Based on `isDisabled` prop.
## Accessibility
- Built with a native `<input>` element.
- Visual and ARIA labeling support.
- Change, clipboard, composition, selection, and input event support.
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.
## API
### Textarea Props
| Attribute | Type | Description | Default |
| ----------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | --------- |
| children | `ReactNode` | The content of the textarea. | - |
| minRows | `number` | The minimum number of rows to display. | `3` |
| maxRows | `number` | Maximum number of rows up to which the textarea can grow. | `8` |
| cacheMeasurements | `boolean` | Reuse previously computed measurements when computing height of textarea. | `false` |
| variant | `flat` \| `bordered` \| `faded` \| `underlined` | The variant of the textarea. | `flat` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the textarea. | `md` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the textarea. | `default` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the textarea. | `lg` |
| label | `ReactNode` | The content to display as the label. | - |
| value | `string` | The current value of the textarea (controlled). | - |
| defaultValue | `string` | The default value of the textarea (uncontrolled). | - |
| placeholder | `string` | The placeholder of the textarea. | - |
| description | `ReactNode` | A description for the textarea. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode` | An error message for the textarea. | - |
| labelPlacement | `inside` \| `outside` \| `outside-left` | The position of the label. | `inside` |
| fullWidth | `boolean` | Whether the textarea should take up the width of its parent. | `true` |
| validationState | `valid` \| `invalid` | Whether the textarea should display its "valid" or "invalid" visual styling. | - |
| isRequired | `boolean` | Whether user input is required on the textarea before form submission. | `false` |
| isReadOnly | `boolean` | Whether the textarea can be selected but not changed by the user. | |
| isDisabled | `boolean` | Whether the textarea is disabled. | `false` |
| disableAnimation | `boolean` | Whether the textarea should be animated. | `false` |
| classNames | `Record<"base" "label" "inputWrapper" "input" "description" "errorMessage", string>` | Allows to set custom class names for the checkbox slots. | - |
### Input Events
| Attribute | Type | Description |
| -------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| onChange | `React.ChangeEvent <HTMLInputElement>` | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
| onValueChange | `(value: string) => void` | Handler that is called when the element's value changes. |
| onClear | `() => void` | Handler that is called when the clear button is clicked. |
| onHeightChange | `(height: number) => void` | Handler that is called when the height of the textarea changes. |

View File

@ -63,7 +63,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
K
</Kbd>
}
labelPosition="outside"
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />

View File

@ -1,5 +1,20 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230531020353
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/aria-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,17 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-image@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,19 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/spinner@0.0.0-dev-v2-20230531020353
- @nextui-org/drip@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,18 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/drip@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,17 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/divider
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,19 @@
# @nextui-org/dropdown
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/aria-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/popover@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,17 @@
# @nextui-org/image
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-image@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,18 @@
# @nextui-org/input
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -5,10 +5,7 @@ import {useMemo} from "react";
import {UseInputProps, useInput} from "./use-input";
export interface InputProps
extends Omit<
UseInputProps,
"ref" | "isClearButtonFocusVisible" | "isLabelPlaceholder" | "isTextarea"
> {}
extends Omit<UseInputProps, "ref" | "isLabelPlaceholder" | "isMultiline"> {}
const Input = forwardRef<InputProps, "input">((props, ref) => {
const {

View File

@ -32,7 +32,7 @@ export interface TextAreaProps extends Omit<UseInputProps, "ref" | OmittedInputP
minRows?: number;
/**
* Maximum number of rows up to which the textarea can grow
* @default 6
* @default 8
*/
maxRows?: number;
/**

View File

@ -125,13 +125,14 @@ export function useInput(originalProps: UseInputProps) {
});
const isInvalid = props.validationState === "invalid";
const labelPosition = originalProps.labelPosition || "inside";
const isLabelPlaceholder = !props.placeholder && labelPosition !== "outside-left" && !isMultiline;
const labelPlacement = originalProps.labelPlacement || "inside";
const isLabelPlaceholder =
!props.placeholder && labelPlacement !== "outside-left" && !isMultiline;
const isClearable = !!onClear || originalProps.isClearable;
const hasElements = !!label || !!description || !!errorMessage;
const shouldLabelBeOutside = labelPosition === "outside" || labelPosition === "outside-left";
const shouldLabelBeInside = labelPosition === "inside";
const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
const shouldLabelBeInside = labelPlacement === "inside";
const hasStartContent = !!startContent;
@ -241,7 +242,7 @@ export function useInput(originalProps: UseInputProps) {
description,
startContent,
endContent,
labelPosition,
labelPlacement,
isClearable,
isInvalid,
shouldLabelBeOutside,

View File

@ -41,7 +41,7 @@ export default {
options: ["xs", "sm", "md", "lg", "xl"],
},
},
labelPosition: {
labelPlacement: {
control: {
type: "select",
options: ["inside", "outside", "outside-left"],
@ -144,13 +144,13 @@ const LabelPositionTemplate: ComponentStory<typeof Input> = (args: InputProps) =
<div className="w-full flex flex-col items-center gap-12">
<div className="w-full max-w-xl flex flex-row items-end gap-4">
<Input {...args} />
<Input {...args} labelPosition="inside" />
<Input {...args} labelPosition="inside" />
<Input {...args} labelPlacement="inside" />
<Input {...args} labelPlacement="inside" />
</div>
<div className="w-full max-w-xl flex flex-row items-end gap-4">
<Input {...args} placeholder="Enter your email" />
<Input {...args} labelPosition="outside" placeholder="Enter your email" />
<Input {...args} labelPosition="outside-left" placeholder="Enter your email" />
<Input {...args} labelPlacement="outside" placeholder="Enter your email" />
<Input {...args} labelPlacement="outside-left" placeholder="Enter your email" />
</div>
</div>
);
@ -493,21 +493,21 @@ Clearable.args = {
export const StartContent = StartContentTemplate.bind({});
StartContent.args = {
...defaultProps,
labelPosition: "outside",
labelPlacement: "outside",
};
export const EndContent = EndContentTemplate.bind({});
EndContent.args = {
...defaultProps,
variant: "bordered",
labelPosition: "outside",
labelPlacement: "outside",
};
export const StartAndEndContent = StartAndEndContentTemplate.bind({});
StartAndEndContent.args = {
...defaultProps,
variant: "bordered",
labelPosition: "outside",
labelPlacement: "outside",
};
export const WithErrorMessage = Template.bind({});

View File

@ -32,7 +32,7 @@ export default {
options: ["xs", "sm", "md", "lg", "xl"],
},
},
labelPosition: {
labelPlacement: {
control: {
type: "select",
options: ["inside", "outside", "outside-left"],

View File

@ -1,5 +1,16 @@
# @nextui-org/kbd
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,17 @@
# @nextui-org/link
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/link",
"version": "0.0.0-dev-v2-20230530213135",
"version": "0.0.0-dev-v2-20230531020353",
"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"

View File

@ -1,5 +1,20 @@
# @nextui-org/modal
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230531020353
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,19 @@
# @nextui-org/navbar
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230531020353
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230531020353
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,18 @@
# @nextui-org/pagination
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-pagination@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,20 @@
# @nextui-org/popover
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230531020353
- @nextui-org/aria-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/button@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,18 @@
# @nextui-org/progress
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230531020353
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/radio
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/skeleton
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,20 @@
# @nextui-org/snippet
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/tooltip@0.0.0-dev-v2-20230531020353
- @nextui-org/button@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/spacer
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/spinner
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,16 @@
# @nextui-org/switch
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,19 @@
# @nextui-org/table
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/checkbox@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/spacer@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,19 @@
# @nextui-org/tabs
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230531020353
- @nextui-org/aria-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,18 @@
# @nextui-org/tooltip
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230531020353
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/aria-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,17 @@
# @nextui-org/user
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/dom-utils@0.0.0-dev-v2-20230531020353
- @nextui-org/avatar@0.0.0-dev-v2-20230531020353
- @nextui-org/system@0.0.0-dev-v2-20230531020353
- @nextui-org/theme@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

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

View File

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

View File

@ -1,5 +1,11 @@
# @nextui-org/system
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,11 @@
# @nextui-org/theme
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -171,7 +171,7 @@ const input = tv({
inputWrapper: "rounded-full",
},
},
labelPosition: {
labelPlacement: {
outside: {
label: "text-foreground",
},
@ -220,7 +220,7 @@ const input = tv({
isMultiline: {
true: {
inputWrapper: "!h-auto",
input: "resize-none",
input: "resize-none py-2",
},
},
disableAnimation: {
@ -248,7 +248,7 @@ const input = tv({
size: "md",
radius: "lg",
fullWidth: true,
labelPosition: "inside",
labelPlacement: "inside",
isDisabled: false,
disableAnimation: false,
},
@ -522,9 +522,9 @@ const input = tv({
inputWrapper: "after:bg-danger",
},
},
// size & labelPosition
// size & labelPlacement
{
labelPosition: "inside",
labelPlacement: "inside",
size: "xs",
class: {
label: "text-[0.6rem]",
@ -532,21 +532,21 @@ const input = tv({
},
},
{
labelPosition: "inside",
labelPlacement: "inside",
size: "sm",
class: {
inputWrapper: "h-12 py-1.5 px-3",
},
},
{
labelPosition: "inside",
labelPlacement: "inside",
size: "md",
class: {
inputWrapper: "h-14 py-2",
},
},
{
labelPosition: "inside",
labelPlacement: "inside",
size: "lg",
class: {
label: "text-sm",
@ -554,17 +554,17 @@ const input = tv({
},
},
{
labelPosition: "inside",
labelPlacement: "inside",
size: "xl",
class: {
label: "text-sm",
inputWrapper: "h-20 p-4 gap-2",
},
},
// isLabelPlaceholder & labelPosition
// isLabelPlaceholder & labelPlacement
{
isLabelPlaceholder: true,
labelPosition: ["inside", "outside"],
labelPlacement: ["inside", "outside"],
class: {
label: [
"font-normal",
@ -578,7 +578,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "inside",
labelPlacement: "inside",
class: {
inputWrapper: "group",
label: ["group-focus-within:text-default-600", "group-[.is-filled]:text-default-600"],
@ -586,7 +586,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "outside",
labelPlacement: "outside",
class: {
base: "group relative justify-end",
label: [
@ -685,7 +685,7 @@ const input = tv({
// isLabelPlaceholder & inside & size
{
isLabelPlaceholder: true,
labelPosition: "inside",
labelPlacement: "inside",
size: "xs",
class: {
label: [
@ -700,7 +700,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "inside",
labelPlacement: "inside",
size: ["sm", "md"],
class: {
label: ["text-sm", "group-focus-within:text-xs", "group-[.is-filled]:text-xs"],
@ -709,7 +709,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "inside",
labelPlacement: "inside",
size: "sm",
class: {
label: ["group-focus-within:-translate-y-2.5", "group-[.is-filled]:-translate-y-2.5"],
@ -718,7 +718,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "inside",
labelPlacement: "inside",
size: "md",
class: {
label: ["group-focus-within:-translate-y-3", "group-[.is-filled]:-translate-y-3"],
@ -727,7 +727,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "inside",
labelPlacement: "inside",
size: "lg",
class: {
label: [
@ -742,7 +742,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "inside",
labelPlacement: "inside",
size: "xl",
class: {
label: [
@ -758,7 +758,7 @@ const input = tv({
// isLabelPlaceholder & outside & size
{
isLabelPlaceholder: true,
labelPosition: "outside",
labelPlacement: "outside",
size: "xs",
class: {
label: [
@ -772,7 +772,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "outside",
labelPlacement: "outside",
size: "sm",
class: {
label: [
@ -786,7 +786,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "outside",
labelPlacement: "outside",
size: "md",
class: {
label: [
@ -800,7 +800,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "outside",
labelPlacement: "outside",
size: "lg",
class: {
label: [
@ -816,7 +816,7 @@ const input = tv({
},
{
isLabelPlaceholder: true,
labelPosition: "outside",
labelPlacement: "outside",
size: "xl",
class: {
label: [

View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-accordion-item
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-button
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,14 @@
# @nextui-org/use-aria-field
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230531020353
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-label
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

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

View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-slot-id
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
## 0.0.0-dev-v2-20230530213135
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-slot-id",
"version": "0.0.0-dev-v2-20230530213135",
"version": "0.0.0-dev-v2-20230531020353",
"description": "Based on react-aria useSlotId, used to generate an id, and after render check if that id is rendered",
"keywords": [
"use-aria-slot-id"

View File

@ -1,5 +1,13 @@
# @nextui-org/use-aria-toggle-button
## 0.0.0-dev-v2-20230531020353
### Patch Changes
- Textarea & Input styles changed
- Updated dependencies
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230531020353
## 0.0.0-dev-v2-20230530213135
### Patch Changes

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