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

v2.5.0 [BETA] (#4164)

Browse Source 
* chore(pre-release): enter pre-release mode

* fix(theme): apply tw nested group (#3909)

* chore(changset): add changeset

* fix(theme): apply nested group to table

* chore(docs): update table bottomContent code

* fix: changeset

* fix: changeset

* fix: changeset

* fix: changeset

* fix: changeset

* fix: pkg versions

* fix: changeset

* fix: drawer peer dep

* chore: update plop components tempalte

* ci(changesets): version packages (beta) (#3988)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: pre-release workflow

* chore: debug log added

* chore: force pre-release

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* chore: beta1 (#3990)

* ci(changesets): version packages (beta) (#3991)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(use-image): image ReferenceError in SSR (#3993)

* fix(input): fixed a sliding issue caused by the helper wrapper (#3966)

* If it is false and there is an error message or description it will create a div

* Update packages/components/input/src/input.tsx

* Update packages/components/select/src/select.tsx

* Update packages/components/input/src/textarea.tsx

* add changeset

* changeset update

* ci(changesets): version packages (beta) (#3995)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: image loading in the server (#3996)

* fix: lock file

* chore: force release

* chore: force release 2

* ci(changesets): version packages (beta) (#3997)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: image load on next.js (#3998)

* ci(changesets): version packages (beta) (#3999)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: element.ref was removed in React 19 warning (#4003)

* ci(changesets): version packages (beta) (#4004)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: react 19 as peer dep (#4008)

* ci(changesets): version packages (beta) (#4009)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Beta/react 19 support (#4010)

* fix: react 19 as peer dep

* fix: react 19 as peer dep

* chore: support framer-motion alpha version

* ci(changesets): version packages (beta) (#4011)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(theme): making select and input themes consistent (#3881)

* ci(changesets): version packages (beta) (#4012)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: support inert value with boolean type for react 19 (#4039)

* ci(changesets): version packages (beta) (#4041)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: alert design improved (#4054)

* ci(changesets): version packages (beta) (#4056)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: drawer improvements (#4057)

* ci(changesets): version packages (beta) (#4058)

* feat: alert styles improved (#4071)

* ci(changesets): version packages (beta) (#4072)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: alert styles improved (#4073)

* ci(changesets): version packages (beta) (#4074)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: add number of stars and credits

* chore: fix build

* chore: improve navabr colors

* chore: new changeset (#4083)

* ci(changesets): version packages (beta) (#4084)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: pnpm cleaned (#4086)

* ci(changesets): version packages (beta) (#4087)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: custom runnner added

* chore: custom runner test (#4091)

* Beta/custom runner (#4092)

* chore: custom runner test

* chore: custom runner test

* chore: remove 2 from older changeset

* ci(changesets): version packages (beta) (#4093)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: new demo added to alert

* Feat/virtualization for autocomplete (#4094)

* feat: add react-window virtualization for autocomplete

* fix: wrong imports and wrong sizing

* fix: update pnpm lock

* chore: add test cases for large dataset (1000 and 10000 items)

* chore: move virtualized-listbox to listbox components folder, implement isVirtualized conditional

* feat: implement dynamic listboxheight n item height, add story

* chore: rename props, remove unnecessary line changes

* fix: maxHeight style 256px for default, conditional usage of virtualizer

* feat: migrate to tan-stack virtual. (todo: fix scroll shadow)

* feat: virtualization support

---------

Co-authored-by: Vincentius Roger Kuswara <vincentiusrkuswara@gmail.com>

* ci(changesets): version packages (beta) (#4095)

* feat: small fixes

* feat: add reducedMotion setting to Provider (#3470)

* feat: add reducedMotion setting to Provider

* chore: refactor reducedMotion story

* Update .changeset/pretty-parrots-guess.md

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* ci(changesets): version packages (beta) (#4106)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: move circular-progress tv to progress (#3321)

* fix: remove circular-progress tv to progress

* docs: changeset

* chore(changeset): update changeset message

* Update .changeset/angry-maps-serve.md

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* fix: label placement when the select has a placeholder or description (#4126)

* ci(changesets): version packages (beta) (#4107)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(deps): add missing `framer-motion` in `peerDependencies` (#4140)

* fix(theme): add truncate class to the list item to avoid overflow the wrapper (#4105)

* fix(docs): invalid canary storybook link (#4030)

* fix: menu item hidden overflow text

* feat: changeset

* Merge branch 'beta/release-next' into fix/menu-item-hidden

* fix: truncate list item

* feat: update changeset

* fix(menu): omit internal props

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* feat(table): add isKeyboardNavigationDisabled prop to the table (#3735)

Co-authored-by: Maharshi Alpesh <maharshialpesh@Maharshi-Book.local>

* feat: add form component (#3036)

* chore: add support validationBehavior aria

* chore: add validationBehavior to Provider

* chore: add autocomplete validation test

* chore: add checkbox validation test

* fix(input): require condition

* docs: add description of validationBehavior props

* chore: add support validationBehavior props for date components

* docs(dates): add description of validationBehavior props

* chore: add changeset

* chore: format

* chore: fix test

* fix: select validationBehavior is not support yet

* fix: select validationBehavior not supported yet

* feat: add form component with input support

* feat: add support form context

* chore: wip add support for  form server errors

* chore: add support checkbox server validation

* chore: add support radio server validation

* chore: update pnpm-lock.yaml

* chore: add support input server validation

* chore: add support autocomplete server validation

* chore(form): add server validation stories

* chore: fix test

* chore: add date-picker validation test

* chore: update form stories

* chore: add changeset

* chore: update react-aria version

* chore: add pnpm-lock.yaml

* chore: update react-aria version

* chore: add comment

* chore: update react-aria version

* chore: fix change set

* chore: export form component in the main package

* chore: upgrade react-aria

* chore: fixed internationalized/date version

* fix: build error

* chore: upgrade docs react-aria version

* fix: remove comment

* fix: debug setting

* chore(docs): update sponsor (#3904)

* chore(docs): remove Scrumbuiss

* chore(docs): remove Scrumbuiss logo

* chore(docs): replace va by posthog (#4123)

* chore(changeset): change to patch

* refactor: react-aria-components remove to decrease package size, logic moved to the form package

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* docs: add forms guide (#4155)

Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>

* chore: routes updated

* ci(changesets): version packages (beta) (#4151)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: fix indentation

* fix(changeset): package not be found

* ci(changesets): version packages (beta) (#4158)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(select): controlled isInvalid prop (#4082)

* fix(select): controlled isInvalid prop

* chore: add changeset

* Merge branch 'beta/release-next' into pr/4082

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* ci(changesets): version packages (beta) (#4159)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore(changeset): bump all versions

* ci(changesets): version packages (beta) (#4160)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(deps): missing peer / dev dependency for framer-motion (#4161)

* fix(system): align `navigate` function parameters with `@react-aria` (#4163)

* fix: menu item classNames not work (#4156)

* fix: menu item classNames not work

* feat: changeset

* docs: update

* feat: merge classes utility added

* Update .changeset/brave-trains-wave.md

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(docs): remove incorrect info

* ci(changesets): version packages (beta) (#4162)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* refactor(docs): overall dx (#4055)

* refactor(docs): revise code block (#3922)

* refactor(docs): revise code block

* chore(docs): resolve pr comments

* refactor(docs): autocomplete dx (#3934)

* feat(docs): add *.js?raw module

* feat(docs): change to react-jsx and add **/*.js

* chore(root): include js and jsx

* refactor(docs): autocomplete dx

* chore(docs): rollback overrides

* chore(autocomplete): lint

* fix(autocomplete): incorrect import path

* fix(docs): autocomplete dx

* chore(docs): remove highlightedLines

* refactor(docs): breadcrumbs dx (#3968)

* refactor(docs): breadcrumbs dx

* fix(docs): export issue

* chore(docs): use preserve for jsx

* fix(docs): support multiline import

* fix(docs): support multiple export

* chore(docs): add back export

* refactor(docs): avatar dx (#3951)

* refactor(docs): badge dx (#3960)

* refactor(docs): badge dx

* chore(docs): incorrect import path

* refactor(docs): button dx (#3981)

* refactor(docs): calendar dx (#4022)

* refactor(docs): calendar dx

* fix(docs): incorrect import path

* refactor(docs): switch dx (#4037)

* refactor(docs): switch dx

* chore(docs): remove highlightedLines

* refactor(docs): tooltip (#4035)

* refactor(docs): usage dx (#4036)

* refactor(docs): circular-progress dx (#4029)

* refactor(docs): chip-dx (#4028)

* refactor(docs): checkbox-group dx (#4027)

* refactor(docs): checkbox dx (#4024)

* refactor(docs): checkbox dx

* fix(docs): incorrect import path

* refactor(docs): card dx (#4023)

* refactor(docs): skeleton dx (#4042)

* refactor(docs): spacer dx (#4043)

* refactor(docs): snippet dx (#4044)

* refactor(docs): scroll-shadow dx (#4045)

* refactor(docs): code dx (#4046)

* refactor(docs): kbd dx (#4047)

* refactor(docs): link dx (#4048)

* refactor(docs): progress dx (#4049)

* refactor(docs): divider dx (#4050)

* refactor(docs): listbox dx (#4051)

* refactor(docs): listbox dx

* fix(docs): import path

* fix(docs): import path

* chore(docs): remove highlightedLines

* fix(docs): indentation

* chore(docs): replace the props of autocomplete from value to key (#4129)

* refactor(docs): alert dx (#4108)

* refactor(docs): alert dx

* refactor(docs): alert dx

* refactor(docs): image dx (#4061)

* refactor(docs): textarea dx (#4063)

* refactor(docs): spinner dx (#4088)

* refactor(docs): radio-group dx (#4064)

* refactor(docs): pagination dx (#4062)

* refactor(docs): pagination dx

* refactor(docs): pagination dx

* refactor(docs): time-input dx (#4065)

* refactor(docs): time-input dx

* refactor(docs): time-input dx

* refactor(docs): slider dx (#4066)

* refactor(docs): slider dx

* refactor(docs): slider dx

* refactor(docs): move SliderValue to type

* refactor(docs): slider dx

* refactor(docs): make icon code collapsible

* refactor(docs): specify versions for date packages (#4138)

* refactor(docs): specify versions for date packages

* fix(docs): correct RA i18n version

* chore(deps): sync version from package

* refactor(docs): tabs dx (#4067)

* refactor(docs): tab dx

* refactor(docs): tabs dx

* refactor(docs): input dx (#4102)

* refactor(docs): input dx

* refactor(docs): input dx

* refactor(docs): navbar dx (#4076)

* refactor(docs): navbar dx

* refactor(docs): navbar dx

* refactor(docs): navbar dx

* refactor(docs): modal dx (#4077)

* refactor(docs): modal dx

* refactor(docs): modal dx

* refactor(docs): select dx (#4078)

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): table dx (#4079)

* refactor(docs): table dx

* fix(docs): import path

* refactor(docs): table dx

* refactor(docs): table dx

* refactor(docs): popover dx (#4090)

* refactor(docs): range-calendar dx (#4089)

* refactor(docs): range-calendar dx

* fix(docs): import path

* refactor(docs): date input dx (#4100)

* refactor(docs): dropdown dx (#4101)

* refactor(docs): dropdown dx

* refactor(docs): remove highlightedLines

* refactor(docs): dropdown dx

* refactor(docs): dropdown dx

* refactor(docs): date-picker dx (#4103)

* refactor(docs): date-picker dx

* fix(docs): import paths

* refactor(docs): date-range-picker dx (#4104)

* refactor(docs): date-range-picker dx

* fix(docs): date-range-picker dx

* refactor(docs): drawer dx (#4109)

* refactor(docs): drawer dx

* fix(docs): indentation

* refactor(docs): make icon collapsible

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>
Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>

* feat(input-otp): introduce input OTP component (#4052)

* feat(input-otp): adding the functionality

* fix(input-otp): making the use of input-otp library

* Update .changeset/spotty-flies-jump.md

* chore(input-otp): nits

* feat: improvements and fixes added

* refactor: input-otp docs improvements

* fix: changeset

* fix: build

---------

Co-authored-by: Maharshi Alpesh <maharshialpesh@Maharshi-Book.local>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* ci(changesets): version packages (beta) (#4169)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* refactor(theme): revise label font size for lg (#4141)

* refactor(theme): revise label font size for lg

* chore(changeset): add changeset

* refactor(theme): revise label font size for lg

* fix(docs): typecheck errors (#4171)

* fix(docs): remove duplicate import

* fix(docs): update type for onChange in range-calendar page

* fix(docs): add missing `@react-types/calendar`

* fix(docs): broken syntax

* fix(docs): typecheck issues

* fix(docs): add missing `@react-types/datepicker`

* fix(docs): typecheck issues

* fix: missing li tag when href is specified (#4168)

* fix(items): items in list should wrapped in li in case of a

* chore: adding the tests

* Feat/textarea add clear button (#4172)

* feat(components): add clear button to the textarea component

* docs(textarea): add test and changeset

* feat(textarea): modify the changeset file

* feat(textarea): add clear button to textarea

* feat(textarea): add isClearable prop to textarea

* docs(textarea): add documentation to textarea

* docs(textarea): add documentation to textarea

* feat(textarea): replace the textarea component clear icon and modify its location

* feat(textarea): revise the clear button position

* feat(textarea): revise the clear button structure

* feat(textarea): revise the styles of clear button and textarea

* feat(textarea): revise the styles of RTL case

* feat(textarea): change the rtl to pe

* feat(textarea): delete the px classname

* chore(changeset): update package and message

* test(textarea): add test case

* feat(textarea): change the clear button structure

* feat(textarea): optimized code

* chore(textarea): update the changeset file

* docs(textarea): add slots doc to textarea

* chore(textarea): update peerDevpeerDependencies version

* chore(textarea): add usecallback dep

* Update .changeset/five-adults-protect.md

* chore(pre-release): enter pre-release mode

* feat(textarea): modify the clear button icon

* fix(theme): apply tw nested group (#3909)

* chore(changset): add changeset

* fix(theme): apply nested group to table

* chore(docs): update table bottomContent code

* fix: changeset

* fix: changeset

* fix: changeset

* fix: changeset

* fix: changeset

* fix: pkg versions

* fix: changeset

* fix: drawer peer dep

* chore: update plop components tempalte

* ci(changesets): version packages (beta) (#3988)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: pre-release workflow

* chore: debug log added

* chore: force pre-release

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* chore: beta1 (#3990)

* ci(changesets): version packages (beta) (#3991)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(use-image): image ReferenceError in SSR (#3993)

* fix(input): fixed a sliding issue caused by the helper wrapper (#3966)

* If it is false and there is an error message or description it will create a div

* Update packages/components/input/src/input.tsx

* Update packages/components/select/src/select.tsx

* Update packages/components/input/src/textarea.tsx

* add changeset

* changeset update

* ci(changesets): version packages (beta) (#3995)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: image loading in the server (#3996)

* fix: lock file

* chore: force release

* chore: force release 2

* ci(changesets): version packages (beta) (#3997)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: image load on next.js (#3998)

* ci(changesets): version packages (beta) (#3999)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: element.ref was removed in React 19 warning (#4003)

* ci(changesets): version packages (beta) (#4004)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: react 19 as peer dep (#4008)

* ci(changesets): version packages (beta) (#4009)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Beta/react 19 support (#4010)

* fix: react 19 as peer dep

* fix: react 19 as peer dep

* chore: support framer-motion alpha version

* ci(changesets): version packages (beta) (#4011)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(theme): making select and input themes consistent (#3881)

* ci(changesets): version packages (beta) (#4012)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(textarea): fix clearButton display

* fix: support inert value with boolean type for react 19 (#4039)

* ci(changesets): version packages (beta) (#4041)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: alert design improved (#4054)

* ci(changesets): version packages (beta) (#4056)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: drawer improvements (#4057)

* ci(changesets): version packages (beta) (#4058)

* feat: alert styles improved (#4071)

* ci(changesets): version packages (beta) (#4072)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: alert styles improved (#4073)

* ci(changesets): version packages (beta) (#4074)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: add number of stars and credits

* chore: fix build

* chore: improve navabr colors

* chore: new changeset (#4083)

* ci(changesets): version packages (beta) (#4084)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: pnpm cleaned (#4086)

* ci(changesets): version packages (beta) (#4087)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: custom runnner added

* chore: custom runner test (#4091)

* Beta/custom runner (#4092)

* chore: custom runner test

* chore: custom runner test

* chore: remove 2 from older changeset

* ci(changesets): version packages (beta) (#4093)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* feat: new demo added to alert

* Feat/virtualization for autocomplete (#4094)

* feat: add react-window virtualization for autocomplete

* fix: wrong imports and wrong sizing

* fix: update pnpm lock

* chore: add test cases for large dataset (1000 and 10000 items)

* chore: move virtualized-listbox to listbox components folder, implement isVirtualized conditional

* feat: implement dynamic listboxheight n item height, add story

* chore: rename props, remove unnecessary line changes

* fix: maxHeight style 256px for default, conditional usage of virtualizer

* feat: migrate to tan-stack virtual. (todo: fix scroll shadow)

* feat: virtualization support

---------

Co-authored-by: Vincentius Roger Kuswara <vincentiusrkuswara@gmail.com>

* ci(changesets): version packages (beta) (#4095)

* feat: small fixes

* feat: add reducedMotion setting to Provider (#3470)

* feat: add reducedMotion setting to Provider

* chore: refactor reducedMotion story

* Update .changeset/pretty-parrots-guess.md

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* ci(changesets): version packages (beta) (#4106)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: move circular-progress tv to progress (#3321)

* fix: remove circular-progress tv to progress

* docs: changeset

* chore(changeset): update changeset message

* Update .changeset/angry-maps-serve.md

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* fix: label placement when the select has a placeholder or description (#4126)

* ci(changesets): version packages (beta) (#4107)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(deps): add missing `framer-motion` in `peerDependencies` (#4140)

* fix(theme): add truncate class to the list item to avoid overflow the wrapper (#4105)

* fix(docs): invalid canary storybook link (#4030)

* fix: menu item hidden overflow text

* feat: changeset

* Merge branch 'beta/release-next' into fix/menu-item-hidden

* fix: truncate list item

* feat: update changeset

* fix(menu): omit internal props

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* Update apps/docs/content/docs/components/textarea.mdx

* feat(table): add isKeyboardNavigationDisabled prop to the table (#3735)

Co-authored-by: Maharshi Alpesh <maharshialpesh@Maharshi-Book.local>

* feat: add form component (#3036)

* chore: add support validationBehavior aria

* chore: add validationBehavior to Provider

* chore: add autocomplete validation test

* chore: add checkbox validation test

* fix(input): require condition

* docs: add description of validationBehavior props

* chore: add support validationBehavior props for date components

* docs(dates): add description of validationBehavior props

* chore: add changeset

* chore: format

* chore: fix test

* fix: select validationBehavior is not support yet

* fix: select validationBehavior not supported yet

* feat: add form component with input support

* feat: add support form context

* chore: wip add support for  form server errors

* chore: add support checkbox server validation

* chore: add support radio server validation

* chore: update pnpm-lock.yaml

* chore: add support input server validation

* chore: add support autocomplete server validation

* chore(form): add server validation stories

* chore: fix test

* chore: add date-picker validation test

* chore: update form stories

* chore: add changeset

* chore: update react-aria version

* chore: add pnpm-lock.yaml

* chore: update react-aria version

* chore: add comment

* chore: update react-aria version

* chore: fix change set

* chore: export form component in the main package

* chore: upgrade react-aria

* chore: fixed internationalized/date version

* fix: build error

* chore: upgrade docs react-aria version

* fix: remove comment

* fix: debug setting

* chore(docs): update sponsor (#3904)

* chore(docs): remove Scrumbuiss

* chore(docs): remove Scrumbuiss logo

* chore(docs): replace va by posthog (#4123)

* chore(changeset): change to patch

* refactor: react-aria-components remove to decrease package size, logic moved to the form package

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* docs: add forms guide (#4155)

Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>

* chore: routes updated

* ci(changesets): version packages (beta) (#4151)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: fix indentation

* fix(changeset): package not be found

* ci(changesets): version packages (beta) (#4158)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(select): controlled isInvalid prop (#4082)

* fix(select): controlled isInvalid prop

* chore: add changeset

* Merge branch 'beta/release-next' into pr/4082

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* ci(changesets): version packages (beta) (#4159)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore(changeset): bump all versions

* ci(changesets): version packages (beta) (#4160)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix(deps): missing peer / dev dependency for framer-motion (#4161)

* fix(system): align `navigate` function parameters with `@react-aria` (#4163)

* fix: menu item classNames not work (#4156)

* fix: menu item classNames not work

* feat: changeset

* docs: update

* feat: merge classes utility added

* Update .changeset/brave-trains-wave.md

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(docs): remove incorrect info

* ci(changesets): version packages (beta) (#4162)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* refactor(docs): overall dx (#4055)

* refactor(docs): revise code block (#3922)

* refactor(docs): revise code block

* chore(docs): resolve pr comments

* refactor(docs): autocomplete dx (#3934)

* feat(docs): add *.js?raw module

* feat(docs): change to react-jsx and add **/*.js

* chore(root): include js and jsx

* refactor(docs): autocomplete dx

* chore(docs): rollback overrides

* chore(autocomplete): lint

* fix(autocomplete): incorrect import path

* fix(docs): autocomplete dx

* chore(docs): remove highlightedLines

* refactor(docs): breadcrumbs dx (#3968)

* refactor(docs): breadcrumbs dx

* fix(docs): export issue

* chore(docs): use preserve for jsx

* fix(docs): support multiline import

* fix(docs): support multiple export

* chore(docs): add back export

* refactor(docs): avatar dx (#3951)

* refactor(docs): badge dx (#3960)

* refactor(docs): badge dx

* chore(docs): incorrect import path

* refactor(docs): button dx (#3981)

* refactor(docs): calendar dx (#4022)

* refactor(docs): calendar dx

* fix(docs): incorrect import path

* refactor(docs): switch dx (#4037)

* refactor(docs): switch dx

* chore(docs): remove highlightedLines

* refactor(docs): tooltip (#4035)

* refactor(docs): usage dx (#4036)

* refactor(docs): circular-progress dx (#4029)

* refactor(docs): chip-dx (#4028)

* refactor(docs): checkbox-group dx (#4027)

* refactor(docs): checkbox dx (#4024)

* refactor(docs): checkbox dx

* fix(docs): incorrect import path

* refactor(docs): card dx (#4023)

* refactor(docs): skeleton dx (#4042)

* refactor(docs): spacer dx (#4043)

* refactor(docs): snippet dx (#4044)

* refactor(docs): scroll-shadow dx (#4045)

* refactor(docs): code dx (#4046)

* refactor(docs): kbd dx (#4047)

* refactor(docs): link dx (#4048)

* refactor(docs): progress dx (#4049)

* refactor(docs): divider dx (#4050)

* refactor(docs): listbox dx (#4051)

* refactor(docs): listbox dx

* fix(docs): import path

* fix(docs): import path

* chore(docs): remove highlightedLines

* fix(docs): indentation

* chore(docs): replace the props of autocomplete from value to key (#4129)

* refactor(docs): alert dx (#4108)

* refactor(docs): alert dx

* refactor(docs): alert dx

* refactor(docs): image dx (#4061)

* refactor(docs): textarea dx (#4063)

* refactor(docs): spinner dx (#4088)

* refactor(docs): radio-group dx (#4064)

* refactor(docs): pagination dx (#4062)

* refactor(docs): pagination dx

* refactor(docs): pagination dx

* refactor(docs): time-input dx (#4065)

* refactor(docs): time-input dx

* refactor(docs): time-input dx

* refactor(docs): slider dx (#4066)

* refactor(docs): slider dx

* refactor(docs): slider dx

* refactor(docs): move SliderValue to type

* refactor(docs): slider dx

* refactor(docs): make icon code collapsible

* refactor(docs): specify versions for date packages (#4138)

* refactor(docs): specify versions for date packages

* fix(docs): correct RA i18n version

* chore(deps): sync version from package

* refactor(docs): tabs dx (#4067)

* refactor(docs): tab dx

* refactor(docs): tabs dx

* refactor(docs): input dx (#4102)

* refactor(docs): input dx

* refactor(docs): input dx

* refactor(docs): navbar dx (#4076)

* refactor(docs): navbar dx

* refactor(docs): navbar dx

* refactor(docs): navbar dx

* refactor(docs): modal dx (#4077)

* refactor(docs): modal dx

* refactor(docs): modal dx

* refactor(docs): select dx (#4078)

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): select dx

* refactor(docs): table dx (#4079)

* refactor(docs): table dx

* fix(docs): import path

* refactor(docs): table dx

* refactor(docs): table dx

* refactor(docs): popover dx (#4090)

* refactor(docs): range-calendar dx (#4089)

* refactor(docs): range-calendar dx

* fix(docs): import path

* refactor(docs): date input dx (#4100)

* refactor(docs): dropdown dx (#4101)

* refactor(docs): dropdown dx

* refactor(docs): remove highlightedLines

* refactor(docs): dropdown dx

* refactor(docs): dropdown dx

* refactor(docs): date-picker dx (#4103)

* refactor(docs): date-picker dx

* fix(docs): import paths

* refactor(docs): date-range-picker dx (#4104)

* refactor(docs): date-range-picker dx

* fix(docs): date-range-picker dx

* refactor(docs): drawer dx (#4109)

* refactor(docs): drawer dx

* fix(docs): indentation

* refactor(docs): make icon collapsible

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>
Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>

* Merge branch 'beta/release-next' into pr/3477

* refactor(docs): apply new structure to doc

* feat(input-otp): introduce input OTP component (#4052)

* feat(input-otp): adding the functionality

* fix(input-otp): making the use of input-otp library

* Update .changeset/spotty-flies-jump.md

* chore(input-otp): nits

* feat: improvements and fixes added

* refactor: input-otp docs improvements

* fix: changeset

* fix: build

---------

Co-authored-by: Maharshi Alpesh <maharshialpesh@Maharshi-Book.local>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* ci(changesets): version packages (beta) (#4169)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* refactor(theme): revise label font size for lg (#4141)

* refactor(theme): revise label font size for lg

* chore(changeset): add changeset

* refactor(theme): revise label font size for lg

* fix(docs): typecheck errors (#4171)

* fix(docs): remove duplicate import

* fix(docs): update type for onChange in range-calendar page

* fix(docs): add missing `@react-types/calendar`

* fix(docs): broken syntax

* fix(docs): typecheck issues

* fix(docs): add missing `@react-types/datepicker`

* fix(docs): typecheck issues

* fix: missing li tag when href is specified (#4168)

* fix(items): items in list should wrapped in li in case of a

* chore: adding the tests

* fix: textarea issues with the clear button

* chore: adjust clear button position

---------

Co-authored-by: doki- <1335902682@qq.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Mustafa Balcı <19329346+mstfblci@users.noreply.github.com>
Co-authored-by: Maharshi Alpesh <maharshialpesh@gmail.com>
Co-authored-by: Vincentius Roger Kuswara <vincentiusrkuswara@gmail.com>
Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Co-authored-by: winches <329487092@qq.com>
Co-authored-by: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Co-authored-by: Maharshi Alpesh <maharshialpesh@Maharshi-Book.local>
Co-authored-by: chirokas <157580465+chirokas@users.noreply.github.com>

* ci(changesets): version packages (beta) (#4170)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* docs: sync api from nextui-cli v0.3.5 (#4173)

Co-authored-by: GitHub Action <action@github.com>

* ci(changesets): exit pre-release mode

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: աӄա <wingkwong.code@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Mustafa Balcı <19329346+mstfblci@users.noreply.github.com>
Co-authored-by: Maharshi Alpesh <maharshialpesh@gmail.com>
Co-authored-by: Vincentius Roger Kuswara <vincentiusrkuswara@gmail.com>
Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Co-authored-by: winches <329487092@qq.com>
Co-authored-by: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Co-authored-by: Maharshi Alpesh <maharshialpesh@Maharshi-Book.local>
Co-authored-by: chirokas <157580465+chirokas@users.noreply.github.com>
Co-authored-by: doki- <1335902682@qq.com>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Junior Garcia 2024-11-29 16:54:25 -03:00 committed by GitHub
parent ad79545d95
commit 744fb49476
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1547 changed files with 50214 additions and 30581 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/angry-maps-serve.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
move circular-progress tv to progress

6
.changeset/brave-trains-wave.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/menu": patch
"@nextui-org/theme": patch
---
Fix menu item classNames not work (#4119)

10
.changeset/calm-weeks-tie.md Normal file
View File

@ -0,0 +1,10 @@
---
"@nextui-org/accordion": patch
"@nextui-org/button": patch
"@nextui-org/card": patch
"@nextui-org/date-picker": patch
"@nextui-org/navbar": patch
"@nextui-org/snippet": patch
---
fix missing peer / dev dependency for framer-motion

6
.changeset/cold-dolls-vanish.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/drawer": patch
"@nextui-org/modal": patch
---
Drawer styles and transition improved

5
.changeset/curly-rules-warn.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/calendar": patch
---
add missing `framer-motion` in `peerDependencies`

6
.changeset/empty-helper-wrapper-div.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/select": patch
"@nextui-org/input": patch
---
- Fixed a UI sliding issue caused by the helper wrapper being rendered when `isInvalid` was false but `errorMessage` was present

86
.changeset/famous-experts-buy.md Normal file
View File

@ -0,0 +1,86 @@
---
"@nextui-org/accordion": patch
"@nextui-org/alert": patch
"@nextui-org/autocomplete": patch
"@nextui-org/avatar": patch
"@nextui-org/badge": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/checkbox": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/date-input": patch
"@nextui-org/date-picker": patch
"@nextui-org/divider": patch
"@nextui-org/drawer": patch
"@nextui-org/dropdown": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/radio": patch
"@nextui-org/ripple": patch
"@nextui-org/scroll-shadow": patch
"@nextui-org/select": patch
"@nextui-org/skeleton": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/spacer": patch
"@nextui-org/spinner": patch
"@nextui-org/switch": patch
"@nextui-org/table": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/theme": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-data-scroll-overflow": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-draggable": patch
"@nextui-org/use-image": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-measure": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/use-resize": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-ssr": patch
"@nextui-org/use-theme": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/aria-utils": patch
"@nextui-org/dom-animation": patch
"@nextui-org/framer-utils": patch
"@nextui-org/react-rsc-utils": patch
"@nextui-org/react-utils": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/test-utils": patch
---
Test new runner

16
.changeset/few-jars-flow.md
View File

@ -1,8 +1,10 @@
---
"@nextui-org/table": minor
"@nextui-org/accordion": minor
"@nextui-org/alert": minor
"@nextui-org/autocomplete": minor
"@nextui-org/avatar": minor
"@nextui-org/badge": minor
"@nextui-org/breadcrumbs": minor
"@nextui-org/button": minor
"@nextui-org/calendar": minor
@ -11,9 +13,12 @@
"@nextui-org/chip": minor
"@nextui-org/date-input": minor
"@nextui-org/date-picker": minor
"@nextui-org/divider": minor
"@nextui-org/dropdown": minor
"@nextui-org/input": minor
"@nextui-org/code": minor
"@nextui-org/divider": minor
"@nextui-org/image": minor
"@nextui-org/drawer": minor
"@nextui-org/kbd": minor
"@nextui-org/link": minor
"@nextui-org/listbox": minor
@ -24,8 +29,13 @@
"@nextui-org/popover": minor
"@nextui-org/progress": minor
"@nextui-org/radio": minor
"@nextui-org/scroll-shadow": minor
"@nextui-org/ripple": minor
"@nextui-org/select": minor
"@nextui-org/slider": minor
"@nextui-org/skeleton": minor
"@nextui-org/spacer": minor
"@nextui-org/spinner": minor
"@nextui-org/snippet": minor
"@nextui-org/switch": minor
"@nextui-org/tabs": minor
@ -33,6 +43,7 @@
"@nextui-org/user": minor
"@nextui-org/react": minor
"@nextui-org/system": minor
"@nextui-org/theme": minor
"@nextui-org/system-rsc": minor
"@nextui-org/use-aria-accordion": minor
"@nextui-org/use-aria-accordion-item": minor
@ -41,13 +52,14 @@
"@nextui-org/use-aria-menu": minor
"@nextui-org/use-aria-modal-overlay": minor
"@nextui-org/use-aria-multiselect": minor
"@nextui-org/use-aria-overlay": minor
"@nextui-org/use-aria-toggle-button": minor
"@nextui-org/use-disclosure": minor
"@nextui-org/use-intersection-observer": minor
"@nextui-org/use-is-mobile": minor
"@nextui-org/use-pagination": minor
"@nextui-org/aria-utils": minor
"@nextui-org/use-ssr": minor
"@nextui-org/use-theme": minor
---
update react-aria version

7
.changeset/five-adults-protect.md Normal file
View File

@ -0,0 +1,7 @@
---
"@nextui-org/input": patch
"@nextui-org/shared-icons": patch
"@nextui-org/theme": patch
---
introduce `isClearable` to Textarea component (#2348, #2112)

5
.changeset/fluffy-icons-refuse.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/table": patch
---
Currently, whenever any arrow-key keypress is triggered it navigates the focus to other cell/row. This creates an issue when the table cell contains a component which requires this keys for specific purpose (eg. if a table cell contains input component, it might need arrow keys for editing. But it is not possible because whenever the keypress triggers navigation). The PR adds an `isKeyboardNavigationDisabled` prop to disable the navigation.

5
.changeset/fuzzy-lies-brush.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/table": patch
---
The `layoutNode` prop has been removed due to the update to react-aria.

5
.changeset/gentle-needles-rescue.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/use-image": patch
---
use-image hook logic restore to the previous one to avoid nextjs hydration issues

5
.changeset/happy-parrots-search.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
apply tw nested group (#3544, #2324, #2959)

5
.changeset/kind-insects-end.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/use-image": patch
---
server validation added to the use-image hook

7
.changeset/lazy-buttons-exercise.md Normal file
View File

@ -0,0 +1,7 @@
---
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/theme": patch
---
Add truncate class to the list item to avoid overflow the wrapper

2
.changeset/light-needles-behave.md
View File

@ -1,5 +1,5 @@
---
"@nextui-org/use-theme": minor
"@nextui-org/use-theme": patch
---
introduce `use-theme` hook

5
.changeset/many-starfishes-refuse.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
revise label font size for lg (#3073)

7
.changeset/moody-rabbits-shop.md Normal file
View File

@ -0,0 +1,7 @@
---
"@nextui-org/calendar": patch
"@nextui-org/tabs": patch
"@nextui-org/shared-utils": patch
---
support inert value with boolean type for react 19 (#4038)

7
.changeset/nasty-bees-sniff.md Normal file
View File

@ -0,0 +1,7 @@
---
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/pagination": patch
---
Fixes missing `<li>` wrapper when `href` prop is passed in `ListboxItem`, `MenuItem`, and `PaginationItem` (#4147)

4
.changeset/neat-donkeys-accept.md
View File

@ -1,6 +1,6 @@
---
"@nextui-org/date-picker": minor
"@nextui-org/theme": minor
"@nextui-org/date-picker": patch
"@nextui-org/theme": patch
---
Add support for selectorButtonPlacement property (#3015)

6
.changeset/new-cougars-collect.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/alert": patch
"@nextui-org/theme": patch
---
Alert styles improved

77
.changeset/plenty-scissors-love.md Normal file
View File

@ -0,0 +1,77 @@
---
"@nextui-org/accordion": patch
"@nextui-org/alert": patch
"@nextui-org/autocomplete": patch
"@nextui-org/avatar": patch
"@nextui-org/badge": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/checkbox": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/date-input": patch
"@nextui-org/date-picker": patch
"@nextui-org/divider": patch
"@nextui-org/drawer": patch
"@nextui-org/dropdown": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/radio": patch
"@nextui-org/ripple": patch
"@nextui-org/scroll-shadow": patch
"@nextui-org/select": patch
"@nextui-org/skeleton": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/spacer": patch
"@nextui-org/spinner": patch
"@nextui-org/switch": patch
"@nextui-org/table": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/theme": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-data-scroll-overflow": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-draggable": patch
"@nextui-org/use-image": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/use-theme": patch
"@nextui-org/aria-utils": patch
"@nextui-org/dom-animation": patch
"@nextui-org/framer-utils": patch
"@nextui-org/react-utils": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/test-utils": patch
---
Beta 1

46
.changeset/polite-mails-kneel.md Normal file
View File

@ -0,0 +1,46 @@
---
"@nextui-org/accordion": patch
"@nextui-org/avatar": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/chip": patch
"@nextui-org/date-input": patch
"@nextui-org/divider": patch
"@nextui-org/dropdown": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/select": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/switch": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-pagination": patch
"@nextui-org/aria-utils": patch
---
update react-aria version

5
.changeset/pretty-parrots-guess.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/system": patch
---
Add reducedMotion setting to Provider (#3395)

7
.changeset/proud-chicken-impress.md Normal file
View File

@ -0,0 +1,7 @@
---
"@nextui-org/autocomplete": patch
"@nextui-org/listbox": patch
"@nextui-org/theme": patch
---
Virtualization support added to Listbox & Autocomplete

5
.changeset/purple-berries-play.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/form": patch
---
add form component

86
.changeset/red-camels-build.md Normal file
View File

@ -0,0 +1,86 @@
---
"@nextui-org/accordion": patch
"@nextui-org/alert": patch
"@nextui-org/autocomplete": patch
"@nextui-org/avatar": patch
"@nextui-org/badge": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/checkbox": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/date-input": patch
"@nextui-org/date-picker": patch
"@nextui-org/divider": patch
"@nextui-org/drawer": patch
"@nextui-org/dropdown": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/radio": patch
"@nextui-org/ripple": patch
"@nextui-org/scroll-shadow": patch
"@nextui-org/select": patch
"@nextui-org/skeleton": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/spacer": patch
"@nextui-org/spinner": patch
"@nextui-org/switch": patch
"@nextui-org/table": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/theme": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-data-scroll-overflow": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-draggable": patch
"@nextui-org/use-image": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-measure": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/use-resize": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-ssr": patch
"@nextui-org/use-theme": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/aria-utils": patch
"@nextui-org/dom-animation": patch
"@nextui-org/framer-utils": patch
"@nextui-org/react-rsc-utils": patch
"@nextui-org/react-utils": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/test-utils": patch
---
React 19 added to peerDeps

7
.changeset/selfish-baboons-know.md Normal file
View File

@ -0,0 +1,7 @@
---
"@nextui-org/alert": patch
"@nextui-org/theme": patch
"@nextui-org/shared-icons": patch
---
Alert design improved

9
.changeset/sharp-pianos-pump.md Normal file
View File

@ -0,0 +1,9 @@
---
"@nextui-org/autocomplete": patch
"@nextui-org/checkbox": patch
"@nextui-org/date-picker": patch
"@nextui-org/input": patch
"@nextui-org/radio": patch
---
support server validation with form

86
.changeset/silly-candles-wonder.md Normal file
View File

@ -0,0 +1,86 @@
---
"@nextui-org/accordion": patch
"@nextui-org/alert": patch
"@nextui-org/autocomplete": patch
"@nextui-org/avatar": patch
"@nextui-org/badge": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/checkbox": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/date-input": patch
"@nextui-org/date-picker": patch
"@nextui-org/divider": patch
"@nextui-org/drawer": patch
"@nextui-org/dropdown": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/radio": patch
"@nextui-org/ripple": patch
"@nextui-org/scroll-shadow": patch
"@nextui-org/select": patch
"@nextui-org/skeleton": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/spacer": patch
"@nextui-org/spinner": patch
"@nextui-org/switch": patch
"@nextui-org/table": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/theme": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-data-scroll-overflow": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-draggable": patch
"@nextui-org/use-image": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-measure": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/use-resize": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-ssr": patch
"@nextui-org/use-theme": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/aria-utils": patch
"@nextui-org/dom-animation": patch
"@nextui-org/framer-utils": patch
"@nextui-org/react-rsc-utils": patch
"@nextui-org/react-utils": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/test-utils": patch
---
framer-motion alpha version added

6
.changeset/sixty-ties-knock.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/alert": patch
"@nextui-org/theme": patch
---
Alert compoentn styles improved

2
.changeset/slow-paws-punch.md
View File

@ -1,5 +1,5 @@
---
"@nextui-org/popover": minor
"@nextui-org/popover": patch
---
added `shouldCloseOnScroll` to control the popover closing on scroll (#3594)

87
.changeset/sour-bikes-burn.md Normal file
View File

@ -0,0 +1,87 @@
---
"@nextui-org/accordion": patch
"@nextui-org/alert": patch
"@nextui-org/autocomplete": patch
"@nextui-org/avatar": patch
"@nextui-org/badge": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/checkbox": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/date-input": patch
"@nextui-org/date-picker": patch
"@nextui-org/divider": patch
"@nextui-org/drawer": patch
"@nextui-org/dropdown": patch
"@nextui-org/form": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/radio": patch
"@nextui-org/ripple": patch
"@nextui-org/scroll-shadow": patch
"@nextui-org/select": patch
"@nextui-org/skeleton": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/spacer": patch
"@nextui-org/spinner": patch
"@nextui-org/switch": patch
"@nextui-org/table": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/theme": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-data-scroll-overflow": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-draggable": patch
"@nextui-org/use-image": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-measure": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/use-resize": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-ssr": patch
"@nextui-org/use-theme": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/aria-utils": patch
"@nextui-org/dom-animation": patch
"@nextui-org/framer-utils": patch
"@nextui-org/react-rsc-utils": patch
"@nextui-org/react-utils": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/test-utils": patch
---
bump version

7
.changeset/spotty-flies-jump.md Normal file
View File

@ -0,0 +1,7 @@
---
"@nextui-org/input-otp": patch
"@nextui-org/theme": patch
"@nextui-org/react": patch
---
Adding new input-otp component.

5
.changeset/spotty-spies-call.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/select": patch
---
Fix Controlled IsInvalid Prop In Select

86
.changeset/tame-planes-think.md Normal file
View File

@ -0,0 +1,86 @@
---
"@nextui-org/accordion": patch
"@nextui-org/alert": patch
"@nextui-org/autocomplete": patch
"@nextui-org/avatar": patch
"@nextui-org/badge": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/checkbox": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/date-input": patch
"@nextui-org/date-picker": patch
"@nextui-org/divider": patch
"@nextui-org/drawer": patch
"@nextui-org/dropdown": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/radio": patch
"@nextui-org/ripple": patch
"@nextui-org/scroll-shadow": patch
"@nextui-org/select": patch
"@nextui-org/skeleton": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/spacer": patch
"@nextui-org/spinner": patch
"@nextui-org/switch": patch
"@nextui-org/table": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/theme": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-data-scroll-overflow": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-draggable": patch
"@nextui-org/use-image": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-measure": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/use-resize": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-ssr": patch
"@nextui-org/use-theme": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/aria-utils": patch
"@nextui-org/dom-animation": patch
"@nextui-org/framer-utils": patch
"@nextui-org/react-rsc-utils": patch
"@nextui-org/react-utils": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/test-utils": patch
---
Pnpm clean

5
.changeset/ten-paws-relate.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/popover": patch
---
Fix: element.ref was removed in React 19

86
.changeset/tender-buses-sort.md Normal file
View File

@ -0,0 +1,86 @@
---
"@nextui-org/accordion": patch
"@nextui-org/alert": patch
"@nextui-org/autocomplete": patch
"@nextui-org/avatar": patch
"@nextui-org/badge": patch
"@nextui-org/breadcrumbs": patch
"@nextui-org/button": patch
"@nextui-org/calendar": patch
"@nextui-org/card": patch
"@nextui-org/checkbox": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/date-input": patch
"@nextui-org/date-picker": patch
"@nextui-org/divider": patch
"@nextui-org/drawer": patch
"@nextui-org/dropdown": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/kbd": patch
"@nextui-org/link": patch
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
"@nextui-org/modal": patch
"@nextui-org/navbar": patch
"@nextui-org/pagination": patch
"@nextui-org/popover": patch
"@nextui-org/progress": patch
"@nextui-org/radio": patch
"@nextui-org/ripple": patch
"@nextui-org/scroll-shadow": patch
"@nextui-org/select": patch
"@nextui-org/skeleton": patch
"@nextui-org/slider": patch
"@nextui-org/snippet": patch
"@nextui-org/spacer": patch
"@nextui-org/spinner": patch
"@nextui-org/switch": patch
"@nextui-org/table": patch
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/theme": patch
"@nextui-org/use-aria-accordion": patch
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/use-aria-link": patch
"@nextui-org/use-aria-menu": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-multiselect": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-data-scroll-overflow": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-draggable": patch
"@nextui-org/use-image": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-intersection-observer": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-measure": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/use-resize": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-ssr": patch
"@nextui-org/use-theme": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/aria-utils": patch
"@nextui-org/dom-animation": patch
"@nextui-org/framer-utils": patch
"@nextui-org/react-rsc-utils": patch
"@nextui-org/react-utils": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/test-utils": patch
---
Fix build 2

5
.changeset/tiny-laws-cheer.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/system": patch
---
align `navigate` function parameters with `@react-aria`

5
.changeset/tough-brooms-hunt.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/select": patch
---
Fix the label placement when the `Select` has a `placeholder` or `description`.

5
.changeset/twelve-trains-smile.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
making input and select styling consistent(#3876)

2
.changeset/wild-jobs-explain.md
View File

@ -2,4 +2,4 @@
"@nextui-org/use-image": patch
---
fix Image ReferenceError in SSR
fix Image ReferenceError in SSR

19
.github/workflows/pre-release.yaml vendored
View File

@ -14,7 +14,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
prerelease:
name: changesets pre-release
runs-on: ubuntu-latest
runs-on: ubuntu-latest-m
permissions:
contents: write
pull-requests: write
@ -52,9 +52,24 @@ jobs:
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Debug condition values
run: |
echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
echo "Commit message: ${{ github.event.head_commit.message }}"
echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
- name: Tests
if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
run: pnpm test
- name: Build
if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
run: pnpm build
- name: Publish to NPM
id: publish-to-npm
if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): :package: version packages') }}"
if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
uses: changesets/action@v1
with:
publish: pnpm run release

42
.github/workflows/update-stats.yml vendored Normal file
View File

@ -0,0 +1,42 @@
name: Update Stats
on:
schedule:
# Runs every Monday at 00:00 UTC
- cron: '0 0 * * 1'
# Allow manual trigger
workflow_dispatch:
jobs:
update-stats:
name: Update Stats
runs-on: ubuntu-latest
steps:
- name: Checkout branch
uses: actions/checkout@v4
- name: Install
uses: ./.github/common-actions/install
- name: Update search metadata
run: pnpm update:search-meta
- name: Update GitHub info
run: pnpm update:github-info
- name: Create Pull Request
uses: peter-evans/create-pull-request@v5
with:
commit-message: "chore(stats): update project statistics"
title: "chore(stats): 📊 Update project statistics"
body: |
This PR updates the project statistics including:
- Search metadata
- GitHub repository information
This is an automated PR generated weekly.
branch: chore/update-stats
base: main
delete-branch: true
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

1
.gitignore vendored
View File

@ -56,6 +56,7 @@ packages/**/*.backup.ts
# ignore sitemap
apps/**/sitemap.xml
apps/**/sitemap-0.xml
# turbo
.turbo

2
.vscode/settings.json vendored
View File

@ -10,5 +10,5 @@
},
"tailwindCSS.experimental.classRegex": [
["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
],
}

4
apps/docs/.eslintrc.json
View File

@ -22,10 +22,6 @@
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
}
]
}

2
apps/docs/components/docs/components/code-demo/react-live-demo.tsx
View File

@ -4,6 +4,7 @@ import {clsx} from "@nextui-org/shared-utils";
import * as Components from "@nextui-org/react";
import * as intlDateUtils from "@internationalized/date";
import * as reactAriaI18n from "@react-aria/i18n";
import * as reactHookForm from "react-hook-form";
import {BgGridContainer} from "@/components/bg-grid-container";
import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
@ -23,6 +24,7 @@ export const scope = {
...Components,
...intlDateUtils,
...reactAriaI18n,
...reactHookForm,
} as Record<string, unknown>;
export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({

4
apps/docs/components/docs/components/code-demo/utils.ts
View File

@ -1,6 +1,6 @@
import {FileCode} from "./types";
const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm;
const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
@ -31,7 +31,7 @@ export const transformCode = (
// replace match with const Name = () => (
return `const ${compName} = () => {`;
})
.replace("export", "");
.replace(/export/g, "");
// add render(<App/>) to cleanedCode if has const App = () => {
if (cleanedCode.includes(`const App = () => {`)) {

110
apps/docs/components/docs/components/codeblock.tsx
View File

@ -1,7 +1,13 @@
import type {Language, PrismTheme} from "prism-react-renderer";
import type {TransformTokensTypes} from "./helper";
import React, {forwardRef, useEffect} from "react";
import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
import BaseHighlight, {defaultProps} from "prism-react-renderer";
import {debounce, omit} from "@nextui-org/shared-utils";
import {cn} from "@nextui-org/react";
import {transformTokens} from "./helper";
import defaultTheme from "@/libs/prism-theme";
@ -142,21 +148,36 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
{...props}
>
{({className, style, tokens, getLineProps, getTokenProps}) => (
<div className="w-full" data-language={language}>
<pre
ref={ref}
className={clsx(className, classNameProp, "flex max-w-full", {
<pre
ref={ref}
className={clsx(
className,
classNameProp,
`language-${codeLang}`,
"max-w-full contents",
{
"flex-col": isMultiLine,
"scrollbar-hide overflow-x-scroll": hideScrollBar,
})}
style={style}
translate="no"
>
{tokens.map((line, i) => {
"overflow-x-scroll scrollbar-hide": hideScrollBar,
},
)}
data-language={language}
style={style}
>
{transformTokens(tokens).map((line) => {
const folderLine = line[0] as TransformTokensTypes;
const isFolder = folderLine.types?.includes("folderStart");
const renderLine = (
line: TransformTokensTypes[],
i: number,
as: "div" | "span" = "div",
) => {
const Tag = as;
const lineProps = getLineProps({line, key: i});
return (
<div
<Tag
{...omit(lineProps, ["key"])}
key={`${i}-${getUniqueID("line-wrapper")}`}
className={clsx(
@ -167,25 +188,48 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
"px-2": showLines,
},
{
"before:content-[''] before:w-full before:h-full before:absolute before:z-0 before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background":
shouldHighlightLine(i),
"before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-['']":
isFolder ? false : shouldHighlightLine(i),
},
)}
data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
>
{showLines && (
<span className="select-none text-xs mr-6 opacity-30">{i + 1}</span>
<span
className={cn(
"mr-6 select-none text-xs opacity-30",
i + 1 >= 10 ? "mr-4" : "",
i + 1 >= 100 ? "mr-2" : "",
i + 1 >= 1000 ? "mr-0" : "",
)}
>
{i + 1}
</span>
)}
{line.map((token, key) => {
// Bun has no color style by default in the code block, so hack add in here
const props = getTokenProps({token, key}) || {};
return (
{line.map((token, key) => {
const props = getTokenProps({token, key}) || {};
const isCopy = token.types.includes("copy");
return isCopy ? (
<span key={key} className="copy-token" style={{whiteSpace: "inherit"}}>
{token.folderContent?.map((folderTokens) => {
return folderTokens.map((token, index) => {
// Hack for wrap line
return token.content === "" ? (
<div key={`${index}-${getUniqueID("line")}`} />
) : (
<span key={`${index}-${getUniqueID("line")}`}>{token.content}</span>
);
});
})}
</span>
) : (
<span
{...omit(props, ["key"])}
key={`${key}-${getUniqueID("line")}`}
className={className}
className={cn(className, token.class)}
style={{
...props.style,
...(highlightStyleToken.some((t) => {
@ -201,11 +245,29 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
/>
);
})}
</div>
</Tag>
);
})}
</pre>
</div>
};
const renderFolderTokens = (tokens: TransformTokensTypes[][]) => {
return tokens.map((token, key) => {
const index = key + folderLine.index! + 1;
return renderLine(token, index);
});
};
return isFolder ? (
<details key={`${folderLine.index}`} open={folderLine.open ? true : undefined}>
<summary className="cursor-pointer">
{renderLine(folderLine.summaryContent as any, folderLine.index!, "span")}
</summary>
{renderFolderTokens(folderLine.folderContent as any)}
</details>
) : (
renderLine(line, folderLine.index!)
);
})}
</pre>
)}
</BaseHighlight>
);

189
apps/docs/components/docs/components/helper.ts Normal file
View File

@ -0,0 +1,189 @@
import type Highlight from "prism-react-renderer";
export type TransformTokens = Parameters<Highlight["props"]["children"]>[0]["tokens"];
export type TransformTokensTypes = TransformTokens[0][0] & {
folderContent?: TransformTokens;
summaryContent?: TransformTokens[0];
class?: string;
index?: number;
open?: boolean;
};
const startFlag = ["{", "["];
const endFlag = ["}", "]"];
const specialStartFlag = ["("];
const specialEndFlag = [")"];
const defaultFoldFlagList = ["cn", "HTMLAttributes"];
const defaultShowFlagList = ["Component", "forwardRef", "App"];
/**
* Transform tokens from `prism-react-renderer` to wrap them in folder structure
*
* @example
* transformTokens(tokens) -> wrap tokens in folder structure
*/
export function transformTokens(tokens: TransformTokens, folderLine = 10) {
const result: TransformTokens = [];
let lastIndex = 0;
let isShowFolder = false;
let fold = false;
tokens.forEach((token, index) => {
if (index < lastIndex) {
return;
}
let startToken: TransformTokens[0][0] = null as any;
let mergedStartFlagList = [...startFlag];
token.forEach((t) => {
if (defaultFoldFlagList.some((text) => t.content.includes(text))) {
// If cn then need to judge whether it is import token
if (t.content.includes("cn") && token.some((t) => t.content === "import")) {
return;
}
// If HTMLAttributes then need to judge whether it have start flag
if (
t.content.includes("HTMLAttributes") &&
!token.some((t) => startFlag.includes(t.content))
) {
return;
}
fold = true;
mergedStartFlagList.push(...specialStartFlag);
}
if (mergedStartFlagList.includes(t.content)) {
startToken = t;
}
if (defaultShowFlagList.some((text) => t.content.includes(text))) {
isShowFolder = true;
}
});
const mergedOptions = fold
? {
specialEndFlag,
specialStartFlag,
}
: undefined;
const isFolder = checkIsFolder(token, mergedOptions);
if (isFolder && startToken) {
const endIndex = findEndIndex(tokens, index + 1, mergedOptions);
// Greater than or equal to folderLine then will folder otherwise it will show directly
if (endIndex !== -1 && (endIndex - index >= folderLine || isShowFolder || fold)) {
lastIndex = endIndex;
const folder = tokens.slice(index + 1, endIndex);
const endToken = tokens[endIndex];
const ellipsisToken: TransformTokensTypes = {
types: ["ellipsis"],
content: "",
class: "custom-folder ellipsis-token",
};
const copyContent: TransformTokensTypes = {
types: ["copy"],
content: "",
folderContent: folder,
class: "custom-folder copy-token",
};
endToken.forEach((t, _, arr) => {
let className = "";
className += "custom-folder";
if (t.content.trim() === "" && (arr.length === 3 || arr.length === 4)) {
// Add length check to sure it's added to } token
className += " empty-token";
}
(t as TransformTokensTypes).class = className;
});
startToken.types = ["folderStart"];
(startToken as TransformTokensTypes).folderContent = folder;
(startToken as TransformTokensTypes).summaryContent = [
...token,
ellipsisToken,
copyContent,
...endToken,
];
(startToken as TransformTokensTypes).index = index;
if (isShowFolder && !fold) {
(startToken as TransformTokensTypes).open = true;
}
result.push([startToken]);
isShowFolder = false;
fold = false;
return;
}
}
token.forEach((t) => {
(t as TransformTokensTypes).index = index;
});
result.push(token);
});
return result;
}
interface SpecialOptions {
specialStartFlag?: string[];
specialEndFlag?: string[];
}
function checkIsFolder(
token: TransformTokens[0],
{specialStartFlag, specialEndFlag}: SpecialOptions = {},
) {
const stack: string[] = [];
const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag;
for (const t of token) {
if (mergedStartFlagList.includes(t.content)) {
stack.push(t.content);
} else if (mergedEndFlagList.includes(t.content)) {
stack.pop();
}
}
return stack.length !== 0;
}
function findEndIndex(
tokens: TransformTokens,
startIndex: number,
{specialStartFlag, specialEndFlag}: SpecialOptions = {},
) {
const stack: string[] = ["flag"];
const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag;
for (let i = startIndex; i < tokens.length; i++) {
const token = tokens[i];
for (const line of token) {
const transformLine = line.content.replace(/\$/g, "");
if (mergedStartFlagList.includes(transformLine)) {
stack.push("flag");
} else if (mergedEndFlagList.includes(transformLine)) {
stack.pop();
}
if (stack.length === 0) {
return i;
}
}
}
return -1;
}

7
apps/docs/components/docs/sidebar.tsx
View File

@ -172,7 +172,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
</span>
{isUpdated && (
<Chip
className="ml-1 py-1 text-tiny text-default-400 bg-default-100/50"
className="ml-1 py-1 text-tiny text-default-500 dark:text-default-400 bg-default-100 dark:bg-default-100/50"
color="default"
size="sm"
variant="flat"
@ -201,8 +201,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
aria-selected={dataAttr(isSelected)}
className={clsx(
"flex flex-col gap-3outline-none w-full tap-highlight-transparent",
"flex flex-col outline-none w-full tap-highlight-transparent",
hasChildNodes ? "mb-4" : "first:mt-4",
// focus ring
...dataFocusVisibleClasses,
@ -261,7 +260,7 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
return (
<ScrollArea
ref={ref}
className="h-full lg:max-h-[calc(100vh_-_64px)]"
className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
role="tree"
{...collectionProps}
>

36
apps/docs/components/footer.tsx
View File

@ -1,8 +1,11 @@
"use client";
import {usePathname} from "next/navigation";
import {Link} from "@nextui-org/react";
import {getCurrentYear} from "@/utils/time";
import {XIcon, GithubIcon, DiscordIcon} from "@/components/icons";
import {siteConfig} from "@/config/site";
export const Footer = () => {
const pathname = usePathname();
@ -11,12 +14,45 @@ export const Footer = () => {
return null;
}
const isDocs = pathname.includes("/docs");
return (
<footer className="container mx-auto max-w-7xl pb-12 px-12">
<div className="flex flex-col justify-center items-center gap-1">
<p className="text-sm text-default-400">
© {getCurrentYear()} NextUI Inc. All rights reserved.
</p>
{isDocs ? (
<div className="flex items-center gap-1">
<Link
isExternal
aria-label="Discord"
className="p-1"
href={siteConfig.links.discord}
rel="noopener noreferrer"
>
<DiscordIcon className="text-default-600 dark:text-default-500" />
</Link>
<Link
isExternal
aria-label="X"
className="p-1"
href={siteConfig.links.twitter}
rel="noopener noreferrer"
>
<XIcon className="text-default-600 dark:text-default-500" />
</Link>
<Link
isExternal
aria-label="Github"
className="p-1"
href={siteConfig.links.github}
rel="noopener noreferrer"
>
<GithubIcon className="text-default-600 dark:text-default-500" />
</Link>
</div>
) : null}
</div>
</footer>
);

2
apps/docs/components/icons/moon.tsx
View File

@ -11,7 +11,7 @@ export const MoonIcon = ({size = 24, width, height, ...props}: IconSvgProps) =>
{...props}
>
<path
d="M20.742,13.045c-0.677,0.18-1.376,0.271-2.077,0.271c-2.135,0-4.14-0.83-5.646-2.336c-2.008-2.008-2.799-4.967-2.064-7.723 c0.092-0.345-0.007-0.713-0.259-0.965C10.444,2.04,10.077,1.938,9.73,2.034C8.028,2.489,6.476,3.382,5.241,4.616 c-3.898,3.898-3.898,10.243,0,14.143c1.889,1.889,4.401,2.93,7.072,2.93c2.671,0,5.182-1.04,7.07-2.929 c1.236-1.237,2.13-2.791,2.583-4.491c0.092-0.345-0.008-0.713-0.26-0.965C21.454,13.051,21.085,12.951,20.742,13.045z M17.97,17.346c-1.511,1.511-3.52,2.343-5.656,2.343c-2.137,0-4.146-0.833-5.658-2.344c-3.118-3.119-3.118-8.195,0-11.314 c0.602-0.602,1.298-1.102,2.06-1.483c-0.222,2.885,0.814,5.772,2.89,7.848c2.068,2.069,4.927,3.12,7.848,2.891 C19.072,16.046,18.571,16.743,17.97,17.346z"
d="M21.25 12C21.25 14.4533 20.2754 16.806 18.5407 18.5407C16.806 20.2754 14.4533 21.25 12 21.25V22.75C17.937 22.75 22.75 17.937 22.75 12H21.25ZM12 21.25C9.54675 21.25 7.19397 20.2754 5.45926 18.5407C3.72455 16.806 2.75 14.4533 2.75 12H1.25C1.25 17.937 6.063 22.75 12 22.75V21.25ZM2.75 12C2.75 9.54675 3.72455 7.19397 5.45926 5.45926C7.19397 3.72455 9.54675 2.75 12 2.75V1.25C6.063 1.25 1.25 6.063 1.25 12H2.75ZM15.5 14.25C13.975 14.25 12.5125 13.6442 11.4341 12.5659C10.3558 11.4875 9.75 10.025 9.75 8.5H8.25C8.25 10.4228 9.01384 12.2669 10.3735 13.6265C11.7331 14.9862 13.5772 15.75 15.5 15.75V14.25ZM20.425 11.469C19.9133 12.3176 19.191 13.0197 18.3281 13.5069C17.4652 13.9942 16.491 14.2501 15.5 14.25V15.75C16.7494 15.7504 17.9777 15.4279 19.0657 14.8138C20.1537 14.1997 21.0646 13.3148 21.71 12.245L20.425 11.469ZM9.75 8.5C9.74986 7.50903 10.0058 6.53483 10.4931 5.67193C10.9803 4.80902 11.6824 4.08669 12.531 3.575L11.755 2.291C10.6854 2.93628 9.80058 3.84701 9.18649 4.93486C8.57239 6.02271 8.2498 7.25078 8.25 8.5H9.75ZM12 2.75C11.9497 2.74903 11.9002 2.73811 11.8542 2.71785C11.8082 2.6976 11.7666 2.66842 11.732 2.632C11.6898 2.58965 11.6613 2.53568 11.65 2.477C11.646 2.446 11.648 2.356 11.755 2.291L12.531 3.575C13.034 3.271 13.196 2.714 13.137 2.276C13.075 1.821 12.717 1.25 12 1.25V2.75ZM21.71 12.245C21.644 12.352 21.554 12.354 21.523 12.35C21.4643 12.3387 21.4103 12.3102 21.368 12.268C21.3316 12.2334 21.3024 12.1918 21.2821 12.1458C21.2619 12.0998 21.251 12.0503 21.25 12H22.75C22.75 11.283 22.179 10.925 21.724 10.863C21.286 10.804 20.729 10.966 20.425 11.469L21.71 12.245Z"
fill="currentColor"
/>
</svg>

26
apps/docs/components/icons/sun.tsx
View File

@ -16,3 +16,29 @@ export const SunFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps
</g>
</svg>
);
export const SunLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height={size || height}
role="presentation"
viewBox="0 0 24 24"
width={size || width}
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M12 2V4M12 20V22M4 12H2M22 12H20M19.778 4.223L17.556 6.254M4.222 4.223L6.444 6.254M6.444 17.556L4.222 19.778M19.778 19.777L17.556 17.555"
stroke="currentColor"
strokeLinecap="round"
strokeWidth="1.5"
/>
</svg>
);

7
apps/docs/components/mdx-components.tsx
View File

@ -153,7 +153,12 @@ const Code = ({
});
}}
>
<Codeblock codeString={codeString} language={language} metastring={meta} />
<Codeblock
className="sp-editor"
codeString={codeString}
language={language}
metastring={meta}
/>
</Components.Snippet>
);
};

85
apps/docs/components/navbar.tsx
View File

@ -34,11 +34,12 @@ import {currentVersion} from "@/utils/version";
import {siteConfig} from "@/config/site";
import {Route} from "@/libs/docs/page";
import {LargeLogo, SmallLogo, ThemeSwitch} from "@/components";
import {XIcon, GithubIcon, DiscordIcon, SearchLinearIcon} from "@/components/icons";
import {GithubIcon, SearchLinearIcon} from "@/components/icons";
import {useIsMounted} from "@/hooks/use-is-mounted";
import {DocsSidebar} from "@/components/docs/sidebar";
import {useCmdkStore} from "@/components/cmdk";
import {FbRoadmapLink} from "@/components/featurebase/fb-roadmap-link";
import githubInfo from "@/config/github-info.json";
export interface NavbarProps {
routes: Route[];
@ -94,22 +95,26 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
const searchButton = (
<Button
aria-label="Quick search"
className="text-sm font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20"
className="border-1 px-3 border-default-200 rounded-full text-small font-normal text-default-500 bg-transparent"
endContent={
<Kbd className="hidden py-0.5 px-2 lg:inline-block" keys={commandKey}>
<Kbd
className="hidden text-xs rounded-full py-0.5 px-1.5 lg:inline-block"
keys={commandKey}
>
K
</Kbd>
}
startContent={
<SearchLinearIcon
className="text-base text-default-400 pointer-events-none flex-shrink-0"
size={18}
size={16}
strokeWidth={2}
/>
}
variant="bordered"
onPress={handleOpenCmdk}
>
Quick Search...
Search
</Button>
);
@ -238,35 +243,9 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
Figma
</NextLink>
</NavbarItem>
{/* hide feedback and changelog at this moment */}
{/* <NavbarItem>
<NextLink className={navLinkClasses} color="foreground" href="#">
<FbChangelogButton key="changelog" userName="" />
</NextLink>
</NavbarItem>
<NavbarItem>
<NextLink className={navLinkClasses} color="foreground" href="#">
<FbFeedbackButton key="feedback" userEmail="" />
</NextLink>
</NavbarItem> */}
<NavbarItem>
<FbRoadmapLink className={navLinkClasses} />
</NavbarItem>
{/* <NavbarItem>
<Chip
as={NextLink}
className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
color="secondary"
href="/blog/v2.2.0"
variant="dot"
onClick={() => handlePressNavbarItem("Introducing v2.2.0", "/blog/v2.2.0")}
>
Introducing v2.2.0&nbsp;
<span aria-label="rocket emoji" role="img">
🚀
</span>
</Chip>
</NavbarItem> */}
</ul>
</NavbarContent>
@ -276,14 +255,18 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
isExternal
aria-label="Github"
className="p-1"
href="https://github.com/nextui-org/nextui"
onClick={() => handlePressNavbarItem("Github", "https://github.com/nextui-org/nextui")}
href={siteConfig.links.github}
onPress={() => handlePressNavbarItem("Github", siteConfig.links.github)}
>
<GithubIcon className="text-default-600 dark:text-default-500" />
</Link>
</NavbarItem>
<NavbarItem className="flex h-full items-center">
<ThemeSwitch />
<ThemeSwitch
classNames={{
wrapper: "!text-default-500 dark:!text-default-500",
}}
/>
</NavbarItem>
<NavbarItem className="flex h-full items-center">
<button
@ -323,37 +306,25 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
</span>
</Chip>
</NavbarItem>
<NavbarItem className="hidden sm:flex">
<Link
isExternal
aria-label="X"
className="p-1"
href={siteConfig.links.twitter}
onPress={() => handlePressNavbarItem("Twitter", siteConfig.links.twitter)}
>
<XIcon className="text-default-600 dark:text-default-500" />
</Link>
<Link
isExternal
aria-label="Discord"
className="p-1"
href={siteConfig.links.discord}
onPress={() => handlePressNavbarItem("Discord", siteConfig.links.discord)}
>
<DiscordIcon className="text-default-600 dark:text-default-500" />
</Link>
<NavbarItem className="hidden sm:flex gap-2">
{searchButton}
<Link
isExternal
aria-label="Github"
className="p-1"
className="flex gap-1 items-center h-10 px-2 border-1 border-default-200 rounded-full text-default-600 dark:text-default-500"
href={siteConfig.links.github}
onPress={() => handlePressNavbarItem("Github", siteConfig.links.github)}
>
<GithubIcon className="text-default-600 dark:text-default-500" />
<GithubIcon />
<span className="text-small font-medium">{githubInfo.stars.formatted}</span>
</Link>
<ThemeSwitch />
<ThemeSwitch
className="border-1 border-default-200 rounded-full h-full min-w-10 min-h-10 flex items-center justify-center"
classNames={{
wrapper: "!text-default-400 dark:!text-default-500",
}}
/>
</NavbarItem>
<NavbarItem className="hidden lg:flex">{searchButton}</NavbarItem>
{/* <NavbarItem className="hidden md:flex">
<Button
isExternal

8
apps/docs/components/theme-switch.tsx
View File

@ -8,7 +8,7 @@ import {clsx} from "@nextui-org/shared-utils";
import {useIsSSR} from "@react-aria/ssr";
import {usePostHog} from "posthog-js/react";
import {SunFilledIcon, MoonFilledIcon} from "@/components/icons";
import {SunLinearIcon, MoonIcon} from "@/components/icons";
export interface ThemeSwitchProps {
className?: string;
@ -59,8 +59,8 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
"rounded-lg",
"flex items-center justify-center",
"group-data-[selected=true]:bg-transparent",
"!text-default-600 dark:!text-default-500",
"pt-px",
"!text-default-600 dark:!text-default-300",
"pt-0",
"px-0",
"mx-0",
],
@ -68,7 +68,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
),
})}
>
{!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
{!isSelected || isSSR ? <SunLinearIcon size={22} /> : <MoonIcon size={22} />}
</div>
</Component>
);

6
apps/docs/config/github-info.json Normal file
View File

@ -0,0 +1,6 @@
{
"stars": { "raw": 22002, "formatted": "22K" },
"forks": 1536,
"subscribers": 85,
"openIssues": 433
}

75
apps/docs/config/routes.json
View File

@ -35,7 +35,15 @@
"key": "routing",
"title": "Routing",
"keywords": "client side routing, routing, browser routing, nextui, next.js router, react router, remix router",
"path": "/docs/guide/routing.mdx"
"path": "/docs/guide/routing.mdx",
"updated": true
},
{
"key": "form",
"title": "Forms",
"keywords": "forms, form validation, nextui",
"path": "/docs/guide/form.mdx",
"newPost": true
},
{
"key": "form",
@ -149,14 +157,15 @@
"key": "autocomplete",
"title": "Autocomplete",
"keywords": "autocomplete, auto suggest, search, typeahead",
"path": "/docs/components/autocomplete.mdx"
"path": "/docs/components/autocomplete.mdx",
"updated": true
},
{
"key": "alert",
"title": "Alert",
"keywords": "alert, notification, message",
"path": "/docs/components/alert.mdx",
"isNew": true
"newPost": true
},
{
"key": "avatar",
@ -168,8 +177,7 @@
"key": "badge",
"title": "Badge",
"keywords": "badge, markers, status indication, count display",
"path": "/docs/components/badge.mdx",
"updated": true
"path": "/docs/components/badge.mdx"
},
{
"key": "breadcrumbs",
@ -181,14 +189,14 @@
"key": "button",
"title": "Button",
"keywords": "button, interactive, action trigger, click events",
"path": "/docs/components/button.mdx"
"path": "/docs/components/button.mdx",
"updated": true
},
{
"key": "calendar",
"title": "Calendar",
"keywords": "calendar, date picker, month picker, year picker",
"path": "/docs/components/calendar.mdx",
"newPost": true
"path": "/docs/components/calendar.mdx"
},
{
"key": "card",
@ -207,7 +215,8 @@
"key": "checkbox-group",
"title": "Checkbox Group",
"keywords": "checkbox group, binary choice, selection control, toggle",
"path": "/docs/components/checkbox-group.mdx"
"path": "/docs/components/checkbox-group.mdx",
"updated": true
},
{
"key": "chip",
@ -231,22 +240,19 @@
"key": "date-input",
"title": "Date Input",
"keywords": "date-input, time, input, timezone",
"path": "/docs/components/date-input.mdx",
"newPost": true
"path": "/docs/components/date-input.mdx"
},
{
"key": "date-picker",
"title": "Date Picker",
"keywords": "date-picker, time, input, timezone",
"path": "/docs/components/date-picker.mdx",
"newPost": true
"path": "/docs/components/date-picker.mdx"
},
{
"key": "date-range-picker",
"title": "Date Range Picker",
"keywords": "date-range-picker, date-picker, time, input, timezone",
"path": "/docs/components/date-range-picker.mdx",
"newPost": true
"path": "/docs/components/date-range-picker.mdx"
},
{
"key": "divider",
@ -277,7 +283,15 @@
"key": "input",
"title": "Input",
"keywords": "input, text box, form field, data entry",
"path": "/docs/components/input.mdx"
"path": "/docs/components/input.mdx",
"updated": true
},
{
"key": "input-otp",
"title": "Input OTP",
"keywords": "input, otp, auth, verification code",
"path": "/docs/components/input-otp.mdx",
"newPost": true
},
{
"key": "kbd",
@ -332,14 +346,14 @@
"key": "radio-group",
"title": "Radio Group",
"keywords": "radio group, selection set, option selection, exclusive choices",
"path": "/docs/components/radio-group.mdx"
"path": "/docs/components/radio-group.mdx",
"updated": true
},
{
"key": "range-calendar",
"title": "Range Calendar",
"keywords": "range calendar, date picker, month picker, year picker",
"path": "/docs/components/range-calendar.mdx",
"newPost": true
"path": "/docs/components/range-calendar.mdx"
},
{
"key": "scroll-shadow",
@ -351,14 +365,14 @@
"key": "select",
"title": "Select",
"keywords": "select, selection, option list, multiple choice",
"path": "/docs/components/select.mdx"
"path": "/docs/components/select.mdx",
"updated": true
},
{
"key": "skeleton",
"title": "Skeleton",
"keywords": "skeleton, loading state, placeholder, content preview",
"path": "/docs/components/skeleton.mdx",
"updated": true
"path": "/docs/components/skeleton.mdx"
},
{
"key": "slider",
@ -388,7 +402,8 @@
"key": "switch",
"title": "Switch",
"keywords": "switch, toggle, binary input, on/off control",
"path": "/docs/components/switch.mdx"
"path": "/docs/components/switch.mdx",
"updated": true
},
{
"key": "table",
@ -400,28 +415,26 @@
"key": "tabs",
"title": "Tabs",
"keywords": "tabs, section navigation, categorized content, tabbed interface",
"path": "/docs/components/tabs.mdx",
"updated": true
"path": "/docs/components/tabs.mdx"
},
{
"key": "textarea",
"title": "Textarea",
"keywords": "textarea, multi-line text input, large text field, form control",
"path": "/docs/components/textarea.mdx"
"path": "/docs/components/textarea.mdx",
"updated": true
},
{
"key": "time-input",
"title": "Time Input",
"keywords": "timeinput, time, input, timezone",
"path": "/docs/components/time-input.mdx",
"newPost": true
"path": "/docs/components/time-input.mdx"
},
{
"key": "tooltip",
"title": "Tooltip",
"keywords": "tooltip, hint, descriptive message, hover info",
"path": "/docs/components/tooltip.mdx",
"updated": true
"path": "/docs/components/tooltip.mdx"
},
{
"key": "user",
@ -494,4 +507,4 @@
]
}
]
}
}

3399
apps/docs/config/search-meta.json
View File

File diff suppressed because it is too large Load Diff

368
apps/docs/content/components/accordion/custom-styles.raw.jsx
View File

@ -1,188 +1,196 @@
import {Accordion, AccordionItem} from "@nextui-org/react";
const MonitorMobileIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
const MonitorMobileIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
};
const ShieldSecurityIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
<path
d="M12 12.5V15.5"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
</svg>
);
const ShieldSecurityIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
<path
d="M12 12.5V15.5"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
</svg>
);
};
const InfoIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 8V13"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M11.9945 16H12.0035"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
const InfoIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 8V13"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M11.9945 16H12.0035"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
};
const InvalidCardIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
const InvalidCardIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
};
export default function App() {
const itemClasses = {

146
apps/docs/content/components/accordion/indicator-function.raw.jsx
View File

@ -1,77 +1,83 @@
import {Accordion, AccordionItem} from "@nextui-org/react";
const AnchorIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);
const AnchorIcon = (props) => {
return (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);
};
const MoonIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);
const MoonIcon = (props) => {
return (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);
};
const SunIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);
const SunIcon = (props) => {
return (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);
};
export default function App() {
const defaultContent =

146
apps/docs/content/components/accordion/indicator.raw.jsx
View File

@ -1,77 +1,83 @@
import {Accordion, AccordionItem} from "@nextui-org/react";
const AnchorIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);
const AnchorIcon = (props) => {
return (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);
};
const MoonIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);
const MoonIcon = (props) => {
return (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);
};
const SunIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);
const SunIcon = (props) => {
return (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);
};
export default function App() {
const defaultContent =

15
apps/docs/content/components/alert/colors.raw.jsx Normal file
View File

@ -0,0 +1,15 @@
import {Alert} from "@nextui-org/react";
export default function App() {
return (
<div className="flex items-center justify-center w-full">
<div className="flex flex-col w-full">
{["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
<div key={color} className="w-full flex items-center my-3">
<Alert color={color} title={`This is a ${color} alert`} />
</div>
))}
</div>
</div>
);
}

19
apps/docs/content/components/alert/colors.ts
View File

@ -1,21 +1,4 @@
const App = `import {Alert} from "@nextui-org/react";
export default function App() {
return (
<div className="flex items-center justify-center w-full">
<div className="flex flex-col w-full">
{["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
<div key={color} className="w-full flex items-center my-3">
<Alert
color={color}
title={\`This is a \${color} alert\`}
/>
</div>
))}
</div>
</div>
);
}`;
import App from "./colors.raw.jsx?raw";
const react = {
"/App.jsx": App,

28
apps/docs/content/components/alert/controlled.raw.jsx Normal file
View File

@ -0,0 +1,28 @@
import {Alert, Button} from "@nextui-org/react";
export default function App() {
const [isVisible, setIsVisible] = React.useState(true);
const title = "Success Notification";
const description =
"Your action has been completed successfully. We'll notify you when updates are available.";
return (
<div className="flex flex-col gap-4">
{isVisible ? (
<Alert
color="success"
description={description}
isVisible={isVisible}
title={title}
variant="faded"
onClose={() => setIsVisible(false)}
/>
) : (
<Button variant="bordered" onPress={() => setIsVisible(true)}>
Show Alert
</Button>
)}
</div>
);
}

29
apps/docs/content/components/alert/controlled.ts
View File

@ -1,31 +1,4 @@
const App = `import {Alert, Button} from "@nextui-org/react";
export default function App() {
const [isVisible, setIsVisible] = React.useState(true);
const title = "Success Notification";
const description = "Your action has been completed successfully. We'll notify you when updates are available.";
return (
<div className="flex flex-col gap-4">
{isVisible ? (
<Alert
title={title}
description={description}
isVisible={isVisible}
onClose={() => setIsVisible(false)}
/>
) : (
<Button
variant="bordered"
onPress={() => setIsVisible(true)}
>
Show Alert
</Button>
)}
</div>
);
}`;
import App from "./controlled.raw.jsx?raw";
const react = {
"/App.jsx": App,

124
apps/docs/content/components/alert/custom-impl.raw.jsx Normal file
View File

@ -0,0 +1,124 @@
import React, {forwardRef, useMemo} from "react";
import {useAlert} from "@nextui-org/react";
export const InfoCircleIcon = (props) => {
return (
<svg
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
</svg>
);
};
export const CloseIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path d="M18 6L6 18M6 6l12 12" />
</svg>
);
};
const styles = {
base: [
"bg-slate-100",
"border",
"shadow",
"hover:bg-slate-200",
"focus-within:!bg-slate-100",
"dark:bg-slate-900",
"dark:hover:bg-slate-800",
"dark:border-slate-800",
"dark:focus-within:!bg-slate-900",
"cursor-pointer",
],
title: ["text-base", "text-slate-500", "font-bold"],
description: ["text-base", "text-slate-500"],
};
const MyAlert = forwardRef((props, ref) => {
const {
title,
description,
isClosable,
domRef,
handleClose,
getBaseProps,
getMainWrapperProps,
getDescriptionProps,
getTitleProps,
getCloseButtonProps,
color,
isVisible,
onClose,
getAlertIconProps,
} = useAlert({
...props,
ref,
// this is just for the example, the props bellow should be passed by the parent component
title: "Email Sent!!",
description: "You will get a reply soon",
// custom styles
classNames: {
...styles,
},
});
const mainWrapper = useMemo(() => {
return (
<div {...getMainWrapperProps()}>
{title && <div {...getTitleProps()}>{title}</div>}
<div {...getDescriptionProps()}>{description}</div>
</div>
);
}, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
const baseWrapper = useMemo(() => {
return isVisible ? (
<div ref={domRef} {...getBaseProps()}>
<InfoCircleIcon {...getAlertIconProps()} />
{mainWrapper}
{(isClosable || onClose) && (
<button onClick={handleClose} {...getCloseButtonProps()}>
<CloseIcon />
</button>
)}
</div>
) : null;
}, [
mainWrapper,
isClosable,
getCloseButtonProps,
isVisible,
domRef,
getBaseProps,
handleClose,
color,
onClose,
getAlertIconProps,
]);
return <>{baseWrapper}</>;
});
MyAlert.displayName = "MyAlert";
export default MyAlert;

135
apps/docs/content/components/alert/custom-impl.ts
View File

@ -1,140 +1,7 @@
const InfoCircleIcon = `export const InfoCircleIcon = (props) => (
<svg
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
/>
</svg>
);`;
const CloseIcon = `export const CloseIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path d="M18 6L6 18M6 6l12 12" />
</svg>
);`;
const App = `import React, {forwardRef, useMemo} from "react";
import {useAlert} from "@nextui-org/react";
import {InfoCircleIcon} from "./InfoCircleIcon";
import {CloseIcon} from "./CloseIcon"
const styles = {
base: [
"bg-slate-100",
"border",
"shadow",
"hover:bg-slate-200",
"focus-within:!bg-slate-100",
"dark:bg-slate-900",
"dark:hover:bg-slate-800",
"dark:border-slate-800",
"dark:focus-within:!bg-slate-900",
"cursor-pointer"
],
title: [
"text-base",
"text-slate-500",
"font-bold"
],
description: [
"text-base",
"text-slate-500",
],
}
const MyAlert = forwardRef((props, ref) => {
const {
title,
description,
isClosable,
domRef,
handleClose,
getBaseProps,
getMainWrapperProps,
getDescriptionProps,
getTitleProps,
getCloseButtonProps,
color,
isVisible,
onClose,
getCloseIconProps,
getAlertIconProps,
} = useAlert({
...props,
ref,
// this is just for the example, the props bellow should be passed by the parent component
title: "Email Sent!!",
description: "You will get a reply soon",
// custom styles
classNames: {
...styles,
},
});
const mainWrapper = useMemo(() => {
return (
<div {...getMainWrapperProps()}>
{title && <div {...getTitleProps()}>{title}</div>}
<div {...getDescriptionProps()}>{description}</div>
</div>
);
}, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
const baseWrapper = useMemo(() => {
return isVisible ? (
<div ref={domRef} {...getBaseProps()}>
<InfoCircleIcon {...getAlertIconProps()} />
{mainWrapper}
{(isClosable || onClose) && (
<button onClick={handleClose} {...getCloseButtonProps()}>
<CloseIcon />
</button>
)}
</div>
) : null;
}, [
mainWrapper,
isClosable,
getCloseButtonProps,
isVisible,
domRef,
getBaseProps,
handleClose,
color,
onClose,
getAlertIconProps,
]);
return <>{baseWrapper}</>;
});
MyAlert.displayName = "MyAlert";
export default MyAlert;`;
import App from "./custom-impl.raw.jsx?raw";
const react = {
"/App.jsx": App,
"/InfoCircleIcon": InfoCircleIcon,
"/CloseIcon": CloseIcon,
};
export default {

91
apps/docs/content/components/alert/custom-styles.raw.jsx Normal file
View File

@ -0,0 +1,91 @@
import {Alert, Button} from "@nextui-org/react";
const CustomAlert = React.forwardRef(
(
{title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props},
ref,
) => {
const colorClass = React.useMemo(() => {
switch (color) {
case "default":
return "before:bg-default-300";
case "primary":
return "before:bg-primary";
case "secondary":
return "before:bg-secondary";
case "success":
return "before:bg-success";
case "warning":
return "before:bg-warning";
case "danger":
return "before:bg-danger";
default:
return "before:bg-default-200";
}
}, []);
return (
<Alert
ref={ref}
classNames={{
...classNames,
base: cn(
[
"bg-default-50 dark:bg-background shadow-sm",
"border-1 border-default-200 dark:border-default-100",
"relative before:content-[''] before:absolute before:z-10",
"before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
"rounded-l-none border-l-0",
colorClass,
],
classNames.base,
className,
),
mainWrapper: cn("pt-1", classNames.mainWrapper),
iconWrapper: cn("dark:bg-transparent", classNames.iconWrapper),
}}
color={color}
title={title}
variant={variant}
{...props}
>
{children}
</Alert>
);
},
);
CustomAlert.displayName = "CustomAlert";
export default function App() {
const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
return (
<div className="flex flex-col w-full gap-y-6">
{colors.map((color) => (
<CustomAlert
key={color}
color={color}
title="The documents you requested are ready to be viewed"
>
<div className="flex items-center gap-1 mt-3">
<Button
className="bg-background text-default-700 font-medium border-1 shadow-small"
size="sm"
variant="bordered"
>
View documents
</Button>
<Button
className="text-default-500 font-medium underline underline-offset-4"
size="sm"
variant="light"
>
Maybe later
</Button>
</div>
</CustomAlert>
))}
</div>
);
}

87
apps/docs/content/components/alert/custom-styles.raw.tsx Normal file
View File

@ -0,0 +1,87 @@
import type {AlertProps} from "@nextui-org/react";
import React from "react";
import {Alert, Button, cn} from "@nextui-org/react";
const CustomAlert = ({children, variant, color, className, classNames, ...props}: AlertProps) => {
const colorClass = React.useMemo(() => {
switch (color) {
case "default":
return "before:bg-default-300";
case "primary":
return "before:bg-primary";
case "secondary":
return "before:bg-secondary";
case "success":
return "before:bg-success";
case "warning":
return "before:bg-warning";
case "danger":
return "before:bg-danger";
default:
return "before:bg-default-200";
}
}, []);
return (
<Alert
classNames={{
...classNames,
base: cn(
[
"bg-default-50 dark:bg-background shadow-sm",
"border-1 border-default-200 dark:border-default-100",
"relative before:content-[''] before:absolute before:z-10",
"before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
"rounded-l-none border-l-0",
colorClass,
],
classNames?.base,
className,
),
mainWrapper: cn("pt-1", classNames?.mainWrapper),
iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
}}
color={color}
variant={variant}
{...props}
>
{children}
</Alert>
);
};
CustomAlert.displayName = "CustomAlert";
export default function App() {
const colors = ["default", "primary", "secondary", "success", "warning", "danger"] as any;
return (
<div className="flex flex-col w-full gap-y-6">
{colors.map((color) => (
<CustomAlert
key={color}
color={color}
description="The documents you requested are ready to be viewed"
>
<div className="flex items-center gap-1 mt-3">
<Button
className="bg-background text-default-700 font-medium border-1 shadow-small"
size="sm"
variant="bordered"
>
View documents
</Button>
<Button
className="text-default-500 font-medium underline underline-offset-4"
size="sm"
variant="light"
>
Maybe later
</Button>
</div>
</CustomAlert>
))}
</div>
);
}

34
apps/docs/content/components/alert/custom-styles.ts
View File

@ -1,35 +1,15 @@
const App = `import {Alert} from "@nextui-org/react";
export default function App() {
const title = "Success";
const description = "Thanks for subscribing to our newsletter!";
return (
<div className="flex items-center justify-center w-full">
<Alert
title={title}
description={description}
classNames={{
base: [
"bg-background",
"border",
"border-foreground-400",
"shadow",
"hover:bg-slate-200",
"cursor-pointer",
],
title: ["text-base", "text-foreground", "font-semibold"],
description: ["text-base", "text-foreground-600"],
}}
/>
</div>
);
}`;
import App from "./custom-styles.raw.jsx?raw";
import AppTs from "./custom-styles.raw.tsx?raw";
const react = {
"/App.jsx": App,
};
const reactTs = {
"/App.tsx": AppTs,
};
export default {
...react,
...reactTs,
};

4
apps/docs/content/components/alert/index.ts
View File

@ -5,7 +5,9 @@ import customImpl from "./custom-impl";
import customStyles from "./custom-styles";
import variants from "./variants";
import withIcon from "./with-icon";
import withAction from "./with-action";
import controlled from "./controlled";
import withoutIcon from "./without-icon";
export const alertContent = {
colors,
@ -15,5 +17,7 @@ export const alertContent = {
customStyles,
variants,
withIcon,
withAction,
controlled,
withoutIcon,
};

15
apps/docs/content/components/alert/radius.raw.jsx Normal file
View File

@ -0,0 +1,15 @@
import {Alert} from "@nextui-org/react";
export default function App() {
return (
<div className="flex items-center justify-center w-full">
<div className="flex flex-col w-full">
{["none", "sm", "md", "lg", "full"].map((radius) => (
<div key={radius} className="w-full flex items-center my-3">
<Alert radius={radius} title={`This is a ${radius} radius alert`} />
</div>
))}
</div>
</div>
);
}

19
apps/docs/content/components/alert/radius.ts
View File

@ -1,21 +1,4 @@
const App = `import {Alert} from "@nextui-org/react";
export default function App() {
return (
<div className="flex items-center justify-center w-full">
<div className="flex flex-col w-full">
{["none", "sm", "md", "lg", "full"].map((radius) => (
<div key={radius} className="w-full flex items-center my-3">
<Alert
radius={radius}
title={\`This is a \${radius} radius alert\`}
/>
</div>
))}
</div>
</div>
);
}`;
import App from "./radius.raw.jsx?raw";
const react = {
"/App.jsx": App,

12
apps/docs/content/components/alert/usage.raw.jsx Normal file
View File

@ -0,0 +1,12 @@
import {Alert} from "@nextui-org/react";
export default function App() {
const title = "This is an alert";
const description = "Thanks for subscribing to our newsletter!";
return (
<div className="flex items-center justify-center w-full">
<Alert description={description} title={title} />
</div>
);
}

13
apps/docs/content/components/alert/usage.ts
View File

@ -1,15 +1,4 @@
const App = `import {Alert} from "@nextui-org/react";
export default function App() {
const title = "This is an alert";
const description = "Thanks for subscribing to our newsletter!";
return (
<div className="flex items-center justify-center w-full">
<Alert title={title} description={description} />
</div>
);
}`;
import App from "./usage.raw.jsx?raw";
const react = {
"/App.jsx": App,

16
apps/docs/content/components/alert/variants.raw.jsx Normal file
View File

@ -0,0 +1,16 @@
import {Alert} from "@nextui-org/react";
export default function App() {
return (
<div className="flex flex-col gap-4 w-full">
{["solid", "bordered", "flat", "faded"].map((variant) => (
<Alert
key={variant}
color="secondary"
title={`This is a ${variant} variant alert`}
variant={variant}
/>
))}
</div>
);
}

18
apps/docs/content/components/alert/variants.ts
View File

@ -1,20 +1,4 @@
const App = `import {Alert} from "@nextui-org/react";
export default function App() {
return (
<div className="flex flex-col gap-4 w-full">
<Alert variant="solid">
A solid variant alert
</Alert>
<Alert variant="bordered">
A bordered variant alert
</Alert>
<Alert variant="flat">
A flat variant alert
</Alert>
</div>
);
}`;
import App from "./variants.raw.jsx?raw";
const react = {
"/App.jsx": App,

19
apps/docs/content/components/alert/with-action.raw.jsx Normal file
View File

@ -0,0 +1,19 @@
import {Alert, Button} from "@nextui-org/react";
export default function App() {
return (
<div className="flex items-center justify-center w-full">
<Alert
color="warning"
description="Upgrade to a paid plan to continue"
endContent={
<Button color="warning" size="sm" variant="flat">
Upgrade
</Button>
}
title="You have no credits left"
variant="faded"
/>
</div>
);
}

9
apps/docs/content/components/alert/with-action.ts Normal file
View File

@ -0,0 +1,9 @@
import App from "./with-action.raw.jsx?raw";
const react = {
"/App.jsx": App,
};
export default {
...react,
};

33
apps/docs/content/components/alert/with-icon.raw.jsx Normal file
View File

@ -0,0 +1,33 @@
import {Alert} from "@nextui-org/react";
const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => {
return (
<svg
data-name="Iconly/Curved/Profile"
height={size || height || 24}
viewBox="0 0 24 24"
width={size || width || 24}
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g
fill="none"
stroke={fill}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit={10}
strokeWidth={1.5}
>
<path
d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
data-name="Stroke 1"
/>
<path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
</g>
</svg>
);
};
export default function App() {
return <Alert icon={<UserIcon />}>An alert with a custom icon</Alert>;
}

47
apps/docs/content/components/alert/with-icon.ts
View File

@ -1,49 +1,4 @@
const App = `import {Alert} from "@nextui-org/react";
const UserIcon = ({
fill = 'currentColor',
filled,
size,
height,
width,
label,
...props
}) => {
return (
<svg
data-name="Iconly/Curved/Profile"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={size || width || 24}
height={size || height || 24}
{...props}
>
<g
fill="none"
stroke={fill}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit={10}
strokeWidth={1.5}
>
<path
data-name="Stroke 1"
d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
/>
<path
data-name="Stroke 3"
d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
/>
</g>
</svg>
);
};
export default function App() {
return (
<Alert icon={<UserIcon />}>An alert with a custom icon</Alert>
);
}`;
import App from "./with-icon.raw.jsx?raw";
const react = {
"/App.jsx": App,

12
apps/docs/content/components/alert/without-icon.raw.jsx Normal file
View File

@ -0,0 +1,12 @@
import {Alert} from "@nextui-org/react";
export default function App() {
const title = "This is an alert";
const description = "Thanks for subscribing to our newsletter!";
return (
<div className="flex items-center justify-center w-full">
<Alert hideIcon color="success" description={description} title={title} variant="faded" />
</div>
);
}

9
apps/docs/content/components/alert/without-icon.ts Normal file
View File

@ -0,0 +1,9 @@
import App from "./without-icon.raw.jsx?raw";
const react = {
"/App.jsx": App,
};
export default {
...react,
};

34
apps/docs/content/components/autocomplete/async-filtering.raw.jsx Normal file
View File

@ -0,0 +1,34 @@
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useAsyncList} from "@react-stately/data";
export default function App() {
let list = useAsyncList({
async load({signal, filterText}) {
let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
let json = await res.json();
return {
items: json.results,
};
},
});
return (
<Autocomplete
className="max-w-xs"
inputValue={list.filterText}
isLoading={list.isLoading}
items={list.items}
label="Select a character"
placeholder="Type to search..."
variant="bordered"
onInputChange={list.setFilterText}
>
{(item) => (
<AutocompleteItem key={item.name} className="capitalize">
{item.name}
</AutocompleteItem>
)}
</Autocomplete>
);
}

41
apps/docs/content/components/autocomplete/async-filtering.raw.tsx Normal file
View File

@ -0,0 +1,41 @@
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useAsyncList} from "@react-stately/data";
type SWCharacter = {
name: string;
height: string;
mass: string;
birth_year: string;
};
export default function App() {
let list = useAsyncList<SWCharacter>({
async load({signal, filterText}) {
let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
let json = await res.json();
return {
items: json.results,
};
},
});
return (
<Autocomplete
className="max-w-xs"
inputValue={list.filterText}
isLoading={list.isLoading}
items={list.items}
label="Select a character"
placeholder="Type to search..."
variant="bordered"
onInputChange={list.setFilterText}
>
{(item) => (
<AutocompleteItem key={item.name} className="capitalize">
{item.name}
</AutocompleteItem>
)}
</Autocomplete>
);
}

78
apps/docs/content/components/autocomplete/async-filtering.ts
View File

@ -1,79 +1,5 @@
const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useAsyncList} from "@react-stately/data";
export default function App() {
let list = useAsyncList({
async load({signal, filterText}) {
let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal});
let json = await res.json();
return {
items: json.results,
};
},
});
return (
<Autocomplete
className="max-w-xs"
inputValue={list.filterText}
isLoading={list.isLoading}
items={list.items}
label="Select a character"
placeholder="Type to search..."
variant="bordered"
onInputChange={list.setFilterText}
>
{(item) => (
<AutocompleteItem key={item.name} className="capitalize">
{item.name}
</AutocompleteItem>
)}
</Autocomplete>
);
}`;
const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useAsyncList} from "@react-stately/data";
type SWCharacter = {
name: string;
height: string;
mass: string;
birth_year: string;
};
export default function App() {
let list = useAsyncList<SWCharacter>({
async load({signal, filterText}) {
let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal});
let json = await res.json();
return {
items: json.results,
};
},
});
return (
<Autocomplete
className="max-w-xs"
inputValue={list.filterText}
isLoading={list.isLoading}
items={list.items}
label="Select a character"
placeholder="Type to search..."
variant="bordered"
onInputChange={list.setFilterText}
>
{(item) => (
<AutocompleteItem key={item.name} className="capitalize">
{item.name}
</AutocompleteItem>
)}
</Autocomplete>
);
}`;
import App from "./async-filtering.raw.jsx?raw";
import AppTs from "./async-filtering.raw.tsx?raw";
const react = {
"/App.jsx": App,

99
apps/docs/content/components/autocomplete/async-loading-items.raw.jsx Normal file
View File

@ -0,0 +1,99 @@
import React from "react";
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
export function usePokemonList({fetchDelay = 0} = {}) {
const [items, setItems] = React.useState([]);
const [hasMore, setHasMore] = React.useState(true);
const [isLoading, setIsLoading] = React.useState(false);
const [offset, setOffset] = React.useState(0);
const limit = 10; // Number of items per page, adjust as necessary
const loadPokemon = async (currentOffset) => {
const controller = new AbortController();
const {signal} = controller;
try {
setIsLoading(true);
if (offset > 0) {
// Delay to simulate network latency
await new Promise((resolve) => setTimeout(resolve, fetchDelay));
}
const res = await fetch(
`https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
{signal},
);
if (!res.ok) {
throw new Error("Network response was not ok");
}
let json = await res.json();
setHasMore(json.next !== null);
// Append new results to existing ones
setItems((prevItems) => [...prevItems, ...json.results]);
} catch (error) {
if (error.name === "AbortError") {
// eslint-disable-next-line no-console
console.log("Fetch aborted");
} else {
// eslint-disable-next-line no-console
console.error("There was an error with the fetch operation:", error);
}
} finally {
setIsLoading(false);
}
};
React.useEffect(() => {
loadPokemon(offset);
}, []);
const onLoadMore = () => {
const newOffset = offset + limit;
setOffset(newOffset);
loadPokemon(newOffset);
};
return {
items,
hasMore,
isLoading,
onLoadMore,
};
}
export default function App() {
const [isOpen, setIsOpen] = React.useState(false);
const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
const [, scrollerRef] = useInfiniteScroll({
hasMore,
isEnabled: isOpen,
shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
onLoadMore,
});
return (
<Autocomplete
className="max-w-xs"
defaultItems={items}
isLoading={isLoading}
label="Pick a Pokemon"
placeholder="Select a Pokemon"
scrollRef={scrollerRef}
variant="bordered"
onOpenChange={setIsOpen}
>
{(item) => (
<AutocompleteItem key={item.name} className="capitalize">
{item.name}
</AutocompleteItem>
)}
</Autocomplete>
);
}

110
apps/docs/content/components/autocomplete/async-loading-items.raw.tsx Normal file
View File

@ -0,0 +1,110 @@
import React from "react";
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
export type Pokemon = {
name: string;
url: string;
};
export type UsePokemonListProps = {
/** Delay to wait before fetching more items */
fetchDelay?: number;
};
export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
const [items, setItems] = React.useState<Pokemon[]>([]);
const [hasMore, setHasMore] = React.useState(true);
const [isLoading, setIsLoading] = React.useState(false);
const [offset, setOffset] = React.useState(0);
const limit = 10; // Number of items per page, adjust as necessary
const loadPokemon = async (currentOffset: number) => {
const controller = new AbortController();
const {signal} = controller;
try {
setIsLoading(true);
if (offset > 0) {
// Delay to simulate network latency
await new Promise((resolve) => setTimeout(resolve, fetchDelay));
}
let res = await fetch(
`https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
{signal},
);
if (!res.ok) {
throw new Error("Network response was not ok");
}
let json = await res.json();
setHasMore(json.next !== null);
// Append new results to existing ones
setItems((prevItems) => [...prevItems, ...json.results]);
} catch (error) {
// @ts-ignore
if (error.name === "AbortError") {
// eslint-disable-next-line no-console
console.log("Fetch aborted");
} else {
// eslint-disable-next-line no-console
console.error("There was an error with the fetch operation:", error);
}
} finally {
setIsLoading(false);
}
};
React.useEffect(() => {
loadPokemon(offset);
}, []);
const onLoadMore = () => {
const newOffset = offset + limit;
setOffset(newOffset);
loadPokemon(newOffset);
};
return {
items,
hasMore,
isLoading,
onLoadMore,
};
}
export default function App() {
const [isOpen, setIsOpen] = React.useState(false);
const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
const [, scrollerRef] = useInfiniteScroll({
hasMore,
isEnabled: isOpen,
shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
onLoadMore,
});
return (
<Autocomplete
className="max-w-xs"
defaultItems={items}
isLoading={isLoading}
label="Pick a Pokemon"
placeholder="Select a Pokemon"
scrollRef={scrollerRef}
variant="bordered"
onOpenChange={setIsOpen}
>
{(item) => (
<AutocompleteItem key={item.name} className="capitalize">
{item.name}
</AutocompleteItem>
)}
</Autocomplete>
);
}

179
apps/docs/content/components/autocomplete/async-loading-items.ts
View File

@ -1,185 +1,12 @@
const usePokemonListTs = `export type Pokemon = {
name: string;
url: string;
};
export type UsePokemonListProps = {
/** Delay to wait before fetching more items */
fetchDelay?: number;
};
export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
const [items, setItems] = React.useState<Pokemon[]>([]);
const [hasMore, setHasMore] = React.useState(true);
const [isLoading, setIsLoading] = React.useState(false);
const [offset, setOffset] = React.useState(0);
const limit = 10; // Number of items per page, adjust as necessary
const loadPokemon = async (currentOffset: number) => {
const controller = new AbortController();
const {signal} = controller;
try {
setIsLoading(true);
if (offset > 0) {
// Delay to simulate network latency
await new Promise((resolve) => setTimeout(resolve, fetchDelay));
}
let res = await fetch(
\`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
{signal},
);
if (!res.ok) {
throw new Error("Network response was not ok");
}
let json = await res.json();
setHasMore(json.next !== null);
// Append new results to existing ones
setItems((prevItems) => [...prevItems, ...json.results]);
} catch (error) {
if (error.name === "AbortError") {
console.log("Fetch aborted");
} else {
console.error("There was an error with the fetch operation:", error);
}
} finally {
setIsLoading(false);
}
};
React.useEffect(() => {
loadPokemon(offset);
}, []);
const onLoadMore = () => {
const newOffset = offset + limit;
setOffset(newOffset);
loadPokemon(newOffset);
};
return {
items,
hasMore,
isLoading,
onLoadMore,
};
}
`;
const usePokemonList = `export function usePokemonList({fetchDelay = 0} = {}) {
const [items, setItems] = React.useState([]);
const [hasMore, setHasMore] = React.useState(true);
const [isLoading, setIsLoading] = React.useState(false);
const [offset, setOffset] = React.useState(0);
const limit = 10; // Number of items per page, adjust as necessary
const loadPokemon = async (currentOffset) => {
const controller = new AbortController();
const {signal} = controller;
try {
setIsLoading(true);
if (offset > 0) {
// Delay to simulate network latency
await new Promise((resolve) => setTimeout(resolve, fetchDelay));
}
let res = await fetch(
\`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
{signal},
);
if (!res.ok) {
throw new Error("Network response was not ok");
}
let json = await res.json();
setHasMore(json.next !== null);
// Append new results to existing ones
setItems((prevItems) => [...prevItems, ...json.results]);
} catch (error) {
if (error.name === "AbortError") {
console.log("Fetch aborted");
} else {
console.error("There was an error with the fetch operation:", error);
}
} finally {
setIsLoading(false);
}
};
React.useEffect(() => {
loadPokemon(offset);
}, []);
const onLoadMore = () => {
const newOffset = offset + limit;
setOffset(newOffset);
loadPokemon(newOffset);
};
return {
items,
hasMore,
isLoading,
onLoadMore,
};
};`;
const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
import {usePokemonList} from "./usePokemonList";
export default function App() {
const [isOpen, setIsOpen] = React.useState(false);
const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
const [, scrollerRef] = useInfiniteScroll({
hasMore,
isEnabled: isOpen,
shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
onLoadMore,
});
return (
<Autocomplete
className="max-w-xs"
variant="bordered"
isLoading={isLoading}
defaultItems={items}
label="Pick a Pokemon"
placeholder="Select a Pokemon"
scrollRef={scrollerRef}
selectionMode="single"
onOpenChange={setIsOpen}
>
{(item) => (
<AutocompleteItem key={item.name} className="capitalize">
{item.name}
</AutocompleteItem>
)}
</Autocomplete>
);
}`;
import App from "./async-loading-items.raw.jsx?raw";
import AppTs from "./async-loading-items.raw.tsx?raw";
const react = {
"/App.jsx": App,
"/usePokemonList.js": usePokemonList,
};
const reactTs = {
"/App.tsx": App,
"/usePokemonList.ts": usePokemonListTs,
"/App.tsx": AppTs,
};
export default {

51
apps/docs/content/components/autocomplete/colors.raw.jsx Normal file
View File

@ -0,0 +1,51 @@
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
export const animals = [
{label: "Cat", key: "cat", description: "The second most popular pet in the world"},
{label: "Dog", key: "dog", description: "The most popular pet in the world"},
{label: "Elephant", key: "elephant", description: "The largest land animal"},
{label: "Lion", key: "lion", description: "The king of the jungle"},
{label: "Tiger", key: "tiger", description: "The largest cat species"},
{label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
key: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", key: "zebra", description: "A several species of African equids"},
{
label: "Shark",
key: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
key: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
];
export default function App() {
const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
return (
<div className="w-full flex flex-row flex-wrap gap-4">
{colors.map((color) => (
<Autocomplete
key={color}
className="max-w-xs"
color={color}
defaultItems={animals}
defaultSelectedKey={"cat"}
label="Favorite Animal"
placeholder="Search an animal"
>
{(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
</Autocomplete>
))}
</div>
);
}

61
apps/docs/content/components/autocomplete/colors.ts
View File

@ -1,66 +1,7 @@
const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
{label: "Elephant", value: "elephant", description: "The largest land animal"},
{label: "Lion", value: "lion", description: "The king of the jungle"},
{label: "Tiger", value: "tiger", description: "The largest cat species"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
value: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`;
const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {animals} from "./data";
export default function App() {
const colors = [
"default",
"primary",
"secondary",
"success",
"warning",
"danger",
];
return (
<div className="w-full flex flex-row flex-wrap gap-4">
{colors.map((color) => (
<Autocomplete
key={color}
color={color}
defaultItems={animals}
label="Favorite Animal"
placeholder="Search an animal"
defaultSelectedKey={"cat"}
className="max-w-xs"
>
{(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
</Autocomplete>
))}
</div>
);
}`;
import App from "./colors.raw.jsx?raw";
const react = {
"/App.jsx": App,
"/data.js": data,
};
export default {

51
apps/docs/content/components/autocomplete/controlled.raw.jsx Normal file
View File

@ -0,0 +1,51 @@
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
export const animals = [
{label: "Cat", key: "cat", description: "The second most popular pet in the world"},
{label: "Dog", key: "dog", description: "The most popular pet in the world"},
{label: "Elephant", key: "elephant", description: "The largest land animal"},
{label: "Lion", key: "lion", description: "The king of the jungle"},
{label: "Tiger", key: "tiger", description: "The largest cat species"},
{label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
key: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", key: "zebra", description: "A several species of African equids"},
{
label: "Shark",
key: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
key: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
];
export default function App() {
const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
return (
<div className="w-full flex flex-row flex-wrap gap-4">
{colors.map((color) => (
<Autocomplete
key={color}
className="max-w-xs"
color={color}
defaultItems={animals}
defaultSelectedKey={"cat"}
label="Favorite Animal"
placeholder="Search an animal"
>
{(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
</Autocomplete>
))}
</div>
);
}

51
apps/docs/content/components/autocomplete/controlled.raw.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
export const animals = [
{label: "Cat", key: "cat", description: "The second most popular pet in the world"},
{label: "Dog", key: "dog", description: "The most popular pet in the world"},
{label: "Elephant", key: "elephant", description: "The largest land animal"},
{label: "Lion", key: "lion", description: "The king of the jungle"},
{label: "Tiger", key: "tiger", description: "The largest cat species"},
{label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
key: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", key: "zebra", description: "A several species of African equids"},
{
label: "Shark",
key: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
key: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
];
export default function App() {
const [key, setValue] = React.useState<React.Key | null>("cat");
return (
<div className="flex w-full max-w-xs flex-col gap-2">
<Autocomplete
className="max-w-xs"
defaultItems={animals}
label="Favorite Animal"
placeholder="Search an animal"
selectedKey={key}
variant="bordered"
onSelectionChange={setValue}
>
{(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
</Autocomplete>
<p className="text-default-500 text-small">Selected: {key}</p>
</div>
);
}

79
apps/docs/content/components/autocomplete/controlled.ts
View File

@ -1,87 +1,12 @@
const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
{label: "Elephant", value: "elephant", description: "The largest land animal"},
{label: "Lion", value: "lion", description: "The king of the jungle"},
{label: "Tiger", value: "tiger", description: "The largest cat species"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
value: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`;
const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {animals} from "./data";
export default function App() {
const [value, setValue] = React.useState<React.Key>("cat");
return (
<div className="flex w-full max-w-xs flex-col gap-2">
<Autocomplete
label="Favorite Animal"
variant="bordered"
defaultItems={animals}
placeholder="Search an animal"
className="max-w-xs"
selectedKey={value}
onSelectionChange={setValue}
>
{(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
</Autocomplete>
<p className="text-default-500 text-small">Selected: {value}</p>
</div>
);
}`;
const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {animals} from "./data";
export default function App() {
const [value, setValue] = React.useState("cat");
return (
<div className="flex w-full max-w-xs flex-col gap-2">
<Autocomplete
label="Favorite Animal"
variant="bordered"
defaultItems={animals}
placeholder="Search an animal"
className="max-w-xs"
selectedKey={value}
onSelectionChange={setValue}
>
{(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
</Autocomplete>
<p className="text-default-500 text-small">Selected: {value}</p>
</div>
);
}`;
import App from "./controlled.raw.jsx?raw";
import AppTs from "./controlled.raw.tsx?raw";
const react = {
"/App.jsx": App,
"/data.js": data,
};
const reactTs = {
"/App.tsx": AppTs,
"/data.js": data,
};
export default {

47
apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx Normal file
View File

@ -0,0 +1,47 @@
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
export const animals = [
{label: "Cat", key: "cat", description: "The second most popular pet in the world"},
{label: "Dog", key: "dog", description: "The most popular pet in the world"},
{label: "Elephant", key: "elephant", description: "The largest land animal"},
{label: "Lion", key: "lion", description: "The king of the jungle"},
{label: "Tiger", key: "tiger", description: "The largest cat species"},
{label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
key: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", key: "zebra", description: "A several species of African equids"},
{
label: "Shark",
key: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
key: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
];
export default function App() {
return (
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<Autocomplete
className="max-w-xs"
defaultItems={animals}
label="Favorite Animal"
listboxProps={{
emptyContent: "Your own empty content text.",
}}
placeholder="Search an animal"
>
{(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
</Autocomplete>
</div>
);
}

50
apps/docs/content/components/autocomplete/custom-empty-content-message.ts
View File

@ -1,55 +1,7 @@
const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
{label: "Elephant", value: "elephant", description: "The largest land animal"},
{label: "Lion", value: "lion", description: "The king of the jungle"},
{label: "Tiger", value: "tiger", description: "The largest cat species"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
value: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`;
const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {animals} from "./data";
export default function App() {
return (
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<Autocomplete
label="Favorite Animal"
placeholder="Search an animal"
className="max-w-xs"
defaultItems={animals}
listboxProps={{
emptyContent: 'Your own empty content text.'
}}
>
{(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
</Autocomplete>
</div>
);
}`;
import App from "./custom-empty-content-message.raw.jsx?raw";
const react = {
"/App.jsx": App,
"/data.js": data,
};
export default {

57
apps/docs/content/components/autocomplete/custom-filtering.raw.jsx Normal file
View File

@ -0,0 +1,57 @@
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
export const animals = [
{label: "Cat", key: "cat", description: "The second most popular pet in the world"},
{label: "Dog", key: "dog", description: "The most popular pet in the world"},
{label: "Elephant", key: "elephant", description: "The largest land animal"},
{label: "Lion", key: "lion", description: "The king of the jungle"},
{label: "Tiger", key: "tiger", description: "The largest cat species"},
{label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
{
label: "Dolphin",
key: "dolphin",
description: "A widely distributed and diverse group of aquatic mammals",
},
{label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", key: "zebra", description: "A several species of African equids"},
{
label: "Shark",
key: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
key: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
];
export default function App() {
const myFilter = (textValue, inputValue) => {
if (inputValue.length === 0) {
return true;
}
// Normalize both strings so we can slice safely
// take into account the ignorePunctuation option as well...
textValue = textValue.normalize("NFC").toLocaleLowerCase();
inputValue = inputValue.normalize("NFC").toLocaleLowerCase();
return textValue.slice(0, inputValue.length) === inputValue;
};
return (
<Autocomplete
allowsCustomValue
className="max-w-xs"
defaultFilter={myFilter}
defaultItems={animals}
label="Search an animal"
variant="bordered"
>
{(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
</Autocomplete>
);
}

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