archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(docs): radio group done

Browse Source
This commit is contained in:
Junior Garcia 2023-06-04 16:18:32 -03:00
parent 78f1c5f957
commit c5bcd70457
139 changed files with 1197 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/docs/content/components/checkbox-group/controlled.ts
View File

@ -4,16 +4,19 @@ export default function App() {
const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);
return (
<CheckboxGroup
label="Select cities"
color="warning"
value={selected}
onChange={setSelected}
>
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
<Checkbox value="sydney">Sydney</Checkbox>
<Checkbox value="san-francisco">San Francisco</Checkbox>
</CheckboxGroup>
<div className="flex flex-col gap-3">
<CheckboxGroup
label="Select cities"
color="warning"
value={selected}
onChange={setSelected}
>
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
<Checkbox value="sydney">Sydney</Checkbox>
<Checkbox value="san-francisco">San Francisco</Checkbox>
</CheckboxGroup>
<p className="text-default-500 text-sm">Selected: {selected.join(", ")}</p>
</div>
);
}`;

28
apps/docs/content/components/radio-group/controlled.ts
View File

@ -1,21 +1,23 @@
const App = `import {RadioGroup, Radio} from "@nextui-org/react";
export default function App() {
const [selectedItem, setSelectedItem] = React.useState("london");
const [selected, setSelected] = React.useState("london");
return (
<RadioGroup
label="Select your favorite city"
value={selectedItem}
onValueChange={setSelectedItem}
>
<Radio value="buenos-aires">Buenos Aires</Radio>
<Radio value="sydney">Sydney</Radio>
<Radio value="san-francisco">San Francisco</Radio>
<Radio value="london">London</Radio>
<Radio value="tokyo">Tokyo</Radio>
</RadioGroup>
<div className="flex flex-col gap-3">
<RadioGroup
label="Select your favorite city"
value={selected}
onValueChange={setSelected}
>
<Radio value="buenos-aires">Buenos Aires</Radio>
<Radio value="sydney">Sydney</Radio>
<Radio value="san-francisco">San Francisco</Radio>
<Radio value="london">London</Radio>
<Radio value="tokyo">Tokyo</Radio>
</RadioGroup>
<p className="text-default-500 text-sm">Selected: {selected}</p>
</div>
);
}`;

132
apps/docs/content/components/radio-group/custom-impl.ts Normal file
View File

@ -0,0 +1,132 @@
const App = `import {RadioGroup, Radio, useRadio, VisuallyHidden, cn} from "@nextui-org/react";
export const CustomRadio = (props) => {
const {
Component,
children,
isSelected,
description,
getBaseProps,
getWrapperProps,
getInputProps,
getLabelProps,
getLabelWrapperProps,
getControlProps,
} = useRadio(props);
return (
<Component
{...getBaseProps()}
className={cn(
"group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
"max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
"data-[selected=true]:border-primary",
)}
>
<VisuallyHidden>
<input {...getInputProps()} />
</VisuallyHidden>
<span {...getWrapperProps()}>
<span {...getControlProps()} />
</span>
<div {...getLabelWrapperProps()}>
{children && <span {...getLabelProps()}>{children}</span>}
{description && (
<span className="text-sm text-foreground opacity-70">{description}</span>
)}
</div>
</Component>
);
};
export default function App() {
return (
<RadioGroup label="Plans">
<CustomRadio description="Up to 20 items" value="free">
Free
</CustomRadio>
<CustomRadio description="Unlimited items. $10 per month." value="pro">
Pro
</CustomRadio>
<CustomRadio
description="24/7 support. Contact us for pricing."
value="enterprise"
>
Enterprise
</CustomRadio>
</RadioGroup>
);
}`;
const AppTs = `import {RadioGroup, Radio, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react";
export const CustomRadio = (props: RadioProps) => {
const {
Component,
children,
isSelected,
description,
getBaseProps,
getWrapperProps,
getInputProps,
getLabelProps,
getLabelWrapperProps,
getControlProps,
} = useRadio(props);
return (
<Component
{...getBaseProps()}
className={cn(
"group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
"max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
"data-[selected=true]:border-primary",
)}
>
<VisuallyHidden>
<input {...getInputProps()} />
</VisuallyHidden>
<span {...getWrapperProps()}>
<span {...getControlProps()} />
</span>
<div {...getLabelWrapperProps()}>
{children && <span {...getLabelProps()}>{children}</span>}
{description && (
<span className="text-sm text-foreground opacity-70">{description}</span>
)}
</div>
</Component>
);
};
export default function App() {
return (
<RadioGroup label="Plans">
<CustomRadio description="Up to 20 items" value="free">
Free
</CustomRadio>
<CustomRadio description="Unlimited items. $10 per month." value="pro">
Pro
</CustomRadio>
<CustomRadio
description="24/7 support. Contact us for pricing."
value="enterprise"
>
Enterprise
</CustomRadio>
</RadioGroup>
);
}`;
const react = {
"/App.jsx": App,
};
const reactTs = {
"/App.tsx": AppTs,
};
export default {
...react,
...reactTs,
};

47
apps/docs/content/components/radio-group/custom-styles.ts Normal file
View File

@ -0,0 +1,47 @@
const App = `import {RadioGroup, Radio, cn} from "@nextui-org/react";
export const CustomRadio = (props) => {
const {children, ...otherProps} = props;
return (
<Radio
{...otherProps}
classNames={{
base: cn(
"inline-flex bg-content1 hover:bg-content2 items-center justify-between",
"flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
"data-[selected=true]:border-primary"
),
}}
>
{children}
</Radio>
);
};
export default function App() {
return (
<RadioGroup label="Plans" description="Selected plan can be changed at any time.">
<CustomRadio description="Up to 20 items" value="free">
Free
</CustomRadio>
<CustomRadio description="Unlimited items. $10 per month." value="pro">
Pro
</CustomRadio>
<CustomRadio
description="24/7 support. Contact us for pricing."
value="enterprise"
>
Enterprise
</CustomRadio>
</RadioGroup>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

25
apps/docs/content/components/radio-group/default-value.ts Normal file
View File

@ -0,0 +1,25 @@
const App = `import {RadioGroup, Radio} from "@nextui-org/react";
export default function App() {
return (
<RadioGroup
label="Select your favorite city"
color="secondary"
defaultValue="london"
>
<Radio value="buenos-aires">Buenos Aires</Radio>
<Radio value="sydney">Sydney</Radio>
<Radio value="san-francisco">San Francisco</Radio>
<Radio value="london">London</Radio>
<Radio value="tokyo">Tokyo</Radio>
</RadioGroup>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

8
apps/docs/content/components/radio-group/index.ts
View File

@ -2,10 +2,18 @@ import usage from "./usage";
import disabled from "./disabled";
import horizontal from "./horizontal";
import controlled from "./controlled";
import defaultValue from "./default-value";
import withDescription from "./with-description";
import customStyles from "./custom-styles";
import customImpl from "./custom-impl";
export const radioGroupContent = {
usage,
disabled,
horizontal,
controlled,
defaultValue,
withDescription,
customStyles,
customImpl,
};

31
apps/docs/content/components/radio-group/with-description.ts Normal file
View File

@ -0,0 +1,31 @@
const App = `import {RadioGroup, Radio} from "@nextui-org/react";
export default function App() {
return (
<RadioGroup
label="Select your favorite city"
color="warning"
>
<Radio value="buenos-aires" description="The capital of Argentina">
Buenos Aires
</Radio>
<Radio value="sydney" description="The capital of Australia">
Sydney
</Radio>
<Radio value="london" description="The capital of England">
London
</Radio>
<Radio value="tokyo" description="The capital of Japan">
Tokyo
</Radio>
</RadioGroup>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

14
apps/docs/content/docs/components/checkbox-group.mdx
View File

@ -40,7 +40,7 @@ NextUI exports 2 checkbox-related components:
### Controlled
You can use the `value` and `onValueChange` properties to control the input value.
You can use the `value` and `onValueChange` properties to control the checkbox input value.
<CodeDemo title="Controlled" files={checkboxGroupContent.controlled} />
@ -49,6 +49,8 @@ You can use the `value` and `onValueChange` properties to control the input valu
- **base**: Checkbox group root wrapper, it wraps the label and the wrapper.
- **wrapper**: Checkbox group wrapper, it wraps all checkboxes.
- **label**: Checkbox group label, it is placed before the wrapper.
- **description**: The description of the checkbox group.
- **errorMessage**: The error message of the checkbox group.
### Custom Styles
@ -69,18 +71,20 @@ In case you need to customize the checkbox even further, you can use the `useChe
| Attribute | Type | Description | Default |
| ---------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------- |
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
| value | `string[]` | The current selected values. (controlled). | |
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
| name | `string` | The name of the CheckboxGroup, used when submitting an HTML form. | - |
| value | `string[]` | The current selected values. (controlled). | - |
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |
| defaultValue | `string[]` | The default selected values. (uncontrolled). | |
| defaultValue | `string[]` | The default selected values. (uncontrolled). | - |
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. | `false` |
| description | `ReactNode` | The checkbox group description. | - |
| errorMessage | `ReactNode` | The checkbox group error message. | - |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the checkbox group slots. | - |

7
apps/docs/content/docs/components/checkbox.mdx
View File

@ -55,10 +55,13 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
<CodeDemo title="Custom Check Icon" files={checkboxContent.customCheckIcon} />
### Controlled Checkbox
### Controlled
<CodeDemo title="Controlled Checkbox" files={checkboxContent.controlled} />
> **Note**: NextUI `Checkbox` 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**: Checkbox wrapper, it handles alignment, placement, and general appearance.
@ -100,8 +103,6 @@ In case you need to customize the checkbox even further, you can use the `useChe
When the checkbox is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-disabled**:
When the checkbox is disabled. Based on `isDisabled` prop.
- **data-pressed**:
When the checkbox is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html)
- **data-loading**:
When the checkbox is loading. Based on `isLoading` prop.

10
apps/docs/content/docs/components/input.mdx
View File

@ -190,8 +190,8 @@ In case you need to customize the input even further, you can use the `useInput`
### 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. |
| 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. |

133
apps/docs/content/docs/components/radio-group.mdx
View File

@ -1,12 +1,12 @@
---
title: 'Radio'
description: 'Radio Group allow users to select a single option from a list of mutually exclusive options'
title: "Radio"
description: "Radio Group allow users to select a single option from a list of mutually exclusive options"
url: https://nextui.org/docs/components/radio
---
# Radio group
Radio Group allow users to select a single option from a list of mutually exclusive options.
Radio Group allow users to select a single option from a list of mutually exclusive options.
<ComponentLinks component="radiogroup" reactAriaHook="useRadioGroup" />
@ -25,10 +25,17 @@ Radio Group allow users to select a single option from a list of mutually exclus
<CodeDemo title="Usage" files={radioGroupContent.usage} />
### Disabled
### Disabled
<CodeDemo title="Disabled" files={radioGroupContent.disabled} />
### Default Value
<CodeDemo title="Default Value" files={radioGroupContent.defaultValue} />
### With Description
<CodeDemo title="With Description" files={radioGroupContent.withDescription} />
### Horizontal
@ -36,6 +43,122 @@ Radio Group allow users to select a single option from a list of mutually exclus
### Controlled
You can use the `value` and `onValueChange` properties to control the input value.
You can use the `value` and `onValueChange` properties to control the radio input value.
<CodeDemo title="Controlled" files={radioGroupContent.controlled} />
> **Note**: NextUI `Radio` 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
- RadioGroup Slots
- **base**: Radio group root wrapper, it wraps the label and the wrapper.
- **wrapper**: Radio group wrapper, it wraps all Radios.
- **label**: Radio group label, it is placed before the wrapper.
- **description**: Description slot for the radio group.
- **errorMessage**: Error message slot for the radio group.
- Radio Slots
- **base**: Radio root wrapper, it wraps all elements.
- **wrapper**: Radio wrapper, it wraps the control element.
- **labelWrapper**: Label and description wrapper.
- **label**: Label slot for the radio.
- **control**: Control element, it is the circle element.
- **description**: Description slot for the radio.
### Custom Styles
<CodeDemo title="Custom Styles" files={radioGroupContent.customStyles} />
### Custom Implementation
In case you need to customize the radio group even further, you can use the `useRadio` hook to create your own implementation.
<CodeDemo title="Custom Implementation" files={radioGroupContent.customImpl} />
## Data Attributes
- RadioGroup has the following attributes on the `root` element:
- **data-orientation**:
The orientation of the radio group. Based on `orientation` prop.
- Radio has the following attributes on the `root` element:
- **data-selected**:
When the radio is checked. Based on `isSelected` prop.
- **data-pressed**:
When the radio is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html).
- **data-invalid**:
When the radio is invalid. Based on `validationState` prop.
- **data-readonly**:
When the radio is readonly. Based on `isReadOnly` prop.
- **data-hover-unselected**:
When the radio is being hovered and unchecked. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html).
- **data-hover**:
When the radio is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html).
- **data-focus**:
When the radio is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-focus-visible**:
When the radio is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-disabled**:
When the radio is disabled. Based on `isDisabled` prop.
## Accessibility
- Radio groups are exposed to assistive technology via ARIA.
- Each radio is built with a native HTML `<input>` element, which can be optionally visually hidden to allow custom styling.
- Full support for browser features like form autofill.
- Keyboard event support for arrows keys.
- Keyboard focus management and cross browser normalization.
- Group and radio labeling support for assistive technology.
## API
### RadioGroup Props
| Attribute | Type | Description | Default |
| ---------------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| children | `ReactNode` \| `ReactNode[]` | The list of radio elements. | - |
| label | `ReactNode` | The label of the radio group. | - |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the radios. | `md` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the radios. | `primary` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the radios. | `full` |
| orientation | `horizontal` \| `vertical` | The orientation of the radio group. | `vertical` |
| name | `string` | The name of the RadioGroup, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). | - |
| value | `string[]` | The current selected value. (controlled). | - |
| defaultValue | `string[]` | The default selected value. (uncontrolled). | - |
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. | `false` |
| description | `ReactNode` | Radio group description . | - |
| errorMessage | `ReactNode` | Radio group error message. | - |
| isDisabled | `boolean` | Whether the radio group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the radio group slots. | - |
### RadioGroup 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 value changes. |
### Radio Props
| Attribute | Type | Description | Default |
| ---------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------- |
| children | `ReactNode` | The label of the radio. | - |
| label | `ReactNode` | The label of the radio. | - |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the radio. | `md` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the radio. | `primary` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the radio. | `lg` |
| description | `ReactNode` | A description for the field. Provides a hint such as specific requirements for what to choose. | - |
| isDisabled | `boolean` | Whether the radio is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
| isInvalid | `boolean` | Whether the radio is invalid. This is based on the radio groupo `validationState` prop. | `false` |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "labelWrapper" ｜ "label" ｜ "control" ｜ "description", string>` | Allows to set custom class names for the radio slots. | - |

15
packages/components/accordion/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230604191549
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/aria-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/accordion/package.json
View File

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

12
packages/components/avatar/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-image@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/avatar/package.json
View File

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

11
packages/components/badge/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/badge/package.json
View File

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

14
packages/components/button/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/spinner@0.0.0-dev-v2-20230604191549
- @nextui-org/drip@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/button/package.json
View File

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

13
packages/components/card/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/drip@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/card/package.json
View File

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

11
packages/components/checkbox/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/checkbox/package.json
View File

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

9
packages/components/checkbox/src/checkbox-group.tsx
View File

@ -10,9 +10,13 @@ const CheckboxGroup = forwardRef<CheckboxGroupProps, "div">((props, ref) => {
children,
context,
label,
description,
errorMessage,
getGroupProps,
getLabelProps,
getWrapperProps,
getDescriptionProps,
getErrorMessageProps,
} = useCheckboxGroup({ref, ...props});
return (
@ -21,6 +25,11 @@ const CheckboxGroup = forwardRef<CheckboxGroupProps, "div">((props, ref) => {
<div {...getWrapperProps()}>
<CheckboxGroupProvider value={context}>{children}</CheckboxGroupProvider>
</div>
{errorMessage ? (
<div {...getErrorMessageProps()}>{errorMessage}</div>
) : description ? (
<div {...getDescriptionProps()}>{description}</div>
) : null}
</div>
);
});

24
packages/components/checkbox/src/use-checkbox-group.ts
View File

@ -72,6 +72,8 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
lineThrough = false,
isDisabled = false,
disableAnimation = false,
description,
errorMessage,
className,
...otherProps
} = props;
@ -82,7 +84,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
const groupState = useCheckboxGroupState(otherProps);
const {labelProps, groupProps} = useReactAriaCheckboxGroup(
const {labelProps, groupProps, descriptionProps, errorMessageProps} = useReactAriaCheckboxGroup(
{
"aria-label": typeof label === "string" ? label : otherProps["aria-label"],
...otherProps,
@ -130,14 +132,34 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
};
};
const getDescriptionProps: PropGetter = (props = {}) => {
return {
...props,
...descriptionProps,
className: slots.description({class: clsx(classNames?.description, props?.className)}),
};
};
const getErrorMessageProps: PropGetter = (props = {}) => {
return {
...props,
...errorMessageProps,
className: slots.errorMessage({class: clsx(classNames?.errorMessage, props?.className)}),
};
};
return {
Component,
children,
label,
context,
description,
errorMessage,
getGroupProps,
getLabelProps,
getWrapperProps,
getDescriptionProps,
getErrorMessageProps,
};
}

19
packages/components/checkbox/stories/checkbox-group.stories.tsx
View File

@ -93,6 +93,25 @@ LineThrough.args = {
lineThrough: true,
};
export const WithDescription = Template.bind({});
WithDescription.args = {
...defaultProps,
description: "Select the cities you want to visit",
};
export const Invalid = Template.bind({});
Invalid.args = {
...defaultProps,
validationState: "invalid",
};
export const WithErrorMessage = Template.bind({});
WithErrorMessage.args = {
...defaultProps,
validationState: "invalid",
errorMessage: "The selected cities cannot be visited at the same time",
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
label: "Select cities",

12
packages/components/chip/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/chip/package.json
View File

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

11
packages/components/code/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/code/package.json
View File

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

11
packages/components/divider/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/divider
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/divider/package.json
View File

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

11
packages/components/drip/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/drip/package.json
View File

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

14
packages/components/dropdown/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/dropdown
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/aria-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/popover@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/dropdown/package.json
View File

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

12
packages/components/image/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/image
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-image@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/image/package.json
View File

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

13
packages/components/input/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/input
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/input/package.json
View File

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

11
packages/components/kbd/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/kbd
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/kbd/package.json
View File

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

12
packages/components/link/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/link
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/link/package.json
View File

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

15
packages/components/modal/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/modal
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230604191549
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/modal/package.json
View File

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

14
packages/components/navbar/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/navbar
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230604191549
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230604191549
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/navbar/package.json
View File

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

13
packages/components/pagination/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/pagination
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-pagination@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/pagination/package.json
View File

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

15
packages/components/popover/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/popover
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230604191549
- @nextui-org/aria-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/button@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/popover/package.json
View File

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

13
packages/components/progress/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/progress
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230604191549
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/progress/package.json
View File

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

11
packages/components/radio/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/radio
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/radio/package.json
View File

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

9
packages/components/radio/src/radio-group.tsx
View File

@ -11,9 +11,13 @@ const RadioGroup = forwardRef<RadioGroupProps, "div">((props, ref) => {
children,
label,
context,
description,
errorMessage,
getGroupProps,
getLabelProps,
getWrapperProps,
getDescriptionProps,
getErrorMessageProps,
} = useRadioGroup({ref, ...props});
return (
@ -22,6 +26,11 @@ const RadioGroup = forwardRef<RadioGroupProps, "div">((props, ref) => {
<div {...getWrapperProps()}>
<RadioGroupProvider value={context}>{children}</RadioGroupProvider>
</div>
{errorMessage ? (
<div {...getErrorMessageProps()}>{errorMessage}</div>
) : description ? (
<div {...getDescriptionProps()}>{description}</div>
) : null}
</Component>
);
});

32
packages/components/radio/src/use-radio-group.ts
View File

@ -76,6 +76,8 @@ export function useRadioGroup(props: UseRadioGroupProps) {
disableAnimation = false,
orientation = "vertical",
isRequired = false,
errorMessage,
description,
validationState,
className,
onChange,
@ -99,10 +101,12 @@ export function useRadioGroup(props: UseRadioGroupProps) {
const groupState = useRadioGroupState(otherPropsWithOrientation);
const {labelProps, radioGroupProps: groupProps} = useReactAriaRadioGroup(
otherPropsWithOrientation,
groupState,
);
const {
labelProps,
radioGroupProps: groupProps,
errorMessageProps,
descriptionProps,
} = useReactAriaRadioGroup(otherPropsWithOrientation, groupState);
const context: ContextType = useMemo(
() => ({
@ -156,14 +160,34 @@ export function useRadioGroup(props: UseRadioGroupProps) {
};
};
const getDescriptionProps: PropGetter = (props = {}) => {
return {
...props,
...descriptionProps,
className: slots.description({class: clsx(classNames?.description, props?.className)}),
};
};
const getErrorMessageProps: PropGetter = (props = {}) => {
return {
...props,
...errorMessageProps,
className: slots.errorMessage({class: clsx(classNames?.errorMessage, props?.className)}),
};
};
return {
Component,
children,
label,
context,
errorMessage,
description,
getGroupProps,
getLabelProps,
getWrapperProps,
getDescriptionProps,
getErrorMessageProps,
};
}

4
packages/components/radio/src/use-radio.ts
View File

@ -174,11 +174,11 @@ export function useRadio(props: UseRadioProps) {
"data-disabled": dataAttr(isDisabled),
"data-focus": dataAttr(isFocused),
"data-focus-visible": dataAttr(isFocusVisible),
"data-checked": dataAttr(isSelected),
"data-selected": dataAttr(isSelected),
"data-invalid": dataAttr(isInvalid),
"data-hover": dataAttr(isHovered),
"data-pressed": dataAttr(pressed),
"data-hover-unchecked": dataAttr(isHovered && !isSelected),
"data-hover-unselected": dataAttr(isHovered && !isSelected),
"data-readonly": dataAttr(inputProps.readOnly),
"aria-required": dataAttr(isRequired),
...mergeProps(hoverProps, pressProps, otherProps),

11
packages/components/radio/stories/radio.stories.tsx
View File

@ -159,21 +159,26 @@ IsRequired.args = {
export const WithDescription = Template.bind({});
WithDescription.args = {
...defaultProps,
description: "for",
description: "Please select an option",
};
export const Invalid = Template.bind({});
Invalid.args = {
...defaultProps,
validationState: "invalid",
description: "for",
};
export const WithErrorMessage = Template.bind({});
WithErrorMessage.args = {
...defaultProps,
validationState: "invalid",
errorMessage: "The selected option is invalid",
};
export const Row = Template.bind({});
Row.args = {
...defaultProps,
orientation: "horizontal",
description: "for",
};
export const DisableAnimation = Template.bind({});

11
packages/components/skeleton/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/skeleton
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/skeleton/package.json
View File

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

15
packages/components/snippet/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/snippet
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/tooltip@0.0.0-dev-v2-20230604191549
- @nextui-org/button@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/snippet/package.json
View File

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

11
packages/components/spacer/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/spacer
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/spacer/package.json
View File

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

11
packages/components/spinner/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/spinner
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/spinner/package.json
View File

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

11
packages/components/switch/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/switch
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/switch/package.json
View File

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

14
packages/components/table/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/table
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/checkbox@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/spacer@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/table/package.json
View File

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

14
packages/components/tabs/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/tabs
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230604191549
- @nextui-org/aria-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/tabs/package.json
View File

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

13
packages/components/tooltip/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/tooltip
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230604191549
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/aria-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/tooltip/package.json
View File

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

12
packages/components/user/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/user
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/dom-utils@0.0.0-dev-v2-20230604191549
- @nextui-org/avatar@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/components/user/package.json
View File

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

39
packages/core/react/CHANGELOG.md
View File

@ -1,5 +1,44 @@
# @nextui-org/react
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/pagination@0.0.0-dev-v2-20230604191549
- @nextui-org/accordion@0.0.0-dev-v2-20230604191549
- @nextui-org/checkbox@0.0.0-dev-v2-20230604191549
- @nextui-org/dropdown@0.0.0-dev-v2-20230604191549
- @nextui-org/progress@0.0.0-dev-v2-20230604191549
- @nextui-org/skeleton@0.0.0-dev-v2-20230604191549
- @nextui-org/divider@0.0.0-dev-v2-20230604191549
- @nextui-org/popover@0.0.0-dev-v2-20230604191549
- @nextui-org/snippet@0.0.0-dev-v2-20230604191549
- @nextui-org/spinner@0.0.0-dev-v2-20230604191549
- @nextui-org/tooltip@0.0.0-dev-v2-20230604191549
- @nextui-org/avatar@0.0.0-dev-v2-20230604191549
- @nextui-org/button@0.0.0-dev-v2-20230604191549
- @nextui-org/navbar@0.0.0-dev-v2-20230604191549
- @nextui-org/spacer@0.0.0-dev-v2-20230604191549
- @nextui-org/switch@0.0.0-dev-v2-20230604191549
- @nextui-org/badge@0.0.0-dev-v2-20230604191549
- @nextui-org/image@0.0.0-dev-v2-20230604191549
- @nextui-org/input@0.0.0-dev-v2-20230604191549
- @nextui-org/modal@0.0.0-dev-v2-20230604191549
- @nextui-org/radio@0.0.0-dev-v2-20230604191549
- @nextui-org/table@0.0.0-dev-v2-20230604191549
- @nextui-org/card@0.0.0-dev-v2-20230604191549
- @nextui-org/chip@0.0.0-dev-v2-20230604191549
- @nextui-org/code@0.0.0-dev-v2-20230604191549
- @nextui-org/drip@0.0.0-dev-v2-20230604191549
- @nextui-org/link@0.0.0-dev-v2-20230604191549
- @nextui-org/tabs@0.0.0-dev-v2-20230604191549
- @nextui-org/user@0.0.0-dev-v2-20230604191549
- @nextui-org/kbd@0.0.0-dev-v2-20230604191549
- @nextui-org/system@0.0.0-dev-v2-20230604191549
- @nextui-org/theme@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/core/react/package.json
View File

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

6
packages/core/system/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/system
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/core/system/package.json
View File

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

6
packages/core/theme/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/theme
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/core/theme/package.json
View File

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

4
packages/core/theme/src/components/checkbox.ts
View File

@ -196,7 +196,9 @@ const checkboxGroup = tv({
slots: {
base: "relative flex flex-col gap-2",
label: "relative text-default-500",
wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row ",
wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row",
description: "text-xs text-default-400",
errorMessage: "text-xs text-danger",
},
});

2
packages/core/theme/src/components/input.ts
View File

@ -48,7 +48,7 @@ const input = tv({
"data-[focus-visible]:ring-offset-background",
"data-[focus-visible]:dark:ring-offset-background-dark",
],
description: "text-xs text-default-500",
description: "text-xs text-default-400",
errorMessage: "text-xs text-danger",
},
variants: {

30
packages/core/theme/src/components/radio.ts
View File

@ -10,12 +10,12 @@ import {tv} from "tailwind-variants";
* @example
* <label
* className={base())}
* data-checked={boolean}
* data-hover-unchecked={boolean}
* data-selected={boolean}
* data-hover-unselected={boolean}
* data-focus-visible={boolean}
* >
* // input
* <span className={wrapper()} aria-hidden="true" data-checked={checked} data-hover-unchecked={hoverUnchecked}>
* <span className={wrapper()} aria-hidden="true" data-selected={selected} data-hover-unselected={hoverUnchecked}>
* <span className={point()}/>
* </span>
* <div className={labelWrapper()}>
@ -38,7 +38,7 @@ const radio = tv({
"border-2",
"box-border",
"border-default",
"group-data-[hover-unchecked=true]:bg-default-100",
"group-data-[hover-unselected=true]:bg-default-100",
// focus ring
"group-data-[focus-visible=true]:outline-none",
"group-data-[focus-visible=true]:ring-2",
@ -55,8 +55,8 @@ const radio = tv({
"opacity-0",
"scale-0",
"origin-center",
"group-data-[checked=true]:opacity-100",
"group-data-[checked=true]:scale-100",
"group-data-[selected=true]:opacity-100",
"group-data-[selected=true]:scale-100",
],
label: "relative text-foreground select-none",
description: "relative text-default-400",
@ -65,27 +65,27 @@ const radio = tv({
color: {
default: {
control: "bg-default-500 text-default-foreground",
wrapper: "group-data-[checked=true]:border-default-500",
wrapper: "group-data-[selected=true]:border-default-500",
},
primary: {
control: "bg-primary text-primary-foreground",
wrapper: "group-data-[checked=true]:border-primary",
wrapper: "group-data-[selected=true]:border-primary",
},
secondary: {
control: "bg-secondary text-secondary-foreground",
wrapper: "group-data-[checked=true]:border-secondary",
wrapper: "group-data-[selected=true]:border-secondary",
},
success: {
control: "bg-success text-success-foreground",
wrapper: "group-data-[checked=true]:border-success",
wrapper: "group-data-[selected=true]:border-success",
},
warning: {
control: "bg-warning text-warning-foreground",
wrapper: "group-data-[checked=true]:border-warning",
wrapper: "group-data-[selected=true]:border-warning",
},
danger: {
control: "bg-danger text-danger-foreground",
wrapper: "group-data-[checked=true]:border-danger",
wrapper: "group-data-[selected=true]:border-danger",
},
},
size: {
@ -163,7 +163,7 @@ const radio = tv({
isInvalid: {
true: {
control: "bg-danger text-danger-foreground",
wrapper: "border-danger data-[checked=true]:border-danger",
wrapper: "border-danger data-[selected=true]:border-danger",
label: "text-danger",
description: "text-danger-300",
},
@ -203,7 +203,9 @@ const radioGroup = tv({
slots: {
base: "relative flex flex-col gap-2",
label: "relative text-default-500",
wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row ",
wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row",
description: "text-xs text-default-400",
errorMessage: "text-xs text-danger",
},
});

6
packages/hooks/use-aria-accordion-item/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-accordion-item
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/hooks/use-aria-accordion-item/package.json
View File

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

6
packages/hooks/use-aria-button/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-button
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/hooks/use-aria-button/package.json
View File

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

9
packages/hooks/use-aria-field/CHANGELOG.md
View File

@ -1,5 +1,14 @@
# @nextui-org/use-aria-field
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230604191549
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/hooks/use-aria-field/package.json
View File

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

6
packages/hooks/use-aria-label/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-label
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/hooks/use-aria-label/package.json
View File

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

6
packages/hooks/use-aria-slot-id/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-slot-id
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/hooks/use-aria-slot-id/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-slot-id",
"version": "0.0.0-dev-v2-20230601153241",
"version": "0.0.0-dev-v2-20230604191549",
"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"

8
packages/hooks/use-aria-toggle-button/CHANGELOG.md
View File

@ -1,5 +1,13 @@
# @nextui-org/use-aria-toggle-button
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

2
packages/hooks/use-aria-toggle-button/package.json
View File

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

8
packages/hooks/use-callback-ref/CHANGELOG.md
View File

@ -1,5 +1,13 @@
# @nextui-org/use-callback-ref
## 0.0.0-dev-v2-20230604191549
### Patch Changes
- Radio and Checkbox group error message and description added
- Updated dependencies
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230604191549
## 0.0.0-dev-v2-20230601153241
### Patch Changes

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